Showit 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. The tester found no skip link present when using the Tab key, and DOM inspection confirmed the complete absence of this crucial accessibility feature.

Matrix Findings Summary:

✗ Fails:

• Skip link presence

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

Navigation Structure Implementation

Testing revealed significant structural issues with Showit's navigation implementation. DOM inspection showed improper use of the <nav> element, with nav tags incorrectly placed inside individual items rather than wrapping the navigation as a whole. This resulted in multiple navigation landmarks being announced to screen readers, creating a confusing experience.

The dropdown implementation showed severe keyboard accessibility issues. Testing revealed that while dropdowns could be opened with the Return key, they couldn't be closed with keyboard controls. Additionally, the DOM order was reversed, causing counterintuitive keyboard navigation.

Matrix Findings Summary:

✗ Fails:

• Improper nav tag implementation (nav on individual items)

• Nav tag labeling

• Dropdown keyboard accessibility

• Missing focus indicators

• Reversed DOM order for keyboard focus

• Missing ARIA attributes (expanded, controls, haspopup)

• Mobile menu keyboard accessibility

• Zoom functionality at certain viewport widths

Form Implementation

Form testing revealed fundamental accessibility issues. All form fields were found to be unlabeled, with text visually appearing as labels but not properly implemented using the <label> tag. The form implementation also showed tab index issues that created an illogical navigation order.

Matrix Findings Summary:

✗ Fails:

• All fields unlabeled

• Missing autocomplete attributes

• No visible focus indicators

• Missing error handling

• Success messages not announced by screen readers

Video Implementation

Video testing examined both platform-hosted videos and YouTube embeds. For platform-hosted videos, testing revealed autoplay functionality with no pause controls and no respect for reduced motion preferences. YouTube embeds lacked proper iframe titles.

Matrix Findings Summary:

✗ Fails:

• Missing pause button for autoplay videos

• No reduced motion support

• Missing iframe titles for YouTube embeds

• Decorative SVGs not properly hidden from screen readers

Carousel Implementation

Testing of the carousel component revealed significant accessibility issues. The implementation lacked proper structure, with no region role or labeling. Navigation controls were implemented as links rather than buttons, with unlabeled images that caused screen readers to announce URLs instead of meaningful descriptions.

Matrix Findings Summary:

✗ Fails:

• No carousel region with aria-label

• Navigation controls as links instead of buttons

• Missing meaningful labels for controls

• Focus management issues

• Buttons losing focus when triggered

• Missing visible focus indicators

Document Structure and Language

Testing revealed missing fundamental accessibility attributes, including the absence of a page language definition. A deeper look into the backend settings reveal that we have an option to set the page language. However, since Showit doesn’t include this in their accessibility documentation, we consider this as a concern. Content structure showed issues with landmark regions and justified text that creates readability concerns.

Matrix Findings Summary:

✗ Fails:

• Missing page language definition

• Improper landmark structure

• Justified text usage

• Tab order does not match visual order

Overall Platform Metrics

Final quantitative assessment from matrix:

• Total passing criteria: 21

• Total concerns: 4

• Total failures: 49

• Total N/A items: 7

• Percentage of good applicable checks: 28.38%

• Platform ranking: 5th out of 5 tested platforms

Technical Recommendations

Based on combined testing observations and matrix results:

Critical Priorities:

1. Implement proper semantic structure

   • Correct nav tag implementation

   • Add proper landmark regions

   • Fix reversed DOM order

2. Add fundamental accessibility features

   • Implement skip links

   • Add proper form labeling

   • Implement focus indicators

3. Fix keyboard accessibility

   • Correct dropdown functionality

   • Fix mobile menu accessibility

   • Address carousel control issues

Enhancement Opportunities:

1. Improve ARIA implementation

   • Add proper ARIA attributes to interactive elements

   • Label landmarks appropriately

2. Enhance form accessibility

   • Add proper error handling

   • Implement success message announcements

3. Improve video accessibility

   • Add pause controls

   • Implement reduced motion support

4. Fix content structure issues

   • Remove justified text

   • Correct heading hierarchy

Conclusion

Showit has significant accessibility issues across all tested components. The platform scored only 28.38% on applicable accessibility checks, ranking last among tested platforms. Major architectural changes would be needed to achieve better accessibility compliance, as many basic accessibility features are either missing or improperly implemented.