Improve the a11y

[samjewell]

It would be great if the SVG element created by = inline_svg was automatically given the accessibility attrs aria-labelledby="title desc" when it had either of those attrs (title or description).

Also if the SVG file itself already has a title, but I pass a new title in through the options hash, I'd like it to overwrite the existing title in the SVG file, rather than adding an extra title to the element.

Notes on making SVGs accessible here:
http://www.sitepoint.com/tips-accessible-svg/

It would be great if you could pass ANY html attrs (keys and values) into the options hash, and have these attached to the SVG element. I was trying to add aria-role="blah" to the options hash, but it didn't get added to the element.

Last thing, - it would be great if it added role="img" by default too, again from the accessible SVGs link above.

[jamesmartin]

@samjewell thanks for the suggestions, I appreciate it.

Also if the SVG file itself already has a title, but I pass a new title in through the options hash, I'd like it to overwrite the existing title in the SVG file, rather than adding an extra title to the element.

This sounds like a bug. I'll add a separate issue and get that fixed.

As for the accessibility attributes, it probably make sense to build in the most common ones, but I can't commit to doing them immediately.

If you're keen to add specific attributes, it's relatively easy to extend the behavior of inline_svg by adding custom transformations.

For example, to add the role="img" attribute you could write a custom transformation like this:

# .role_attribute.rb
class RoleAttribute < InlineSvg::CustomTransformation
  def transform(doc)
    if value
      doc = Nokogiri::XML::Document.parse(doc.to_html)
      svg = doc.at_css 'svg'
      svg['role'] = "img"
    end
    doc
  end
end

# in an initializer, like ./config/initializers/inline_svg.rb
InlineSvg.configure do |config|
  config.add_custom_transformation(attribute: :role, transform: RoleAttribute)
end


# in your view...
inline_svg('my_svg.svg', role: true)

Custom transformations could also be used to add any of the other accessibility tags that you need in the interim.

[samjewell]

Thanks a lot @jamesmartin - glad that my issue report is somewhat useful. I'm also finding it hard to make time for open-source right now, and this isn't a big priority for us at work, but I hope to come back to it one day! Thanks for the pointers/hints - I'll definitely use them if this is still open when I get a chance to have a go :-)

Thanks again for the gem!

[jamesmartin]

Released the accessibility improvements (#34) in v0.7.0.