The web has revolutionized the way we find information. Because of this, it is important that the information be presented in such a way that anyone can access it – regardless of any disabilities they may have. This is where Web Content Accessibility becomes extremely important.

There is a lot to consider when dealing with accessibility on a website since not all visitors are created equal.

Vision

Let’s start with a user’s vision, one of the most common accessibility issues and one of the ones that is most often overlooked. Many designers have leaned towards creating vibrant colorful websites over the last few years, especially after the increased interest of using flat design and with Windows introduction of Metro . These sites look amazing to someone with OK vision, but to someone that has trouble seeing certain colors or distinguishing one from another, it can be a nightmare.

The right way to make sure your site is visually accessible is to check the contrast levels of the elements. A common mistake is placing white text over pastel/light color backgrounds – often in a menu or within the page copy. This will make it very difficult for someone to tell the difference between the text and the background it’s on. Another thing you can check is how your website appears when it’s viewed in greyscale. People that have trouble distinguishing between colors may have an easier time distinguishing the difference between different shades of grey – so they may use color inversion tools to view your website in greyscale mode.

Unfortunately this does make for some pretty dark sites if you want to keep the white text on a colored background, but use your imagination and find new design solutions to accommodate the change.

Screen readers

Screen readers are commonly used for those with vision or motor disabilities. They will interpret what is being displayed on the screen and will re-present it to the user using text-to-speech, sound icons, or using a braille output device. Because of this it is important that your website be organized and contain certain meta tags in order for the screen reader to properly understand what the content is.

Here is some areas that you need to be aware of:

• Image ALT tags – These are description tags placed in the image code that are read by screen readers and also appear when a browser doesn’t render the image. You should get into the habit of always adding ALT information to your images – especially those that a user is required to see in order to understand what to do next (for instance an image with details on performing an action such as purchasing a product).
• Reduce the need for display:none styling – If you are not a designer or work with code, this may mean nothing to you. But for those that are in charge of theming the website, it is important not to overuse display:none to hide elements on the page. Screen readers to not abide by CSS, so EVERYTHING on the page is picked up and interpreted. Using browser-based developer tools, you should be able to easily turn off CSS styling on the page to see how your website looks in a pure HTML layout.
• Proper use of Headings – Think of each page of your website as an outline in Word, with top level headings, sub-headings, and sub-headings to those sub-headings. The typical structure to a page is a Title or Heading 1, a sub-heading like Heading 2, and so on. This is not only the way that you should always structure your pages, but is also the way search engines read and understand your page content and also how screen readers will read your page. So make sure that you are organizing your pages properly.

Hearing

If you have a website that includes videos or audio files, you want to make sure that those that have the inability to hear the sound of the file can still access a transcript or closed captioning version. YouTube includes the ability to create a transcript either manually by you submitting it or by having YouTube use it’s automatic caption software to render an accessible version.

Mobile

Today, it’s hard not to find a website template offered today that isn’t mobile-friendly. Having a mobile-friendly website means your website will offer the same, if not better, user experience regardless of the size of the screen or the type of device the user is using. Surprisingly though, most of the websites out there today are still not mobile-friendly and require zooming in to read the content and get so distorted on smaller screens that the site becomes unusable.

So what now? How do I know if I am compliant?

It may be difficult to just look at your website and determine if it is compliant to accessibility standards, that is why there have been a number of resources and tools created to help make a site evaluation easier. I gathered together a list of the most common tools for you below.

Resources:

• Section 508 -Section 508 requires that Federal agencies’ electronic and information technology is accessible to people with disabilities. This applies to all technology but also provides guidelines for making sure your website is compliant.
• WebAIM – Collection of standards and best practices for making compliant accessible websites for everyone.
• Web Content Accessibility Guidelines (WCAG) – These guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these.
• W3C Mobile Best Practices – This document specifies Best Practices for delivering Web content to mobile devices. The principal objective is to improve the user experience of the Web when accessed from such devices.

Tools: 

• Spurr App – An easy to use website tester, letting you check contrast levels, mono colors, heavy contrast, etc.
• Wave WebAIM – Website Accessibility checker that tests to make sure you website is in compliance with the Web Content Accessibility Guidelines (WCAG). Checks for contrast, content structure, alt tags, etc.
• WebAim Contrast Checker – Easily determine if the colors you are using meets the AA contrast ratio.
• W3C Validator – This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc.