ember-a11y / a11y-demo-app

Ember Accessibility Demo App

ember-a11y

This Ember addon provides a {{focusing-outlet}} component which you can use in place of normal {{outlet}}s.

The current implementation of this addon will immediately apply focus to the most relevant piece of content based on actions users take (clicking buttons, links, etc). This allows screen readers to catch changes and read the right information, thus providing a much better experience for screen reader users.

Usage

ember install ember-a11y

In your templates you would then swap in {{focusing-outlet}} for {{outlet}} wherever it may occur.

You also need to ensure that your application's router is not set to use locationType: 'hash'. Set ENV.locationType appropriately inside of config/environment.js.

Note about ember-getowner-polyfill

If you are using Ember 2.3.0-beta+ you should add ember-getowner-polyfill to your blacklist in ember-cli-build.js:

var app = new EmberAddon(defaults, {
  addons: {
    blacklist: ['ember-getowner-polyfill']
  }
});

Demo Application

Included in this addon is a demo application for testing ember-a11y.

You can access it through Github Pages or build it from source files with the following steps:

• run ember server
• Visit the demo app at http://localhost:4200.

Using a Screen Reader

Many of the examples in the demo app are meant to be used alongside a screen reader. A few of our suggestions:

• VoiceOver (macOS)
• JAWS (Windows)
• TalkBack (Android)

• ChromeVox (ChromeOS)
  • Also, check out ChromeVox Next

• NVDA (Windows)

Commands

• npm run test - Run all tests.
• npm run demo - Publish an updated demo app.

a11y-demo-app's Issues

clear addons list

The addons referenced in the sidebar are out of date. Clear out the current addon list (adding a new list will be in a separate issue).

update logo

The ember-a11y project has obtained an Ember mascots since creating this website. The logo should be replaced with the A11y Zoey and Tomster.

Links to examples pages are broken

It seems that links to the examples are broken on https://ember-a11y.github.io/a11y-demo-app/.

The links are working as we can access the examples pages but if you take a look at the URL you will notice that there's a # in the middle. For example, this is the link to the aria-role page https://ember-a11y.github.io/a11y-demo-app/#/examples/aria-role.

Having a # in the URL make it impossible to navigate to anchors on a specific page. For example, in the aria-role page there are 4 links that are normally connected to 4 anchors on the page. But if you click on them you are redirected to the home page of the demo app.

I've checked an this problem does not exist in local. Maybe something happens during the build and change the links 🤔

---

[Update]

Ok I think it's this line

update aria-role demos

Page: https://ember-a11y.github.io/a11y-demo-app/#/examples/aria-role

Update aria roles demos to show the role:

• being used on a div
• being used with the recommended native HTML element for the role, if it exists

upgrade app to current LTS

update app to current LTS

update contact information on home page

• Update the home page (https://ember-a11y.github.io/a11y-demo-app/#/) text to reference Discord instead of Slack
• remove Twitter references