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

• Use accessibility checkers like WAVE, or Lighthouse (in Chrome DevTools) to audit your pages

• Test with keyboard-only navigation

• Try screen reader testing (VoiceOver on macOS is a good starting point)

Legal & Compliance

• Aim for WCAG 2.1 Level AA compliance

• If you sell products or services in the EU, ensure you comply with the European Accessibility Act (EAA).