Accessibility

Web accessibility is about making websites usable by as many people as possible, regardless of their abilities or disabilities. This includes people with visual, auditory, motor, or cognitive impairments.

• All content and functionality must be perceivable, operable, understandable, and robust.
• Elements hidden visually using CSS must not be accessible to screen readers or keyboard navigation.
• Use semantic HTML whenever possible before relying on ARIA attributes.

---

Page Structure & Titles

• Every page must contain one single H1 that represents the main topic of the page.
• Headings must follow a logical hierarchy (H2 → H3 → H4, never skipping levels).
• Headings should never be empty.

Caution

If a title is visually represented by an image or icon, include accessible text for screen readers.

---

Readability & Text

• Font sizes must be at least 16px.
• Ensure sufficient color contrast between text and background.
• Avoid long blocks of dense text; prefer clear paragraphs and lists.

---

Keyboard Navigation

• All interactive elements must be accessible using the keyboard.
• Keyboard focus must always be visible.
• When a modal is open:
  • trap focus inside the modal
  • restore focus when the modal closes
  • include role="dialog" and aria-modal="true"
• Users should never get “lost” when navigating with the keyboard.
• Include skip links at the top of the page to allow users to bypass repetitive content.

---

Clickable & Interactive Elements

• Links or buttons without visible text must include a descriptive aria-label.
• Links that open in a new window or tab must clearly announce this to screen readers.

<a
  href="https://external-site.com"
  target="_blank"
  rel="noopener"
  `aria-label`="Terra Blog, opens a new window"
>
  Terra Blog
</a>

• If an element already has an aria-label, append “opens a new window” instead of replacing it.

---

Navigation & Menus

• Use the semantic
  element for navigation.
• If semantic elements are not possible, use appropriate ARIA roles (role="navigation").
• For dropdown menus:
  • use aria-haspopup="true"
  • toggle aria-expanded="true / false" based on state

<button
  aria-haspopup="true"
  aria-expanded="false"
>
  Menu
</button>

---

Media & Visual Content

• All meaningful images must include descriptive alt text.
• Decorative images or icons should be hidden from assistive technologies.

<img src="chart.png" alt="Sales growth chart for Q1 2024" />

<img src="divider.png" role="presentation" />

• Figure elements must either:
  • contain accessible text, or
  • be excluded using role=“none”

---

Forms & Inputs

• Every form field must have:
  • a element or
  • an aria-label
• Required fields must include aria-required="true".
• Validation errors must be communicated using aria-invalid.

<label for="email">Email</label>
<input
  id="email"
  type="email"
  aria-required="true"
  aria-invalid="false"
/>

• Search inputs must include role="search" for semantic clarity.

---

Sliders & Carousels

• Sliders and carousels must be clearly identified as landmarks.
• Use aria-label to describe their purpose (e.g. carousel, featured articles).
• Carousels are often problematic for accessibility. Avoid them when possible.

---

Navigation controls (next / previous) must be accessible and labeled.

• Pagination items must indicate:
  • their function
  • the current slide

<button `aria-label`="Next slide"></button>

---

Iframes & Embedded Content

• Iframes must include a descriptive title or aria-label.
• If iframe content is irrelevant to screen-reader users, it should be hidden.

<iframe
  src="video.html"
  title="Product introduction video"
></iframe>