melsumner / ember-a11y-for

Building an accessible Ember app- a developer guide

ember-a11y-for

This is an Ember Application that provides information specifically regarding building accessible Ember apps.

If you would like to suggest a change or improvement, please file an issue.

Pull requests for issues are welcome!

Prerequisites

You will need the following things properly installed on your computer.

• Git
• Node.js
• Yarn
• Ember CLI
• Google Chrome

Installation

• git clone <repository-url> this repository
• cd ember-a11y-for
• yarn install

Running / Development

• ember serve
• Visit your app at http://localhost:4200.
• Visit your tests at http://localhost:4200/tests.

Code Generators

Make use of the many generators for code, try ember help generate for more details

Running Tests

• ember test
• ember test --server

Linting

• yarn lint
• yarn lint:fix

Building

• ember build (development)
• ember build --environment production (production)

Deploying

Specify what it takes to deploy your app.

Further Reading / Useful Links

• ember.js
• ember-cli
• Development Browser Extensions
  • ember inspector for chrome
  • ember inspector for firefox

ember-a11y-for's Issues

Add dracula theme for prism

To match the rest of the website, add the dracula theme to the prism configuration.

See shipshapecode/ember-prism#355 for status of current challenges.

Add Testing info: ember-a11y-testing

In the linting and testing section (https://ember-a11y-for.dev/#section-linting-and-testing), there is a test sub-section. Within that sub-section, add information about ember-a11y-testing and how to use it in an Ember app.

Add engines info for routing

Check to see how ember-a11y-refocus works in apps with engines, and specifically address this in the routing section.

Add section: focus management

Add a section on focus management. It should include:

• what the browser naturally gives you
• browsing mode vs focus mode in screen readers
• focus should return to the place it came from
• how focus works in Ember
• addons to consider

Internationalize App

It would be cool if the information in this app could be available in different languages.

If you're willing to help out with this, please comment on this issue with the language that you could provide the translation for.

Enhancement: remediation for an existing app

Add a page that outlines how to remediate an existing application.

Add edit capabilities

Add edit capabilities to each section so users can submit PRs to enhance the content

The "edit" link should take them to the file in the repo. Right now that's https://github.com/MelSumner/ember-a11y-for/edit/main/app/templates/index.hbs since it's all only one page.

Add page: checklist

Add a page that provides a BASIC checklist for "hey make sure to do these things"

Ensure that print styles are considered.

Add section: forms

Add a section that discusses accessible forms in Ember.

Try to address:

• What does the framework give you by default?
• What addons are useful?
• WCAG considerations

Add Testing info: existing framework support

In the linting and testing section (https://ember-a11y-for.dev/#section-linting-and-testing), there is a test sub-section. Within that sub-section, add some information about the existing a11y testing support that exist by default.

Add page: resources

Add a page that provides links to helpful a11y resources for Ember developers