🦻 Accessibility

Accessibility guidelines

At ĀYŌDÈ, we design for universal accessibility—not as an afterthought, but as a core requirement. Our platform must work effectively for all users, regardless of their abilities, circumstances, or context.

Accessibility extends beyond permanent disabilities to include temporary and situational challenges. A student might be dealing with a permanent visual impairment, a temporary injury, or simply learning in a low-light environment. Each scenario demands equal considerations.

Our development follows WCAG 2.1 Level AA guidelines to ensure consistent, high-quality accessibility across all features.

1. Content and structure

Avoid links that says ‘Click here’ or content-free text like ‘More details’ applied to a list of links. Source: WCAG 2.1: Link Purpose (in context)

Color alone is ineffective

Don’t specify important information by color alone. Use a combination of text, color, and/or graphical objects. Source: WCAG 2.1: Use of color

Consistent and predictable navigation

Ensure that repeated components occur in the same order on each page of a site. Source: WCAG 2.1: Consistent Navigation

2. Consistent components

UI components

Functionality should be consistent. Maintaining a design system, pattern library, or style guide is encouraged to keep consistency. Here are some examples of amazing design systems: Shopify’s Polaris, Atlassian’s design library, BBC’s GEL.

Descriptive headings

Use descriptive and informative page titles. Source: WCAG 2.1: Headings and labels, WCAG 2.1: Section headings, WCAG 2.1: Page titled

Multiple navigation options

Users must have at least two ways to find any page on our platform, unless that page is part of a step-by-step process. For example, a user should be able to find a lesson through both the course menu and search function. Source: WCAG 2.1: Multiple Ways

3. For touch targets

44px minimum

Make buttons and links large enough to tap (44px minimum) and keep them well-spaced from each other.

Source: WCAG Mobile accessibility mapping: Touch target size and spacing, WCAG 2.1 Target Size

This can be disorientating to screen reader users or users with cognitive disabilities.

Tell users before they click if a link will open in a new window. Use either text or an accessible icon. Source: WCAG technique: Giving users advanced notice before opening a new window

5. Animation

Some people with seizure disorders can have a seizure triggered by flashing visual content.

  1. Give users a non-animated option
  2. Never flash content more than 3 times per second
  3. Keep any flashing small and low-contrast

Source: WCAG 2.1: Seizures and physical reactions, WCAG 2.1: Three flashes or below threshold, WCAG 2.1: Three flashes