Quick Accessibility Guide

Looking for a tutorial on all the ‘quick’ and ‘easy’ accessibility practices that you can put in ‘right from the start’? Look no further; here is a 5 point guide to get you on your way.

Page Titles

Make sure you have correct and descriptive page titles of each of your pages.

The page title is shown in your browser window title bar, the browser tabs, search engines and read by screen readers.

The page title is important for orientation; to help when moving between tabs and windows and it is the first thing screen readers say when a user navigates to a new web page.

Some examples of good titles are:

Amazon.com

<title>Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs & more</title>

The Asia News section of CNN.com

<title>Asia News - Headlines, Stories and Video from CNN.com International</title>

Sitepoint article on How to Make a Delicious Donut in Photoshop

<title>Make a Delicious Donut in Photoshop - SitePoint</title>

Alt Text

Image text alternatives or ALT text are used by people who cannot or do not want to see the images on your website. People who use screen readers will hear the ALT text out loud.

The alt attribute is used on images that convey content or has a specific function, such as navigation buttons, graphs, pictures, illustrations, logo etc. If images are being used as decorative purposes such as layout or framing, then an alt is still required but it left as empty (null).

An example of an empty alt attribute:

<img src="decorative-image.jpg" alt="">

An example of a website logo with correct alt text

<img src="http://www.sitepoint.com/img/sitepoint.svg" alt="SitePoint">

Page Headings

Make sure that heading elements are used sequentially and always begin with the h1 element.

The heading elements are h1, h2, h3, h4, h5, h6

Adaptive technologies, such as screen readers and Braille displays, tab from item to item sequentially, primarily on the basis of the web page markup for headings, list items, and hyperlinks.

When creating your pages make sure to include headings and to make sure that your headings have meaningful hierarchy.

Multimedia (Video and Audio) Alternatives

Information that is contained within multimedia, such as videos, slideshows or visual presentations create obvious issues for people who are visually impaired, have low vision or have difficulty with visual information while audio presentations or podcasts create issues for the deaf and hard of hearing.

The best practice if multimedia is being included on the page is to provide a transcript in plain text. Text can be read by a screen reader or Braille display, or enlarged and reformatted for people with low vision.

Transcriptions should be available on the same page as the multimedia and very close by. Some companies include the link near the video and it opens into a new page, or you can include the transcript on page.

Forms

Like everything else on your website, your web forms must be accessible to all users.

Place prompts above, or to the left, of text fields and combo boxes on forms.

Place prompts to the right of checkboxes and radio buttons on forms.

Wrap the label element around its related input element whenever possible.

<label>First name: <input type="text" name="fname" value="firstname" /></label>

Use of the label element makes forms particularly accessible for those using adaptive or assistive technology. Wrapping the form control description and text input field in a label element, as shown in the example markup above, prevents these technologies from interpreting the control and its description as separate entities. You can use the label element with any form control element, including text inputs, buttons, checkboxes, radio buttons, and menus.

Use the for attribute with the label element to associate prompts with their respective controls when necessary, for instance, when they’re in separate table cells.

If you have an existing website that uses tables for form layout, you’ll most likely find that text is located in a different table cell from the form control with which it’s associated. In such cases, you won’t be able to wrap the label around the associated input element; however, you can make the necessary link using the for attribute with a corresponding id attribute, as shown in bold here:

<tr>
   <td><label for="fname">First name:</label></td>
   <td><input type="text" id="fname” name="fname" value="firstname" /></td>
</tr>

Group related form fields using fieldset.

This technique makes forms clearer and more easily understood. For example, you may use the fieldset element to group:

  • name information collected in separate fields for first name, middle name, and surname
  • address details collected in fields for a street address, city, state/province, postal/zip code, and country
  • telephone numbers
  • email addresses and URLs
  • credit card details

Here’s an example of the code that groups related address form fields using the fieldset element.

<fieldset>
<legend>Address Information:</legend>
<label>Street address: <input type="text" name="street" value="streetaddress" size="50" /></label>
⋮ <label>Country: <input type="text" name="city" value="city" size="30" /></label> 
⋮ </fieldset>

Learn HTML5 Online

Get all SitePoint books and courses with a Learnable membership. Start building future-proof websites that are faster, more powerful, and easier to maintain.