There are over 2000 WordPress themes available on the WordPress theme repositiry. But only a small number are fully accessible.
Yet the accessibility guidelines available in the WordPress codex aren't hard to follow. And there is a new 'accessibility ready' tag that can be applied to themes that pass the extra accessibility test carried out when themes are reviewed.
This presentation looks at the accessibility part of the WordPress theme review process and describes what needs to be done to help a theme pass the test.
Even if you're not creating themes for the WordPress repository, but just creating them for your own website, or for a client, this presentation could be useful.
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Themes, Plugins and Accessibility
1. Themes, Plugins and Accessibility
Coolfields Consulting www.coolfields.co.uk
@coolfields
Graham Armfield
graham.armfield@coolfields.co.uk
@coolfields
2. A bit about me
2
I’m a…
• Web
Accessibility
Consultant
• WordPress
Developer
Photo by Mike Pead
3. What I’m Going to Cover
• Why accessibility matters
• WP theme review process and the 'accessibility-ready' tag
• Plugins and accessibility
3
4. Why is Accessibility Important?
Coolfields Consulting www.coolfields.co.uk
@coolfields
What all the fuss is about?
5. Why accessibility is important
• More people than you think have disabilities or
impairments
• Populations are growing older
• Those two groups combined have significant spending
power
• There are legal frameworks
• And, morally it’s the right thing to do
5
6. WordPress for everyone?
http://memeburn.com/2013/05/matt-mullenweg-on-how-open-source-is-democratising-the-web/
6
7. Theme reviews and accessibility
Coolfields Consulting www.coolfields.co.uk
@coolfields
11. The 'accessibility-ready' tag
11
'Official' Version (soon to be updated):
http://make.wordpress.org/themes/guidelines/guidelines-accessibility/
Guide for reviewers:
http://make.wordpress.org/accessibility/theme-accessibility-guide-for-reviewers/
12. Why 'accessibility-ready'?
• A website's accessibility is not just down to the theme.
• Admins add plugins…
• Then they let content authors loose on it…
12
13. The 'accessibility-ready' sections:
• Images
• Media
• Headings
• Link text
• Keyboard navigation
• Colour contrast
13
• Skip links
• Forms
• tabindex
• accesskey
• Popups
15. Media
• no auto start without user action
• includes: audio, video, sliders, carousels
15
16. Headings
• semantic elements – not just for presentation
• must use a 'reasonable' html heading structure
• subsections defined by theme must use headings – eg
widget titles, post titles, etc
16
17. Link text
• must supply context
• no bare urls
17
18. Keyboard navigation
• keyboard focus must be visible everywhere
• dropdown menus
• intuitive (tab order)
• tabindex? – use only 0 or -1
• accesskey – do not use
18
23. How many accessible themes?
23
2,751 themes in repository (as at
15th Sep 2014)
7 results for 'accessibility'
and
8 results for 'accessible'
and
13 results for 'accessibility-ready'
24. WordPress has it's critics
24
http://mor10.com/accessibility-ready-tag-required-wordpress-themes/
Simone - http://wordpress.org/themes/simone
25. WordPress has it's critics
25
http://wptavern.com/wordpress-themes-suck-at-accessibility-its-time-to-fix-it
26. An accessible theme author writes…
http://davidakennedy.com/2014/07/08/accessible-wordpress-theme-lessons/
26
28. So what about plugins?
• There is a plugin review process.
• But no mention of accessibility.
• Could there be an accessibility review?
• Should there be?
28
29. Can plugins affect accessibility?
Some examples:
• Slider/carousel plugins
• Lightbox plugins
• Form generator plugins
29
30. Slider/carousel plugin example
30
Can I stop the
slider using the
keyboard?
Buttons or
links?
And do they
label their
purpose?
Can I attach
alternate text to
the images?
31. Lightbox plugin example
31
Can I attach
alternate text to
the large images?
When lightbox
opens, focus
remains on
page below
32. Form plugin example
32
Are these labels
linked to input
fields?
Do screen reader
users get to hear these
error messages?
33. So plugins can affect accessibility
Plugin authors should sensibly follow the theme accessibility
guidelines, to avoid spoiling the accessibility of WordPress
websites.
33
All decorative images MUST be included using CSS. Where theme authors add images to template markup, authors MUSTincorporate an appropriately used alt attribute or the means to provide one. During the audit, a simple alt text decision tree is used to check whether images are using the alt attribute appropriately.
Media resources must NOT auto start or change without user action as a default configuration. This includes resources such as audio, video, or image/content sliders and carousels.
An important addition to this would be to provide a way to stop the slider/video etc.
Be wary of having multiple levels of H1 etc – best to nest them sensibly.
Theme templates should use a reasonable HTML heading structure — including the use of heading elements for page sub-sections. Heading markup must NOT be used for presentational purposes. Heading elements for structure MAY be positioned off-screen as long as this is not at the expense of providing good, visual, structure.
Specifically, sub-sections defined by your theme MUST use heading elements. This includes wrapping your post title in a heading when used in an article context and wrapping widget titles in headings.
Links MUST avoid repetitive non-contextual text strings such as ‘read more…’ and should also also make sense when taken out of context. Bare urls must NOT be used as links. Context-specific text MAY be positioned off-screen.
The core-defined ‘read more’ links fall under this guideline. You can use filters to replace these links. The post title should generally be used in addition to the normal directive text.
Can use hidden text
Theme authors MUST provide visual keyboard focus highlighting in navigation menus and for form fields, submit buttons and text links. Navigation by keyboard should also be intuitive and effective.
Focus – at minimum it should be the same as the hover style, but consider making it more then the browser default.
Dropdown menus must be operable by keyboard
accesskey – can hijack keystrokes from AT
Theme authors MUST ensure that all background/foreground color contrasts for plain content text are within the level AA contrast ratio (4.5:1) specified in the Web Content Accessibility Guidelines (WCAG) 2.0 for color luminosity.
Unless a clearly labelled accessible color scheme is available within the theme, the default settings will be the only color scheme checked. If a theme offers multiple color schemes, only one scheme is required to pass these guidelines.
Tools are available to help with this. See the Paciello Group contrast analyzer.