Accessibility

Ember has strong a11y tooling — ember-a11y-testing runs axe in your tests, and standard ARIA practices apply everywhere else.

4 min read Level 2/5 #ember#accessibility#a11y

What you'll learn

Install ember-a11y-testing
Run a11yAudit in acceptance tests
Apply ARIA attributes in templates

Accessibility is a first-class concern in the Ember community. The ember-a11y-testing addon brings axe-core into your test suite so regressions get caught automatically.

Install

ember install ember-a11y-testing

Audit in Acceptance Tests

import { module, test } from 'qunit';
import { setupApplicationTest } from 'ember-qunit';
import { visit } from '@ember/test-helpers';
import a11yAudit from 'ember-a11y-testing/test-support/audit';

module('Acceptance | dashboard a11y', function (hooks) {
  setupApplicationTest(hooks);

  test('passes axe checks', async function (assert) {
    await visit('/dashboard');
    await a11yAudit();
    assert.ok(true, 'no a11y violations');
  });
});

a11yAudit throws if axe finds violations, which fails the test.

ARIA in Templates

ARIA attributes are just HTML — bind them like any other attribute:

<button
  type="button"
  aria-expanded={{this.isOpen}}
  aria-controls="menu-1"
  {{on "click" this.toggle}}
>
  Menu
</button>

<ul id="menu-1" role="menu" hidden={{not this.isOpen}}>
  ...
</ul>

Focus Management

Use a modifier to focus elements on insert — critical for modals and route transitions.

<input {{focus-on-insert}} aria-label="Search" />

Combine these tools and ship apps that work for everyone.

Internationalization With ember-intl →