Accessibility review: meta-ticket

[polyester]

Meta ticket for tasks identified at Tokyo Symposium 2015: we tested together with Max Nakane, developer and highly experienced screenreader user.

Overall considerations

Plone 5 should focus on modern a11y methods, and drop support for outdated ways.

That means the following should be removed:

• "Skip to ..." links
• Access keys (they interfere with the setup users have created for themselves, and are not necessary with proper WAI-Aria roles

If site owners need outdated features like access keys, they are easy to insert back using Diazo. This should be documented.

Specific points.

• Remove all "Skip to ..." links
• Remove all access keys
• Remove "class = hiddenstructure" constructs. They are annoying for screenreader users, and superfluous when the elements themselves are properly marked (update: The hiddenstructure class does the same as sr-only class from bootstrap since Barceloneta which is the right way of doing it. JS also relies in hiddenstructure class being there. So decided not to take action over it.)
• Toolbar: The very first link in the DOM is an image link (to the logo) without a clear label what it does.
• Toolbar: The sub-menus are already expanded for screenreader users. This makes it very cluttered to tab through, and is also not as it appears for sighted users. They should only expand when clicked upon.
• Toolbar: Screenreader loses focus after "State:published" (or any other state)
• FolderContents: Both the 'cog' icon under Actions column head and the 'cog' icon that appears in the 'pathbar' lack a label saying "Actions" (e.g.)
• FolderContents: The "nine litlle squares' icon for "configure displayed columns" lacks a label saying that.
• FolderContents: opening the "Rearrange" button popover, it is not immediately obvious where i the DOM the new content appears. SOLUTION: move the "Rearrange" button to the last place. This also makes more sense in a UI standpoint; rearranging your folder content is an infrequently used option and should be a bit out of the way.
• FolderContents: low-priority. Drag/Drop in 'configure displayed columns' does not work for screenreaders. User considers this not essential for release.
• The accessibilty page http://localhost:8080/Plone/accessibility-info needs a complete re-write
• Documentation we should have a help page for screenreader users on docs.plone.org where some specific choices are explained. Ideally reference this from front page demo content in way visible only for screenreaders.
• minor extra space issue in acronym generation following open parenthesis on /accessibility-info page, e.g. "It meets the Web Content Accessibility Guidelines ( WCAG v2.0) "
• Duplicate IDs when portlets are enabled in both columns

[polyester]

@vangheem @bloodbare actually, these are all very manageable points. Would need to confer with you if they are acceptable, but they all seem like stuff we should be taking onboard and have our accessibility rock.

[davilima6]

Any references on why Skip to links are outdated? Brazilian Gov doesn't know about that yet and their removal would mean a severe loss on the already fragile choosing of Plone as a default CMS down here (a11n, security and productivity are, in order, the key Plone differentiators from competition).

[polyester]

Feedback from screenreader users, mostly. They are an outdated mechanism that nowadays mostly hinders more than it helps.

• the 'skip to' links do not work reliably in most browsers as the focus is not transferred properly. Various solutions involving Javascript/Jquery have been tried to target Webkit/IE/Opera/others, but almost none of them work cross-browser.
• WAI-Aria works reliably in all relevant screenreaders (JAWS, NVDA, VoiceOver/IOS, TalkBack/Android)

Using both of them gives dual navigation for screenreader-users, which means more links to tab through before you get anywhere.

There is no conclusive 'rule to end all rules' here: WCAG 2.0 only says you should "have a mechanism to bypass blocks". http://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-skip

There is one case where skip-links are still useful: not for screenreader users, but for sighted users who prefer to use a keyboard, although there is Aria support via a Firefox plugin. Even then, it would need a discussion on how to implement them: you need browserhacks for IE9, IE10+, Safari and Chrome. And more if your site wants to support IE below 9.

The most robust way is to have both HTML5 and Aria (https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html). If sites still need the outdated 'skip-links', they are of course easy to add back with Diazo. But our current simplistic version of them does nothing to help screenreader users; the only thing it does is maybe tick a few boxes for outdated specifications. They are not needed for WCAG 2.0, and are difficult to maintain properly.

Of course this is open for debate. There is, unfortunately, a tension between actually helping disabled users and complying with outdated specs that governments like to keep around for ages. So it's a debatable call...

Some more links:

• http://terrillthompson.com/blog/161
• http://pivotallabs.com/aria-landmarks-instead-of-skip-nav/
• http://www.w3.org/WAI/GL/wiki/Using_ARIA_landmarks_to_identify_regions_of_a_page#User_Agent_Notes

[davilima6]

Thanks for the write-up!

[polyester]

I would, of course, be very much in favour of having clear documentation on how to add the links back in via Diazo if your jurisdiction requires/wants it, and will write those docs in Arnhem. But it is a bit like maintaining IE6 compatibility ;-)

[davilima6]

As a note to future sprinters, a nice to have would be setting up a11n (headless) automated testing:

• https://github.com/lucalanca/grunt-a11y

As shown in:

• https://www.youtube.com/watch?v=-XUmf_RPF8k#t=14m02s

Also see:

• https://github.com/GoogleChrome/accessibility-developer-tools/tree/master/src/audits

[bloodbare]

Looks like that an audit on plone 5 coredev returns

15 text elements that should have more contrast ratio (most barceloneta errors)
2 Links that their purpose should be clar from the link text
9 elements that are fosucable but not in visibles or accessible

We can solve this small issues on next sprint!

[vangheem]

plone/mockup#522 for folder contents fixes

[tkimnguyen]

@polyester for the /accessibility-info page, I've made this PR in which I removed the access keys info and changed the two mentions of WCAG 1.0 to 2.0. Not sure what to do about the part that says "We have used XHTML 1.0 and CSS". For now hopefully this at least gets the most important fixes done. #675

[polyester]

@tkimnguyen thanks. I'll embellish a bit more, with ATAG 2.0 info and some more links and further explanation.

[sneridagh]

Some summary on the work I did this morning:

• Add aria hidden role to avoid screenreaders to nonesense stop by at the toolbar tiny logo
• The hiddenstructure class does the same as sr-only class from bootstrap since Barceloneta which is the right way of doing it. JS also relies in hiddenstructure class being there. So decided not to take action over it.)
• Remove all references to "accesskeys" attributes on templates

[terapyon]

@polyester I made two PR for Accessibility issues. Please check it.
plone/mockup#635
#1397

[polyester]

I've checked, and they look fine. I'll get on with getting them merged. Thanks, @terapyon

[ale-rt]

I will close this given it seems to me quite a lot of activity was done and @terapyon PRs were merged.
Feel free to open more specific a11y issues if we still identify such issues on Plone 5.2 and Plone 6.0