Out of the box, Plone's accessibility compliance is outstanding, especially Plone 5. However when building a real site things can go wrong - in the theme, in add-ons, and in customizations. In this talk I'll describe the things that went wrong on a highly customized academic Plone site, which were discovered by an institutional audit. I'll describe the types of errors that were found, how common they were and how difficult to fix. I'll provide guidance on what to look out for when developing a new site. And I'll give my wishlist of Plone accessibility improvements.

1. Plone Accessibility
Sally Kleinfeldt, Jazkarta

2. Disclaimer

3. a11yWhat Is It?

4. Theme

5. Landmarks

6. Media
<div class="ExhibitObjectImage">
<img src="http://isaw.nyu.edu/exhibitions/....."
alt="Whatever the editor put in the
'alt text' field on the content item"
width="768" height="603">
</div>

7. Text

8. W3C WAI
WCAG
ATAG
HTML5
WAI-ARIA

9. ?Why Do It

12. Out of the Box

13. Plone 4.3: Mostly WCAG 2.0, ARIA
Plone 5: WCAG 2.0,ARIA,ATAG 2.0

14. In Real Life

15. ISAW
• Center for research and graduate studies at NYU
• Plone site since 2011
• Redesigned and upgraded to 4.3 2016
• Institutional audit 2018
• Now fixing identified problems

16. Design: 9 Issues
• 6: color, contrast, opacity
• 2: design of slider
• 1: lack of explicit submit option on filtering

17. HTML: 7 Issues
• 3: code for mobile nav and search
• 1: bad header markup
• 1: "view more" link should have been a button
• 1: inappropriate header levels (h1, h2 etc.)
• 1: invisible advanced search not hidden from
screen readers

18. Customizations: 9
Issues
• 3: redundant/adjacent links on custom views
• 3: bad markup on custom content types
• 2: missing image alt text that should have
been filled programmatically
• 1: non-H1 page titles on news and events
pages

19. Plone 4.3: 19 Issues
• 12: missing landmarks
• 3: missing search and other form labels
• 1: ambiguous column headings in calendar
portlet (M,T,W...)
• 1: bad nav markup
• 1: bad main template markup
• 1: missing page language

20. Plone: 13 Issues
• 5: including title attributes on links and images
• 4: missing alt text fields on lead images
• 3: missing empty alt text attributes required
to suppress screen readers
• 1: using metadata for an image added in rich
text for its alt text, instead of providing for
contextual alt text

21. Add-ons: 2 Issues
• 1: ftw.calendar presentation/function
disconnect
• 1: ftw.calendar options need to be buttons

22. Third Party Widgets:
3 Issues
• 1:AddThis
• 1:Voyant Tools word cloud
• 1: Bobcat (NYU library search)

23. Content: 5 Issues
• 4: missing alt text
• 1 redundant adjacent links

24. a11yRecommendations

25. a11y
Image Alt Text
• Should describe image in page context
• Should be null for decorative image
• Image title, description, filename probably not
right
• Provide a way to enter for images in rich text
and lead images

26. a11y
Image & Link
Title Attributes
• Screen readers ignore them
• Annoying in tool tips, annoying when
overloaded for SEO
• Remove entirely, never have a blank one

27. a11y
Use Buttons for Actions
• Don't use links
• Was common in HTML4, commonly used still
• Needs to change

28. a11y
Modal Dialogs
• Mobile menus, toolbar
• Progressive enhancement not fully accessible,
uses links for actions
• Need to handle focus, keyboard navigation
and entry
• Good model: www.w3.org/WAI/GL/wiki/
Using_ARIA_role%3Ddialog_to_implement_
a_modal_dialog_box

29. a11y
For Editors
• Page checking: Integrate accessibility checker
into editing process
• Site checking:Add accessibility control panel
to review overall state of the site

30. a11y
For Designers
• Should run tools to check contrast and check
for accessibility problems directly on their
HTML mockups

31. a11y
For Developers
• Run checkers nightly on staging sites to catch
problems

32. a11y
Add-ons
• Can bring accessibility problems
• Raise awareness and provide feedback

33. a11y
Testing
• Make accessibility compliance checking part
of Travis?

34. a11yQuestions, Discussion