[Accessibility] SVG images inside buttons need have role="presentation"

[AAdamCCox]

[Edit by @corinagum]

Work item: add role="presentation" to all SVGs that are inside an input. (Microphone button, attachment button, send button, etc.)

---

Version: latest

Actual result:
The button title is read by the screen reader (e,g, "button send").

Expected result:
The image displayed on the button should also be described, so that the user knows what is being portrayed. This is being flagged by our testing as non-compliant with WCAG2.1
An example of the expected description would be:
<svg title='An image of a paper plane'

Repro Steps:

Open the web chat.
Launch screen reader (e.g, MS Windows Narrator)
Start the conversation.
Navigate to the send or attach button

[corinagum]

I don't believe I've seen or experienced title as being required for (particularly) what the AT reads out loud. The visual pop up via the title attribute is currently attributed to the button (container of the svg), which also has the role specified. The svg itself does not have a title or label.

If, for example, there's an image that is directly related to the content of the article/app/site, then an alt text would be required in order to describe what is being visually presented, but that doesn't apply to this situation.

• Could you provide the exact rule that's being flagged?

In regards to AT violations:

• What browser are you using with Narrator? Our testing includes Edge x Narrator, Have you tried using this combo?
  • You may be interested in taking a look at our Accessibility documentation
• When I test the send button in Edge/Narrator I hear "Send button" read on focus. This should be sufficient in terms of description of the purpose of the button.
• Please see https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute and https://www.w3.org/TR/wai-aria/#namecalculation, which indicate that title has the lowest precedence for specifying the alt text.

In regards to visual violations:

• Assuming you're looking for the visual title, the tooltip indicator shows on hover for the send button (and other icon buttons)

[corinagum]

Closing due to inactivity. Feel free to respond and we can reopen.

[WillPS1989]

Apologies for the late response. The issue is flagged in Firefox Developer edition as "Content with images must be labelled".

https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Text_labels_and_names#content_with_images_must_be_labeled

I guess at a simple level, an <img /> HTML tag always needs an 'alt' attribute, even if it's contained within a button or a link which itself is labelled. Describing the image and describing the functionality are two separate things, and both are necessary. It makes sense for an <svg /> and an <img /> to require these equally, even if only an <img /> requires it to achieve strict HTML compliance.

[corinagum]

@v-rampul Could one of your team members please check the behavior of the buttons in the sandbox? The link is here: https://webchat-playground.azurewebsites.net/

When using NVDA on Chrome, AT Reads, 'Send button'. If I add alt text ('airplane') to the <svg>, it says 'Airplane button send', which I don't think adds value. When checking on Web Accessibility insights, these images do not trigger any warnings.

If anything, it makes more sense to me to add alt="" to the <svg>s. Could your team weigh in? Thanks!

---

[edit]

Behavior I see when testing accessibility in Chrome:

Alternatively, should we just add aria-label to the parent button? @AAdamCCox could you test this by adding the aria-label to the enclosing button, then see if it resolves your warning regarding the svg?

[Amit8527510735]

@corinagum: We have verified below issue and screen readers are reading the ‘Send button’ and no need to add any Alt text and as verified in Microsoft teams send button, the screen readers are reading only ‘Send button’.

[WillPS1989]

Since we can all agree the description of the SVG would not be beneficial to AT users, would an agreeable solution be to make the SVG appear via CSS, so that the requirement to give the SVG a <title /> goes away?

[corinagum]

I see this item as a no-op. The documentation I've been able to find on the accessibility of <svg>s is in regards to that element being the container of something that's tabbable. (e.g. https://fizz.studio/blog/reliable-valid-svg-accessibility/)

In this instance, the <svg> has a button container, which already applies the title attribute. The button itself is providing an action, which is explicitly labeled, and describing the airplane icon as an image does not add value.

@compulim could you weigh in? Op or no-op?

@WillPS1989, if this is a hard requirement for you, I recommend adding the title attribute to the <svg> via JS as a workaround. Please also see my comment above if having an aria-label on the image removes the warning you are seeing.

[Edit]

I forgot to mention; we will not be moving SVGs as background images to CSS, which would make the component less customizable for our users.

[compulim]

This is the DOM of today, much simplified:

<button title="Send">
  <svg>
    <path>...</path>
  </svg>
</button>

Let's put it aside first and say, if it is an image instead of SVG, it will appears like this:

<button title="Send">
  <img />
</button>

I think it is fair to say: although the image is inside <button> with title attribute, the <img> should still have an (empty) alt attribute, or have an attribute of role equals to presentation or none, or have an attribute of aria-hidden set to true.

That means, either one of the following will work:

<button title="Send"><img alt="" /></button>

Or

<button title="Send"><img role="presentation" /></button>

Or

<button title="Send"><img aria-hidden="true" /></button>

Putting similar rationale into SVG, I would say one of the following change should be adequate:

<button title="Send">
  <svg>
    <title />
    <path>...</path>
  </svg>
</button>

Or

<button title="Send">
  <svg role="presentation">
    ...
  </svg>
</button>

Or

<button title="Send">
  <svg aria-hidden="true">
    ...
  </svg>
</button>

FYI, making the SVG as a CSS background-image is a bit too complicated or unnecessary in this stage of the issue.

Any thoughts?

Additional context

<input type="image">

BTW, alternative and potentially better semantics is using <input type="image">. Ultimately, we are an image button. But I won't recommend go this route today because of unnecessary complexity.

<input type="image" alt="Send" src="data:image/svg+xml;base64,...">

Image without alt attribute

For WCAG 2.0 H37, the procedure 2 say:

Check that each img element which conveys meaning contains an alt attribute.

While technically, alt is optional for <img> and if the image does not conveys any meaning, we do not need to set alt. We simply set alt="" for the sake of reducing false positives raised by accessibility checkers.

[corinagum]

No thanks, haha. (don't agree it's better semantics)

I see the project already has role="presentation" in several of the <svg> used in our samples, so let's make that the work item.