Greetings,

Our University has prioritized making our sites WCAG 2.0 compliant. In the course of an "Accessibility Audit" of our Drupal sites, the Accordions built using FAQ Field were dinged for:

  • expanded/collapsed state of accordian not expressed by assistive technology
  • a ccordions use tabpanel, tab list and tab roles for non-tabbed-control behavior.

Having just taken a great online course in Web Accessibility for Developers, I saw an opportunity to apply an example given there with this module to improve the screen readers' user experience.

The example created an accordion using a definition list and some Javascript. So I used the "render as definition list" option and added the associated scripts.

If nothing else, having this patch (coming) here will help us if the module gets updated down the road. But maybe the maintainers would be interested in using this approach, or something similar, in order to improve the accessibility of the accordions…

CommentFileSizeAuthor
#6 faqfield-fully_accessible_accordions-3011774-6.patch13.83 KBbyronveale
#5 interdiff.txt7.8 KBbkosborne
#5 faqfield-fully_accessible_accordions-3011774-5.patch13.12 KBbkosborne
#4 faqfield-fully_accessible_accordions-3011774-4.patch14.66 KBbyronveale
#3 faqfield-fully_accessible_accordions-3011774-3.patch14.57 KBbyronveale
#2 faqfield-fully_accessible_accordions-3011774-1.patch14.04 KBbyronveale

Comments

byronveale created an issue. See original summary.

byronveale’s picture

byronveale commented
StatusFileSize
new faqfield-fully_accessible_accordions-3011774-1.patch14.04 KB

And here is the patch (attached)

byronveale’s picture

byronveale commented
StatusFileSize
new faqfield-fully_accessible_accordions-3011774-3.patch14.57 KB

Okay, had to fix some missteps I made when using the jQuery noConflict() method…

byronveale’s picture

byronveale commented
StatusFileSize
new faqfield-fully_accessible_accordions-3011774-4.patch14.66 KB

More missteps, fingers crossed third time's the charm…

bkosborne’s picture

bkosborne
Primary language English
Location New Jersey, USA
commented
Status: Active » Needs review
StatusFileSize
new faqfield-fully_accessible_accordions-3011774-5.patch13.12 KB
new interdiff.txt7.8 KB

+1 for this

Byron,

I reviewed this and updated a few things to align with Drupal's best practices for JS. I attached a new patch with my changes, and an interdiff that contains just the changes from your original.

  • Seem the newer version of jQuery shouldn't be needed. I removed it and things worked OK.
  • I incorporated the code from the utils file directly into the code that needs it and removed code from there that wasn't used.
  • The JS that initializes the plugin has been wrapped in a Drupal behavior so it plays nice with AJAX, and it was placed at the bottom of the plugin file as well.

Aside from that, I think a few other things could be changed to make it a better candidate to be committed to the module:

  1. Adding the JS that makes this an accordion should become optional, and default to off, so sites that are already using the DL method are not broken when they updated to this code
  2. The auto-collapase functionality could be made a setting so users can toggle it on or off
byronveale’s picture

byronveale commented
StatusFileSize
new faqfield-fully_accessible_accordions-3011774-6.patch13.83 KB

Thanks Brian!

Yes, would like to integrate this properly, likely by rewriting the current "Accordion" option to use this updated/scripted definition list option, then reverting the definition list option to it's original form. And yes, would like to also take advantage of the multi-/single-select functionality in the script with a settings option…

In the meantime, here's a minor update to the patch that adds an aria-hidden span with target inside to allow for designers to target with text or graphic open/close indicators.

alex_optim’s picture

alex_optim
Location Tallinn
commented
Status: Needs review » Reviewed & tested by the community

Good for me.

  • pifagor committed d538369 on 7.x-1.x authored by byronveale 
    Issue #3011774 by byronveale, bkosborne, alex_optim, pifagor: Ensure...
pifagor’s picture

pifagor commented
Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

Anonymous’s picture

Anonymous (not verified) commented

Does anyone know the status of this in Drupal 8? I don't get any errors in WAVE (web accessibility verification evaluation tool), but several screenreader apps don't seem to know how to deal with the accordions.