Understanding and Validating

This page contains development and design practices that should be used when creating an accessible site. In most cases, simply adhering to standard HTML guidelines will prevent a lot of accessibility issues. To more clearly understand the examples below, I recommend using the following tools:
WAVE Toolbar
WebAIM has an extremely useful site with several great tools and resources. This FireFox add-on is one the most popular and useful tools. Use this tool to help visualize the impact of not following good practices.
ChromeVox
An easy to use screen reader Chrome extension. It's fairly basic, but a good reader for beginners. Use this on each section below to hear how proper and improper HTML markup are read differently. The list of keyboard shortcuts can be found in this extension's options page.
W3C Markup Validation Service
Use this tool on any markup you produce before promoting to production. Having valid markup goes a long way.

Hidden Content

Sometimes content needs to be hidden. However, how content is hidden could have unintended consequences for different types of users.

Hiding Content from Everyone

Hiding content using display:none; or visibility:hidden not only hides content on the screen, it also prevents assistive technologies from seeing it.

Hiding Content ONLY Visually

There have been a handful of methods for hiding content visually and not from screenreaders. Here are a couple methods that use varying combinations of position:absolute and/or overflow:hidden:
  • collapsing content with height:0
  • positioning content offscreen with left:-99999px or text-indent:-99999px
As technologies have grown and evolved, these solutions have proven to not be completely foolproof. Over the last couple of years a new solution using clip has emerged.

Understanding the clip Solution

Here's the solution:
.offscreen {
 position:absolute;
 height:1px;
 width:1px;
 overflow:hidden;
 clip:rect(1px 1px 1px 1px);
 clip:rect(1px, 1px, 1px, 1px);
}

If you understand clip then you probably understand the solution...at least mostly. Here's the breakdown:
  • position:absolute is required on any element you wish to apply clip to.
  • height:1px and width:1px are set due to some screen readers ignoring content with height:0px.
  • overflow:hidden gurantees no overflow to be displayed when minimizing the content.
  • clip basically crops the content with the specified top, right, bottom and left offset coordinates or dimensions. The solution above uses 1px for each coordinate as opposed to 0 for the same reason height:1px and width:1px are being used above.

Important

  • The solution above has 2 clip attributes: one with commas, which is defined by the current spec, and one without commas which is present for IE6/IE7 support. While modern browsers currently support both methods, eventually having commas will be the only supported method.
Use buttons below to visually understand how clip works.
I bet you can't clip me

Hiding Content ONLY from Screen Readers

Many screen readers support ARIA, which includes the attribute aria-hidden. Using aria-hidden="true" will prevent screen readers from reading the content.

Things to Try

  1. Be sure to use the buttons above to further understand how clip works.
  2. Twitter Bootstrap has a flavor of this solution that is utilized via .sr-only. Check it out! The difference between the solution above and .sr-only is that .sr-only resets border, padding, and margin attributes. Also, the clip value uses 0 for the top, right, bottom, and left dimensions instead of 1, and doesn't use commas.
  3. Read Jonathan Snook's article about using clip to hide content.

Skip to Main Content

Providing a link that enables the user to skip to the main content and bypass repetitive content like top navigation is important. The link doesn't necessarily have to be visible on the screen; it just needs to be visible to assistive technology, like screen readers.

Things to Try

  1. View the source or inspect this page using your browser's developer tools to find the skip link where href="#maincontent" which is associated with the anchor <a id="maincontent"></a>.
  2. Using the WAVE toolbar show Errors, Features, and Alerts. The hidden skip link icon will be displayed at the top of the page. You will have to use your browser's developer tools to remove certain CSS properties, like width, height, and clip to see the WAVE icon.
  3. Use a screen reader to hear how the reader reads this link.

Page Flow is Important

The visual representation of a web page should not differ much from the actual HTML structure.

Your content could be misunderstood by assistive technology. Answer: 

Why Does Flow Matter?

Things to Try

  1. Using the WAVE toolbar swith to Text-only mode. Search for the title of this section. Visually, the content flows fine, but structurally it's not.
  2. Use a screen reader to hear why this is important.

Mouse...What Mouse?

Many assistive technologies depend on a web page's content and actions to be completely keyboard accessible.

Tabbing

A simple rule to follow is to make sure all links, inputs, and other navigational items can be tabbed to in the order in which the document flows and can be acted upon using the keyboard.

Annoying Navigation Examples

Here are a couple of examples of bad keyboard accessibility:
Bad Tab Ordering

The tab order in this example is out of order. This is what can happen over time when trying to manage tab order explicitly.

Are you awesome:
Unreachable

The items in this section are clickable, but you can't reach them without a mouse.

  •   View Some Awesome Content
  •   View Some Really Awesome Content
  •   View this Most Awesome Content

What's the solution?

  • Only apply the tabindex attribute to elements that aren't by default assigned one (e.g. <div>).
  • When setting tabindex use the the default value tabindex=0. This will maintain the natural tab flow.

Important

  • The example above includes clickable <div> elements. Use tabindex on elements like <div> only when necessary, and make sure it's extremely clear these elements are clickable and indicate what will happen once they're clicked. Otherwise, a user using assistive technologies may navigate to that element and not realize there are events associated with it.
  • Also, check out the W3Schools tabindex attribute page. Only in HTML 5 can the attribute be used on any element. HTML 4.01 allows this attribute to be used on only a small number of elements, which doesn't include <div>.

Things to Try

  1. Place the cursor inside of the First name field, and try to navigate through the elemens of this section with only your keyboard. This should be very difficult, if not impossible, because tabindex wasn't implemented correctly or not at all.
  2. Click on the Fix the Navigation Above button below, and then inspect the DOM. The tabindex of each clickable element will be set or reset. Try tabbing through each example above again.

Headings H1-H6

Headings aren't just for style. They provide meaning and organization to the content.

Start With H1

Use headings in order starting with <h1> then <h2> ... <h6>.

Example

Aside from this section, the rest of this page and site uses headings appropriately.

Things to Try

  1. Using the WAVE toolbar view Errors, Features, and Alerts and you'll see the Incorrectly orderd headings alert icon in this section. The headings are only visually implemented correctly. Switching to Text-only mode will also help visualize the poor structure.
  2. Many screen readers allow users to navigate through documents via the headings. Poorly implemented headings could create confusion. To understand this in more detail check out Web Accessibility and Semantic Heading Structures in HTML 5

Image Alternative Text

The simple rule of thumb is to use alt="" when the image is decorative, and a descriptive alt attribute when the image represents content not represented elsewhere within the context surrounding the image. Never completely remove the alt attribute.

Decorative

My Interests

Non-Decorative

My Interests

  • Brewing Espresso
  • Fender Guitars
  • Arcade Fire
  • Baseball

Thanks for the idea ZURB!

Things to Try

  1. Inspect the page or use the WAVE toolbar to show Errors, Features, and Alerts. You'll see the first set of images as an empty alt attribute, and the second set has meaningful alt attribute values.
  2. Use a screen reader on both sections to hear how they might be interpreted by assistive technologies.
  3. Click each of the buttons below one at a time, and use a screen reader to hear why using the alt attribute appropritely is important.
    • Duplicating text already within the context of the image(s) in the alt attribute just creates extra noise for someone using assistive technology.
    • Removing text from the alt attribute not found anywhere else in the content prevents a user using assistive technologies from understanding the content completely.
    • Completely removing the alt attribute from an image not only prevents a user using assistive technology from understanding the content completely, it can also create additional/confusing noise. Also, after clicking this button use the WAVE toolbar to show Errors, Features, and Alerts to see the newly identified errors.

Tables

If you absolutely must use tables use them to display tabular data. Don't use them for general layout purposes, or your friends will make fun of you.

Using Tables Without the Correct Markup

Without the appropriate use of table headers all of the data in the table is treated equally by assistive technology.
First Name Awesomeness Level
Matt 10
Jimbo 8
Smitty 3
Player Avg. RBI HR
Matt 300 20 7
Smitty 250 10 2

Now This is Better...

A better markup equals a better experience. The tables below use <th> tags for the header cells, and the scope attribute appropriately (ie. scope="row" or scope="col").
First Name Awesomeness Level
Matt 10
Jimbo 8
Smitty 3
Player Avg. RBI HR
Matt 300 20 7
Smitty 250 10 2

Things to Try

  1. Using the WAVE toolbar view Errors, Features, and Alerts and you'll see the first set of tables are treated as layout tables (this is bad), and the second set are treated as data tables (this is great).
  2. Use one or more screen readers to better understand why using header cells is important.
  3. Use The Awesomeness Calculator to find out how awesome you really are.

Forms

Accessible form validation and labeling form inputs correctly are 2 easy things to implement, and usually the most important aspects of a site.

Fieldsets and Proper Labeling

Using <fieldset> and <label> are extremely important to the usability of a form.

Validation

Simply adding a visual representation of an invalid form is not enough. Letting the user upfront what the expected data is, and placing focus on error messages when validation errors occur are critical.

Examples:

Bad Form

Here's an example that demonstrates poor/no use of labels, no <fieldset> around gender, and validation that's not very accessible.

Last name

Gender

Good Form

Here's an example that demonstrates proper labeling, use of <fieldset> around gender, and accessible validation that's more usable for all users.

Important: Items marked with * are required.


Gender

Important

The 2nd example informs the user ahead of time that certain fields are required. Even without the need of assistive technologies, it's an overall better experience to have an upfront understanding of the expected data.

Things to Try

  1. As specified above the first example uses bad markup. Use the WAVE toolbar to view Errors, Features, and Alerts; it's the only section on this page that has errors. You should also see the second example has no errors.
  2. Use one or more screen readers to compare how the examples might be understood by assistive technologies before submitting the forms. This should help you understand how important proper labeling is.
  3. Now submit the forms without any data using the keyboard with a screen reader enabled. How different are the 2 examples while navigating through the validation errors?

Modals

Modal windows are extremely commmon. Unfortunately, so are modals that are not accessible. If a the only way for a user to close a modal window is with a mouse, a user relying on a keyboard or other assistive technology will be stuck.

Things to Try

  1. Using a screen reader use the Launch Accessible Modal button above to open the modal.
  2. While still using a screen reader, first try to navigate outside of the modal to understand what it would be like to be stuck. Now navigate your way to one of the close buttons and close the modal.

ARIA Landmarks

ARIA allows developers to increase the accessibility of web content, especially dynamic content, through the use of additional semantics and metadata. Due to its continued growing support ARIA is becoming more widely used.

Landmarks, Regions, and Roles

The most fundamental aspect of ARIA is breaking your content down into logical regions. These regions are then identified as landmarks by using the role attribute. For example, role="navigation" would be added to the HTML element associated with the navigation.

Additional commonly used landmark roles include, but not limited to:
main
Identifies the content specific to the topic of a particular page.
banner
Typically used for site-oriented content, which includes things such as the logo. It's recommended to use this role to identify the main header of a page. There should only be one banner role per page.
contentinfo
Contains information about the parent document, like copyright information. The footer is the most common region on a page that's identified with this role.

Additional Resources

This section serves only as an introduction to ARIA, and is really just scratching the surface. Check out these additional resources from the W3C I found to be helpful:

Things to Try

  • This page implements banner, navigation, main, and contentinfo landmarks. Use a screen reader that supports ARIA, like ChromeVox to navigate through the page via landmarks. You should begin to understand how powerful ARIA can be.

Color

Colors not only add to the asthetic of a page, they can help identify specific areas of content. However, people with visual disabilities, including color deficiency, may have trouble perceiving the message colors are conveying on your site; or, even worse, not be able to understand your content at all.

Distinguishing One Piece of Content from Another

Using color to help identify content is perfectly more than fine. It helps provide a better overall experience for many users. Just don't ONLY use color.

Poor Use of Color

WARNING: If you have a visual disability, you may have problems reading this example, including this warning.

Here's how this section adheres to the following WCAG 2.0 guidelines (green=compliant | red=non-compliant):
1.4.1 Use of Color
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)
1.4.3 Contrast (Minimum)
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
Large Text
Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
1.4.6 Contrast (Enhanced)
The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)
Large Text
Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
The example above ONLY uses color to inform the user which guidelines this section is in compliance with. The above section is actually completely non-compliant. Click the "Accessibility Magic" button below to see how the same section above becomes accurate and accessible.



The biggest thing that magically changed was using the actual words "pass" and "fail" to identify compliance. Not only was this section an issue for users with color deffeciencies, it was an issue for sreen readers; they don't understand color.

Color Contrast

The other item resolved by the "Accessibility Magic" button above was the warning message and the green color of the passing guidelines. There wasn't enough contrast between the background and font colors. The WCAG 2.0 guidelines specify accessible contrast levels of text to background colors for both AA and AAA conformance levels, which are defined in the example above.

Things to Try

  1. Install the NoCoffee vision simulator Chrome extension. Open this page in Chrome (or refresh this page if you're already using Chrome) and navigate back to this section to see it in its original state. Use NoCoffee to view the WCAG guidelines in the example above with protanopia and deuteranopia color deficiencies, which are among those that create difficulty with distinguishing between red and green hues. You should have a hard time distinguishing between the red and green text.
  2. To demonstrate why contrast matters, use NoCoffee and adjust the Contrast Loss slider while watching the warning message in the example above. You should reach a point where the warning text becomes difficult to read while the rest of the content on the page is still legible.
  3. Install the ColorZilla FireFox add-on, and open the WebAIM Color Contrast Checker in either another tab or window. Use ColorZilla and/or Firebug to select text and background colors of the warning callout in the above example and anything else on this site to find out whether or not the contrast is WCAG compliant using the contrast checker. Admittingly, while I believe everything on this site meets the AA conformance level for these guidelines, not eveything meets level AAA.