Recently, I was analyzing one of our websites to make sure it met the strict accessibility guidelines of WAI – Web Accessibility Initiative. During the process I started thinking about how website accessibility is often overlooked by designers and developers. One of the most important things to remember when building a website is to make sure it can be easily accessed and viewed by the widest audience possible. Advancements in technology have made it easier for those with disabilities to view websites, but the programs work better if the developer makes accommodations from the beginning.
Color Contrast
For those with poor eyesight, websites with light colors may be difficult to read.It’s important for designers to keep this in mind when they are choosing a color scheme. The web tool, ColorSafe is a great resource. It allows you to input all kinds of information about your site including background color, font size, and even font family.Then, ColorSafe will automatically generate a list of every possible color you can use that will have enough contrast for those with impaired eyesight.
Organizing and Navigating your Content
Screen readers use heading structure to navigate through the content.Using headers correctly will allow the reader to accurately and easily read the content on your page.
Design Tip – Don’t immediately switch from an H1 header to an H3. This will cause confusion and make it seem like there is missing content. Avoid using H1 for anything but the title of your page.
Navigation
The structure of your content will mean nothing if the user cannot move through it. Navigation should be easily achieved by using the arrow keys on your keyboard.This is because some people are not capable of using a mouse and must use arrow keys or tab to navigate.
Design Tip – To easily achieve arrow-key navigation on your site, make sure the tab-order matches your content structure. By doing this, when the user presses the tab key, the page doesn’t skip all over the place. Also, if your page has a lot of content, it should be broken up into anchor links so users navigating with arrow keys can easily skip to relevant content.
Links and Images
When including links on your site, be sure to be as descriptive as possible. Simply having a link that says “click here” does not tell the user nearly enough about where the link is going. Links with vague descriptions are ineffective for screen readers. An example of an effective link title would be, “To learn more about us, read our About page.”
Alt text should be applied to all images included on a site. This helps the reader understand what the image is displaying. Without alt tags, an image is completely ignored by screen readers.This could be a lot of information a viewer is missing out on. However, if you have an image that is purely decorative, adding an empty alt tag is preferable to avoid unnecessary distraction.
When it comes to website accessibility there are so many things to keep in mind. Developers really have to think about every detail they are coding into a website.It may require more work for the designer and developer, but it makes life easier for those with disabilities. That makes it worthwhile.
Does YOUR site meet accessibility standards? To find out, I recommend using WebAim’s Wave. It is a free online program that scans your entire site for any errors that might make it difficult for a screen reader. It also lets you know any instance where you have colors that don’t have enough of a contrast ratio. To learn more about website accessibility visit W3.
Leave a Reply