WebAIM Blog

The Web Content Accessibility Guidelines 2.0 became a W3C Recommendation (code for “finalized specification”) in December 2008. I am proud to have my name listed as a contributor to WCAG 2.0. All of WebAIM’s current clients are working toward WCAG conformance. None of them are seriously considering the antiquated Section 508, the update of which is perpetually stuck in bureaucratic delay tactics.

While WCAG 2.0 has been used to greatly enhance the accessibility of web content, it is not perfect. Its complexity and rather absurd terminologies, while generally necessary, decrease its approachability (and arguably accessibility) for many people. It is difficult to understand, something ironic considering that “Understandable” is a core principle of WCAG itself. WebAIM has provided a simplified WCAG checklist to help authors get started and to aid in evaluation. Accessibility and technology continues to evolve, and accessibility guidelines must evolve with them.

After three years of implementing and explaining WCAG 2.0, we have identified areas of the guidelines that could be improved or clarified. For a number of reasons, we are unable to participate formally in W3C processes, and we are unaware of any current plans for a WCAG 2.1 or a WCAG 3.0, so we present here some possible changes and improvements to WCAG 2.0, and items that we hope might help you better understand and implement optimal accessibility.

Remove the CAPTCHA Exception

Success Criterion (SC) 1.1.1 (Non-text Content) allows an exception for CAPTCHA, as long as it is identified as being a CAPTCHA and “alternative forms of CAPTCHA using output modes for different types of sensory perception are provided.” If a site provides both a graphical and an audio CAPTCHA, it passes. This, however, continues to exclude users that are deaf-blind, not to mention the difficulties that all users have with CAPTCHAs.

CAPTCHA has failed. Automated processes can now bypass it faster and more accurately than actual users. WebAIM clients, even those in the highly secure financial services industry, are abandoning CAPTCHA. WCAG should do the same by removing it as an exception, or perhaps allowing graphical and audio CAPTCHA for Level A conformance but prohibiting all CAPTCHA at Level AA.

Media Guidelines

“Media alternative for text”

Several of WCAG 2.0′s media guidelines include “…except when the media is a media alternative for text and is clearly labeled as such.” This means that text alternatives are not required if the video is an alternative version of the main text content of the same page (for example, a web page with the text of a speech that also presents a video version of that speech). This, however, is often misunderstood to suggest that if a transcript is provided, then captions or audio descriptions are not required. This could perhaps be clarified to indicate that if the main content of the page provides all necessary content of the associated media, then no other requirements (captioning, transcript, etc.) are necessary.

“Alternative for time-based media”

“Alternative for time-based media” is a confusing term for a descriptive transcript – a text transcript of the audio or video that provides all necessary auditory content (such as identifying laughter or an off-screen explosion) and visual content (such as a list of items displayed in the video that are not presented via audio). We simply use “descriptive transcript” instead and have found is much more easily explained and understood. If a user reads the descriptive transcript, they will get all of the necessary content conveyed in the audio or video.

Audio descriptions and transcripts

Synchronized captions are always required for audio/video content at Level A. Additionally, either audio descriptions (auditory presentation of visual content in the video) or a descriptive transcript is required for Level A conformance by Success Criterion (SC) 1.2.3. Either of these meets the needs of users with visual disabilities. If an author provides a descriptive transcript to satisfy SC 1.2.3, then audio descriptions are required in SC 1.2.5 at Level AA. However, if an author provides audio descriptions to satisfy SC 1.2.3, then a descriptive transcript is not required until SC 1.2.8 at Level AAA. This latter case would render the media inaccessible to deaf-blind users at Level AA, because both captions and audio descriptions are inaccessible to these (and many other) users.

This is all compounded by the fact that if the video does not require audio descriptions (meaning all necessary visual content is presented in the audio of the multimedia), then SC 1.2.3 and SC 1.2.5 are satisfied. This means that for such video (e.g., a talking head), the author is not required to provide a descriptive transcript unless they are seeking Level AAA conformance. In other words, if a page contains only audio, it requires a descriptive transcript at Level A. But if you add a talking head video or simply add the audio to some video content, it doesn’t require a descriptive transcript until Level AAA. This surely is a weakness in WCAG 2.0 that should be addressed.

Recommended restructuring

Confusion and limitations of the current guidelines could be addressed by structuring the guidelines as follows based on the media’s characteristics:

• Level A
  • Pre-recorded audio only – provide descriptive transcript.
  • Pre-recorded video only – provide descriptive transcript or audio description.
  • Pre-recorded audio/video:
    • Provide synchronized captions.
    • If visual content is not presented via audio, provide audio description or a descriptive transcript.
• Level AA
  • Pre-recorded audio/video – provide a descriptive transcript.
  • Live audio/video – provide synchronized captions.
• Level AAA
  • Pre-recorded audio/video – provide audio description, if necessary.
  • Pre-recorded audio or audio/video – provide sign language.
  • Live audio – provide synchronized captions.

This structuring would require audio descriptions or a transcript at Level A, but only if they are necessary for blind accessibility. At Level AA, all pre-recorded video would require transcripts. At Level AAA, video would require audio descriptions, if they are necessary due to visual-only content.

It is with great hesitation that I recommend moving audio descriptions to Level AAA (in WCAG 1.0, they were Level A). While they are the primary and preferred mechanism for providing multimedia accessibility to users with visual disabilities, one must balance their significant expense and difficultly to generate and the fact that transcripts provide equivalent content and are also accessible to a much broader audience (e.g., deaf-blind). Because a transcript will already have been generated in order to provide captioning, it seems more logical that the emphasis should be placed on providing a nearly universally accessible descriptive transcript, rather than on providing less usable and more burdensome audio descriptions.

Contrast at Level A

White text on a white background is Level A conformant. No contrast requirements are present until SC 1.4.3 at Level AA. Adding a minimal contrast requirement (perhaps 2:1 and 3:1 for large text) at Level A would help address significant readability issues that could be found on Level A conformant sites.

Decrease the 200% Text Resizing Requirement

Users with significant low vision rarely resize text in a browser. If a user requires text that is twice the default size, page zoom or a dedicated screen enlarger is and must be used. Designing modern web interfaces to support 200% text resizing is very difficult. This Level AA success criterion typically poses the most significant burden to our clients (often more so than captioning). We strongly recommend that the text resizing threshold be reduced to 150%, with perhaps a 200% threshold for Level AAA conformance.

Clarify Images of Text

Success criterion 1.4.5 requires that if the same visual presentation can be made using text alone, an image is not used to present that text. The possibility of highly stylizing text and page elements with CSS (especially CSS3) begs the question of how one defines “same visual presentation”. For example, a graphical button with rounded corners, a background gradient, and text drop-shadow could be recreated with text and CSS3, but it is not clear if this is required to meet this Level AA success criterion.

While using text is always optimal for accessibility (and for other reasons), Level AA conformance should only require that the graphical text be replaced with true text when readily-available font face styling will suffice. In other words, authors should not be required to implement significant text styling to duplicate the graphical text’s presentation. SC 1.4.9 (Level AAA) already prohibits all presentation of text within images.

Specify Mechanisms to Bypass Blocks

A wide variety of “mechanisms” are available to allow users to bypass blocks of repeated content on web pages. This success criterion would be more meaningful and understandable if it required at least two possible mechanisms, such as:

• a “skip” link
• a consistent heading structure (e.g., main content always begins with an <h1>)
• in-page navigation links
• use of landmark roles
• HTML5 structural elements

“Can Be Programmatically Determined”

WCAG 2.0 uses the phrase “can be programmatically determined” extensively. A wonderful article by Jason Kiss explains this term and its use in WCAG. This term refers to relationships that assistive technologies can make between content and/or markup. WCAG defines it to mean that technologies “can extract and present this information to users in different modalities”, whatever that means.

In most cases, when WCAG 2.0 requires that something “can be programmatically determined”, modern technology can actually do so. But not always.

As an example, if an ambiguous “click here” link is preceded by a descriptive heading, this is allowable at Level A by SC 2.4.4 because the meaning of the link “can be programmatically determined” based on the heading structure. The problem, however, is the word “can”. No modern assistive technology actually implements a method whereby the link is automatically made unambiguous because of this structural relationship. In other words “can be programmatically determined” does not mean “IS programmatically determined”.

This creates a situation where WCAG allows or requires something that does not actually result in any better accessibility. It also presents a situation whereby authors can’t know for sure if their content is actually conformant without knowing if assistive technology CAN do something. And which specific technologies or how many of them must do it before “can” means “can”? This is very akin to WCAG 1.0′s very confusing phrase “until user agents…”.

While supporting documentation attempts to clarify this, it remains a confusing aspect of page conformance. This could perhaps be addressed by more specific details at the success criteria or techniques level that reflect actual assistive technology capabilities, rather than simply suggesting that potential support is sufficient.

Require Keyboard Focus Indicators at Level A

A lack of keyboard focus indicators for navigable page elements – SC 2.4.7 (Level AA) – renders a page nearly entirely inaccessible for the large population of sighted keyboard-only users. This is one of the most significant and pervasive accessibility issues currently on the web (see The Plague of Outline:0). There is no reason why this should not be a Level A requirement.

Remove Parsing Requirement

While the intentions are noble, SC 4.1.1 (Level A), which requires that significant coding validation errors be avoided, has little impact on end-user accessibility and is next to impossible to evaluate. The areas in which coding errors impact accessibility are already sufficiently covered by other success criteria (such as proper form labeling, frame titles, table headers, etc.). I can’t think of a single instance where a significant coding issue would impact assistive technology specifically. The parsing requirement should be removed or perhaps changed to require strict validation at Level AAA.

Conclusion

This is not intended to be a criticism of WCAG 2.0. The web is clearly much more accessible because of these guidelines. As future updates to WCAG are considered, and as authors implement these guidelines today, these recommendations might provide some clarity and guidance, with the hope of making the web more accessible for all users. If you have feedback on these recommendations, or have thoughts of your own on WCAG, please comment below.

Karl Groves recently published automated web accessibility test data for many of the Alexa Top 100 web sites. The results paint a rather stark picture of web accessibility. We agree with Karl’s suggestion that while automated testing is not a direct indicator of true accessibility issues, “poor performance in automated testing is strongly correlated with poor performance in manual testing.” Jennison commented that not all errors are created equally, and this is very true, yet the preponderance of automated errors is clearly indicative of serious issues.

The table below outlines errors for the home pages of the Alexa Top 100 US sites (excluding porn, content farm, and advertising sites). The WAVE toolbar was used to calculate errors. Because the WAVE toolbar evaluates content after JavaScript is processed, and because WAVE errors almost universally indicate a significant accessibility issue, the number of errors is generally a good indicator of true end user accessibility issues.

Site Data

Conclusion

Care should be taken in interpreting these results. These data should not be used to cast a sweeping judgement on a site. Home pages are often dissimilar to content pages, though these data generally correlate to Karl’s more extensive analysis. Regardless, the fact that an average of 25 errors per home page are present, and that only 4 of the 100 home pages had 0 errors is rather telling. There is much that still needs to be done to improve web accessibility.

Semantic automation is when user agents, such as browsers and screen readers, create meaning and relationships where the presented meaning and relationships are missing, ambiguous, or incorrect. In short, it’s applying algorithms to try and fix things that are probably broken. It’s computers guessing for good.

In a very simple example, it is Google’s “Did you mean…?” functionality. It’s much of what allows iPhone’s Siri to use loads of data to hopefully figure out what the heck you’re asking it to do.

As an example in the accessibility realm, if a form control does not have an associated label, the JAWS and VoiceOver screen readers will implement algorithms to auto-associate adjacent text to the control. In short, they guess what the label probably is. While this can improve the user experience in many cases, this semantic automation often fails. Even a line break or spanned text can break the current algorithms. And worse, an incorrect label for a control might be read if the layout is complex or different than the norm (such as when labels for checkboxes are placed to the left the checkboxes) .

When computers guess, the results are often not very good. But guessing is usually better than nothing.

Automation and Evaluation

I had switched my primary evaluation platform from JAWS to VoiceOver some time ago because until recently, VoiceOver did not implement semantic automation. It was very literal. If a text box was not properly labeled, it simply identified the presence of the text box, even if there was descriptive text next to it. With the release of iOS5 and Lion, VoiceOver will now auto-associate the adjacent text. When done correctly, this will be very helpful to users, but for evaluation, there’s no way to know if label text is actually associated or if VoiceOver or JAWS is just assuming it should be. And there’s no option to disable this functionality.

This creates a situation where screen reader evaluation and even user testing may not accurately reveal underlying accessibility issues. But this begs the question, if the user agent fixes the issue most of the time, is it really an issue at all?

Automation and Conformance

In order to be compliant with the Web Content Accessibility Guidelines 2.0, you have to implement accessibility. These guidelines don’t address or allow semantic automation. But what if they did? Most of the impactful success criteria could be automated by user agents to some extent:

• 1.1.1 – Alternative text: Image analysis could be performed to determine the content or description of an image.
• 1.2 – Captions and transcripts: Audio recognition could be done to auto-generate a transcript and captions, similar to YouTube’s automatic captioning functionality.
• 1.3.1 – Information and relationships: Headings could be assumed based on text size, length, and location. Form labels could be auto-associated. Table headings could be assumed based on styling and table structure. Lists could be auto-generated when numbers, bullets, sequential items, etc. are used.
• 1.3.2 – Meaningful sequence: The reading and navigation order of content could be based on the visual layout, rather than the underlying markup.
• 1.4.1 – Color, 1.4.3 – Contrast: Browsers could automatically replace colors or increase contrast if they don’t meet certain thresholds.
• 1.4.5 – Images of text: Character recognition could be implemented to replace images of text with true text.
• 2.4.1 – Bypass blocks: A user agent could analyze the document and define navigable page areas based on structure and visual presentation. VoiceOver does this now with auto-webspots.
• 2.4.4 – Link purpose: Screen readers could analyze link context to turn “Click here” into meaningful, descriptive text.
• 3.1.1 and 3.1.2 – Language of Page and Parts: The computer could determine the language of content automatically, or even automatically translate it.

And there’s more. These types of semantic automation would all be very beneficial to users with disabilities, but they will never be as good as authors just doing it right.

Defining the boundaries between what the web page author’s intentions are and what the browser can automatically do for the user is difficult. Should a screen reader automatically perform image analysis on an image that is missing alternative text? Should it do so even though this would present incorrect content much of the time? How would a user know if the screen reader is presenting true page semantics or automated semantics? How can the algorithms be improved to avoid spectacular failures in semantic automation? Etc.

Then Why Bother?

If screen readers automatically and correctly associate form controls for 95% of controls, why bother using label elements? If computers can usually determine table headers or heading structure or video transcripts, etc., then is it worth the effort to do it on my own? Of course the only way to ensure that accessibility is done right, is for authors to do it right. Semantic automation will never be perfect, yet because accessibility is about the human experience, it’s the obligation of the assistive technology to provide the best experience, regardless of the page’s accessibility or lack thereof.

The question is, then, what will ultimately lead to most optimal accessibility? Avoiding semantic automation so that authors are more motivated and required to do it right, or implementing eternally-less-than-perfect semantic automation with the knowledge that authors might never bother to do it right? As with most things in accessibility, the answer is probably somewhere in the middle. What do you think?

This is a continuation of a series of posts about my personal quest to learn more about some common assistive technologies. In my first post, I outlined my experiences with ZoomText. Since then, I have become more familiar with the speech recognition software Dragon NaturallySpeaking (Premium) by Nuance.

Using Dragon

Speech recognition software such as Dragon serves two roles: it converts speech into text and it allows users to navigate through content using spoken commands. It is typically used by individuals with motor disabilities, but may be used by people with other disabilities (e.g., cognitive) or in conjunction with other AT for users with multiple disabilities (e.g., Dragon and JAWS). Speech-to text has little impact on accessible web design, so I will not focus on it in this post. Instead I will look at how Dragon is used to navigate through web content, and what this means for developers.

Design Recommendations

Dragon navigation functions can be divided into keyboard interactions (navigating to links and form controls) and mouse interactions (moving the mouse cursor). Recommendations for each type of interaction are identified below. A few notes/disclaimers first:

• I do not rely on Dragon due to a disability.
• Commands that allow a user to navigate through tabs and windows, search within a page, scroll up and down, etc. have more to do with interaction with the browser than with web content, so they are not addressed below.
• Although Dragon supposedly "supports" Firefox, I had a great deal of difficulty using Dragon in Firefox and ended up relying on Internet Explorer 9 for all of my testing.
• Nuance has also created Guidelines for Speech-Accessible HTML (PDF).

Keyboard Navigation

Links

• Do not disable visible keyboard focus indicators (by default, a dashed line around focused links). Users may navigate through links and form controls by saying "Tab", but it is very difficult for the user to access these links if they cannot see which of the links currently has focus.
• Ensure that the visual order and tab order of content is the same – typically navigation first, then left to right, top to bottom.
• If the link is an image, alternative text should match the text in the image. For example, if an image displays the word "Continue" visually, the user will probably say, "Link continue" to activate the link. If the alternative text does not match the text that appears visually the link will not be activated.
• Use unique link text, when appropriate, especially if the links go to different pages. While the user can select from multiple links that contain the same text, it requires an additional step and may be more confusing for some users.
• Avoid starting links with generic text like "click here", "read more", "learn more", "link to", etc.

Forms

• Use form labels. A user can navigate to a specific form control by saying the label name (e.g., "click First Name"). This process becomes much more difficult if labels are absent. If form labels are not correctly associated to their controls, Dragon will try to guess the correct label based on proximity, with varying success.
• Use the appropriate form control. Users can navigate to form controls based on the control type. A user may try to submit a form by saying "click button", but if the button is not a true button or is an image that uses JavaScript to submit a form, nothing will happen and the user will have to find a different way to submit the form.

Mouse Navigation

Dragon can also emulate mouse interaction. While there are several commands that allow you to do this, my favorite was the MouseGrid. Upon saying the words "MouseGrid", a 3 X 3 grid appears on the screen, with each region given a number from 1 to 9. The user says the number closest to the link that needs to be activated with a mouse, which will cause another 3 X 3 grid to appear. The user continues this process until the grid is small enough that the user can click on a mouse-dependent element on the page, such as an image that uses JavaScript to submit a form, like a button. For example, to return to the homepage on this page (by clicking on the logo), a user would say something like "MouseGrid, 1 [moving the mouse to the upper left corner], 5 [moving the cursor to the center of this area], click". MouseGrid can also be used to quickly navigate to a link that cannot be activated using the link text, such as a linked image with no alternative text.

I found that being able to replicate a mouse click was very handy, but it was a very time consuming process and had limitations.

• Avoid content that requires hovering with a mouse (e.g., dropdown menus). They may be difficult or impossible to access.
• Make clickable items sufficiently large. A small clickable target, such as a tiny radio button or image, may be very difficult to access with the MouseGrid. If checkboxes and radio buttons are properly labeled, the user can speak or click on the label, not just the control itself.
• Make sure clickable items look clickable. It was frustrating to activate something with my cursor only to discover that it could not be clicked on.

Shortcomings of Dragon

Although Dragon is a very capable program, I found a couple issues that made using Dragon much more difficult:

• It appears that Dragon recognizes the title attribute on all links and form controls, including images with alternative text and form controls with labels. This can sometimes be frustrating, especially if multiple elements have duplicate title values. Dragon should approach this issue the same way it is approached by many assistive technologies—only use the title attribute if there is no alternative text or label present. This is another reason that the title attribute should be used sparingly.
• When navigating very large pages, Dragon sometimes displays the following message: "Voice commands were not generated for some links; too many links on page". This is because dragon only analyzes the first 200 links and form controls on the page. Links beyond this limit are not accessible by speaking the link text, but they are still accessible through MouseGrid. Form controls beyond this limit cannot receive dictated text, a much more significant issue. While Nuance offers instructions on how to increase this limit (PDF), I would guess that very few Dragon users know this. It may be impossible to account for this limit on very complex pages, but the problem can sometimes be addressed by removing redundant links, or by combining duplicate links (e.g., a product image and the adjacent text description) into a single link.

Is testing with Dragon Necessary?

The question of whether testing with Dragon should be part of developer testing is a difficult one. While we at WebAIM will probably use Dragon for testing of mission-critical pages in larger evaluations, it is not practical to expect most developers to test with Dragon. The reality is that the cost of Dragon Premium can be high (close to $200), and the purchase of a high-quality headset is usually necessary as well. Training Dragon can also be time consuming, though this is less important if you are not using Dragon for dictation.

While it is important to consider the needs of users who rely on speech recognition software, these needs can probably be addressed without actually testing with Dragon. Almost all of the principles identified above can be detected with WAVE or through basic keyboard testing. If you are interested in trying speech recognition without purchasing Dragon, less feature-rich speech recognition software is built into the Windows and Mac operating systems.

Next Up: Contrast

Next I will explore the high contrast options within the operating system. This should be much simpler than learning ZoomText or Dragon. Look for a write-up soon.

When people ask us about accessibility user testing, we usually say, “Don’t do it.” Instead, usability testing with users with disabilities is almost always more effective.

Rocket Surgery Made Easy

I spoke at the Plain Talk conference last week where I heard presentations on usability testing from Steve Krug and Nicole Burton. Steve’s book, Rocket Surgery Made Easy, proposes a basic approach to usability testing wherein frequent (probably monthly), simple usability evaluation sessions are conducted with three average users. A facilitator asks questions and presents tasks to help the user identify the few most significant usability issues, which are then (hopefully) fixed before the next test session.

The power of the Rocket Surgery approach to usability testing is that it focuses on the broad user experience. Accessibility user testing typically does just the opposite. It is used to identify instances of inaccessibility – poor alt text here and a missing label there. Fixing all significant instances of inaccessibility and non-compliance still might result in a poor experience for users with disabilities – something often a result of the entire site content/interaction or a combination of many small issues, rather than glaring WCAG failures.

When users with disabilities are involved in effective usability testing, such as the basic, low-cost approach Steve recommends, they will help address the overall accessibility and usability of a site, and will still be able to identify specific accessibility issues.

Gotchas

While general user testing can be conducted very early in the design process, accessibility testing will likely work better on a site where some accessibility has already been implemented – certainly any WAVE errors addressed, a WCAG checklist reviewed, etc. A usability testing session with a screen reader user, for example, might be very short and ineffective when you realize that your fancy, yet totally inaccessible interface results in no content being read. A lesson learned, for sure, but nothing as valuable as having this user describe their screen reader interactions on a more polished site.

Be careful – while people with disabilities are good at finding accessibility issues, if something is inaccessible, they might not be able to identify it because it’s inaccessible. Unlike usability issues, accessibility issues are often caused by underlying markup or compatibility issues, making them more difficult to identify. You’ll probably want someone versed in accessibility and assistive technology to monitor or facilitate the usability session.

You’ll usually want the users to use their own computer systems, particularly if they are using assistive technology. Recording and monitoring the session will still be possible – even if the user is remotely located.

Should I Stop Doing Accessibility User Testing?

Steve notes in his book, “There’s no question: a good usability professional will be able to do a better job of testing than you will.” This also applies to accessibility. WebAIM, and other experts, are very good at this type of thing. Accessibility and usability testing are both vital, regardless of who does it or how it’s done. If you want to conduct the testing yourself, a low-budget, easy to facilitate, highly effective usability test that includes individuals with disabilities will result in more useful feedback and a more accessible web site than conducting distinct accessibility user testing.