Hey everyone. Josh with Online ADA. This video we’re covering 2.4.6, headings and labels.
This is a AA requirement and the description reads, headings and labels describe topic or purpose. Now headings are very important for your web pages because they’re gonna tell users and assistive technology what sort of information is contained on your web page and how it’s organized. Descriptive headings, especially, are very helpful for users who have disabilities that may make reading slow for them. They don’t have to spend all the time reading the content to determine if that was something that they were interested in, or even part of the content. A descriptive heading is gonna give you a snapshot of what that information is gonna be. It’s an overview.
Just think about a blog article. Lots of pages these days, especially ones built with things like WordPress, are gonna have the most commonly viewed articles somewhere on their page, like maybe in the foot or something. Or maybe you’re just looking at the blog archive page and you’ve got all the articles listed there. Each one of those articles would have maybe a title and an excerpt. It was some limitation of words and then a read more link, right? It’s a very common thing these days. So, the header of that article would wanna, you would wanna make that very descriptive, so that a user can understand if that’s something that they wanna go look at. Some assistive technology even allows the user to jump from heading to heading on a page.
Also, there’s inherent meaning between the different levels of headings. So, for instance H1 through H6 in HTML, those elements have meanings if you provide them in a certain order. So, H1 would be like a main heading for a big large section of content. A heading 2 underneath an H1 would indicate that this is a subsection of the H1, and it goes down like that all the way to H6. So it’s also important that we don’t skip headings. H1 to H3, for instance, without using an H2 somewhere. A lot of people like to use the different H’s, H elements, for their native sizes and their native stylings. But we actually wanna rely on CSS for those styles, not the element itself because there’s information being conveyed there.
And back to the assistant technology, some people can jump around from those headings to headings and they can just get the snippet of the section that they want. This is also especially helpful for folks with short-term memory loss. They can just move back and forth and navigate much easier without having to listen to every single piece of content on the page. They just go from heading to heading, and having that descriptive heading will inform them where they wanna be.
Labels, on the other hand, are more relevant for things like forms and form controls. Inputs. Every single input, except for a button. So, specifically, text areas, select boxes, radio buttons, check boxes and text inputs would all be needing a label of some sort. There’s a couple of ways to do it. Programmatically, you can do an ARIA label. You can do ARIA ‘described by’ things like that. You could do field sets and legends, especially for things like radio buttons, where you have multiple controls that sort of control the same thing. Then you would use a field set to draw some sort of visual boundary around them to indicate that they are grouped, and then a legend would be the label for that field set.
For things like inputs, you do have to have a visually available label for users as well because those labels provide instructions for how to use this form, what this inputs purpose is. it’s great to have an ARIA label on there or an ARIA description of some sort, as well. But it’s also important to know that place holders, the placeholder attribute, is not a substitute for a text label, They need to be visible for users as well.
So, having those labels be clear and concise, same thing as a heading. It gives us information as a user on how to use your form. And if it’s not clear, then that can lead to frustration and using these pieces improperly and that would lead to validation errors and it’s just a kind of a mess. So, make sure that all your labels and your headings are clear, descriptive and they described the topic and the purpose and you’ll be okay.
Thanks for joining me on this video and I’ll see you on the next one.