Easy ways to make your site more accessible

Accessibility is vital in web design. Whether viewing your site via a conventional browser, handheld device, text browser, or other user agent, visitors need to feel welcome and the more you accommodate them, the more likely they are to choose your site over that of a competitor.

Below are several ways you can make your site more accessible, and further resources to aid you.

Content-First Design

Most web pages have navigation at the top or left of the page. If you view the source, or view the page with a text browser, the first thing you will see will be the navigation. The content is much further down the page.

By separating style from content through the use of CSS, you can place your content first in the file, but visually place your navigation at the top (or wherever you like) on conventional browsers.

This has several advantages. The document is more presentable to user agents like screen readers, which read the file, not the page; the use of CSS allows you to re-arrange the page without rewriting the content; and search-engine spiders, some of which only read the first 250 words of your page are presented with the content-what you want to be searchable, not a jumble of links.

Titles for Links, and Images

The title tag allows you to add additional information about a link or image. Link titles might provide visitors with a better idea of what to expect when they follow a link, and titles on images can provide a more detailed description of the picture they are viewing.

Titles show in most modern browsers as tooltips-little boxes that appear when you hover over the item in question. Some browsers will display alt text this way if there is no title, however that is not a standard and should not be relied upon.

Use a title that makes sense when read out of context. Do not have a title such as ‘Click here!’ or ‘someimage.jpg’-that isn’t helpful. Some spiders index titles, so you can use them for additional keywords to help your page rank. Don’t use it to spam, however-that can get your site banned.

Alternate Text for Images

Not all visitors to your site will be able to see your images, whether they are vision-impaired, or just surfing with image-loading turned off to speed up their download time. The alt tag should contain a brief description of the image, such as ‘Dogs playing poker’. They should not contain only the filename of the image-as with titles, that is not informative.

You need not have alternate text for images used as a design element, such as a background image, or list icon. I’d advise using CSS for those anyway, but when you do have a need to have them in the page itself, use alt=””.

As with titles, spiders may index alternate text as keywords. Are you beginning to see how being accessible is helpful to both you and your visitors?

Long Descriptions for Images

Sometimes images need more description than what the alt tag should provide. For these, the longdesc attribute can be used to hold a URL to a page with a more detailed description of the image.

Not all user agents support the longdesc attribute. Another way authors can provide a link to the longdesc page is via a ‘d-link’. After the image, place an anchor tag with an href to the longdesc URL, with the letter d as the link text.

TabIndex

When using a content-first design, you may find that the order in which your browser tabs through the page is less than desirable. You can use the tabindex attribute on links, and form elements to specify the order to follow.

Tip:You do not need to use all numbers in a sequence. If you view the source of this document, you’ll notice the navigation starts at 100 allowing use of the lower numbers for content links.

Access Keys

Access keys allow visitors to follow a link without having to tab to or click with a mouse. They can by used by pressing and holding the [ALT] key on Windows, then the accesskey, then releasing both. Mac users press the [CTRL] key. I’m unsure which is the key for Linux users, but one or the other should work.

If you search for ‘accesskey’ on your favorite search engine, you’ll likely come across a number of articles decrying their use, citing conflicts with application commands or difficulty of display. I haven’t yet found these to be valid arguments.

In Windows, accesskeys take priority over menu shortcuts. Users can still access the menu, however, by pressing and releasing the [ALT] key, then the letter of the menu they wish to access.

Access keys can be easily revealed by using CSS to style links so the accesskey letter is bold, or underlined while the rest of the link text is not, or the key can be shown in the title text.

Some standard accesskeys:

S Skip Navigation
1 Home Page
2 What’s New
3 Site Map
4 Search Box
5 FAQ
6 Help
7 Site Terms of Use or Complaints Procedure
8 Privacy Policy
9 Feedback
0 Accessibility Statement

Acronyms and Abbreviations

You may assume everybody knows what CSS stands for, but that does not mean you are right. :)

Using the acroynm or abbreviation tag the first time a word is used on a page helps clarify their meanings to your visitors. Add the expansion, in this case ‘Cascading Style Sheets’ as the title attribute, and it will show as a tooltip when you hover over the word.

Article Feedback


Add Your Comment