Robert Gregor - Web design & User Experience Expert

Accessible Website Design

How do search engines & people with visual impairments see your website's content?

One key to creating successful, and accessible websites, is to make them readable, and usable by screen readers. The benefit to testing a website using a text browser like Lynx is that you can test a website's rendering to make sure that blind people and search engines alike can index your content. One accessiblity key that I include with all of my website designs is a main menu and skip to conent link, which can be seen in the following Lynx screenshots:

The purpose of these links, is that it allows visitors using a screen reader to quickly skip to the site's content, or navigational menus. This allows them a much easier browsing experience on your website. This is especially important if you have page style <img> tags, and have ALT content specified for them, as this allows users to quickly skip this needless information.

How do you make those links not appear to a traditional user?

The key to making the links invisible to a graphical web-browser lies in giving the link a class that allows us to style it in CSS.

<a href="#mainContent">Skip to Content</a>

Here is the link with a class applied to it

<a href="#mainContent" class="accessibility">Skip to Content</a>

And the CSS that will hide this link from browsers:

A.accessibility
{
  display: none;
  text-indent: -10000px;
}

There you have it, a more SEO friendly, accessible webpage!