According to the latest estimates, more than 4 million people just in the US use screen readers. However, like any developing technology, they’re not perfect. They find it hard to read different types of web pages which aren’t either descriptive enough or well-designed enough.
Disorganized blocks of text, images devoid of description, and non-descriptive links are all tricky to figure out. They do more harm than good. As a result, those visually impaired or blind are very much at a disadvantage even with the screen readers, this Showcase IDX’s Kurt Uhlir talks High-Achieving Servant Leadership explains it better.
What are Screen Readers?
Screen readers are programs that are used to enable the visually impaired to read on computers. They can use these readers to scan through pages, search for content, or to simply have pages read aloud.
Screen readers usually work closely with the OS that the person uses. They provide information about icons, menus, dialogue boxes, folders, etc. In essence, the entire OS works with the device. However, the internet, since it’s available to all OS’ is trickier. There can’t be one specific type of web page that the screen reader can be programmed to read. Instead, it has to be adaptable to wide variety of web pages. Looking for electronic component replacements? This website has medical, automotive, computer and lots more.
How Does a Screen Reader work?
Screen Readers work by relaying information in one of two ways. They can either translate the information on a page to speech, or to braille. The former is done through a TTS (Text-to-speech) engine which translates on screen information to speech. This can be heard through headphones or speakers.
The program for TTS can come bundled with the screen reader device or be an add on. In the present day, software TTS is preferable to hardware TTS due to high levels of variance in device models.
For braille, the TTS is connected to a braille display. That’s an external device which has more rows of cells. Each cell can be formed into a braille character depending on the text on display. The dots formed are very similar to dots in their layout. The braille output is often paired with speech output.
Screen readers use either external devices, or keyboards to interact with the users. Using the latter, they can’t just
Why is Web Accessibility Important?
The internet is now the access portal for the average person to everything from entertainment to news. It’s important to give everyone equal opportunity to access it without discrimination. People rely on the internet to apply for their jobs, pay their bills, communicate with their loved ones, etc. Hence, it’s not a luxury, but a basic human right now.
Accessibility to the internet is now essential. Hence, we should do everything in our power to make it possible.
11 Tips to Improve Web Content for Screen Readers
1. Use a CMS Which Supports Accessibility
There are several content management systems out there that can build your website for accessibility. Common ones like WordPress and Drupal also support it. Choosing a CMS for accessibility is so important because you won’t have to do much of the work when it comes to design. You won’t have to start from scratch and code most of the functionality yourself. You can simply make the content you want and just optimize it for screen readers.
This is a small, but crucial first step. Skipping or ignoring this can mean myriad problems in the future.
2. Organize Content With Headers
Organization is a key aspect of web design as it is. Structuring your content helps search engines identify specific answers to queries by users. However, it also works equally well for screen readers. It helps them zoom in on specific headings to help their users.
Hence, segment content as much as you can and add headings and sub-headings. Also make sure that sub-topics are at least contained in separate paragraphs. This way, jumping between them; no one will miss out on crucial information about a specific topic.
3. Label Media with Tags and Links
Whenever you’re inserting any media in your content, be it images, video, gifs, or even links; label them. This will assist those visually impaired to understand them. Screen readers will be able to relay exactly what the media entails. You’ll not only save their time, but lessen their confusion.
Use Meta Titles for Images and Video
Images and videos are the most common forms of media used on the internet. Static images, gifs, videos, etc. should all come with meta titles, alt texts, and descriptions. This is a good practice for SEO as well as for improving accessibility.
Describe Functional Images
While websites usually use images for illustration and aesthetic, they can use them for functional purposes. Images can be used as links and buttons. In that case, a text alternative should be used to describe the functionality. The alt text for a submit button can be “button to submit this form”.
Describe any Infographics
If you include an infographic on your web page, make sure to add a detailed explanation with it. It should describe what is shown in the infographic as well as the insights it presents. If it’s a graph, make sure to outline the measurement types and units as well as the trends.
Directly label the data instead of using color coded legends to reduce the burden on users. This decreases the human reader’s need to scan back and forth. If you want to regularly product such content, then hire content writing services for a more consistent posting schedule.
Use Descriptive Tags for Links
If you’re using any hyperlinks in your web page, make sure that they’re well placed and descriptive. Screen readers can be used to scan for links just like sighted users scroll through content. However, screen readers don’t usually read the link within the context of the page. They simply read out the text “click here”.
To improve accessibility, try phrasing the hyperlinked text more descriptively. Instead of just saying, “click here”, say, “Check out this post for this topic”. Site visitors will know whether the link is for them or not. Also, descriptive links make it easier for search engines to find content as well.
4. Use Colors Carefully
Roughly 8% of the population is colorblind. Red-green color deficiency is especially common for them. Using colors like these including dark green, maroon, etc. can confuse them. Hence, using a wide variety of colors for your audience is better. If you must use green or red, pick one.
If you’re using colors to label and discern information in a graph, try labeling the trends instead.
5. Use Tables for Tabular Data
If you’re planning on using tables on your webpage, to ensure accessibility for the visually impaired, do it for functionality. If you’re just inserting tables to improve the aesthetic, that may confuse screen readers. Hence, create tables to organize data. That will actually help screen readers relay smaller, bite sized information to their users.
When a data table is necessary, use headers for rows and columns. This will help explain the relationship between cells. Also, if you’re planning to create a complex table, use the scope attribute in HTML. That can help establish relationships between cells. Table captions in HTML5 will also help give additional information to users about the tables.
6. Include Site Navigation via Keyboard
A huge part of navigating the web through screen readers is skimming the web pages through the keyboard. Since using a mouse isn’t as intuitive, a keyboard provides a lot of functionality. Hence, all your website content that is optimized for screen readers should be navigable through keyboards. There are a few keys you should focus on including the Tab key, the arrow keys. You should also include the mouth stick or the single switch input.
7. Avoid Grammatical Errors and Abbreviations
Proper grammar is an absolute must for screen reader accessibility. You can improve this simply by adding an extension like Grammarly. You can even use a spellchecker in your word processor. You should also avoid abbreviations in your content. This doesn’t count for words like “won’t” or “I’ll”. Instead, it counts for abbreviations like “IUPAC” (International Union of Pure and Applied Chemistry). Instead, use periods to separate out the individual letters like “I.U.P.A.C.” This way, the screen reader will sound out the entire acronym letter by letter instead of reading it at once.
Don’t Use Emojis
Translating emojis is tricky for screen readers. If you must use them, put them at the end of a sentence. Putting them in the middle of sentences or paragraphs can create a muddled mess and interfere with speech interpretation. It can make it infuriating for those visually impaired to understand and string together coherent sentences.
Use PascalCase and camelCase for Hashtags
Screen readers make use of PascalCase and camelCase when they want to read hashtags. With the former, the first letter of every word is capitalized. With the latter, the first letter of every word after the first is capitalized.
For example, PascalCase is #YesPlease, and camelCase is #yesPlease. Using this technique will help screen reader users make better sense of hashtags that are particularly long.
8. Make Sure Dynamic Content is Accessible
Dynamic content refers to any videos or gifs that are embedded within your website. That content possibly relays a lot of important visual information to the reader. Hence, as with static images and infographics, there needs to be a detailed explanation attached to dynamic content.
If you feel the need to add closed captions and text alternatives to anything, do so. This will help those with either visual or hearing impairments as well. ARIA properties can be used here to update content on a web page as well. This will ensure screen readers don’t leave out any important details or skip over anything. You should consider hiring web content writers to create descriptive labels for dynamic media.
9. Validate Web Accessibility
After you’ve implemented web accessibility for screen readers, it’s very important to test it in real life scenarios. This is called accessibility testing or validation. This allows designers to identify flaws, or bugs in the design. These bugs may end up causing a lot of problems for the visually impaired if left unresolved.
The bugs could be compatibility issues with certain browsers or with certain OSes. They could also be problems related to certain web extensions.
10. Design Forms for Accessibility
Forms are a very common element of web pages today. If you’re buying something online or requesting a subscription, or even emailing someone, form filling is inevitable. Hence, using symbols that are frequently in use is a great way to improve accessibility for screen readers.
Using symbols like asterisks is great for required fields. It shows screen readers what is absolutely necessary. Hence, it makes it easier for the visually impaired to get through the forms quickly. Another way to do this is to add “required” to the coding. Screen readers will pick up on this and relay the message.
For non-essential fields, you can either label them “optional” or delete them entirely.
11. Use ARIA roles and Landmarks
ARIA (Accessible Rich Internet Applications) is a complex, and technical specification for adding accessibility information to elements which aren’t natively accessible. The solution isn’t to always use ARIA. In fact, using ARIA is often considered the last resort. Luckily, ARIA implementations are now frequently found in HTML5.
These include:
- Native HTML button tag in place of the ARIA button
- HTML label tag in place of ARIA label or ARIA labeledby
- HTML5 nav tag in place of ARIA role of navigation
ARIA attributes can be inserted into HTML code using classes in HTML. These can be used to load attributes from ARIA the same way CSS attributes were loading into HTML. Not that adding ARIA attributes isn’t the end of the process. It’s not sufficient to make complex widgets accessible to screen readers.
ARIA doesn’t have any functionality for keyboard users. It only affects people that use assistive technology. Since there are far more people without assistive technology than with, JavaScript behaviors and interactions are needed.
ARIA usage however, can impart the following functionality for the visually impaired:
- Making complex, but interactive widgets like date pickers accessible for screen reader users
- Adding notifications for dynamic page changes like stock tickers and search filters
Using these 11 tips will cover the basics of improving web accessibility. However, as you design more web pages and produce more content, be sure to add more skills to your quiver.
About Brandon Leibowitz
