• Skip to main content
  • Skip to primary sidebar

Victor Font Consulting Group, LLC

The DEX Intranet Specialists

  • Home
  • Care Plans
    • Care Articles
    • Optional Subscriptions
  • Consultations
  • Products
    • Code Snippets
    • Public GitHub Repositories
    • Gist Snippets
    • Pastebin Snippets (Free)
    • Free Plugins
  • FAQs
  • Support
    • Graphic Design
  • Contact
    • Speakers
    • Portfolio
  • Resources
    • Free WordPress Video Training
    • Tutorials
    • Articles
    • Cybersecurity
    • EU Referral Network

Keyboard Accessibility & Formidable Forms Collapsible Sections

April 25, 2019 By Victor M. Font Jr.

Formidable Forms logo
Formidable Forms Drag & Drop Form Builder

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.

  • 329shares
  • Facebook328
  • Twitter0
  • Pinterest1
  • LinkedIn0
  • Print
  • SMS0

Filed Under: Accessibility, ADA, Formidable Forms, How To Tagged With: Accessibility, ADA, Formidable Forms, Keyboard Accessibility

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur, and Senior IT Executive. A Founding Board Member of the North Carolina Executive Roundtable, he has served on the Board of Advisors, of the North Carolina Technology Association, the International Institute of Business Analysis, Association of Information Technology Professionals, Toastmasters International, and the North Carolina Commission for Mental Health, Developmental Disabilities, and Substance Abuse Services. He is author of several books including The Ultimate Guide to the SDLC and Winning With WordPress Basics, and Cybersecurity.

Primary Sidebar

Shopping Cart

Books

  • Ultimate Guide to the SDLC front cover The Ultimate Guide to the SDLC
    Rated 5.00 out of 5
    $74.95
  • Winning With WordPress Basics 2nd Edition Winning With WordPress Basics 2nd Edition $19.95

Recent Articles

  • Protected: WordPress Database Modernization Blueprint
  • Social Media Management
  • Site Growth Automation
  • GDPR Compliance Monitoring
  • Digital Strategy Accelerator

Top 10 Article Categories

Best Practice Code Snippet Computers and Internet Genesis How To Leadership Programming Servant Leadership Tutorial WordPress

We only use analytical cookies on our website that allow us to recognize and count the number of visitors, but they do not identify you individually. They help us to improve the way our website works. By clicking Accept you, agree to cookies being used in accordance with our Cookie Policy.OkNoCookie policy