dobtco / dvl-core

Base styles for the DOBT View Layer.
https://design.dobt.co/
1 stars 1 forks source link

Accessible icons #263

Closed jrubenoff closed 8 years ago

jrubenoff commented 8 years ago

See FontAwesome's accessibility page. Basically, we want a markup pattern like this:

  <i class='fa fa-minus-circle' aria-hidden='true'></i>
  <span class='icon_text'>Delete</span>

.icon_text is visually hidden but accessible to screen readers.

We can make our icons accessible without waiting to switch to dvl-icons, and break up a large task into more manageable pieces while doing it. Here's what I'm thinking:

  1. Move our Ruby icon helper from Screendoor to this repo
  2. Change it to icon(class, title), which would generate the markup pattern above
  3. Add titles to all the places we use this helper throughout our apps

When this task is done, and we have time to switch to dvl-icons, we can just change the helper so that it generates svgs with title attributes.

@ajb, if you tackle the first two, I can handle the third.