No Bad Legos: Building a Toy Box For Everybody Howie Bollinger howie@redshelf.com Front End Developer // RedShelf (@HelloRedshelf)

Step 1: Make Your Legos

Search Results Pride And Prejudice Search Term: Jane Austen Jane Austen At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint … Emma Jane Austen At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint … Sense and Sensibility Jane Austen At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint … Persuasion Jane Austen At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint …

search-results.hbs

<h1>Search Results</h1> <ul> {{#each search_results as |book_object|}} <li> <img src=”{{book.cover_image}}”> <div>{{book_object.title}}</div> <div>{{book_object.author}}</div> <div>{{book_object.description}}</div> </li> {{/each}} </ul>

book-summary.hbs <img src=”{{book.cover_image}}”> <div>{{book.title}}</div> <div>{{book.author}}</div> <div>{{book.description}}</div>

search-results.hbs

<h1>Search Results</h1> <ul> {{#each search_results as |book_object|}} <li> <BookSummary @book=book_object /> </li> {{/each}} </ul>

<BookSummary @book=book_object /> Search Results Pride And Prejudice Cart Jane Austen At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas Checkout Pride And Prejudice Jane Austen At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas Pride And Prejudice Jane Austen At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas

book-summary-test.js this.book = { title:’Emma’, author: ‘Jane Austen’, … }; await render(hbs<BookSummary @book=book>); assert.equal(find(‘.book-summary .title’), ‘Emma’); assert.equal(find(‘.book-summary .author’), ‘Jane Austen’);

We’ve built some legos

Step 2: Build Some Stuff With Your Legos

But what about a11y?

CEO Stakeholders Product Owner Designers QA Developers Customer Experience

Everything is awesome because you’re part of a team

Accessibility is not just a checklist

… but, there is still a checklist

WCAG 2.1 Web Content Accessibility Guidelines - https://www.w3.org/TR/WCAG21/

What does that mean for the developers?

Step 1: Make Your Accessible Legos

book-summary-test.js this.book = { title:’Emma’, author: ‘Jane Austen’, … }; await render(hbs<BookSummary @book=book>); assert.equal(find(‘.book-summary .title’), ‘Emma’); assert.equal(find(‘.book-summary .author’), ‘Jane Austen’); assert.ok(find(‘.book-summary img’).getAttribute(‘alt’));

“That Sounds Hard?”

Axe Accessibility Engine https://github.com/dequelabs/axe-core

Example: Chrome + AXE Checker

Example: Chrome + AXE Checker Issue description Ensures every form element has a label Impact: critical Learn more Element location #username Element source <input id=”username” name=”email” title=”Email” type=”text” placeholder=”email@address.com” class=“form-control”> To solve this violation, you need to: Fix the following: Form element has explicit <label> that is hidden

Automating AXE Testing

Are you there, Axe? It’s me, Ember.

ember-a11y-testing https://github.com/ember-a11y/ember-a11y-testing

book-summary-test.js test(‘it renders a book summary’, async function(assert) { this.book = { title:’Emma’, author: ‘Jane Austen’, … }; await render(hbs<BookSummary @book=book>); assert.equal(find(‘.book-summary .title’), ‘Emma’); assert.equal(find(‘.book-summary .author’), ‘Jane Austen’); });

book-summary-test.js import a11yAudit from ‘ember-a11y-testing/test-support/audit’; test(‘it renders a book summary’, async function(assert) { this.book = { title:’Emma’, author: ‘Jane Austen’, … }; await render(hbs<BookSummary @book=book>); assert.equal(find(‘.book-summary .title’), ‘Emma’); assert.equal(find(‘.book-summary .author’), ‘Jane Austen’); await a11yAudit(‘.book-summary’); assert.ok(true, ‘assert no violations found’); });

a11yAudit(‘.book-summary’); a11yAudit ( Emma Jane Austen At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint … Click to expand for more details )

Fast Feedback - Terminal Output ‘ACCESSIBILITY VIOLATIONS: 1’ ‘CRITICAL: Images must have alternate text’ ‘Offending markup (1)’ ‘Additional info: https://dequeuniversity.com/rules/axe/2.6/ image-alt?application=axeAPI’

Fast Feedback - Dev Tools Output

Benefits of ember-a11y-testing • Continuous and passive learning (WCAG and basic HTML) • Prevent introducing a11y regressions into codebase • Leverages existing best practices • Reusable and robust library of components tested for accessibility

Don’t build bad legos!

Limitations

This is not a replacement for the whole process

It’s mostly static a11yAudit ( Emma Jane Austen At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint … )

Still Need Application Tests acceptance/application-test.js import import import import { module, test } from ‘qunit’; { visit, currentURL } from ‘@ember/test-helpers’; { setupApplicationTest } from ‘ember-qunit’; a11yAudit from ‘ember-a11y-testing/test-support/audit’; module(‘Acceptance | login’, function(hooks) { setupApplicationTest(hooks); test(‘visiting /login’, async function(assert) { await visit(‘/login’); assert.equal(currentURL(), ‘/login’); await a11yAudit(); assert.ok(true, ‘no a11y errors found’); }); });

No “Seal of Approval” ✅ ember-a11y-tested

a11yAudit(‘.book-summary’); a11yAudit ( Emma Jane Austen At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint … Click to expand for more details )

So, let’s fix the web

Thank you! Howie Bollinger howie@redshelf.com Front End Developer // RedShelf (@HelloRedshelf)