No Bad Legos: Building a Toy Box For Everybody Howie Bollinger howie@redshelf.com Front End Developer // RedShelf (@HelloRedshelf)
A presentation at EmberConf 2019 in March 2019 in Portland, OR, USA by Howie Bollinger
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)
