Webflow Accessibility: Hearing and Motor Disabilities

Welcome to Part 2 of the Web Content Accessibility Guidelines 2.2 compliance series for Webflow. In Part 1, we covered visual disabilities. Now we're moving into hearing and motor disabilities.

For hearing disabilities, we'll cover video captions, audio transcripts, auditory controls, and sign language interpretation. For motor disabilities, we'll look at touch target sizing, keyboard navigation, timing controls, modals, and hover interactions.

As of June 2025, for some industries such as travel, banking, and e-commerce serving EU customers, websites must meet accessibility requirements under the European Accessibility Act.

Quick disclaimer: use this as a starting point, not a complete audit. Legal requirements vary by jurisdiction and industry, and your site might need specific considerations I'm not covering.

Hearing Disabilities

Who this applies to:

• Deaf users
• Hard of hearing

Video captions & Audio transcripts (AA)

Pre-recorded video content must be accompanied by captions. Pre-recorded audio-only content (like podcasts) must have text transcripts. Text alternatives make content available to everyone, including people who are deaf, hard of hearing, or have difficulty understanding auditory information.

• Use YouTube player for video captions for fast implementation as YouTube auto-generates captions (but you need a cookie consent for GDPR to block cookies from the YouTube player)
• Bunny as the best solution for fast video loading and player customization, but setting it up is more complex
• For podcasts or audio-only content, provide a full text transcript

Avoid autoplaying media (AA)

Audio and video should only be initiated by user action. This is especially important for media that lasts more than 3 seconds.

• For background videos, Webflow has an "autoplay" setting you can turn off for videos longer than 3 seconds.

Auditory control (AA)

If audio content plays automatically for longer than 3 seconds, users must be able to pause or mute it.

• For background videos, Webflow has a pause button that you can activate in the settings of the element.

Auditory cues (AA)

Auditory cues can communicate system events to people with good hearing. However, they don't help people who are deaf, have hearing loss, work in noisy environments, or mute their computer audio to avoid disturbing others. Always provide visual alternatives.

Sign language interpretation for prerecorded video (AAA)

Provide sign language interpretation for all prerecorded audio content in synchronized media. This helps people whose first language is sign language, as they may have limited reading proficiency in written language. Sign language interpretation goes beyond captions by conveying tone, emotion, and cultural context.

Extended audio description for prerecorded video (AAA)

When the standard audio description track cannot adequately describe important visual information due to insufficient pauses in dialogue, provide an extended version where the video is paused to allow time for complete audio descriptions. This ensures blind users receive all visual information necessary to understand the content.

Live captions for live audio (AAA)

Provide real-time captions for all live audio content, including webinars, live streams, and video conferences. This makes live content accessible to deaf and hard-of-hearing users in real time, not just through post-event transcripts.

Low or no background audio (AAA)

Audio content should have minimal or no background noise, or provide a way to turn off background audio. Foreground speech should be at least 20 dB louder than background sounds.

For Webflow: When embedding audio or video, use clean audio tracks without heavy background music or noise, especially for instructional or informational content.

Motor Disabilities

Who this applies to:

• Limited fine motor control
• Tremors, paralysis, arthritis

Target sizes

Target sizes (AA: 24px minimum)

Make sure touch controls like hamburger menus, social icons, and gallery viewers are usable by a wide range of hand and stylus sizes. This doesn't include footnotes or icons in or at the end of a sentence.

Target sizes (AAA: 44px minimum)

Larger targets are even more accessible for people with limited fine motor control.

Keyboard navigation (AA)

All interactive elements must be reachable using the Tab and arrow keys. Don't add link blocks where they're not needed, as they create keyboard traps that prevent users from navigating away. All interactive elements must give a visible indication when they have input focus. Focus order must preserve meaning and operability.

All functionality available via keyboard with NO exceptions (AAA)

For Webflow sites, this mainly means: if you have any custom interactions that only work on mouse hover or drag, you need keyboard equivalents. Most Webflow users won't hit this unless they're building custom drawing tools or complex draggable interfaces.

Ensure modals are keyboard navigable (AA)

When keyboard users tab into modals (like a popup or dialog), focus should remain in that window. This prevents users from accidentally moving focus outside the modal without closing it. Users should be able to use the ESC key to close the modal.

Webflow has created a clonable you can clone and use for accessible modals.

Remove focus from hidden elements (AA)

Hidden elements should not be in the tab order (when a user navigates via keyboard). Add aria-hidden=”true” to the link element that's hidden.

Avoid unnecessary interruptions (AAA)

Users must be able to postpone or suppress all interruptions, except interruptions involving emergencies. This includes automatic updates, alerts, notifications, and any content that appears without user request. This helps users with cognitive disabilities maintain focus and complete tasks without distraction.

No interruptions from:

• Marketing popups
• Chat widgets auto-opening
• Newsletter overlays
• Auto-refreshing content

Re-authentication doesn't lose data (AAA)

If a user's session expires and they need to re-authenticate, they shouldn't lose data they've already entered. This is particularly important for banking sites, government forms, and e-commerce checkouts. Save form data so users can continue where they left off after logging back in.

Timing adjustable (AA)

Users must be able to turn off, adjust, or extend time limits. This is especially important for forms with session timeouts, timed quizzes, or checkout processes. People with motor disabilities may need more time to complete tasks.

• Allow users to extend time limits before they expire
• Provide an option to turn off time limits altogether
• Make time limits at least 10 times longer than the default, or allow adjustment up to 10 times the default length

No timing at all (AAA)

At the AAA level, eliminate timing entirely or allow extensions of 20+ hours. This gives users complete control over how long they need to complete a task.

Avoid autofocus (AA)

Autofocus can create confusion, especially for screenreader users, by moving them to a form field without permission or context. When the page includes other content, or when the input field isn't the primary purpose of the page, let visitors choose to fill out a form.

Error prevention (AA)

If submitting data might have serious consequences, users must be able to correct the data input before finalizing a submission. Error prevention benefits everyone, especially people with reading or motor disabilities that make them more likely to make mistakes. Error prevention is critical when using a web page can result in legal commitments, initiate financial transactions, modify or delete user data, or submit test responses.

CAPTCHAs (AA)

If a non-text CAPTCHA is used, alternative methods must be provided for both users without vision and users without hearing. Traditional CAPTCHAs require visual tasks that can be impossible for people with visual disabilities, denying them access.

• Provide a text-based CAPTCHA, reCaptcha v3 being a better alternative than v2 that is hidden for the user.

Note that reCAPTCHA v2 can still create accessibility issues. Some users may have trouble moving their cursor to complete the checkbox, and if the query resolves to a challenge, the user may have trouble completing that challenge.

No hover-only interactions (AA)

Don't rely on hover to reveal critical content or functionality. People using keyboards, touch devices, or voice control can't hover. If you use hover effects, ensure the same information or action is available through keyboard interaction or is visible by default.

Conclusion

That's Part 2, hearing and motor disabilities covered. In Part 3, we'll finish with cognitive disabilities and situational accessibility, which ties everything together and shows how these features benefit everyone.