Understanding the use of aria-hidden

I think I understand it better now.

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

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>

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

Then why did you quote this?

I just unquoted it.

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.

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

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

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

Like this:

Okay, that makes more sense now. Thank you.

1 Like

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.

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.

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

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?

In regards to the link you just posted…

To be semantically correct it should read

.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?

When images are in the CSS, are you supposed to put any tag at all?

I just read this:

No, because a background image is only a decorative element which should not have any semantic meaning. HTML is for semantics and meaning, CSS is just for visual appearances. If the image is so important that it should have a fallback alt text, make it an HTML element.

No alt tags are required or allowed in background images

That’s right
CSS background images have no relation to the html <img>

This is all being discussed in this other thread

Please reserve this thread for your Understanding the use of aria-hidden

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.