Webflow Accessibility AudiT

Testing Context

This analysis combines findings from:

1. Live testing session (documented in video)

2. Backend Discovery (done after video recording) where our expert, Amber, got full access to the platform settings

Skip Link Implementation

Initial testing began with keyboard navigation to check for skip links. When pressing the Tab key, no skip link appeared in the interface. DOM inspection confirmed the complete absence of this crucial accessibility feature.

Matrix Findings Summary:

✗ Fails:

• Skip link presence (note: users can add this with HTML/CSS, but no ready-made component exists)

• All other skip link criteria marked as N/A due to feature absence

Navigation Structure Implementation

Initial testing focused on the semantic structure and keyboard interaction patterns of Webflow's navigation. DOM inspection revealed proper use of the <nav> element, and testing of the Services dropdown showed it could be triggered with the Return key, with all contained links maintaining keyboard accessibility.

The dropdown implementation was tested extensively for ARIA support. When examining the dropdown trigger, it correctly used role="button" with proper ARIA states including aria-expanded (which toggled appropriately between true/false), aria-controls referencing the dropdown content, and aria-haspopup.

A significant issue emerged during keyboard testing - both the dropdown buttons and items within dropdowns lacked visible focus indicators, making it difficult for keyboard users to track their location in the interface.

Matrix Findings Summary:

✓ Passes:

• Nav tag implementation

• Users can define nav tag aria-label

• Dropdown keyboard accessibility

• Separate buttons for opening/closing dropdowns

• Button labeling and ARIA attributes (expanded, controls, haspopup)

• Mobile menu keyboard accessibility

• Works on zoom

✗ Fails:

• Nav tag labeling

• Missing focus indicators on dropdown elements

Accordion Implementation

Testing revealed significant keyboard interaction issues with accordions. Users became trapped when using arrow keys to navigate, unable to scroll the page when accordion content was expanded. The test identified this as a classic keyboard trap scenario.

Further inspection showed accordions were built using div elements with role="button", while the content used nav tags inappropriately. The escape key did allow closing of accordions, providing at least one way to exit the trapped state.

Matrix Findings Summary:

✓ Passes:

• Buttons use aria-expanded

• Buttons use aria-controls

• User can choose heading level

• No hidden content read by screen reader

✗ Fails:

• Missing visible focus

• Keyboard trap with arrow keys

• Accordion content incorrectly using nav tag

Contact Form Evaluation

Form testing revealed several labeling issues. The message field was found to be unlabeled, and inspection showed the top form's message field incorrectly referenced the email field. The implementation relied on browser default error messages rather than custom error handling.

We have noted that there’s a way to change placeholder text and form labels as well as enable autofocus in the back end. However, there’s quite a lot of steps and not sufficient official documentation to make sure that we have a compliant form. Making form IDs unique is also not part of their official accessibility checklist

Matrix Findings Summary:

✓ Passes:

• Required fields programmatically indicated

• No color alone for errors

• All items pass color contrast

✗ Fails:

• Message field unlabeling

• Multiple label references for single fields

• Missing autocomplete attributes

• Placeholder text misuse

• Error handling issues (summary, visibility, announcement)

• Success announcement issues

Video Implementation

Initial video testing examined both platform-hosted videos and YouTube embeds. For platform-hosted videos, testing revealed autoplay functionality. When examining reduced motion preferences through system settings, video behavior properly respected these settings, stopping autoplay when reduced motion was enabled.

For YouTube embeds, inspection showed proper iframe implementation. The expert noted this was coming from YouTube, indicating an expectation of standard YouTube player accessibility features.

Matrix Findings Summary:

✓ Passes:

• Autoplay videos:

  • Has pause button

  • Respects prefers reduced motion

  • Controls keyboard focusable

  • Controls correctly coded

  • Controls properly labeled

  • Works on zoom

• YouTube embed:

  • Iframe properly titled

  • All controls keyboard focusable

  • Controls correctly coded as buttons

  • All buttons have accessible names

  • Captions exist/can be added

  • Works on zoom

✗ Fails:

• Captions exist/can be added for platform-hosted videos

Carousel Implementation

Testing of the carousel component revealed mixed implementation. The expert inspected the carousel structure, finding it had a role="region" and proper labeling. However, focus management showed significant issues.

Examining the controls, the expert found they used aria-pressed instead of the correct aria-current for slide indicators. DOM inspection revealed group roles with slide count information included in ARIA labels.

Matrix Findings Summary:

✓ Passes:

• Carousel properly wrapped in section/region with aria-label

• Slides implemented as list with proper group role and count

• Ability to set heading levels

• Previous/next and dot navigation implemented as buttons

• All buttons have meaningful labels

• Keyboard focus doesn't go to hidden items

• Screen readers don't read hidden items

• Works on zoom

✗ Fails:

• Dot navigation uses incorrect aria-pressed

• Focus doesn't shift to slide when using navigation buttons

• Auto-play carousels lack pause button

• Animations don't respect prefers reduced motion

• Missing visible focus

• Color contrast issues on controls

Document Structure and Language

Initial testing included checking the HTML source for language definition. The tester specifically noted the absence of a lang attribute on the HTML tag, comparing it to a properly implemented example that showed HTML lang='en-us'.

Matrix Findings Summary:

✓ Passes:

• Content contained in landmark regions

• Tab order matches visual order

• Reading order follows meaningful sequence

• No justified text

✗ Concern:

• Page language definition (concern - language not automatically set to match builder language, site owners may miss this setting)

Responsive Design and Zoom Testing

Zoom testing was conducted at both 200% and 400% magnification levels. The tester verified content reflow and functionality at different zoom levels, checking for content overflow and interaction capability.

Matrix Findings Summary:

✓ Passes:

• Navigation maintains functionality at zoom levels

• Content reflows appropriately

• No horizontal scrolling required

• Interactive elements remain usable

Overall Platform Metrics

Final quantitative assessment from matrix:

• Total passing criteria: 50

• Total concerns: 6

• Total failures: 24

• Total N/A items: 10

• Percentage of good applicable checks: 62.50%

• Platform ranking: 3rd out of 5 tested platforms

Technical Recommendations

Based on combined testing observations and matrix results:

Critical Priorities:

1. Implement skip link functionality

2. Add proper focus indicators across all interactive elements

3. Fix form labeling and error handling

4. Address keyboard traps in accordion implementation

5. Correct ARIA patterns in carousel controls

6. Add proper language attribute implementation

Enhancement Opportunities:

1. Improve default color contrast implementation

2. Add native support for form helper text

3. Implement proper captions support for platform videos

4. Add pause controls for autoplay content

5. Implement proper reduced motion support

Conclusion

Webflow has strong foundational accessibility support in some areas but requires significant improvement in others. The platform scored 62.50% on applicable accessibility checks, ranking 3rd among tested platforms. While many basic accessibility features are implemented correctly, critical issues like missing skip links, keyboard traps, and improper ARIA usage need addressing to achieve better accessibility compliance.