search

deanarron / colmar

0 stars 0 forks source link

Use Caution with role="presentation" #1

Closed jordanwillis closed 6 years ago

jordanwillis commented 6 years ago

From what I have reviewed so far, you have done an amazing job! I especially like how you went back and added many accessibility items to the page. It was been a little while since I have experimented with role="presentation", but if I recall correctly, there are a few elements that will get removed completely from the accessibility tree when the parent element is set to role="presentation". And unfortunately, one of those elements is <img>

So in cases like...

https://github.com/deanarron/colmar/blob/master/index.html#L19

<div class="branding" role="presentation">
  <img class="ic logo" src="resources/images/ic-logo.svg" alt="Colmar Academy Logo">
  <div class="colmar_text_name" role="presentation">
    <span class="brand_name" role="presentation"><span class="strong">Colmar</span><span class="light">Academy</span></span>
  </div>
</div>

Will completely hide the colmar academy logo image from the accessibility true and therefore screen readers will just ignore the image.

There are a few other cases where it looks like this will happen as well. So just be mindful of that behavior if you were not aware. Checkout this article which discusses this point.

http://csskarma.com/blog/difference-rolepresentation-aria-hiddentrue/

deanarron commented 6 years ago

Ah, brilliant, thanks! I totally misunderstood then. I thought the presentation property would tell the screen reader to skip reading the parent div but leave the children intact. I'll be more aware and careful.