A11y First
& Everyone Wins

More Composable, Intuitive & Testable

Ava Gaiety Wroten

Ava Wroten
She/Her

Software Engineer at Allovue

On Gitlab @gaiety Or Github @sharpshark28

Intro

  1. Topic
  2. Topic

Feature: Item Reordering

Mouse Drag & Drop

Do we support Touch?

What about A11y?

A11Y

A....11.....Y

Accessibility

World Health Organization

15% of the World
lives with some form of disability

Web assistive technologies commonly help with...

  • Vision
  • Hearing
  • Movement

Degrees of Disabilities

Limited mobility, muscle slowness, tremors, low vision, color blindness, partial hearing loss, etc

👩🏽‍🔬 👨🏾‍🎨 👩🏻‍🔧 👨🏼‍✈️

I build software for humans

So I did some research...

ember-sortable

✔️ Mouse Drag & Drop

✔️ Touch Drag & Drop

Component Structure

ember-sortable ```html.hbs <SortableGroup> <SortableItem> ```
Custom Wrappers ```html.hbs <SortableGroupAccessible> <SortableItemAccessible> ```
TODO: Living Styleguide?
TODO: TESTING
🎉 A11y allowed us to test reordering! 🎉

Team Wins

  • Quick Feedback Loop
    • ...with development
    • ...with design
    • ...with project managers
  • Sign off for UX
  • Less stress on QA
  • Less scope creep

v2.x.x ember-sortable

Where do we go from here?

Outro

  1. Topic
  2. Topic

TODO: Work at Allovue, we have openings and are growing...

We ship software with Basecamp's Shapeup which empowers us to consider solutions like what I've demonstrated here. Variable scope.

TODO: Challenge: Hire someone different than you!

TODO: Make A11y a priority at your next design meeting!