And developing a website with accessibility in mind means precisely that: to write your HTML code for screen readers. For those website visitors who depend on assistive technologies to fully enjoy the user experience delivered there.
Therefore, the way you'll configure your HTML elements will have a sure impact on your website's overall accessibility: good or bad.
In this respect, here's a checklist of the most effective (and handiest) ways to make your HTML elements fully visible and comprehensible to screen readers:
1. Provide Alternate Text for Every Image on Your Website
By far the handiest way to write HTML code for screen readers: just grow a habit of adding a succinct, yet perfectly comprehensive “Alt text” description to every new and old image on your website.
Make it descriptive enough, but do look out for overly specific (and long) descriptions. Keep in mind to provide context...
You'd thus prevent awkward situations where the assistive technology would just let that website visitor know that... there's an image on that page.
2. Writing HTML Code for Screen Readers: Use ARIA Attributes
One of the best HTML accessibility best practices is to add ARIA (Accessible Rich Internet Applications) to your HTML elements.
Why bother?
Because this way you're providing visually-impaired users with more information about specific elements on a web page
Take this example: the “role” attribute gives more context; it makes it easier for the screen reader (and the assisted user implicitly) to see what that element's “role” is in the context of that specific web page.
Just add the “navigation” value to that “role” attribute and the screen reader can then interpret the HTML element as being a... menu. And then present the user with all the options listed there.
Something intuitive for a user, but not so much for a visually-impaired one.
And this is but one of the many functions for ARIA attributes that you could add to your HTML code to enhance its accessibility.
3. Declare A Page's Language in HTML
You can and should do that via HTML.
This way, if your website's accessed:
- from a different country
- by a visitor with different language settings
… the screen reader “detecting” its default language will be quick to translate it.
Note: if you have snippets of text in a language different from the default one on your website, remember to add a new language tag to each snippet.
This way, you'll be signaling to screen readers that those specific parts should be translated accordingly.
4. Keep Your Links Short, but Not Too Short
Try to find that ideal balance between confusingly long and ineffectively short text for your links.
It's one of the “trickiest” parts of writing HTML code for screen readers:
- if you use too many words, since the link will get read out loud by the screen reader, it might just confuse the visitor in question
- if you make it too short, those users who rely on screen readers but still use their mouses to navigate websites might just... miss it
5. Use Semantic Tags: Make Your Content Readable and Understandable
What do you think of when you say “semantic tags”?
Tags like <b>, for bold text (and, therefore important information) or <i> for italicized text (which might indicate a quote) might be the first the come to your mind, right?
But still, these are indicators for how the text should be displayed. And that's irrelevant for visually-impaired users...
By comparison, 100% semantic tags, like <strong> and <em> indicate to the screen readers how that text should be interpreted. They're valuable “stage directions” on how it should be read to enhance the users' understanding.
6. Structure Your Pages so They... Make Sense to Screen Reader Users
Writing HTML code for screen readers means also structuring your web pages with accessibility in mind.
So, ask yourself common questions like:
- when a visitors tells his/her screen reader to jump to the main context section on a page, are the links there short enough not to confuse him/her and long enough not to... miss them?
- does that main context make sense to someone who can't interpret visual details like color scheme, layout, route of navigation?
Would he/she still be able to make sense of your web page's structure?
The END!
Needless to add that the list of ways that you could tweak your HTML code for screen readers, for enhancing accessibility, is a... never-ending one.
Start by focusing on these 6 aspects that will help you develop the right mindset for accessibility then... keep adding on more techniques.
