SlideShare a Scribd company logo
1 of 39
Download to read offline
Making Popular WordPress
Plugins More Accessible
Claire Brotherton
WordCamp Edinburgh, July 2017
@abrightclearweb
Why Does Plugin Accessibility
Matter?
• WordPress is used by 28.3% of all websites 



(https://w3techs.com/technologies/details/cm-wordpress/all/
all)
• Over 51,000 plugins are available on WordPress.org
• 1 in 5 people in the UK have a disability



(https://www.gov.uk/government/uploads/system/uploads/
attachment_data/file/600465/family-resources-
survey-2015-16.pdf)
How To Test Plugins For
Accessibility?
• Keyboard (motor disability)
• Screen reader (visual impairment). Free ones are:
• NVDA (Windows) - best with Firefox 

https://www.nvaccess.org
• VoiceOver (Mac & iOS, built-in) - best with Safari

If We Find Plugin Accessibility
Issues, How Can We Fix Them?
• Leave a message on WordPress.org forums

• Premium plugins: contact their support

• Use a plugin to improve the accessibility of the one we want
to use

• Find alternative plugins without accessibility issues
What Is Keyboard Focus?
Which Are The Main
Focusable HTML Elements?
• Links <a>
• Form elements e.g. <input>
• Buttons <button>
• https://allyjs.io/data-tables/focusable.html
Making Other HTML
Elements Focusable
The tabindex value can allow for some interesting
behaviour.
• If given a value of "-1", the element can't be tabbed to but
focus can be given to the element programmatically
(using element.focus()).

• If given a value of 0, the element can be focused via the
keyboard and falls into the tabbing flow of the document.

• https://snook.ca/archives/accessibility_and_usability/
elements_focusable_with_tabindex
Visible Focus Styles
Visible Focus Styles
Mac users
- blue focus ring
VoiceOver users
- black border
Chrome User?
• Focus Indicator (Chrome extension)
• https://chrome.google.com/webstore/detail/focus-indicator/
heeoeadndnhebmfebjccbhmccmaoedlf
How To Navigate With The
Keyboard
• Tab key to go forwards
• Shift + Tab to go backwards
• Enter to click link/button
• Space to activate buttons /
check checkboxes
How To Navigate With The
Keyboard
• Arrow keys to navigate radio

buttons
• Esc key to close dialogs
• If something is accessible via
keyboard, it’s normally
accessible via a screen
reader too
LIGHTBOX
How Should An Accessible
Lightbox Work?
• The trigger to open the lightbox must get keyboard focus.
• There should be a warning that a new window will open.
• Focus must go to the lightbox when opened, and be visible.
• Lightbox image(s) must have alt text.
• Tabbing must cycle round the links within the lightbox until dismissed.
• Focus must return to the element on the page which the lightbox was
opened from.
• http://www.coolfields.co.uk/2011/12/specification-for-an-accessible-lightbox/
NextGEN Gallery
https://wordpress.org/plugins/nextgen-gallery/
Over 1 million active installs
NextGEN Gallery Demo (1)
Nextgen Gallery Test Results
(Keyboard)
• No instructions given that clicking on a thumbnail will open a larger image.
• The focus style on the thumbnails is very hard to see.
• Opens the lightbox but the focus remains in the window below. So tabbing
through I could return to an unexpected place.
• Can’t focus on the lightbox X to close. Only the Esc key works.
• Arrow keys move the lightbox images forward/back - but is this obvious
to users?
NextGEN Gallery Demo (2)
NextGEN Gallery Test Results
(VoiceOver)
• Focus style is better thanks toVoiceOver’s default style.
• We had the same issues with the focus not moving to the lightbox.
• VoiceOver read out the filename for most of the thumbnail images. It’s
not enough to add the alt text in WordPress Media Library - you must add it
in Next Gen Gallery’s settings too.
• Image links should tell the user the destination of the link, so should read
something like “Open a panel with larger version of figure holding a bunch
of grapes in close-up”.
NextGEN Gallery Test Results
• The trigger to open the lightbox must get keyboard focus. ✅
• There should be a warning that a new window will open. ❌
• Focus must go to the lightbox when opened, and be visible. ❌
• Lightbox image(s) must have alt text. ❌
• Tabbing must cycle round the links within the lightbox until dismissed. ❌
• Focus must return to the element on the page which the lightbox was
opened from. ❌
What We Can Do To Fix
Lightbox Accessibility Issues?
• Add alt text to images (the NextGEN Gallery way) and use descriptive
filenames.
• Raise issues with the plugin’s developer on the WordPress.org forums.
• No suitable replacement plugin, unfortunately.
• Lity is an accessible lightbox but isn’t in the form of a WordPress plugin. It
doesn’t show multiple images.
• http://sorgalla.com/lity/
MODAL WINDOW
MailMunch
https://wordpress.org/plugins/mailmunch/
Over 20,000 active installs
MailMunch Demo
MailMunch Test Results
• Not keyboard accessible - focus remains behind the modal, on the page.
• Even the Esc key didn’t work.
• No email subscribers for you!
Sumo
https://wordpress.org/plugins/sumome/
Over 100,000 active installs
Sumo Demo
Sumo Test Results
• The trigger to open the modal must get keyboard focus. ✅
• There should be a warning that a new window will open. ❌
• Focus must go to the modal when opened, and be visible. ✅
• Tabbing must cycle round the links within the modal until dismissed. ❌
• Focus must return to the element on the page which the modal was
opened from. ❌
FORMS
How Should Accessible Forms
Work?
• All inputs should have a form label, and the label
should be associated with the form control via an id
attribute.
• Related form elements e.g. radio buttons or
checkboxes should be grouped in a <fieldset> with a
<legend>.
• Error messages should be highlighted. For screen
reader users it helps if the errors are listed above the
form.
Gravity Forms
http://www.gravityforms.com
Over A Million WordPress Sites Are Already Using Gravity Forms
Gravity Forms Demo
Fixing Gravity Forms (1)
• WCAG 2.0 form fields for Gravity Forms
• https://en-gb.wordpress.org/plugins/gravity-forms-wcag-20-form-fields/
Fixing Gravity Forms (1)
Fixing Gravity Forms (2)
• Gravity Fieldset for Gravity Forms
• https://en-gb.wordpress.org/plugins/gravity-fieldset-for-gravity-forms/
Fixing Gravity Forms (2)
Gravity Forms + Plugins
• All inputs should have a form label, and the label should
be associated with the form control via an id attribute.
✅
• Related form elements e.g. radio buttons or checkboxes
should be grouped in a <fieldset> with a <legend>. ✅
• Error messages should be highlighted. For screen reader
users it helps if the errors are listed above the form. ✅
Summary
• Plugin developers have a responsibility to code their plugins
for everyone
• These plugins are used on millions of sites
• Accessible features are better coded in from the start, but
problems can be fixed if you know how
• Accessible plugins = more accessible sites = better for all!
Thank You!
• www.abrightclearweb.com
• claire@abrightclearweb.com
• @abrightclearweb
Questions?

More Related Content

Recently uploaded

LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdfShreedeep Rayamajhi
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 

Recently uploaded (12)

LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 

Featured

How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...DevGAMM Conference
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationErica Santiago
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellSaba Software
 
Introduction to C Programming Language
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming LanguageSimplilearn
 

Featured (20)

How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
 
Introduction to C Programming Language
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming Language
 

Making Popular WordPress Plugins More Accessible

  • 1. Making Popular WordPress Plugins More Accessible Claire Brotherton WordCamp Edinburgh, July 2017 @abrightclearweb
  • 2. Why Does Plugin Accessibility Matter? • WordPress is used by 28.3% of all websites 
 
 (https://w3techs.com/technologies/details/cm-wordpress/all/ all) • Over 51,000 plugins are available on WordPress.org • 1 in 5 people in the UK have a disability
 
 (https://www.gov.uk/government/uploads/system/uploads/ attachment_data/file/600465/family-resources- survey-2015-16.pdf)
  • 3. How To Test Plugins For Accessibility? • Keyboard (motor disability) • Screen reader (visual impairment). Free ones are: • NVDA (Windows) - best with Firefox 
 https://www.nvaccess.org • VoiceOver (Mac & iOS, built-in) - best with Safari

  • 4. If We Find Plugin Accessibility Issues, How Can We Fix Them? • Leave a message on WordPress.org forums
 • Premium plugins: contact their support
 • Use a plugin to improve the accessibility of the one we want to use
 • Find alternative plugins without accessibility issues
  • 6. Which Are The Main Focusable HTML Elements? • Links <a> • Form elements e.g. <input> • Buttons <button> • https://allyjs.io/data-tables/focusable.html
  • 7. Making Other HTML Elements Focusable The tabindex value can allow for some interesting behaviour. • If given a value of "-1", the element can't be tabbed to but focus can be given to the element programmatically (using element.focus()).
 • If given a value of 0, the element can be focused via the keyboard and falls into the tabbing flow of the document.
 • https://snook.ca/archives/accessibility_and_usability/ elements_focusable_with_tabindex
  • 9. Visible Focus Styles Mac users - blue focus ring VoiceOver users - black border
  • 10. Chrome User? • Focus Indicator (Chrome extension) • https://chrome.google.com/webstore/detail/focus-indicator/ heeoeadndnhebmfebjccbhmccmaoedlf
  • 11. How To Navigate With The Keyboard • Tab key to go forwards • Shift + Tab to go backwards • Enter to click link/button • Space to activate buttons / check checkboxes
  • 12. How To Navigate With The Keyboard • Arrow keys to navigate radio
 buttons • Esc key to close dialogs • If something is accessible via keyboard, it’s normally accessible via a screen reader too
  • 14. How Should An Accessible Lightbox Work? • The trigger to open the lightbox must get keyboard focus. • There should be a warning that a new window will open. • Focus must go to the lightbox when opened, and be visible. • Lightbox image(s) must have alt text. • Tabbing must cycle round the links within the lightbox until dismissed. • Focus must return to the element on the page which the lightbox was opened from. • http://www.coolfields.co.uk/2011/12/specification-for-an-accessible-lightbox/
  • 17. Nextgen Gallery Test Results (Keyboard) • No instructions given that clicking on a thumbnail will open a larger image. • The focus style on the thumbnails is very hard to see. • Opens the lightbox but the focus remains in the window below. So tabbing through I could return to an unexpected place. • Can’t focus on the lightbox X to close. Only the Esc key works. • Arrow keys move the lightbox images forward/back - but is this obvious to users?
  • 19. NextGEN Gallery Test Results (VoiceOver) • Focus style is better thanks toVoiceOver’s default style. • We had the same issues with the focus not moving to the lightbox. • VoiceOver read out the filename for most of the thumbnail images. It’s not enough to add the alt text in WordPress Media Library - you must add it in Next Gen Gallery’s settings too. • Image links should tell the user the destination of the link, so should read something like “Open a panel with larger version of figure holding a bunch of grapes in close-up”.
  • 20. NextGEN Gallery Test Results • The trigger to open the lightbox must get keyboard focus. ✅ • There should be a warning that a new window will open. ❌ • Focus must go to the lightbox when opened, and be visible. ❌ • Lightbox image(s) must have alt text. ❌ • Tabbing must cycle round the links within the lightbox until dismissed. ❌ • Focus must return to the element on the page which the lightbox was opened from. ❌
  • 21. What We Can Do To Fix Lightbox Accessibility Issues? • Add alt text to images (the NextGEN Gallery way) and use descriptive filenames. • Raise issues with the plugin’s developer on the WordPress.org forums. • No suitable replacement plugin, unfortunately. • Lity is an accessible lightbox but isn’t in the form of a WordPress plugin. It doesn’t show multiple images. • http://sorgalla.com/lity/
  • 25. MailMunch Test Results • Not keyboard accessible - focus remains behind the modal, on the page. • Even the Esc key didn’t work. • No email subscribers for you!
  • 28. Sumo Test Results • The trigger to open the modal must get keyboard focus. ✅ • There should be a warning that a new window will open. ❌ • Focus must go to the modal when opened, and be visible. ✅ • Tabbing must cycle round the links within the modal until dismissed. ❌ • Focus must return to the element on the page which the modal was opened from. ❌
  • 29. FORMS
  • 30. How Should Accessible Forms Work? • All inputs should have a form label, and the label should be associated with the form control via an id attribute. • Related form elements e.g. radio buttons or checkboxes should be grouped in a <fieldset> with a <legend>. • Error messages should be highlighted. For screen reader users it helps if the errors are listed above the form.
  • 31. Gravity Forms http://www.gravityforms.com Over A Million WordPress Sites Are Already Using Gravity Forms
  • 33. Fixing Gravity Forms (1) • WCAG 2.0 form fields for Gravity Forms • https://en-gb.wordpress.org/plugins/gravity-forms-wcag-20-form-fields/
  • 35. Fixing Gravity Forms (2) • Gravity Fieldset for Gravity Forms • https://en-gb.wordpress.org/plugins/gravity-fieldset-for-gravity-forms/
  • 37. Gravity Forms + Plugins • All inputs should have a form label, and the label should be associated with the form control via an id attribute. ✅ • Related form elements e.g. radio buttons or checkboxes should be grouped in a <fieldset> with a <legend>. ✅ • Error messages should be highlighted. For screen reader users it helps if the errors are listed above the form. ✅
  • 38. Summary • Plugin developers have a responsibility to code their plugins for everyone • These plugins are used on millions of sites • Accessible features are better coded in from the start, but problems can be fixed if you know how • Accessible plugins = more accessible sites = better for all!
  • 39. Thank You! • www.abrightclearweb.com • claire@abrightclearweb.com • @abrightclearweb Questions?