Accessibility
Elements and Accessibility
Designing with accessibility in mind ensures your website works for everyone, including people with visual, auditory, cognitive, and motor impairments. It’s not just good practice; in many regions, it’s also a legal requirement.
This chapter covers how to create accessible websites using Elements. We’ll walk through key principles, recommended techniques, and how Elements helps you meet common accessibility standards like WCAG 2.1 and the upcoming European Accessibility Act (EAA).
From using semantic HTML and alt text, to managing contrast and keyboard navigation, we’ll give you pointers on how to build sites that are inclusive, usable, and compliant, without compromising on design.
While not exhaustive, the following checklist covers the most important steps to help you build a more accessible website from the start:
Structure & Semantics
Use proper heading levels (h1, h2, h3, etc.) in logical order
Structure content with semantic HTML (e.g. <nav>, <main>, <section>)
Text & Contrast
Ensure sufficient color contrast between text and background
Avoid using color as the only way to convey information
Use readable font sizes and line heights
Images & Media
Add meaningful alt text to all images
Provide captions or transcripts for videos and audio content where possible
Avoid autoplaying media with sound
Forms & Interactivity
Label all form inputs clearly and associate them with their controls
Ensure error messages are clear and accessible
Responsiveness & Layout
Use responsive layouts that adapt to different screen sizes and zoom levels
Avoid fixed pixel sizes for text or important layout elements
Testing & Validation
Test with keyboard-only navigation
Try screen reader testing (VoiceOver on macOS is a good starting point)
Legal & Compliance
Last updated
Was this helpful?