Understanding the use of aria-hidden

HTML & CSS
1

I’m still confused on how this works. And I’ve read a whole lot on this.

If your icon is purely decorative, include a aria-hidden=‘true’ attribute.

aria-hidden should only be used when you really want to hide the svg element completely from screen readers. If you use SVG to embed an image that is not just decorative, you need to make sure there is a text alternative.

What would be, or constitute as opposite of purely decorative?

Would a play/pause image svg be decorative or would it not be?

You click on it and it goes from play to pause, is that decorative, or is that not decorative.

Would aria-hidden="true" be placed on SVG’s that use a title for instance?

Would this mark up be right?

    <svg class="playc" style="margin:15px 38px;pointer-events: none;" aria-hidden="true" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
        <title>PLAY</title>
      </path>
    </svg>

    <svg class="pausec hidec" style="margin:15px 39px;pointer-events: none;" aria-hidden="true" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
        <title>PAUSE</title>
      </path>
    </svg>

Would aria-hidden="true" be placed on SVG’s that have no title for instance and that are purely decorative like this one is?

<svg width="260" height="245" viewbox="0 0 260 245" aria-hidden="true">
  <line x1="4" y1="122" x2="29" y2="122"></line>
  <line x1="38" y1="122" x2="108" y2="122"></line>
  <line x1="83" y1="91" x2="188" y2="151"></line>
  <line x1="135" y1="61" x2="135" y2="182"></line>
  <line x1="82" y1="152" x2="187" y2="91"></line>
  <line x1="148" y1="98" x2="183" y2="38"></line>
  <line x1="187" y1="31" x2="199" y2="9"></line>
  <line x1="148" y1="145" x2="183" y2="205"></line>
  <line x1="188" y1="213" x2="200" y2="233"></line>
  <circle cx="135" cy="122" r="24.5"></circle>
</svg>

Post About aria-hidden:
http://maureenlholland.com/2016/08/01/aria-hidden/

http://www.456bereastreet.com/archive/201609/hiding_inline_svg_icons_from_screen_readers/

2

I would say that a play/pause button would be interactive since it requires the users input

Would aria-hidden=“true” be placed on SVG’s that use a title for instance?

In that case, I would think it should only go on a decorative image that had a title

2 Likes
3

It’s a hover/mouseover thing.

Would all those svgs on there be considered interactive?

<div class="playButtonb" data-audio="http://hi5.1980s.fm/;">
  <svg class="initialb" width="90" height="108" viewbox="0 -10 85 120">
    <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
     <title>PLAY</title>    
    </path>
  </svg>

  <svg class="pauseb hideb" width="90" height="108" viewbox="-13 -10 85 120">
    <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"><title>PAUSE</title></path>
  </svg>

  <svg class="speakerb hideb" width="60" height="72" viewbox="0 0 16 14">
  <title>VOLUME</title>
    <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z" fill-rule="evenodd"></path>
  </svg>

  <svg class="playb hideb" width="90" height="108" viewbox="0 -10 85 120">
    <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"><title>PLAY</title></path>
  </svg>
</div>

These would all be considered interactive then, right?

Anything that changes from one thing to another would be interactive. If I’m right about that.

Anything that is still, and doesn’t move would be considered purely decorative.

4

I think I understand it better now.

5

From the 1st link you posted I read this…

Adding aria-hidden=“true” to an icon tells the assistive technology to skip over this information, as it will not improve the user experience and has the potential to worsen it.

aria-hidden=“true” should only apply to a decorative icon
(But as was concluded in your other thread, a title is still needed on decorative images)

You would not want to hide an interactive button using aria-hidden=“true”

3 Likes
6

I would like to get a 2nd opinion on this, because on images you can leave alt=" " blank inside. Can you do the same thing with title, leave it empty inside?

<title></title>

7

I think you might be mixing up two different ‘titles’ - one is the <title></title> tag in the head of the html page, and the other one is an html attribute title= .

1 Like
9

Then why did you quote this?

10

I just unquoted it.

11

My take, not tested, is that <title> within <svg> is so when an external SVG file is requested directly the title will show in the browsers tab bar similar to an HTML files title. But I could very well be wrong and there’s more to it than that.

12

This would be an inline SVG that’s not external.

13

Please don’t change your post after someone has responded to it. It just creates confusion, because then the response doesn’t always make sense. You were asking about titles in the context of images.

2 Likes
14

titles in the context of whether or not they need to be placed on SVG’s that are purely decorative, non-interactive.

Like this:

15

Okay, that makes more sense now. Thank you.

1 Like
16

And whether or not it would be appropriate to include it, but to leave it empty.
Like this:

<title></title>

And if you’re even allowed to do that, which would be the equivalent of leaving the alt=" " empty on images.

17

I’m trying to find some documentation that says: “You must put a <title> element on all SVG’s no matter whether or not they are decorative, or interactive.” Something along those lines.

18

Not always the easiest to understand, but I think the W3C documentation is the “authority” when it comes to specifications. Not that all user agents will implement things the same, or even at all, but the working group goes to effort to put together how they think things should be.

https://www.w3.org/TR/SVG/struct.html#DescriptionAndTitleElements

Authors should always provide a ‘title’ child element to the outermost svg element within a stand-alone SVG document. The ‘title’ child element to an ‘svg’ element serves the purposes of identifying the content of the given SVG document fragment.

And this on the importance for accessibility

https://www.w3.org/TR/2000/NOTE-SVG-access-20000807/#Equivalent

Providing an alternative equivalent for inaccessible content is one of the primary ways authors can make their documents accessible to people with disabilities. The alternative content fulfills essentially the same function or purpose for users with disabilities as the primary content does for users without any disability. Text equivalents are always required for graphic information (refer to [WCAG10], Checkpoint 1.1, and Guideline 1 in general). I

1 Like
19

Images with only visual value should have an empty alt attribute set on them.
https://davidwalsh.name/accessibility-tip-empty-alt-attributes

Can the same be said for the title element?
<title></title>

Like this?
SVG’s with only visual value should have an empty <title></title> set on them.

or would that be wrong/incorrect?

20

In regards to the link you just posted…

To be semantically correct it should read

21 
.playButtonf {
  position: relative;
  width: 260px;
  height: 245px;
  cursor: pointer;
  border: 3px solid #0059dd;
  background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/qaEvk4G.png");
}

The image is connected to the linear gradient in the css.

An empty alt tag would be appropriate here since it’s a decorative background, right?

<div class="playButtonf" data-audio="http://hi5.1980s.fm/;" alt="">

Or, are you not supposed to put anything?

no alt tag?