Schedule your FREE 30-minute consultation Now!

Making your web site accessible

Keep in mind the needs of disabled visitors when you are designing your web site, especially for those who are blind or partially sighted

focus on accessibilityBesides keeping your web site focused, it is also import to consider web site accessibility. Some of the people who visit your web site will be suing different monitors that yours or running it at a different resolution. More importantly, however, some users will have poor eyesight or even completely blind. How do you ensure that your web site is user-friendly to people with these limitations?

You might need to make some changes to the way you code your site to so that you don’t alienate this group of users. It is possible that they may be using a screen reader which reads the words out loud. Some screen readers are more advanced than others but in all cases you should do your part to help your web visitor. Stick to the guidelines given here as well as clean HTML and CSS and your web site should be more accessible.

Navigation

This is one of the most challenging aspects of your web site to your users with disabilities. If you use Flash or JavaScript for your navigation bar, screen readers may not be able to interpret the links. An easy alternative is to use CSS to make your web site accessible.

Users may also want to increase font size or remove the display of images (text-only) to make your web pages easier to read. If you use images for your navigation but any text embedded with them will not be able to be read by the screen reader. The easiest way to fix this is to always use the <alt> tag for every image. For example if you designate a little house icon for your home page or even have the word “home” embedded in the button so it is no longer text, the screen reader can’t “see” it. If, however, the tag for you image is <img alt=”link to home page” …> the screen reader can describe the image to the user with disabilities. Also when images are turned off in the browser the alternate text will be displayed.

Also be careful in using tables in your page design. Screen readers often have difficulty understanding them. Tables can be made accessible by keeping them simple and not using empty cells.

Hyperlinks

You can also provide short cuts to navigate your site by including the accesskey attribute in your links. For example, <a href=http://intergalacticwebs.com/ accesskey=”H”> lets the user press Alt or Ctrl plus H to follow the link to your home page. Don’t try to do this for all of your links — just for the main navigation bar. JAWS, the most popular screen reader, can read Access keys aloud allowing users to access pages more quickly.

Another attribute to add to links is <title>. This will indicate to the user the destination of the link.

Using the right colors is also important for navigation. There are many people who are color blind. Tools such as https://www.toptal.com/designers/colorfilter will simulate how your web site pages appear to someone who is color blind.

There are also tools to help you check to be sure your web site adheres to the Web Accessibility Initiative (WAI):

Leave a Comment