Planning for Accessibility in Your Site

The web should be open and usable by all – this includes people with disabilities. Web accessibility means that the millions of people with disabilities that use the web can interact, understand, navigate, and contribute to websites.

Here are a few easy questions to ask yourself to check if your website is accessible to people with visual, auditory, speech, and other impairments.

Is your site accessible via screen readers?

Check to make sure your website is navigable from screen readers.

Your website should be navigable via using the TAB key. If you have a large menu at the top, add a hidden skip link so that users can TAB and hit ENTER to skip to the content of your page.

Twitter Bootstrap is a popular framework for setting up styling and scaffolding for a site,. If you are using Twitter Bootstrap, look into the Bootstrap accessibility plugin.

Another alternative to Bootstrap, is Foundation. If you are using Foundation, look into how Foundation is built around accessibility.

Do your Positive, Negative, and Neutral Buttons look different?


Image from UX Movement.

Have your Positive Action buttons and your Neutral and Negative Action buttons look distinctly different. Notice that in the above example, not only are the colors different, but one is bordered and ther other is filled in, making it accessible to those with color-blindness.

<i>, <em>, <b> and <strong> tags

Know when to use each of these tags!

  • <i>“alternate voice”; transliterated foreign words, technical terms, and typographically italicized text.
  • <em>“stress emphasis”; something you’d pronounce differently.
  • <b>“stylistically offset”; keywords and typographically emboldened text.
  • <strong>“strong importance”;

See this HTML5 Doctor post for more information.

If you keep all these tips in mind, your website will be a little more friendly and semantic for users with disabilities!