So you just learned about the importance of using the American’s with Disabilities Act (ADA) compliance guidelines on your website. You learned that ADA compliant sites help visually-impaired users surf your site and that Google ranks ADA sites higher than non-compliant sites. Now, you are wondering (1) Is my website ADA compliant and (2) how do I ensure that blind or sight-impaired users can “see” my site?
Although there are several ways to determine if your website is ADA compliant, most of the existing websites are not, and should be. If you aren’t sure, contact your web developer to ensure that your site is ADA compliant.
Then, review your site for screen reader usability. Screen readers are software programs that allow blind or visually impaired users to read the text that is displayed on the computer screen with a speech synthesizer or braille display. A screen reader is the interface between the computer’s operating system, its applications, and the user.
Pay attention to the content, too. Writing content for screen readers is a fairly simple task as long as you keep content simple and follow a few basic rules.
The rules for success
1. Always use HTML elements for their intended use.
Many Content Management Systems (CMS) text editors allow you to add elements to the page such as headings, tables, blockquotes, and lists. These elements are excellent ways to make the structure of your content look more visually appealing, and may have been set up on your site to look unique and wonderful. The problem is that they may be used in ways other than their specified use.
When a screen reader gets to one of these elements it will tell the user what it is. For example, when a blockquote is encountered the screen reader will say “Blockquote” and then recite the text inside of the blockquote. This gives the user an expectation of what is about to be read to them. If you, as the editor, just decide you like the way a random non-quote piece of text looks as a blockquote, that could lead to confusion and frustration. So, headings are for text titles, tables are for data, blockquotes are for quotes/testimonials, and lists are for lists of information.
2. Put headings in the correct order
As we said above, screen readers will tell users what each element on the page is. This is doubly important to keep in mind when thinking about headings. In HTML there are 6 different heading levels (H1 through H6). They usually go from biggest to smallest, but programmers can change the way each level looks through the website’s design, so pay attention to the exact heading you are using.
Screen readers will tell users that they are on a heading and what level the heading is. That is important because it helps a visually impaired user figure out the context of the text they are reading. If you had just read a H1 and now you are on an H2, you can safely assume that the H2 is a subsection of the H1. If the editor of the site decided s/he liked the look of the H2 first followed by the H1, the end user can have trouble figuring out how those headings relate to each other. Skipping headings can also be troublesome because going from H1 to H3 can make users think they missed something.
3. Make sure to include alt text
One of the best ways to make your site look more interesting is to add images to the content, but images are inherently visual. How do you tell a visually impaired user what an image contains? Images in HTML have an attribute called “Alt Text” (it may be labeled as alternate text in your editor). That text is what shows up if the image doesn’t load, but it is also used by screen readers. For images with text in them it is important to repeat that text in the alt text for obvious reasons, but it is also important to describe non-text based images. If you have an image with a girl on a horse the alt text could be something as simple as “Girl on a horse”.
You may run into images that are purely ornamental and which you believe a seeing impaired user needs does not need to “view”, but it is still important add Alt Text. Those users don’t know what is supposed to be important and what is just ornamental. If you leave the alt text off of something unimportant, visually impaired users may think they are missing out on something they need to know about. Labeling an ornamental stripe “Ornamental stripe” will tell users that they can safely ignore that image.
4. Make sure your text has enough contrast with its background
There is very little reason to ever change the color of the text in your content, but if you absolutely must, try and keep the text as readable as possible. Visual impairment can run the full spectrum from fully blind to partially impaired, and a lot of partially impaired users do not use screen readers. Those users may be able to read most of your content just fine, but if you decide to change your text from black to a light gray the contrast may make it hard to read.
Put it all together and your site will improve for all users
Most of these rules not only help visually impaired users, but also can help your search engine rankings and the general usability of your site. Google likes to know what each element is the same way that screen readers do, and they will give different levels of priority to different headings and elements. Google also likes sending users to sites that are easy to use and ADA compliant. In the long run, ADA compliance isn’t just about helping your impaired users, it is about keeping your site in line with the general standards of the web.
Design Spike offers accessibility audits and more ADA compliance consultation services. Check out our ADA compliance services page.