March Accessibility (A11Y) Talks

Thursday, May 03, 2018

Hook42 Team

In March, A11y Talks welcomed Melanie Sumner, an application architect from JP Morgan Chase. She is an accessibility advocate and is an EmberJS core team member and meetup organizer in Chicago. The tagline for Ember is "the framework for building ambitious applications". Melanie spoke of ways to inject accessibility into not only the Ember project, but into other single-page applications so some users are not left behind.

Takeaways

Why do we ignore Accessibility?

Accessibility is emotional - It is easy to ignore things that are emotional. But, users are important! They need to be able to perform everyday tasks like checking their bank balances or buying items online. Lack of accessible websites can be frustrating and lead to thinking that developers don't care.

It is also emotional for developers. Timelines are a reality and the “ship it now and fix it later” doesn’t always work or happen in the real world.

Accessibility is hard - It is difficult to get accessibility correct when first starting out. There are some difficulties that should be solved no matter what framework is used.

Route transitions - Ember handles routes splendidly, but assistive technology doesn’t always pick up link events.
Modals - There’s a difference between visible focus and screen reader focus and when using a modal the focus needs to be trapped.
Aria attribute support - We need to be able to provide easy Aria attribute support, which isn't always done.
Click all the things - Attaching actions to all the things can be tricky, especially when events are nested into other events. Keyboard navigation needs to accessible for everyone.
Passwords - They need to be safe, but passwords can be difficult for screen readers.

Web standards are important

These give us easy wins by giving us accessibility by default. Easy wins include:

Use HTML 5 - Please use semantic HTML, divs are great but we should be using an HTML element.
Link vs. Button - If it goes to a route use a link. If it goes with a form or closes a modal, use a button. Focus on what is machine-readable more than what it looks like.
Keyboard Navigation - Anything that can be done with the mouse should be able to be done with the keyboard.
Color contrast - There are lots of color contrast tools available - USE THEM.
Image alt text - Add alt text to an image if it’s relevant to the image. EX- Images used within paragraphs don't need to be as descriptive as images used to sell products.

Pick your battles

There are things we need to do as a whole web community - not just within the Ember community. There are arguments about tabs vs. spaces or the div element vs. the semantic HTML5. HTML, CSS, and JS are all fundamentally important for creating accessible applications.

In the ember community there's the saying, “There’s an ADDON for that”. The following features already exist:

Ember - A11y - Relevant focus to views and outlets.
Ember - A11y Testing - Built on aXe core and takes the automated testing processor a little further.
Ember - A11y - Landmarks - Single page applications usually wrap everything in a div and put the div in the body, but then some of the landmark navigation regions or elements then require extra roles to be added. Ember is pushing to be able to opt out of the wrapping div.
A11y - Announcer - Tells which route you’re on when you switch routes.
Ember - CLI - Template-Lint - Helps make sure there are some extra accessibility rules written into the linter to help developers before they ship the code.
Ember - Component-Attributes - Is a stop-gap while we revisit how to handle attributes in components. This provides the biggest win by being able to add HTML attributes to existing components.

EmberJS list of accessibility addons

Solutions are happening NOW!

Sight - Engineers don’t always think of the little things... A new innovation, EnChroma, allows color-blind users to see things such as the red and green MacBook power cord lights.
Hear - Auditory brainstem implant surgeries help those with hearing loss know when sound is present or absent.
Auto-Generate Text - Microsoft has a project cloud service called Video Indexer. It can provide transcriptions, extract text that appears in the video, live translate to different languages, and it can adjust the language model used for transcription making it market specific.
Image Descriptions - Include.ai makes image descriptions more web accessible.

Most importantly

Remember you’re not alone! If you get stuck, ask the community, ask your mentors, and ask others. You just don’t know how to do it YET. “Be magnanimous”. Get involved and be present. Be sure to always have these issues addressed: