Accessibility improvements

[davatron5000]

Lettering.js is inaccessible due to screen readers pausing at every HTML tag, including inline span tags.

A possible fix might be something along the lines of:

// See if aria-hidden has been set
if($(this).parents('[aria-hidden="true"]').length === 0) {
  // make a clone
  var clone = $(this).clone();
  // aria hide it
  clone.attr('aria-hidden',true);
  // visiually hide the clone
  clone.css({
    'position':'absolute',
    'left':'-10000px',
    'top':'auto',
    'width':'1px',
    'height':'1px',
    'overflow':'hidden'
  });
  // append the clone
  $(this).after(clone);

  // Do lettering stuff
}

Haven't tested it in case some one wants to pick it up. The screen reader should skip over the aria-hidden and read the clone.

[davatron5000]

Working demo: http://codepen.io/davatron5000/full/pxoKf

Uses aria-hidden="true" to hide content. aria-role="presentation" seems like it would be more ideal/semantic, but was designed to read child elements with no semantic value.

Downsides: Duplicates DOM nodes could have SEO impact. Ideally, ARIA would provide a way for semantic elements that are aria-hidden to have an accessible fallback using something like aria-label or aria-describedby.

[bassettsj]

@davatron5000 aria-hidden="true" is sort of well supported, and seems like the best solution here, but you might be able to use the aria-label attribute on the parent element here.

Alternate demo

[bassettsj]

Either way, it make for a much better experience when using Assistive Technology. I think the little amount of SEO impact you would have would be so small, that @davatron5000's solution would be worth it.

[davatron5000]

@bassettsj WOOO. GREAT. I forked your pen b/c it wasn't working for me, but this looks like an infinitely better way to do this.

With mine, I was hesitant about duplicating content, but your way preserves it all. I was also hesitant about breaking the Document Outline, but running it through VoiceOver & ChromeVox makes me think it'll hold together nicely. Wonderful work.

If you want to put together a commit and get the credit, I'll merge it in.

[davatron5000]

Accessibility improvements were merged in and are apart of the 0.7.0 release. Hooray! Thanks everyone who helped out on this. Means a lot and solves a somewhat shameful problem I've had for a long long time.

🎆 🏆 👯