Master ARIA and VoiceOver: Boost Mobile Accessibility in Your Web Apps

A group of fictional students embarks on a quest that introduces the need for an "accessibility tool" called iPhone, setting the stage for a deep dive into web accessibility.

Understanding ARIA

ARIA (Accessible Rich Internet Applications) provides semantic information for assistive technologies, especially screen readers used by visually impaired users.

Common Screen Readers

Android: TalkBack, Funtouch

iPhone: VoiceOver

Windows: NVDA, JAWS

Chrome: ChromeVox

macOS: VoiceOver

ARIA Core Parts

role attribute values

aria attributes

aria state attributes

Role Attribute Examples

role="tab"

role="button"

ARIA Attribute Examples

aria-haspopup

aria-label="Close"

ARIA State Attributes

aria-checked="true"

aria-expanded="false"

Using VoiceOver on iPhone

Activate VoiceOver quickly via Siri: "Turn on VoiceOver". If Siri does not respond, use the manual path: Settings → General → Accessibility → VoiceOver.

When VoiceOver is on, touch interactions change:

Touchstart/Touchmove reads content instead of triggering clicks.

To activate an element, first select it with Touchstart/Touchmove, then double‑tap.

Three‑finger swipe scrolls the page.

Drag gestures require continuous touch without lifting the finger.

Because the interaction model changes, developers must provide clear descriptions and state changes.

Practical VoiceOver Tips

Ensure every interactive element has a readable label (aria-label, title, or visible text).

Use role="button" or role="link" to convey purpose.

Update aria‑expanded, aria‑checked, aria‑selected, etc., to reflect current state so VoiceOver announces it automatically.

Handling Hidden Content

Elements hidden with display:none are ignored, but those hidden with opacity:0, visibility:hidden, text‑indent, or off‑screen positioning are still read. Use aria-hidden="true" to exclude decorative elements.

Combining Text for Continuous Reading

When multiple inline elements need to be read as a single phrase, assign role="option" or wrap them in a container with appropriate aria‑label or aria‑describedby.

Examples

<a href="#" class="icon" role="button" aria-label="Free">Free</a>

<i class="icon" role="img" title="Icon"></i>

<button role="button" aria-expanded="true">More</button>

Best Practices

Prefer native form controls; style them with opacity:0 when custom appearance is needed.

Use ARIA attributes (e.g., aria‑checked) instead of custom CSS classes for state.

Avoid custom touchmove interactions; they are costly for screen‑reader users.

Provide clear, concise labels and descriptions for all interactive elements.

Conclusion

By applying ARIA roles, attributes, and proper VoiceOver handling, developers can create mobile web experiences that are both visually appealing and fully accessible to users relying on screen readers.