Melanie Sumner MelSumner

Accessible by Default - WIP

The purpose of this (gist) is to break down what steps Ember.js would need to take, in order to be considered accessible by default. The goal is to identify what is - and what is not - possible to do "by default".

This document should neither be be considered a criticism of any previous effort nor a dictation of how things must be, but rather a starting point for conversation for where we (as a community) could go.

Assumptions & Introductions

This document assumes that the reader is at least minimally familiar with what digital accessibility is and the existence of the WCAG Guidelines. This proposal uses WCAG 2.1 documentation.

├── INDEX (home)
├── DOCS
|   ├── Ember.js Guides
|   ├── ember-cli Guides
|   ├── (ember-data guides)
|   ├── Ember.js API 
|   ├── (ember-cli API)
|   ├── (ember-data API)
| └── Learn Ember

Initial Setup

Install Ember - npm install -g [email protected]
Create a new app - ember new my-app
Change to the app directory - cd my-app
Install Sass support - ember install ember-cli-sass
Change the app.css file to app.scss - git mv app/styles/app.css app/styles/app.scss
Start your server on the first available port - ember s -p 0
Confirm that everything looks ok in your browser. You should see the "Congratulations, you made it!" message on the home page
Stop your server in your terminal window by pressing CTRL + C

[![Latest NPM release][npm-badge]][npm-badge-url]
[![TravisCI Build Status][travis-badge-url]][travis-project-url]
[![CircleCI Build Status][circle-badge]][circle-badge-url]
[![Test Coverage][coveralls-badge]][coveralls-badge-url]
[![Code Climate][codeclimate-badge]][codeclimate-badge-url]
[![Ember Observer Score][ember-observer-badge]][ember-observer-badge-url]
[![License][license-badge]][license-badge-url]
[![Dependencies][dependencies-badge]][dependencies-badge-url] 
[![Dev Dependencies][devDependencies-badge]][devDependencies-badge-url]

The aria-live attribute should be used with extreme caution, as it can provide an incredibly poor user experience for users with assistive technology.

Because the aria-live attribute can be used on any HTML element, and effects all child elements of the element marked with the attribute, a thorough understanding of how this role works and when to use it is especially necessary for competent software engineers who build web-based solutions.

The aria-live attribute can have a few different values (POLITENESS_SETTING): off, polite, and assertive.

Politeness Setting: Off

Assistive technologies should not announce updates unless the assistive technology is currently focused on that region. Regions which contain information that will receive updates but are not critical for users to know about immediately can be marked with aria-live="off". Once that region has (user-driven) focus, the updates will be made known.

Document Active Element (DAE) is a JavaScript bookmarklet intended to help you more easily identify where the activeElement is on your screen.

To use:

Add a new bookmark
in the "Name" field, type DAE
in the URL field, add the following code:

javascript:(function(){ document.activeElement.style.border = "1px solid red"; })();

Safari Keyboard Navigation

In order to allow for full keyboard navigation of all element in Safari on macOS, make sure the following options are enabled.

All Controls in macOS

In the macOS settings, allow "All Controls" to be keyboard accessible. Enable this feature by going to:

Settings
Keyboard

Start Date: (fill me in with today's date, YYYY-MM-DD)
Relevant Team(s): (fill this in with the team(s) to which this RFC applies)
RFC PR: (after opening the RFC PR, update this with a link to it and update the file name)
Tracking: (leave this empty)

Interactive New Ember App Creation

Summary

As part of the effort to make new Ember apps more conformant for digital accessibility requirements at a global scale, this RFC proposes an interactive workflow for new Ember apps. This will also have the benefit of assisting new users who prefer an interactive model of new app creation.

On undoing, fixing, or removing commits in git

A git choose-your-own-adventure!

This document is an attempt to be a fairly comprehensive guide to recovering from what you did not mean to do when using git. It isn't that git is so complicated that you need a large document to take care or your particular problem, it is more that the set of things that you might have done is so large that different techniques are needed depending on exactly what you have done and what you want to have happen.

	import Ember from 'ember';

	export default Ember.Controller.extend({
	appName: 'Ember Twiddle',

	actions: {
	transitionToShow(routeName) {
	this.transitionToRoute(routeName);
	}
	}