Screen reader compatibility: structure, names and states

The BFSG has applied since 28 June 2025 to specific products and consumer services. Assess your offering with the BFSG check solution. The checks below help you find technical barriers on your website.

Screen readers present content as speech or through a braille display. Missing names, unclear headings and lost focus can prevent people completing a task.

Accessibility is not a direct Google ranking factor (Google Search Central). Clear headings help people navigate and search engines understand the content.

1. Clear HTML Structure & Semantic Markup for Accessible Web Design and Accessibility

Structured content improves not only the user experience but also accessibility by screen readers & search engines.

Correct heading hierarchy (H1–H6)

List tags (<ul>, <ol>) for enumerations instead of plain text

• ARIA labels (aria-label, aria-labelledby) for interactive elements

Example of clear HTML structure & semantic elements:

Incorrect:

<div class="title">Contact</div>

Correct:

<h2>Contact</h2>

2. Meaningful Alt Texts for Images & Graphics – for Visual Accessibility

Missing or poor alt text makes images incomprehensible for screen reader users. Alt attributes help screen reader users understand visual content.

Example of correctly set alt texts:

Incorrect:

<img src="product.jpg" alt="" />

Correct:

<img src="product.jpg" alt="Smartphone with accessible app interface" />

3. Forms & Buttons for Accessible Interaction with Screen Readers

Inaccessible forms are a major barrier for users with visual impairments.

Every field needs a <label> element

Display error messages as text, not just color

Enable keyboard navigation (tabindex="0")

Good example of an accessible input field:

<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required />

4. Optimize Keyboard Navigation & Focus Management for Better Accessibility

Many users do not use a mouse – the entire navigation must work via keyboard.

• Make focus styles (:focus) visible

• Enable Escape key for modal windows

Optimize tab order (tabindex)

The cookie banner checklist shows a missing dialog name and the check after opening settings.

5. Design Dynamic Content & Pop-ups Screen Reader-Friendly

• Live content & interactive components require special screen reader treatment:

• aria-live="polite" for automatic announcements

• No auto-playing videos without a pause button

• Pop-ups with focus management & semantic markup

Example of an accessible live announcement:

<div aria-live="polite">New message received.</div>

Explore criteria in the WCAG hub. Use the Accessibility Audit for machine-evaluable findings and add manual tests.