Accessibility Working Group Update

– By Melanie Sumner

Back in March, an Accessibility (A11y) Strike Team was formed to address the issues outlined in Ember RFC Issue 595 - Technical Accessibility Issues in New Ember Apps. This blog post is to update the community on that group's work.

The Strike Team met weekly between March 25 and June 24. We even managed to celebrate Global Accessibility Awareness Day!

There were five items listed in Issue 595:

  1. Application Language Support
  2. Label/Input Support
  3. Page Title Support
  4. Support for ...attributes
  5. Accessible Routing Support

Active Work

Application Language Support

The goal of application language support was to provide a mechanism for new Ember apps to pass WCAG Success Criteria 3.1.1 - Language of Page. To meet that goal, Joseph Sumner, Jamie White, Ava Wroten and Melanie Sumner authored RFC 635, which proposed a --lang flag for ember-cli. This flag would enable developers to declare the application's language while they were creating the app, allowing them to more easily meet this particular success criteria. This RFC was merged on June 12th; the feature itself, authored by Joseph Sumner with help from Rob Jackson, was merged on August 24th.

To add another layer of support and enhance the overall developer experience, the team also decided that it would be useful to have an interactive way to create new Ember apps. After some discussion, Melanie Sumner authored RFC 638. The RFC was accepted and merged on August 10th. Implementation is still pending.

Additional support came from update to the Ember Guides, in both prose and art, thanks to team members Ava Wroten and Lenora Porter. Melanie Sumner also added a new rule to the Ember Template Lint addon called require-lang. It checks to make sure that the lang attribute is present on the <html> attribute. This rule will be effective in v3.0 of the addon, thanks to Alex Kanunnikov adding the ability to lint .html files in PR 1232.

Label and Input Support

There were 3 things the team decided to do in this area:

  • Update the guides to provide more explicit guidance
  • Provide an addon that would help provide ids within a specific context
  • Write an RFC to propose a more permanent solution

Benjamin Jegard created the Ember Context Id Helper addon. The {{context-id}} generates a unique id for a given context. Because it uses Ember's guidFor function under the hood, it will always return the same id for the same context. A use case for context-id helper is to programmatically associate <label>s and <input> element using the <label> for attribute and the <input>s id attribute.

This addon took inspiration from the pre-RFC for the guid-for helper, which resulted in RFC 659, which proposes a new built-in template helper, authored by Steve Szczecina.

Rajasegar Chandran and Jen Weber updated the Official Ember Guides with more explicit information for how to associate <label> and <input> elements. Melanie Sumner also authored ember-component-patterns that reflect best practices for <input> fields.

Finally, support has been added to the Ember Template Lint addon with rules that require <input> elements to have valid labels and that there are no duplicate labels. Additional work is now being done to check that there are no duplicate ids as well as valid use of form groups.

Page Title Support

In our April 8th meeting, the team discussed how we thought we should approach page title support. More discussion throughout the month led us to support the template-driven support for page titles in Ember apps.

Benjamin Jegard, Melanie Sumner and Ricardo Mendes authored RFC 645, which proposes that the Ember Page Title addon be added to the blueprints for new Ember apps. After Framework Core Team discussion, it was decided that the addon needed some work before the RFC could be accepted. That work was outlined in an issue and is currently underway, thanks to community member Raido Kuli!

Back to the Drawing Board

After discussion and some analysis, it was determined that some issues required the attention of the Framework Core Team to resolve. These issues will likely require re-thinking of significant Ember features, so some workarounds should be expected until they are resolved.

Support for ...attributes

As outlined in Ember Issue 19026, ...attributes does not have a guaranteed merge order. This is problematic for 5 ARIA attributes because they can have multiple values in the form of an ID reference list and the order of these values matters.

This is likely to lead to some additional discussion about how Ember handles properties and attributes, and rethinking that approach to better support attributes.

Accessible Routing

There is an ongoing discussion for how to best resolve this issue in a permanent way. Despite a significant amount of research into the issue and an RFC that attempts to solve the issue, no resolution has been agreed upon yet. However, the Framework Core Team has accepted that accessibility is a design constraint for any new router work.

Until then, developers are encouraged to review the accessibility section of the Ember guides, and consider one of the routing-related addons for use. Options include ember-self-focused, a11y-announcer, ember-a11y, and ember-a11y-refocus.

A11y Working Group

At the final Strike Team meeting, we decided to continue the accessibility work in Ember and became the Ember A11y Working Group. We coordinate in the #dev-ember-a11y channel on Ember's Discord server and meet as needed. Anyone who is interested is welcome to join in!

Work is also underway to upscale the addons in the Ember-A11y GitHub org! We are also continuing to add first-class accessibility support to ember-template-lint; coming soon is support for users to be able to specifically only run the accessibility-related linting rules on a codebase.

Thank You

A huge thank you to all of the community members who participated in the Ember A11y Strike Team: Abhilash Ramesh, Amy Lam, Ava Wroten, Benjamin Jegard, Emmanuel Patrick, Eric Kelly, Frédéric Soumaré, Jamie White, Jen Weber, John Costanzo, Joseph Sumner, Lennex Zinyando, Lenora Porter, Melanie Sumner, Praskovia Root, Rajasegar Chandran, Robert Jackson, Steve Szczecina, and Seema Shariat.