Three quick tips to achieve your 2021 accessibility goals
In this video I introduce setting the language of the content, giving interactive elements accessible names, and using landmark regions.
Transcript
Welcome! It’s a new year, and we have new resolutions, goals or maybe themes. Here are three accessibility techniques that you can easily add to the websites you produce and that make a huge difference.
♩ Upbeat Jingle ♩
Always add the language to the HTML
Screen readers and other assistive technologies rely on a proper language definitions on the page to ensure that they interpret the content correctly.
You must specify the language the majority of the text is in. Loan words from other languages that are common in the main language do not need special demarcation. But if you cite a longer section with a different language, you should mark that up as well.
HTML gives us the incredibly useful lang attribute which can be used on every element to specify the language.
For the main language, set the lang attribute on the <html> element.
The value is one of the ISO language codes. Unless you have a requirement for a special language variant, keep it simple and use two-letter codes, like:
enfor Englishdefor Germanesfor Spanish
And so on.
Everything interactive needs an accessible name
I have talked before about the importance of using the tab key to move through a website and how it is essential for making them accessible. But once you can reach interactive elements on the page, that alone might not make them accessible. To achieve that, they also need an “accessible name”.
Accessible names are short descriptors that identify an interactive element. If that descriptor is missing, there might be multiple buttons without a name on the page.
With buttons or links, their content is the accessible name. For form fields, the accessible name is usually assigned with a <label> element that has a for attribute pointing at the ID of the form element.
The accessible name can also be assigned using the ARIA attributes aria-label and aria-labelledby — just make sure that there is always a visual label as well and that visual text and accessible name are the same or at least start with the same words.
Use landmark regions
When using assistive technologies to access websites, it is important to be able to skim a page and know where you could quickly navigate to.
That’s what landmark regions are for.
Certain HTML elements can act as landmarks, for example the <nav>element denotes navigation landmarks. The <main> element outlines where the main content of the page is. Other landmarks come from the “Accessible Rich Internet Application” or ARIA specification and are applied using the role attribute.
Some landmarks can only exist once on the page, like main, banner and contentinfo. The latter two represent the header and the footer regions.
Others can be used multiple times, for example navigation can be used for the main navigation and the breadcrumb navigation. In that case, every landmark should have its unique accessible name, assigned using aria-label. You don’t have to repeat the type of landmark in the accessible Name as that is defined through the role, and assistive technologies are expected to pick them up. So for the main navigation, specifying the <nav>element with an aria-label of Main would be sufficient.
And you?
What accessibility goals do you have for 2021? Put them into the comments!
I would be super happy if you’d like the video and subscribe to the channel and thanks to my patrons on Patreon.com/yatil — that is Y-A-T-I-L — for the support. Thanks for watching and see you in the next video!
♩ Upbeat Jingle ♩