If you know anything about us, then you know we love Formidable Forms. It is our go to product for building any form related page or even complex applications for WordPress powered sites.
Today, many countries have some sort of accessibility laws enacted that are designed to provide full and equal enjoyment to the disabled who access our online offerings. In the United States, this is primarily the Americans with Disabilities Act of 1990 (ADA).
As a website owner, you are most likely required to comply with ADA Title III. Title III prohibits disability-based discrimination for “places of public accommodations”. Places of public accommodation generally include private businesses that are open to the public, such as restaurants, hotels, movie theaters, museums, and doctor’s offices.
U.S. Federal Courts and the U.S. Department of Justice hold that while the ADA does not specifically address web accessibility, its language is still broad enough to include websites as part of business operations. The global nature of the Internet ensures your website is a place of public accommodation.
Accessibility Standards
The World Wide Web Consortium (W3C) develops international standards for the Web: HTML, CSS, and many more.
The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help us understand and implement accessibility.
We can use W3C WAI resources to make our websites, applications, and other digital creations more accessible and usable to everyone.
The W3C WAI developed the Web Content Accessibility Guidelines (WCAG). It is the international standard for web accessibility. US courts recognize WCAG 2.0, in effect since 2008, as the standard for ADA compliance.
In the European Union, the EU web accessibility directive effective in EU member states as of 23 September 2018 references WCAG 2.1 as the standard to be used.
Accessibility is Good for Business
The Business Case for Digital Accessibility describes that accessibility can drive innovation, enhance your brand, extend market reach, and minimize legal risk. It includes direct and indirect benefits of accessibility, and the risks of not addressing accessibility adequately. It provides case studies and examples that demonstrate how continued investment in accessibility is good for your organization. Please take the time to read this important resource.
Keyboard Accessibility
To accommodate people with Physical or Motor Disabilities, a key WCAG requirement is to provide keyboard accessibility to any area that requires someone to click a mouse button to display its content. This means that anywhere you click to show content also has to work by using the keyboard alone, either by pressing the return key or space bar. Examples include, but aren't limited to, drop-down menus and collapsible areas.
While the Formidable Forms developers have done a great job in making their product accessible in a general sense, there's one area that appears to have been overlooked. If you create a form with collapsible sections, those sections are not accessible from the keyboard. You can't toggle them open or closed using the keyboard alone. Luckily, there's a pretty simple fix.
Tabindex
The first step is to add tabindex="0" to the h3 element rendered as the collapsible section's title.
Collapsible Section HTML Before
Navigate to the form's customize HTML page and find the HTML source code for the collapsible section.
Collapsible Section HTML After
Add tabindex="0" to the h3 element.
tabindex="0" allows elements besides links and form elements to receive keyboard focus. It does not change the tab order, but places the element in the logical navigation flow, as if it were a link on the page.
Collapsible Section jQuery
Add the following jQuery to the after fields area on the form's customize HTML page.
This jQuery monitors the h3.frm_trigger keydown event and fires the element's click() event that Formidable uses to open/close the collapsible section. The keydown event is fired for all keys, regardless of whether they produce a character value.
However, since the keyboard accessibility standard specifies the Enter key and Space bar only as the triggers, we have to limit the keydown even to those two specific keys. That's what the "event.which" line in the code does. The events that fire are 13 for the Enter key and 32 for the Space bar.
Since, we're monitoring a class that is part of every collapsible section, using the "this" keyword to trigger the click event ensures that this simple jQuery snippet will work for all collapsible sections on your form.
There's one last thing about the jQuery code. The event.preventDefault(); is necessary to prevent some strange behavior with the Chrome browser. In testing, we found that pressing the space bar causes the entire page to scroll. This is unexpected behavior and limited to Chrome; preventDefault allows the page to behave as expected.
There you have it! Your collapsible sections are now keyboard accessible.
Leave a Reply