Creating Accessible Websites 101

Tweet

The Bare Bones of Creating an Accessible Website

It is always best to try to ensure that your website conforms to Priority 1 (Level A) of the W3C Web Content Accessibility Guidelines (WCAG) 2.0 principle-centered guidelines.

There are 3 priorities (levels) within the WCAG 2.0 standards:

Priority 1 or Level A conformance is a basic requirement for some groups to be able to use web documents. Priority 2 or Level AA conformance indicates better accessibility and removal of significant barriers to accessing the content. Priority 3 or Level AAA checkpoints provide improvements to web content accessibility.

The Web Content Accessibility Guidelines (WCAG) are designed to help promote a degree of universal accessibility by providing advice for the creation of websites that are accessible to everyone, regardless of their abilities.

Recommended Repairs

Ensure that your website conforms to your local laws, government guidelines, or company guidelines for accessibility.

Many company and government website accessibility requirements include WCAG conformance, in addition to their own specific requirements.

Use valid, structured, semantic markup.
The successful use of adaptive and assistive technology, and the functionality of modifications that might be made to hardware or software specifically to help disabled users, depends upon valid, semantic, structural markup. Such technologies and modifications are invariably built to standards, so they need to receive valid, standards-compliant markup in order to interpret your documents accurately. Your web page markup can provide valuable “meaning” that can be interpreted and used by adaptive technology, but only if you use the various markup elements for the specific purposes for which they were created.

Make sure that your code is valid by W3C standards, using the W3C markup validator.

Separate content from presentation.
The WCAG requires that you separate your document’s content, including structural content elements such as headings and lists—from its presentation, in the interests of improving accessibility. Separating content from presentation is easily achieved with CSS, and ensures that devices that are incapable of rendering the presentation aspects of your website will still communicate the content of your pages.

Provide accessible navigation.
Ensure that your navigation system can be used by visitors who don’t have or use a mouse.

Provide users the ability to adjust text size via the browser or a style switcher.
Using relative font sizing instead of absolute font sizing will allow visitors to adjust the text on your site’s pages to a comfortable size through their browser. If your layout does not provide ideal conditions for relative font sizing, use CSS to create a style switcher instead.

Tell ’em about Text

Not all users know that they can change text sizes via their browser preferences, so it’s helpful to include brief information about this functionality on your website, or to provide a link to instructions located elsewhere online. In this way, you can help educate visitors about the functionality provided in their browser settings, which in turn improves their experience of all websites — not just yours.

Use clear, simple language that is appropriate for your website’s content.
All users, but especially those with cognitive, learning, and/or reading disabilities, can benefit from clearly stated content. Use simple sentence structure and words your audience will understand. Provide definitions of terms wherever they may be helpful, and include summaries of information to help those who don’t read well to understand the content.

Conduct tests to ensure that your website makes sense without CSS.

Avoid the use of frames.
Sighted visitors using modern browsers can view two or more frames in the browser window simultaneously. However, adaptive technology reads frames one at a time, in a linear procedure, as if each frame was a separate window. A typical framed page configuration in which one frame contains navigation and another contains content is a veritable nightmare for visitors using adaptive technology. Frames have been deprecated in HTML5, so you should avoid ever creating websites with them, regardless of accessibility.

Avoid causing the screen to flicker.
Flickering or flashing screens can cause seizures in some users, especially those with photosensitive epilepsy, so avoid using animations, effects, and so on that cause screen flicker.

Creating Valid, Structured, Semantic Markup

Use the correct DOCTYPE for every web page.

Adaptive technologies use the DOCTYPE to render the web page properly.

Specify a character encoding for every web page.
Mainstream web browsers, adaptive technologies such as screen readers, and alternative devices such as PDAs can handle poorly- or incorrectly-specified character encoding unpredictably. Include correct character encoding within every web page, like so:

<head>
 <meta charset="utf-8" />
</head>

Use the lang attribute to identify the primary language for each web page and to highlight a language change within a page.
As well as helping speech synthesizers and Braille translators to use your page, language designation via the lang attribute is required by an increasing number of government agencies and other organizations. Language information can be of use to a wide range of applications, such as authoring tools, translation tools, search tools, and parsing tools—some or all of which might be used by visitors to your website.

The lang attribute is used to designate languages for HTML 4.0 and later.

You can identify the primary language for a web page like this:

<html lang="en">

The markup below designates a language change within a web page, as a German quote appears in an English-specified page:

<blockquote lang="de" title="Faust: Der Tragödie erster Teil, by Johann Wolfgang von Goethe" cite="http://gutenberg.org/catalog/world/readfile?fk_file s=347&amp;offset=13356">Ihr naht euch wieder, schwankende Gestalten, Die früh sich einst dem trüben Blick gezeigt. Versuch ich wohl, euch diesmal festzuhalten? Fühl ich mein Herz noch jenem Wahn geneigt? Johann Wolfgang von Goethe, Faust: Der Tragödie erster Teil, http://gutenberg.org/catalog/world/readfile?fk_files=347&amp;offset=13356.</blockquote>

Use heading elements (h1, h2, h3, h4, h5, h6) sequentially, beginning with h1.
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.

Use correct markup for lists and list items.
Use ul, ol, and dl appropriately for lists and li, dt, and dd for list items. Don’t use other markup to create displays that look like lists, and don’t use ul, ol, and dl simply to achieve layout indentation. Use ordered lists to help provide context for non-visual users when appropriate.

Using Recommended Markup in Content

Use these recommendations as you mark up your page content to put that information into context for users of adaptive technologies.

Use blockquote to mark up quotations.
You may have noticed that a few sites still use the blockquote element to indent text. Reserve the blockquote element for quotes and create indentations using CSS.

Use em instead of i for emphasis.
It’s important to differentiate between structural and presentational markup. Both the i and b elements are examples of presentational markup, their respective structural counterparts being em and strong.

Browsers will render the em element as italicized text by default. Adaptive technology will read text between the em element tags as emphasized text.

Use strong instead of b for stronger emphasis.
Adaptive technology will read the text within the strong element as having strong emphasis, while browsers will render the text in a bold font.

Use cite to mark up the citations of names, such as the titles of books, movies, plays, and television shows.

Use dfn to mark up definitions.
The dfn element applies to the term that’s being defined, not the definition text. Browsers will render the dfn element as italicized text by default; however, as with all elements, you can use CSS to give this content custom styling.

Using title with dfn
You can use the title attribute to include a definition or supplementary information about terms marked up as dfn. Sighted users who use a mouse will have access to the tooltip feature, so they’ll see the definition when they hover the mouse over the term.

A <dfn>computer</dfn> is a programmable electronic device that can store, retrieve, and process data. Access to a <dfn title="a general-purpose computer equipped with a microprocessor and designed to run software, such as a word processor or Web browser, for an individual user">personal computer</dfn> is generally required for a college student.

It’s helpful to add cursor: help to your CSS style for elements such as dfn, as this provides added visual cues for users, as Figure 10.1 shows.

Figure 10.1. A styled dfn element with a title attribute and styled cursor

Figure 10.1. A styled dfn element with a title attribute and styled cursor

Use code to denote program code.
Use var to mark up variables within code.
Use kbd to represent text typed at a computer keyboard.
Use samp to mark up samples of computer program output.
Use abbr to mark up acronyms and abbreviations.

To assist those using adaptive technologies, as well as your site’s more technology-savvy visitors, use the abbr element to mark up the first appearance of an acronym or abbreviation on a web page, like this:

I will take the <abbr  title="North Atlantic Treaty Organization">NATO</abbr> document with me on my trip to Victoria, <abbr title="British Columbia">BC</abbr>, Canada.

Screen readers and other adaptive technologies can recognize these elements if the user turns on settings to read them. For example, when reading the symbol for sodium chloride, a screen reader would pronounce “NaCl,” as “nackle.” If you use the abbr element with the appropriate title attribute text, as shown below, the screen reader can instead say “sodium chloride.”

<abbr title="Sodium Chloride">NaCl</abbr>

The acronym tag often used in these situations has been deprecated in HTML5 in favor of abbr.

You can use a method similar to that described for dfn to provide users with tooltips for abbreviated terms.

Use address to mark up contact information about the author.
Here’s an example:

<address>This document was written by <a href="/contact/">John Doe</a></address>

Providing Accessible Navigation

Ensure that all parts of your navigation system are accessible without a mouse.
In addition to screen readers, quite a few other technologies—including alternative approaches that don’t even use a keyboard!—rely on keyboard commands to access content. Technologies such as “puff and sip” devices, single-switch devices, and speech recognition software often mimic keyboard use though they don’t actually require a keyboard to be connected.

Avoid making Flash or other plugins necessary for the use of navigation systems unless you provide accessible alternatives.
As well as being a potential barrier to site use for non-disabled visitors, the use of plugins for critical website functionality can prevent visitors with adaptive technologies from using your website altogether. If you do use Flash or other plugins for navigational purposes, be sure to include an accessible alternative such as a non-Flash version of your website.

Consider specifying link focus with the CSS focus pseudo-class to provide helpful visual cues, especially for the mobility-impaired.
Those who use adaptive technologies or have keyboard-only access won’t benefit from visual cues generated by the CSS hover pseudo-class. Keyboard input (almost exclusively) distinguishes focus from the hover or active states.

You can use the focus pseudo-class to provide a visual cue for keyboard users as links gain focus, like this:

a:link { color: #900; }
a:visited { color: purple; }
a:focus { color: red; }
a:hover { background: #fffff0; color: #000080; }

By default, many browsers display a border around links in focus.

Link States Matter
Note that the order in which the link states are listed in your stylesheet does matter: you must list them in the order shown in the example above.

Provide several ways for users to navigate through your website.
For example, provide easy-to-use global navigation, local/section navigation, and internal navigation. In addition, include a sitemap and a website search feature, and consider including a site index if yours is a large website. These features enhance both the accessibility and usability of your website.

Use “skip” links when necessary, for example, before each navigation area (global, local/section, and internal) or block.
Including skip links to allow users to skip past blocks of navigation or other links in your website’s content helps keyboard-only and adaptive technology users tremendously. Navigating through a website without a mouse can be incredibly tedious and troublesome if users must tab through every single link within the site’s navigation, on every single page that they visit. Here’s how you might create a skip link; this markup displays as shown in Figure 10.2:

<div id="globalnav"> <a href="#skiptocontent">Skip navigation</a>
<ul> 
    <li>Home</li>
    <li><a href="/services/">Services</a></li>⋮
</ul>
</div>
<div id="content">
<a name="skiptocontent" id="skiptocontent"></a>
Figure 10.2. Providing skip links for each block within navigation

Figure 10.2. Providing skip links for each block within navigation

You should also provide skip links to allow users to skip past content to the navigation when appropriate. Look at your site and its pages very closely—and, ideally, test the site with users—to determine the points at which skip links may be useful.

The decisions you make about where and when to use skip links will depend on your target audience. How likely are your visitors to have keyboard-only access to the Web? I’ve often seen people argue in discussion lists and forums that skip links are not required for navigation systems that contain only five or six links, but don’t be fooled! If you were the person who had to tab through all of those links on every single page of a site, you’d probably wish the developer had included skip links.

  • Avoid skipping past website functions, such as search boxes and login forms.
  • Avoid skipping past navigational links such as Next, Back, or Top of page buttons or links.
  • Avoid hiding skip links.

If you hide your skip links, keyboard-only visitors using mainstream web browsers won’t be able to see them, so they won’t be able to use them. Instead, plan to create a visually appealing website design that includes visible skip links.

A Thousand Words to Each Picture

Provide a text equivalent for each image by specifying the alt attribute.
Writing helpful text for the img element’s alt attribute is one of the most important—and easy—ways to make your images more accessible and WCAG-compliant.

Decorative images will still require an alt attribute; however, you can leave this blank, as shown below:

<img src="house.jpg" width="30" height="30"  alt="" />

Use longdesc
You can also use the longdesc attribute to provide a text alternative to images, but be aware that currently it is not well supported.

Ensure that the alt attribute text makes sense out of context.

Avoid animations, including blinking or scrolling text.
Moving text and animation can be very distracting for people with cognitive disabilities. Additionally, screen reader users and those who have visual or cognitive disabilities may have trouble reading moving text. Animations are also a nightmare for people who use screen magnification technologies.

Avoid blink and marquee
You should not use the blink and marquee elements to make your text blink or scroll, as these are not considered valid markup by the W3C. They have also been deprecated as of HTML5.

In Good Form

Like everything else on your website, your web forms must be accessible to all users. Use the following checklists as guidelines to create accessible forms.

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

Figure 10.3 shows an example.

Figure 10.3. Providing prompts for text fields and combo boxes

Figure 10.3. Providing prompts for text fields and combo boxes

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

Figure 10.4 shows how such prompts should be placed.

Figure 10.4. Providing prompts for checkboxes and radio buttons

Figure 10.4. Providing prompts for checkboxes and radio buttons

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. The resulting display is shown in Figure 10.5.

<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>
Figure 10.5. Grouping form fields

Figure 10.5. Grouping form fields

Removing fieldset Borders
By default, browsers will add a border around form fields grouped using the fieldset element. You can remove this border using the following CSS:

fieldset { border: 0 none; }

Use the title attribute to provide advisory information.
When using an img within a button element to produce a graphical button, use the alt, value, and title attributes to provide a text alternative.

Avoid using a reset button to prevent its accidental use.
Years ago, I, like many others, used to include a <input type="reset"> button in each of my forms. However, after realizing that the reset button rarely seems to serve a useful purpose, and that its presence can actually cause confusion among users, who often activate it accidentally, I quit using it. Only use the reset button if there’s strong justification for doing so.

Always remember that providing an accessible website makes your online presence available to more visitors. And, when you plan for accessibility right from the start, you can keep the costs of making the site accessible to a minimum and stay within your budget.

This is an excerpt from Deliver First-Class Websites: 101 Essential Checklists, By Shirley Kaiser

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.