Web Accessibility testing


(Ted Strauss) #1

While attempting to evangelize Discourse I received this response:

Can you tell me how accessible this platform is? The Discourse web
site, as well, as the developer site, does not seem to have any info
about accessibility standards that I can find, and I see it is
optimized for specific browsers and devices, which is always a bit
problematic in general. While these platforms offer great features,
they often present real problems for people with disabilities,
especially those using assistive technologies…

I know that this topic has been raised before, but I decided to run Discourse through a few online tools for accessibility and will report the outcomes here.


Accessibility audit and shepherd for making improvements
(Ted Strauss) #2

Test #1

AChecker is an open source Web accessibility evaluation tool. It can be used to review the accessibility of Web pages based on a
variety international accessibility guidelines.

Here are the results of this tool using a page from this site as the target. The recommandations are all very straightforward: fill in the label attribute, use em instead of b for bold type, etc. I have not verified how up-to-date or valid the recommendations given by this tool are, and I don’t have any expertise in the accessibility domain.

AChecker - Web Accessibility Checker,version 1.3,AChecker is an open source Web accessibility evaluation tool. It can be used to review the accessibility of Web pages based on a variety international accessibility guidelines.
http://www.atutor.ca/achecker/

2013.07.12 13:42:40
Source URL,http://meta.discourse.org/t/accessibility-assistive-technology-support
Source Title,Accessibility / Assistive technology support? - Discourse Meta

WCAG2-AA,Web Content Accessibility Guidelines (WCAG), Version 2.0, Level AA

Known Problems: 22
Repair,Problem,CSS Code,Image Source
Line 87, Column 14: b (bold) element used.
Repair: Replace your b (bold) elements with em or strong.,<b>Leo Breebaart</b>,,,
Line 96, Column 14: b (bold) element used.
Repair: Replace your b (bold) elements with em or strong.,<b>Michael Brown</b>,,,
Line 107, Column 14: b (bold) element used.
Repair: Replace your b (bold) elements with em or strong.,<b>Nick Caldwell</b>,,,
Line 118, Column 14: b (bold) element used.
Repair: Replace your b (bold) elements with em or strong.,<b>Jeff Atwood</b>,,,
Line 125, Column 14: b (bold) element used.
Repair: Replace your b (bold) elements with em or strong.,<b>Nick Caldwell</b>,,,
Line 136, Column 14: b (bold) element used.
Repair: Replace your b (bold) elements with em or strong.,<b>Sam Saffron</b>,,,
Line 143, Column 14: b (bold) element used.
Repair: Replace your b (bold) elements with em or strong.,<b>Nick Caldwell</b>,,,
Line 150, Column 14: b (bold) element used.
Repair: Replace your b (bold) elements with em or strong.,<b>Nick Caldwell</b>,,,
Line 157, Column 14: b (bold) element used.
Repair: Replace your b (bold) elements with em or strong.,<b>Nick Caldwell</b>,,,
Line 164, Column 15: b (bold) element used.
Repair: Replace your b (bold) elements with em or strong.,<b>Sam Saffron</b>,,,
Line 173, Column 15: b (bold) element used.
Repair: Replace your b (bold) elements with em or strong.,<b>Nick Caldwell</b>,,,
Line 210, Column 15: b (bold) element used.
Repair: Replace your b (bold) elements with em or strong.,<b>Nick Caldwell</b>,,,
Line 217, Column 15: b (bold) element used.
Repair: Replace your b (bold) elements with em or strong.,<b>Sam Saffron</b>,,,
Line 224, Column 15: b (bold) element used.
Repair: Replace your b (bold) elements with em or strong.,<b>Nick Caldwell</b>,,,
Line 228, Column 1: Document has invalid language code.
"Repair: Add a valid 2 letter or 3 letter language code as defined in the ISO 639 specification to the HTML 'lang' attribute. For XHTML, both 'lang' and 'xml:lang' must be set.","<html><body>
<p>Don't think so. OK, so here's the sorry history of my attempts to push my changes. D ...",,,
Line 228, Column 1: Document language not identified.
Repair: For HTML documents add the lang attribute and a valid ISO-639-1 two letter language code to the opening HTML element. For XHTML documents add both the lang and xmllang attributes with a valid ISO-639-1 two letter language code to the opening HTML element.,"<html><body>
<p>Don't think so. OK, so here's the sorry history of my attempts to push my changes. D ...",,,
Line 277, Column 9: Label text is empty.
Repair: Add text to the label element.,"<input name=""username"" type=""text""     id=""signin_username"">",,,
Line 277, Column 9: "input element, type of ""text"", has no text in label."
Repair: Add text to the input element's associated label that describes the purpose or function of the control.,"<input name=""username"" type=""text""     id=""signin_username"">",,,
Line 277, Column 9: "input element, type of ""text"", missing an associated label."
Repair: Add a label element that surrounds the control's label. Set the for attribute on the label element to the same value as the id attribute of the control. And/or add a title attribute to the input element. And/or create a label element that contains the input element.,"<input name=""username"" type=""text""     id=""signin_username"">",,,
Line 278, Column 9: Label text is empty.
Repair: Add text to the label element.,"<input name=""password"" type=""password"" id=""signin_password"">",,,
Line 278, Column 9: "input element, type of ""password"", missing an associated label."
Repair: Add a label element that surrounds the control's label. Set the for attribute on the label element to the same value as the id attribute of the control. And/or add a title attribute to the input element. And/or create a label element that contains the input element.,"<input name=""password"" type=""password"" id=""signin_password"">",,,
Line 278, Column 9: "input element, type of ""password"", has no text in label."
Repair: Add text to the input element's associated label that describes the purpose or function of the control.,"<input name=""password"" type=""password"" id=""signin_password"">",,,

(Ted Strauss) #3

Test #2

Etre.com - Accessibility Check

Worried about the health of your website? Use our
online Accessibility Check to find out how your web page measures up
against common accessibility guidelines.

Testing against same page as before. The amount of information given by this tool makes me suspicious of it’s quality. It says that p tags are not properly nested but won’t show which ones. Not buying it.

Uh-oh! There is 1 problem!
The verdict is in and unfortunately the page you tested does not adhere to the WAI accessibility guidelines we evaluated it against.

There was 1 problem identified on the page you submitted. These issues are broken out by WAI priority in the table below.

Accessibility issues for Accessibility / Assistive technology support? - Discourse Meta by WAI Priority
WAI Priority	No. of accessibility problems
Priority 1 - "must fix"	0 problems
Priority 2 - "should fix"	1 problem
Priority 3 - "may fix"	0 problems
Priority 1 issues must be fixed to provide the most basic level of accessibility.
Priority 2 issues should be fixed to provide the minimum level of accessibility recommended by the EU.
Priority 3 issues may be fixed to maximise accessibility.
So what's wrong?

Here's a taster of the problems we found:

p tags need to be correctly nested and closed
When tags aren't constructed in this manner, pages are interpreted inconsistently by different browsers. This can render content inaccessible on many platforms.

(Ted Strauss) #4

Test #3

Being suspicious of the previous test, I decided to run the page against the w3c’s html validator.

This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc.

Result. (This SO post provides some context.)

Using experimental feature: HTML5 Conformance Checker.

The validator checked your document with an experimental feature: HTML5 Conformance Checker. This feature has been made available for your convenience, but be aware that it may be unreliable, or not perfectly up to date with the latest development of some cutting-edge technologies. If you find any issues with this feature, please report them. Thank you.

Validation Output: 13 Errors
    
 Line 50, Column 135: & did not start a character reference. (& probably should have been escaped as &amp;.)
…03b1fc7f27d44967195e65bc62852.png?s=60&r=pg&d=identicon" property="og:image" /…
✉
 Line 50, Column 140: & did not start a character reference. (& probably should have been escaped as &amp;.)
…03b1fc7f27d44967195e65bc62852.png?s=60&r=pg&d=identicon" property="og:image" />
✉
 Line 51, Column 89: & did not start a character reference. (& probably should have been escaped as &amp;.)
…03b1fc7f27d44967195e65bc62852.png?s=60&r=pg&d=identicon" name="twitter:image" …
✉
 Line 51, Column 94: & did not start a character reference. (& probably should have been escaped as &amp;.)
…3b1fc7f27d44967195e65bc62852.png?s=60&r=pg&d=identicon" name="twitter:image" />
✉
 Line 227, Column 112: Stray doctype.
…3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
✉
 Line 228, Column 6: Stray start tag html.
<html><body>
✉
 Line 228, Column 12: An body start tag seen but an element of the same type was already open.
<html><body>
✉
 Line 260, Column 7: End tag for body seen, but there were unclosed elements.
</body></html>
✉
 Line 226, Column 22: Unclosed element div.
    <div class='post'>
✉
 Line 79, Column 48: Unclosed element div.
        <div id="main-outlet" class="container">
✉
 Line 67, Column 79: Unclosed element noscript.
      <noscript data-path="/t/accessibility-assistive-technology-support/1182">
✉
 Line 66, Column 23: Unclosed element section.
    <section id='main'>
✉
 Line 262, Column 10: Stray end tag div.
    </div>

(Ted Strauss) #5

Test #4

Lynx is the text web browser.

This service allows web authors to see what their pages will look like (sort of) when viewed with Lynx, a text-mode web browser.

The Lynx viewer requires placing a key file on the target web server (to prevent their test tool from being over-used or abuse). So I tested it against my own instance of discourse at odx.io.

Result - Looks great!


(Ted Strauss) #6

Test #5

The AMP Toolbar for Firefox is an extension to Firebug exclusively offered by SSB BART Group. The AMP Toolbar for Firefox allows users to test content directly within Firefox. This results in the ability to test any and all content which can be accessed through Firefox.

The Accessibility Management Platform (AMP) is a web-based platform that provides a scalable, turnkey solution for meeting your Section 508, Americans with Disabilities (ADA) and Web Content Accessibility Guidelines (WCAG) compliance needs. AMP provides the infrastructure to facilitate all aspects of a successful accessibility compliance program.

Results with this toolbar are not easily exportable (accessibility tool? wtf!) The results are along similar lines to test #1. Implemented as firebug plugin it’s actually a pretty impressive tool.


(Ted Strauss) #7

Test #6

VoiceOver for Mac OS X VoiceOver doesn’t just tell you what’s happening, it helps you make things happen. It tells you what’s on your screen, and walks you through actions like selecting a menu option or activating a button using your keyboard or trackpad. VoiceOver gives you complete control of your Mac, with no need to see the screen. And it’s already built in.

I manually tested OS X’s voice over on Discourse and a few other pages, since I had never used it before. The biggest challenge usability-wise is that the tool iterates through page objects via the DOM, so it has to traverse all the buttons and icons on each frame before getting to content. I expect users use a text-only filter, like the one used in test #4, before using text-to-speech. I have no idea how text input and button interaction would work for a blind person, since there are dozens to hundreds of possible interactions on a given Discourse topic.


(Jeff Atwood) #8

Thanks for doing this!

It’s kind of disappointing that so many of these so-called accessibility checkers are basically HTML conformance checkers looking for unclosed tags, deprecated HTML 1.0 <blink> tags, and things like that.

On the other hand, it does make it a lot easier to “fix” these issues. We should pass the official W3C validator always.

Bottom line we should definitely fix test #3, the official W3C validator, first.


(Erlend Sogge Heggen) #9

Very important initiative @trudat! I’ve linkedto the A11Y Project before, but it’s so very relevant that I wanted to make sure you and other accessibility evangelists are aware of it.

They don’t have any automagic going on yet, but they’ve compiled a very handy accessibility checklist for developers as well a testers to run through.

p.s. your topic link at the top appears to be broken because it’s missing the ‘1182’ topic id in the URL.


(Jeff Atwood) #10

Last I checked on the W3C validator we were doing OK.

http://validator.w3.org/

Bear in mind this only checks the “crawler” version of the site, or what Google sees… this is not what regular users will see in their browser, at all.

I am not aware of any validators that load the DOM and evaluate all the JavaScript we send, etc.


(Johan Jatko) #11

Didn’t really look in to how reliable this method is, but im using the Web Developer plugin for Firefox and it allows you to select the generated DOM. Then I pasted it in to the Direct Input part of the w3 validator and removed the noscript part to avoid multiple id’s with the same name.

Result:




As mentioned, this maybe reports incorrect errors due to my method used, but it could be a way to validate the generated DOM.

I suppose <script> placeholders and whatnot might be the cause of some of the errors.


(Erlend Sogge Heggen) #12

Ember has its own a11y addon that we might want to check out.