An Accessible Details/Summary
with fallback
Updated: March 2021
Most Frameworks these days have a show hide that works. It needs to be accessible to keyboard. It needs to report expanded status to the accessibipoty API. Here is the show hide from Bootstrap.
Example 1: Bootstrap's show/hide
There are three major pieces to each audit. The manual assessments, automatic assessments and assistive technological assessments. These are descibed in detail, in the sections above the infographic:
- Automated Crawl: Initially a large automated crawl of the site will be conducted. It can evaluate a number of failure conditions automatically and give a general impression of the conformance of the site. About 15% of WCAG can be assessed automatically on this way. The rest must be done manually. (Note: this is established knowledge based on in-depth studies of automatic accessibility checking, and findings of the Evaluation Task Force of the W3C.) This will take 3 hours to run and prepare the report.
- Select Samples for Human Testing: Sample pages will be selected for manual testing. They represent pages from the various templates and types of content, and pages with various widget modules added. They are listed in the accompanying spreadsheet. The home page evaluation will also include the menu, header and footer information including the search box etc.David uses screen readers, API viewer and other assistive technology and tools to evaluated. Pages tested include, Templates, Interactive Forms, APplications, Other important pages, Several random sample pages
- Testing with users with disabilities: It would be good to provide 3 people who are blind, 2 with low vision, one without use of arms or with low dexterity, and several with cognitive learning disabilities. Each tester will do between 2 and 6 hours testing depending on necessity and availability.
- These 3 reports are amalgamated. The user testing and the automated crawl results are incorportated into the main body of the report where they contribute to the success criteria issues. This is usually in summary form. The detailed comments from users are optionally included in an appendix. The automated crawl details are turned into a separate report intended for remediating developers.
- We provide optional coaching, over Skype, email or phone or WebEx after completing the audit.
Example 2: Details/Summary with Polyfill
summary
An accessible element
details
element content
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
Here is some content after it
Download the widget here in zip format
Thanks to Jason Kiss and Steve Faulkner for turning me onto this.
Feel free to comment on Twitter @davidmacd
Author information:
David MacDonald is a veteran WCAG member, co-editor of Using WAI ARIA in HTML5 and HTML5 Accessibility Task Force Member. Opinions are my own.
CONTACT US
For a quote or just to chat about your organization's needs
