Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Coolfields Consulting www.coolfields.co.uk
@coolfields
So, how do I know if my
WordPress website is accessible?
Slides at:...
A bit about me
2
I’m a…
• Web
Accessibility
Consultant
• WordPress
Developer Photo by Mike Pead
@coolfields
What I’m going to cover
Web Content Accessibility Guidelines
(Version 2) published by the
Web Accessibility Initiative of ...
What I’m going to cover
So instead, how about a simple yes/no
checklist?
Easy to check – with free tools
@coolfields
Health warning
In time available I can only cover some
common accessibility issues.
But, if you can answer these questions...
Coolfields Consulting www.coolfields.co.uk
@coolfields
Keyboard Interaction
Keyboard interaction
You need to answer Yes to these:
1) Can I easily access all parts of the site
with the keyboard only?...
Keyboard interaction
8
Hover
states
Keyboard
focus
Keyboard interaction
9
Keyboard interaction
CSS
a:hover {background:#fff, color:#000}
a:hover, a:focus {background:#fff, color:#000}
Don't do thi...
Keyboard interaction
11@coolfields
Using twenty fourteen theme
Keyboard interaction
12
You need to answer Yes to these:
3) Can I easily access all functionality with
the keyboard only?
...
Keyboard interaction
13
Img of Lightbox
When lightbox
opens, focus
remains on
page below
Coolfields Consulting www.coolfields.co.uk
@coolfields
Photo:
Links
Links
Can you answer Yes to this one?
5) Are the links obviously links?
15@coolfields
Links
Can you answer Yes to this one?
6) Do all links provide enough information to
state where they lead to?
16
Elements ...
Links
17
Elements list in NVDA
Links
18
Elements list in NVDA
Coolfields Consulting www.coolfields.co.uk
@coolfields
Media
Media
Can you answer Yes to this?
7) Do all images have
appropriate alternate
text?
(appropriate may mean
empty ie alt="")...
Can you answer yes to this?
Media
21
8) Do all videos have captions?
@coolfields
Captions shown on
YouTube videos
Coolfields Consulting www.coolfields.co.uk
@coolfields
Signposting Content
Photo: thepicturedrome
Signposting content
Can you answer Yes to all these?
9) Are the page titles unique and meaningful?
10) Do pages have appro...
Using headings
24
Headings list from
NVDA screen reader
Note: NVDA exposes
heading hierarchy
Heading are used as
a navigat...
ARIA landmark roles
Banner
25
Navigation
Footer
Content Sidebar
ARIA landmark roles
<header role="banner">
26
<nav role="navigation">
<footer role="contentinfo">
<main role="main">
<asid...
Coolfields Consulting www.coolfields.co.uk
@coolfields
Text
Text
Can you answer Yes to this one?
12) Can I resize text in a page without
breaking the layout?
28@coolfields
Normal size
NB: Resizing and zooming are not the same thing
Text
29@coolfields
Larger size
Text
Can you answer No to this one?
13) Is any of the text fully justified?
30@coolfields
"Rivers of white space"
Text
31
Left aligned textFully justified text
Coolfields Consulting www.coolfields.co.uk
@coolfields
User Input
Photo: AlecCouros
User input
Can you answer Yes to this one?
14) Do all form fields have an accompanying
label?
33@coolfields
User input
34
Coolfields Consulting www.coolfields.co.uk
@coolfields
Colour & Shape
Colour & shape
Can you answer Yes to this one?
15) Is the colour contrast sufficient?
36
Colour contrast
37
Colour Contrast
Analyzer Tool
Colour contrast
38@coolfields
Colour & shape
Can you answer No to this one?
16) Is meaning conveyed by colour or shape
only?
39@coolfields
Colour & shape
40
Project Name Status Fully
Resourced?
Easy peasy project a
Quite a tricky project a
So glad I'm not on th...
Useful resources 1
Colour Contrast Analyzer
• http://paciellogroup.com/resources/contrastAnalyser
Wave Toolbar/Website
• C...
Useful resources 2
Getting alternate text right
• http://owl.li/pGtKC
Coding forms for accessibility
• http://owl.li/pDLMQ...
Thanks for listening
Any questions?
graham.armfield@coolfields.co.uk
@coolfields
43
Video
From http://a11ymemes.tumblr.com
eo
From http://a11ymemes.tumblr.com
Video
From http://a11ymemes.tumblr.com
Video
From http://a11ymemes.tumblr.com
From http://a11ymemes.tumblr.com
From http://a11ymemes.tumblr.com
From http://a11ymemes.tumblr.com
From http://a11ymemes.tumblr.com
From http://a11ymemes.tumblr.com
From http://a11ymemes.tumblr.com
Some things I didn't cover
• Links that open new
windows/panels
• Form submission errors
• Movement/flashing on
pages
• Au...
Upcoming SlideShare
Loading in …5
×

So, How Do I Know if my WordPress Website is Accessible?

15,238 views

Published on

Slides for a presentation I gave originally to WordCamp London on Saturday 23rd November 2013 and at many subsequent Wordcamps and WordPress meetups. The most recent occasion being WordPress Leeds on April 26th 2017 for which I revamped some of the slides to remove some outdated examples.

The WCAG 2 guidelines provide a comprehensive list of best practices for creating accessible websites. But there is a lot of information and the success criteria can be a bit impenetrable in places.

I've distilled down some common accessibility issues into a series of 16 yes/no questions that anyone can ask about their own website. If you can answer these questions correctly, your website will be more accessible than many.

The presentation poses the questions and shows some examples of problems that accessibility testers find, as well as pointing out some of the best practices to achieve good web accessibility.

Visit my website for some useful posts on accessibility techniques: http://www.coolfields.co.uk

Published in: Technology, Design
  • Be the first to comment

So, How Do I Know if my WordPress Website is Accessible?

  1. 1. Coolfields Consulting www.coolfields.co.uk @coolfields So, how do I know if my WordPress website is accessible? Slides at: tinyurl.com/wpa001 Graham Armfield Web Accessibility Consultant WordPress Developer graham.armfield@coolfields.co.uk @coolfields
  2. 2. A bit about me 2 I’m a… • Web Accessibility Consultant • WordPress Developer Photo by Mike Pead @coolfields
  3. 3. What I’m going to cover Web Content Accessibility Guidelines (Version 2) published by the Web Accessibility Initiative of the World Wide Web Consortium http://www.w3.org/TR/WCAG20/ A.K.A. WCAG2.0 • Good resource for accessibility • But can be hard to interpret @coolfields
  4. 4. What I’m going to cover So instead, how about a simple yes/no checklist? Easy to check – with free tools @coolfields
  5. 5. Health warning In time available I can only cover some common accessibility issues. But, if you can answer these questions correctly, your site will be more accessible than many. 5@coolfields
  6. 6. Coolfields Consulting www.coolfields.co.uk @coolfields Keyboard Interaction
  7. 7. Keyboard interaction You need to answer Yes to these: 1) Can I easily access all parts of the site with the keyboard only? 2) Can I easily see where keyboard focus is? 7@coolfields
  8. 8. Keyboard interaction 8 Hover states Keyboard focus
  9. 9. Keyboard interaction 9
  10. 10. Keyboard interaction CSS a:hover {background:#fff, color:#000} a:hover, a:focus {background:#fff, color:#000} Don't do this: a:focus {outline:none} jQuery $(selector).hover(inFunction,outFunction); $(selector).focusin(inFunction); $(selector).focusout(outFunction); 10@coolfields
  11. 11. Keyboard interaction 11@coolfields Using twenty fourteen theme
  12. 12. Keyboard interaction 12 You need to answer Yes to these: 3) Can I easily access all functionality with the keyboard only? 4) Does the keyboard tab order make sense? @coolfields
  13. 13. Keyboard interaction 13 Img of Lightbox When lightbox opens, focus remains on page below
  14. 14. Coolfields Consulting www.coolfields.co.uk @coolfields Photo: Links
  15. 15. Links Can you answer Yes to this one? 5) Are the links obviously links? 15@coolfields
  16. 16. Links Can you answer Yes to this one? 6) Do all links provide enough information to state where they lead to? 16 Elements list in NVDA
  17. 17. Links 17 Elements list in NVDA
  18. 18. Links 18 Elements list in NVDA
  19. 19. Coolfields Consulting www.coolfields.co.uk @coolfields Media
  20. 20. Media Can you answer Yes to this? 7) Do all images have appropriate alternate text? (appropriate may mean empty ie alt="") 20@coolfields
  21. 21. Can you answer yes to this? Media 21 8) Do all videos have captions? @coolfields Captions shown on YouTube videos
  22. 22. Coolfields Consulting www.coolfields.co.uk @coolfields Signposting Content Photo: thepicturedrome
  23. 23. Signposting content Can you answer Yes to all these? 9) Are the page titles unique and meaningful? 10) Do pages have appropriate headings and subheadings? 11) Are ARIA landmark roles present? 23@coolfields
  24. 24. Using headings 24 Headings list from NVDA screen reader Note: NVDA exposes heading hierarchy Heading are used as a navigation feature
  25. 25. ARIA landmark roles Banner 25 Navigation Footer Content Sidebar
  26. 26. ARIA landmark roles <header role="banner"> 26 <nav role="navigation"> <footer role="contentinfo"> <main role="main"> <aside role= "complementary">
  27. 27. Coolfields Consulting www.coolfields.co.uk @coolfields Text
  28. 28. Text Can you answer Yes to this one? 12) Can I resize text in a page without breaking the layout? 28@coolfields
  29. 29. Normal size NB: Resizing and zooming are not the same thing Text 29@coolfields Larger size
  30. 30. Text Can you answer No to this one? 13) Is any of the text fully justified? 30@coolfields
  31. 31. "Rivers of white space" Text 31 Left aligned textFully justified text
  32. 32. Coolfields Consulting www.coolfields.co.uk @coolfields User Input Photo: AlecCouros
  33. 33. User input Can you answer Yes to this one? 14) Do all form fields have an accompanying label? 33@coolfields
  34. 34. User input 34
  35. 35. Coolfields Consulting www.coolfields.co.uk @coolfields Colour & Shape
  36. 36. Colour & shape Can you answer Yes to this one? 15) Is the colour contrast sufficient? 36
  37. 37. Colour contrast 37 Colour Contrast Analyzer Tool
  38. 38. Colour contrast 38@coolfields
  39. 39. Colour & shape Can you answer No to this one? 16) Is meaning conveyed by colour or shape only? 39@coolfields
  40. 40. Colour & shape 40 Project Name Status Fully Resourced? Easy peasy project a Quite a tricky project a So glad I'm not on that project r Going OK a @coolfields
  41. 41. Useful resources 1 Colour Contrast Analyzer • http://paciellogroup.com/resources/contrastAnalyser Wave Toolbar/Website • Chrome and Firefox add-on Browser Tools • Chrome – aXe, Accessibility Develop Tools • Firefox – Firebug inspect element 41
  42. 42. Useful resources 2 Getting alternate text right • http://owl.li/pGtKC Coding forms for accessibility • http://owl.li/pDLMQ Creating text for screen readers only • http://owl.li/qzOGj 42
  43. 43. Thanks for listening Any questions? graham.armfield@coolfields.co.uk @coolfields 43
  44. 44. Video From http://a11ymemes.tumblr.com
  45. 45. eo From http://a11ymemes.tumblr.com
  46. 46. Video From http://a11ymemes.tumblr.com
  47. 47. Video From http://a11ymemes.tumblr.com
  48. 48. From http://a11ymemes.tumblr.com
  49. 49. From http://a11ymemes.tumblr.com
  50. 50. From http://a11ymemes.tumblr.com
  51. 51. From http://a11ymemes.tumblr.com
  52. 52. From http://a11ymemes.tumblr.com
  53. 53. From http://a11ymemes.tumblr.com
  54. 54. Some things I didn't cover • Links that open new windows/panels • Form submission errors • Movement/flashing on pages • Audio on pages • Updating content after page loaded • Timeouts • Data tables 54@coolfields • Keyboard traps • CAPTCHAs • Skip links • Alternate navigation • Indicating language • Triggering actions • Automated page refreshing • PDFs

×