• Skip to main content

Victor Font Consulting Group, LLC

The DEX Intranet Specialists

Call Us:

+1 919-604-5828

  • 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
You are here: Home / Accessibility / Keyboard Accessibility & Formidable Forms Collapsible Sections

Keyboard Accessibility & Formidable Forms Collapsible Sections

By Victor M. Font Jr.
April 25, 2019Leave a Comment

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

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.

Reader Interactions

VictorFont.com runs on the Genesis Framework

Genesis FrameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple—start using Genesis now!

Click here to download The Genesis Guide for Absolute Beginners (PDF - 1.4 MB)

Leave a Reply Cancel reply

Your email address and website will not be published. Required fields are marked *
Posting a comment means that you agree with and accept our Comment & Product Review Policy

Call: +1 919-604-5828

Send us an E-mail

Accessibility Statement | Affiliate Marketing Disclosure | Capability Statement

Cookie Policy | Comment & Product Review Policy | Privacy Policy | Site Map | Terms & Conditions

Copyright © 2003–2023 Victor M. Font Jr.

Return to top of page