Understanding how screen readers work

Will the screen reader be able to read the title element with tooltips disabled?

pointer-events: none;
<title>PLAY</title>

https://jsfiddle.net/0khwxjjb/25/

<div class="playButtonsc">
  <div class="playButtonc svoefm" data-audio="http://getradio.me/svoefm">
    <svg class="playc" style="margin:15px 36px;pointer-events: none;" 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" width="10" style="margin:15px 37px;pointer-events: none;" 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>
  </div>

  <div class="playButtonc soundpark" data-audio="http://getradio.me/spdeep">
    <svg class="playc" style="margin:15px 38px;pointer-events: none;" 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;" 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>
  </div>

  <div class="playButtonc cavoparadisoclub" data-audio="http://s5.onweb.gr:8488/;">
    <svg class="playc" style="margin:15px 36px;pointer-events: none;" 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 37px;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>
  </div>
</div>

If I want to disable tooltips, would a better way to do it
be to use

<desc>
instead of
<title>

<desc>PLAY</desc>

Then I wouldn’t need to use:
pointer-events: none;

Does anyone have any thoughts or opinions on what I should do in this situation?

The only issue I have about putting a<title></title> element attached to the SVG is that I don’t want tooltips to be enabled.

1.) I can either use a <desc>/desc> element instead.

2.) I can use a <title></title> element along with pointer-events: none; so the tooltips don’t show.

I can use a <title></title> empty element, which I don’t think you’re able to do, cause I don’t think that would work the same way as alt="" does with images cause they are two different things.

3.) or I could just not include anything.

The SVG is purely decorative.

When an image is purely decorative, it doesn’t get a title="" attribute.
If it were an interactive image, then it would get one.

https://jsfiddle.net/26ke4auc/83/

  <svg width="260" height="245" viewbox="0 0 260 245">
  
    <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>

I just read this:

If an SVG image is purely decorative, do not include a title or description. The SVG element should additional be identified as presentational using the ARIA role attribute.

August 5, 2016
https://idpf.github.io/a11y-guidelines/content/svg/desc.html

Don’t these two things contradict each other?

If an SVG image is purely decorative, do not include a title or description. The SVG element should additional be identified as presentational using the ARIA role attribute.

All significant graphical components within the SVG image should contain their own title and/or description to improve the overall accessibility of the image.

The SVG element should additional be identified as presentational using the ARIA role attribute.

Which ARIA role would I be using instead/inplace of the <title> element?
https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties

As much as designers and graphics people may disagree with that word choice, a decorative image and CSS styling are not considered “significant”.

What is considered significant are interactive and informational content. Those things that without, the page would lessen the user experience.

When pages use images, color, or styles to convey meaning that might be obvious and easily understood by abled visitors, if accessibility is not considered some visitors will have problems with the page.

So, you may not want a tooltip for “background picture of beach”, but you should have them for a “search” icon or a “play music” button if there is no text next to them indicating what they are.

1 Like

Agree for play, pause buttons. But not for still images/SVG’s that don’t do anything.

I’m stuck on this:

Which ARIA role would I be using instead/inplace of the <title> element on a decorative SVG.
https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties

I think I may have found my answer here:

If your inline SVG is decorative, however, you do not need to include any of these attributes.

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

http://web-accessibility.carnegiemuseums.org/code/svg/

https://jsfiddle.net/26ke4auc/87/

  <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>
1 Like

Furthermore, now I’m confused after reading this.

If the SVG is purely decorative, you don’t have to do anything

If the SVG element is being used decoratively - a gradient or background pattern, for example - there is no need to provide , or alt. (If you want your page to validate, you should include alt for linked SVGs but set the value of the attribute to ”empty” for purely decorative elements: i.e. alt="" or simply alt).

Is there a difference between SVG & Icon Fonts?

The part about adding aria-hidden="true" was in reference to icon fonts, not SVG.
http://web-accessibility.carnegiemuseums.org/code/svg/

I’m sticking with
aria-hidden="true"

That seems correct after reading a lot of other stuff.

It can’t hurt to add aria-hidden=true to an SVG you feel is totally decorative and don’t want screen reading software to accidentally a verb where you don’t mean people to hear any text.

But it’s more necessary for icon fonts, only because those tend to put a character (for the font) as text on the page (usually using CSS content properties, which btw are not exposed in IE but are in pretty much every other current browser). If that character is a normal (ascii) character, or a Unicode char with a “name” then that could get read out loud and normally you don’t want that, so aria-hidden=“true” on that icon font will help avoid that.

SVGs are a whole other bucket-- whether whatever’s in the tag gets read out or not seems to be per-browser more than anything. According to spec both title and desc should get read out (as the SVG or group’s “name” and “description” respectively) but in some browsers you need to hack around with aria-labellebdy to get things read out loud and I have found in FF+JAWS that no matter what, nothing is read out at all. :frowning:

3 Likes

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