Web accessibility is about making websites accessible to people with disabilities. Those disabilities include everything from blindness and varying degrees of vision impairment to a broken bone in a dominant hand to cognitive disabilities such as dyslexia. Making websites usable by those with disabilities is not as difficult as you may have been led to believe. There are things that are considered just plain good practice in building a website that can make a site vastly more accessible to all. Here are 5 things that can easily be accomplished with most sites:
1. Add a skip to content link
Try navigating your website with just a keyboard. Load a page and just start pressing the tab key. Follow the outline of the content in focus as you tab through the page. Now imagine that you’re on a page with a list of 50 nested menu items down the left side of page and in order to fill out a form in the main content of the page, you have to tab through every single menu item. That gets old quickly. There’s a simple solution. Add a “skip to content” link as the first piece of content in the body section on the page that links to the page’s main content. This way, when a page is loaded, all a user needs to do is press enter and voila, they’re at the page’s main content.
<div id=”a11y-hidden”> <a href="#main-content">Skip to main content</a> </div>
There is debate over whether this link should be visible or not. My preference is a combination of the two - hide the link until it receives keyboard focus. That way sighted keyboard users get a visual when they tab to it. Note that it should be hidden by positioning the content off-screen, not by using display:none or visibility:hidden, which hides the link from screen readers.
#a11y-hidden {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}Additional information on Skip Navigation links can be found at:
"Skip Navigation" Links
CSS in Action
2. Use descriptive text for links
A common way of navigating through the content of a website with assistive technology is by skimming the list of links by tabbing through them. However, if the text of all the links in the main content of the page is “Click here” or “more”, this method of scanning content becomes useless. For example,
<p>Check out the state forest closest to you. <a href=”http://www.example.com”>View a map of all PA state forests</a>.</p>
or:
<p>Many of the instruments we take in on trade are overhauled and put back into like-new condition and resold. <a href=”http://www.example.com”>View our reconditioned instruments for sale</a>.</p>
are much better than:
<p>For more information, <a href=”http://www.example.com”>click here</a>.</p>
3. Structure your content
Another method by which screen reader users navigate a site is by skipping from heading to heading to get a sense of the topics on the page. Screen reader software allows a person to bring up a list of all headings on the page to choose from or at the very least, to just tab through them. If a page is marked up in a logical hierarchical manner using descriptive text in appropriate heading tags (h1, h2, h3, etc.), it becomes much easier to get a sense of what the page is about without having to listen to the entire page’s text content.
4. Use alt text for images
To a sighted person, images convey a lot of information at a glance. It’s also quickly apparent to a sighted user whether an image contains content relevant to the page or is just eye candy. To a blind user, they only know that there is an image on the page. They don’t know whether they’re missing a great deal of information or whether it can just be ignored. The use of alternative text with images helps to convey important information about the image to the user. They also help people who have images turned off due to low bandwidth.
<img src=”/path/to/image.jpg” alt=”A graph that shows the world’s population” />
Or better yet:
<img src=”/path/to/image.jpg” alt=”A graph that shows the world’s population increase from 6 billion in 1999 to 7 billion in 2011” />
See Webaim’s article for more in-depth info on how to properly and effectively use the alt text attribute for images.
5. Choose sufficient color contrasts between background and text colors
Make sure there is sufficient contrast between foreground text and background colors. This will help those with vision impairments, such as color blindness. To check whether your color contrast is sufficient, use Webaim’s color contrast checker. Enter the url and then click on the contrast tab.
Conclusion
While accessibility can get tricky when you get into complex sites like Facebook, the average site would become much more accessible just by implementing these 5 simple suggestions. And it not only makes the site more accessible to those with disabilities, these improvements also provide better fodder for search engines and often result in a boost in Google ranking!
Additional Resources
A Guide To Drupal Terminology |Mediacurrent Blog Post
