WebAIM Blog

Screen Reader User Survey #4

Jared Smith — Mon, 30 Apr 2012 21:43:54 +0000

The fourth WebAIM screen reader user survey is now available at http://webaim.org/projects/screenreadersurvey4/. The survey results provide invaluable data for web developers, disability advocates, and standards bodies. Please take the survey and spread the word.

You can view the results of our previous surveys at:

Accessibility Certification: The Devil is in the Details

Cyndi Rowland — Tue, 27 Mar 2012 21:57:00 +0000

This past month WebAIM staff had an opportunity to attend CSUN 2012. As always, CSUN was a great opportunity to see what others are doing, share what we’ve been up to, and connect with good friends in the accessibility world. Prior to the conference, the Assistive Technology Industry Association (ATIA) hosted an all-day meeting to discuss the establishment of a society of accessibility professionals. As part of this meeting, I was asked to participate on a panel to discuss whether creating professional certification in accessibility would provide a solution or create a bigger problem in the field. The meeting itself, along with its focus, created quite a lot of discussion beforehand (e.g., Knowbility’s blog being only one of them) and afterward (What does it take to call yourself an accessibility expert? and Is there a need for a professional accessibility society?). We are all better for engaging in substantive discussions that impact accessibility outcomes.

Chicken and Egg Market Dilemma

We are currently in a chicken-and-egg market dilemma with respect to accessibility needs and professional skills. On the one hand we have employers saying that there are insufficient numbers of professionals in accessibility available for them to hire. Employers consider this a failure of training and contend that they should not be penalized for this reality or be required to hire people that simply don’t exist. Thus they don’t “require” accessibility skills upon hiring. Because of this, there is not a market requiring those skills.

On the other hand, there have been attempts to provide the field with training programs that produce accessibility professionals even when it is not apparent that there is a market for them. Many colleges and universities, both in the US and abroad, have created preservice training programs over the years with accessibility as a focal point. The programs are almost impossible to sustain over time as they are viewed as serving a small niche that is not valued (read: “required”) by employers, and have only a few students take advantage of the opportunity.

Thus the cycle continues with employers looking to the outputs of training programs and training programs looking to the needs and requirements of employers.

WebAIM’s Perspective

WebAIM is one of many groups who have had internal discussions for years on the merits and challenges inherent in professional certification. If it were an easy thing to accomplish I think we would have done so long ago. We do believe that the concept of accessibility certification would be a helpful way to ensure quality professional practice in the workforce. With that said, we also feel that there are at least six critical issues that need to be addressed before a professional certification would be valuable within the field. Each issue is briefly summarized below. As you can imagine, for us the devil is in the details.

Issue number one

It is critical that certification is intended for professionals from all sectors. Examples would include those from industry, government, commerce, education, NGO groups, and health care. If certification were to be customized to any small segment, it would lose the importance of broad applicability. Any employer should be able to turn to this certification as proof of skill level, and not skill level customized for the needs of a narrow constituency.

While most would agree with this premise, it comes into play as other issues are addressed, for example, when talking about funding a system of professional certification. While those in industry may have membership fees paid by their employer, such a practice is not allowable in education and most NGO’s. If the membership fee is a couple of hundred dollars a year this may be a non-issue, however, what could be the effect if it were $600 a year or more? I would predict that over time this organization would contain greater numbers of members from industry. If this were to happen what would be the impact to cross-sector applicability over time as the membership demands greater customization to their unique interests?

Issue number two

The certification that results from this effort must be based on an individual’s performance and not on attendance or completion of any training or education experience. While most would agree with this, we must consider plans for how performance-based appraisal would occur. For example, where do these activities take place? It is unlikely that a professional member group would host site-based testing opportunities all across the globe. Moreover the personnel seeking certification would likely expect asynchronous online testing to obtain certification. Yet such testing creates the very context that continues to rock the distance-education world. Namely, e-verification of the person who is taking the test or completing the tasks. To the extent that potential employers require certification – a desired goal to be sure – pressures may exist that could lead to practices antithetical to the verification of individual professional skills.

Issue number three

While we are talking about performance-based testing, there are several issues that affect quality testing as the basis for certification. Let us be clear, if this certification is used as any part of employment decisions, it must be rock solid; we would want it so even if not used in employment. Whatever is developed must contain the highest levels of both internal and external validity. Those not familiar with creating valid, robust testing items probably should not do so. Central to a quality test is a quality-testing standard. Stakeholders representing divergent sectors should create the specific testing standard and individuals with disabilities must be part of this group. Now don’t get me wrong, when I talk about testing standards my starting point is WCAG 2.0, as the international standard. However with that said, exactly what is being tested? What is the scope, depth, and diversity of this performance-based measure?

Here are examples of what I mean: Would we ask an individual to identify accessibility issues, repair an issue given to them, or create content free of issues? Since each of these requires a different level of skill we need to know what we want; With form labels mapping to 6 different success criteria within WCAG 2.0, which is tested? Or is each tested in some redundant fashion? Would we judge the use of ARIA for labeling to be OK if they could have used HTML?

As you can see, a great deal of thought must be brought to the specifics of the testing standards. We cannot afford to be reductionists, stating that we’ll test for WCAG 2.0. It is much more complicated than that.

We also think it vital that these testing standards are continuously developed as our understanding and use of technologies expand over time. Moreover, we feel strongly that any resulting testing specification would be publically available, at no cost. This is important so that preparation for certification could come from many sources, including the ability for an individual to prepare him or herself if they so choose. Public availability of the testing standards would also provide the opportunity for continuous feedback into the system and keep it relevant to the needs of professionals.

Issue number four

We feel that for accessibility certification to be taken seriously it needs to be operated by an existing respected independent professional organization and insured to do so. Any group with suspect motives, or one that springs up just to take on this initiative, would probably not get the needed participation or collaboration from those currently in the field. This group then needs to figure out who is evaluating the tests that come in from those seeking certification. Clearly, the personnel used to judge performance must, themselves, be beyond reproach in the field. Moreover, legal challenges to the operation of testing and certification are likely to follow as they have in just about every other professional certificate; this makes sense in the context of certification as a gate-keeper for some employment opportunities.

Issue number five

Costs need to be reasonable to attain, and maintain, certification. Everyone in this discussion agrees that there should be an initial certification with professional paths that would allow for continuation of certification in regular cycles. In other words, this should not be a one-shot deal. However, I have not heard anyone talk about the costs of doing this – both for the person who receives certification and the group who does the work to offer it. This will be important as cycles of continued certification are defined; for example, if you must pay to recertify every two years versus every five.

Issue number six

Finally, WebAIM believes that this certification process must be a living entity. Technologies and techniques change what it is that a professional does to ensure accessibility. The testing standards and the certification(s) themselves must reflect this fluidity. Failure to create a mechanism for continuous updates, or changes, to certification would be its ultimate death as the certificate would quickly be out of touch with what is needed in the field. With that said, would this require new performance-based testing or evidence of education on the matter, and in what cycles (e.g., 6 months, yearly)? Depending on the profession you choose to look at you’ll see different mechanisms. While many educators retain licensure by working in the field and obtaining continuing education credits, physicians who wish to use new surgical procedures must not only be trained, but undergo a practice-based evaluation. I suspect that some areas of the field are more like educators and others are more like surgeons.

Conclusion

WebAIM will continue to discuss these, and other, issues that pertain to professional certification in web accessibility, as they are important to the field. We invite you to make comments below. It is our hope that over the coming years, each issue will be resolved and we can all begin the work to help establish certification of professional skills in web accessibility.

Assistive Technology Experiment: High Contrast

Jon Whiting — Fri, 24 Feb 2012 18:30:41 +0000

Several months ago I decided to spend some time using a few common, but often overlooked, assistive technologies and then report on my experiences and insights. The first two posts of this series presented my recommendations on designing for users of ZoomText and Dragon NaturallySpeaking. As the final part of this series, I will cover the High Contrast options in Windows 7.

High Contrast "Themes" and Design Considerations

High contrast settings benefit users with low vision or other visual disabilities. The "High Contrast Themes" present in Windows change or invert web page background and text colors. To enable High Contrast in Windows 7, select the Start menu (Windows Key), enter "Contrast" in the search field, and select "Turn High Contrast on or off".

Transparent backgrounds

GIF and PNG images are commonly used on the web where a transparent background is necessary. This allows the image to be used where the background color may change, or may be a pattern or gradient. Unfortunately, these images are often used in a way that makes them unreadable when the background color is inverted or changed. An example of this issue can, unfortunately, be found on the current version of our own site. At the bottom of this page is a section that displays the logos for the Center for Persons with Disabilities and Utah State University (where WebAIM is housed). These logos are both GIFs with transparent backgrounds. While these logos are readable on the default white background, they become much less readable when the background of this page is changed to black, as shown below:

Contrast this with our own logo, which maintains readability:

The WebAIM oval has a white background, but the edges are transparent. The image blends into the background, yet remains readable in High Contrast Mode. A similar technique should be used on other images with transparent background – an opaque background should be applied to essential content, especially text.

Font and background color

Relying on color alone to convey meaning is typically avoided because it can make content inaccessible to users who have color blindness, as well as users who are blind. While this accessibility principle is well known, there are also times when color can be used in a way that may only present problems to users who rely on high contrast. For example, the following image is a screenshot of two headings, an

and
. The
contains 15pt white text on a green background and the
contains 14pt green text on a white background:

This is accessible to an individual who is blind, because a true heading structure is used, and to someone who is colorblind or has low vision because the colors and contrast are distinctive. But if you view this image in High Contrast Mode, the differences between the headings becomes much less clear:

While there is a slight difference in text size (which is not always the case when this technique is used), it is still very difficult to distinguish heading levels, especially if headings are separated by large amounts of text. In a case like this, the headings could be further differentiated by using indentation (like we do on the WebAIM site), style differences (e.g., font face, bold, italics), and a greater difference in font size.

CSS Background Images

CSS Background images are often used on websites in place of true images, especially for small icons or for elements that are repeated throughout the page. These images are typically hidden in High Contrast Mode. The good news is that this means that decorative background images will usually be hidden, simplifying the visual layout of the page and potentially enhancing accessibility. The bad news is that CSS images, including CSS sprites, that convey meaning will usually be completely invisible. There are several resources online that describe this issue in greater detail and provide recommendations for workarounds. Todd Kloots of Yahoo has written a great article titled Techniques for High-Contrast-Friendly Icons that includes links to several other resources on this topic.

Is High Contrast Testing Necessary?

I highly recommend testing web content in Windows High Contrast Mode. There is no special software to purchase (assuming you have access to the Windows operating system) and almost no learning curve, and It helps uncover accessibility issues that cannot easily be uncovered in another way. Testing with Windows High Contrast is especially important if you are using non-decorative CSS images.

High Contrast Modes differ by program and operating system. On Mac OSX, the High Contrast settings invert all the colors on the screen, including images. This same thing occurs in Windows when colors are inverted using the Magnifier program, or when using a screen magnifier such as ZoomText. It may be worthwhile to test your pages using a variety of programs or operating systems.

Rediscovering the Importance of True Text

I want to highlight the importance of using true text over graphical text when possible. This was reinforced as I used ZoomText, Dragon, and now High Contrast Mode. This has been part of accessibility recommendations for years, and is included in WCAG 2.0 Level AA and AAA specifications. But it seems that the focus of this recommendation is often limited to the reduced readability of graphical text, especially as it is enlarged – something that is less significant due to the ability of modern browsers to enlarge images much more clearly. This is still an important reason to use true text rather than text in graphics, but there are ways graphical text can impact users with various disabilities. A few examples are listed below:

Some users with cognitive disabilities might find content more readable in a certain font, text size, or color combination. I have met users with cognitive disabilities who prefer to read content with as few images as possible or with body text set to a certain line length. Graphical text cannot readily be modified to the user’s preferred presentation.

Users with a variety of disabilities benefit from having content read aloud. The presence of an image is often identified by these readers. While this can be helpful in some instances, it can be confusing or distracting if a page has an excessive number of unnecessary images with alternative text.

The use of true text ensures that there will not be an alternative text mismatch. The dangers of missing or incorrect alternative text are well known, usually because of the problems they pose for screen reader users. While using Dragon NaturallySpeaking, I also discovered that if alternative text did not match the graphical text (this was vert common), it was difficult to quickly navigate to an image link or button.

True text has the potential to be more readable on various devices, such as phones and tablets. It scales and wraps better, and file size is typically smaller. It can also be translated into other languages more easily. While these are not just accessibility issues, they are still an important part of the overall user experience.

I am not recommending that graphical text be eliminated. There are many instances where images are still the best choice, or where limited CSS support makes the use of true text unrealistic. However, the use of true text has numerous accessibility benefits and should be implemented as often as possible.

WCAG Next

Jared Smith — Tue, 31 Jan 2012 22:55:59 +0000

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 only 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. WebAIM has provided a simplified WCAG checklist to help authors get started and to aid in evaluation of HTML documents. 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.

UPDATE – 4/27/12

It was pointed out to me that browser zoom is allowable to meet the requirements of this success criteria. This seems very contrary to the normative text which says that “text can be resized…” In short, it’s pretty much impossible to fail this success criteria for HTML content because all major browsers provide adequate zoom functionality. I believe this is a severe deficiency in WCAG 2.0. We know that many users prefer text sizing over page zooming. This adds credence to my recommendation above for a 150% true text resizing requirement.

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
)
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.

Alexa 100 Accessibility Errors

Jared Smith — Tue, 06 Dec 2011 21:34:49 +0000

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

Site Name	# of Errors
slickdeals.net	306
foxnews.com	220
nfl.com	107
usatoday.com	105
homedepot.com	90
cnn.com	89
latimes.com	67
answers.com	61
nytimes.com	58
capitalone.com	55
chase.com	51
kohls.com	51
hulu.com	50
go.com	44
pandora.com	44
washingtonpost.com	43
rr.com	39
coupons.com	35
swagbucks.com	33
att.com	30
toysrus.com	30
tmz.com	30
walmart.com	29
barnesandnoble.com	29
weather.com	28
constantcontact.com	28
about.com	26
match.com	26
flickr.com	25
reddit.com	24
ups.com	24
fedex.com	23
gap.com	22
salesforce.com	22
dailymail.co.uk	22
bbc.co.uk	21
drudgereport.com	21
imdb.com	20
cnet.com	20
imgur.com	19
foxsports.com	19
linkedin.com	18
espn.com	18
photobucket.com	18
cbssports.com	17
pof.com	17
godaddy.com	16
warriorforum.com	16
wsj.com	16
aol.com	15
sears.com	15
allrecipes.com	15
ebay.com	12
target.com	12
microsoft.com	11
ask.com	11
groupon.com	11
tumblr.com	10
myspace.com	10
yahoo.com	9
huffingtonpost.com	9
reference.com	9
facebook.com	8
youtube.com	8
wordpress.com	8
shopathome.com	8
google.com	6
amazon.com	6
bestbuy.com	6
newegg.com	6
stumbleupon.com	6
twitter.com	5
live.com	5
msn.com	5
usps.com	5
americanexpress.com	4
paypal.com	3
yelp.com	3
vimeo.com	3
craigslist.org	2
comcast.net	2
wellsfargo.com	2
pinterest.com	2
adobe.com	2
macys.com	2
verizonwireless.com	2
thepiratebay.org	2
indeed.com	2
wikipedia.org	1
netflix.com	1
bankofamerica.com	1
etsy.com	1
ehow.com	1
wordpress.org	1
jcpenney.com	1
mywebsearch.com	1
blogspot.com	0
bing.com	0
apple.com	0
pch.com	0

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

Jared Smith — Fri, 04 Nov 2011 18:14:32 +0000

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?

Assistive Technology Experiment: Dragon NaturallySpeaking

Jon Whiting — Fri, 28 Oct 2011 20:30:17 +0000

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.

Rocket Surgery and Accessibility User Testing

Jared Smith — Mon, 26 Sep 2011 23:10:16 +0000

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.

Infographic: Web Accessibility for Designers

Jon Whiting — Tue, 30 Aug 2011 17:46:05 +0000

The focus of web accessibility is often on web development – the things that happen in HTML, CSS, or JavaScript after a site has been designed visually. Optimal accessibility should start much earlier, as part of the visual design process. We have created an infographic that highlights a few important principles of accessible design. Select the image to view the full infographic and text version.

Web Accessibility and SEO

Jared Smith — Fri, 29 Jul 2011 03:16:45 +0000

What is the value of finding content if the user experience and accessibility of that content is poor?

Does it matter how accessible content is, if nobody ever finds it?

Web accessibility and search engine optimization (SEO) are both about getting relevant content to users. Accessible content and search engine optimized content are both machine readable. Search engines and assistive technologies (such as screen readers) are quite similar. In many ways, search engines are deaf, blind, use only a keyboard, and have limited technical abilities. Both rely on content structure, semantics, and functionality to either present content to users or determine the relevance of content.

Accessibility and SEO Magic

SEO has always had an element of what I call “voodoo magic”. It involves guessing or deducing what algorithms a search engine might use to determine the relevance of certain content, then implementing content strategies that best utilize those supposed algorithms. Fortunately, web accessibility has more straightforward guidelines – though a fair amount of voodoo magic is still required to get content to actually work correctly across browsers and assistive technologies. Occasionally the recommendations of SEO “experts” and accessibility “experts” have been at odds; implementing a tactic for SEO would be detrimental to accessibility, or vice versa.

In the 10 years I have been working in the web accessibility field, I have seen SEO and accessibility align more closely. There is now significant overlap between these two fields. Interestingly, SEO has lost most of its “black hat” techniques and has evolved to align more with accessibility, which has changed very little. This, I suppose, provides some validation to long-standing accessibility principles and their intent on making the web a better place for everyone.

Keyword stuffing – using keywords in portions of the page that would not typically be noticed by most users (such as alternative text or title attributes values), but that would be identified by search engines – is a good example of “black hat” SEO. This ‘hidden’ content often isn’t – it may be read or made available to users with disabilities resulting in confusion and poor accessibility. Fortunately, search engines have progressed and now penalize such tactics. SEO, like accessibility, now advocates proper, descriptive alternative text and advisory title attributes that are accurately descriptive of their related content. These are used by search engines to help determine the content of images.

SEO and Accessibility Alignment

The list of accessibility and SEO practices that are closely in alignment include:

Using proper alternative text for images
Providing a clear and proper heading structure and avoiding empty headings
Providing descriptive link text (i.e., avoiding “click here”)
Ensuring page titles are descriptive, yet succinct
Not relying on JavaScript for things that don’t need it
Avoiding mouse dependent interaction
Using standard web formats when possible
Providing transcripts and captions for video
Identifying the language of pages and page content
Allowing multiple ways of finding content (e.g., search, a site map, table of contents, clear navigation, etc.)
Using text instead of images when possible
Providing useful links to related and relevant resources
Ensuring URLs are human readable and logical
Presenting a clear and consistent navigation and page structure
Avoiding CSS and other stylistic markup to present content or meaning
Defining abbreviations and acronyms

Of course content is king, in both accessibility and SEO.

HTML5, Accessibility, and SEO

HTML5 provides the following improved semantics that will increase both accessibility and search engine accuracy:

and
for associating images and descriptive text.
,
,
,
, and
for better identifying significant page areas. ARIA provides even enhanced functionality here (especially in the notably missing identification of page main content).
and
for associating related content.
Associated elements with and .
Microformats, RDFa, microelements, and many similar features can provide useful metadata and functionality.

I believe that HTML5 will further bring SEO and web accessibility into alignment.

Off-screen Content

SEO advocates often have concern over the accessibility technique of using CSS to hide content off-screen. This technique allows useful content to be presented to screen reader users. This should, of course, be used sparingly and only in cases where the content makes sense visually, but additional content may be necessary for users that cannot see the visual presentation. While keyword stuffing in hidden content was once part of the “voodoo magic” of SEO, it is now verboten. Search engines can inflict harsh ranking punishments on pages that are found to be using deceptive or malicious tactics.

Despite these concerns, rest assured that the proper use of off-screen content will not impact search engine rankings. We have received confirmation (unofficial, of course) from Google that such practices are perfectly acceptable, so long as they are not deceptive or malicious. Perhaps the strongest indication that this is true is that the first link on the Google.com homepage is hidden using the off-screen technique WebAIM has always advocated.

SEO + Accessibility = Win!

There is much evidence that suggests that accessibility not only supports high search engine rankings, but that Google may actually favor pages that have strong implementations of accessibility. This is, of course, difficult to prove. I do know that the WebAIM site, which we have tried to keep highly accessible, has certainly been highly favored in search engines for accessibility related terms despite implementing very few SEO-specific techniques.

Good accessibility and good search engine optimization is a great combination for content authors and end users.