Consider adding `<title>` element, ARIA `role=img` and `aria-labelledby` attributes to OOUI's icon SVGs
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Volker_E
	Feb 10 2017, 8:44 PM

Description

SVGs in OOUI currently don't include a <title> element.

One could argue, that we're using the SVGs (solely?) as background-images.
Currently, as of v0.19.1, we do include the XML declaration, which isn't necessarily needed for background-images in most modern browsers any more, it's there for standard compliance though.

For accessibility reasons and for certain use cases of the icons outside of our particular use case, it is useful to integrate title attribute.
Citing from MDN:

When the current SVG document fragment is rendered as SVG on visual media, <title> element is not rendered as part of the graphics. However, some user agents may, for example, display the <title> element as a tooltip. Alternate presentations are possible, both visual and aural, which display the <title> element but do not display path elements or other graphics elements. The <title> element generally improve accessibility of SVG documents

and furthermore a ARIA role=img and aria-labelledby` attribute as laid out in the extensive browser test case of The Paciello Group.

The Wikipedia logo SVG would change from:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M22.3 6.3c0 .2 0 .3-.1.3-.7.1-1.2.5-1.6 1.1-.1.2-.2.4-.3.7l-4.6 10.1c-.1.2-.2.3-.2.3s-.1.1-.2.1c-.2 0-.4-.1-.5-.4L12.2 13l-2.8 5.5c-.1.3-.3.4-.5.4s-.4-.1-.5-.4L4.1 8.4c-.3-.8-.6-1.2-.8-1.4-.2-.2-.5-.3-1-.4-.1-.1-.1-.2-.1-.3 0-.2 0-.3.1-.3h4.3c.1.1.1.2.1.3 0 .2 0 .3-.1.3-.6.1-1 .2-1.1.4-.1.2 0 .6.3 1.2l3.6 8.2h.1l2.2-4.4L10 8.4c-.3-.7-.6-1.2-.8-1.4s-.5-.3-.9-.4c-.1-.1-.1-.2-.1-.3 0-.2 0-.3.1-.3h3.6c.1.1.1.2.1.3 0 .2 0 .3-.1.3-.4.1-.6.2-.6.4s.1.6.4 1.2l1 1.9 1-1.9c.3-.6.5-.9.5-1.1 0-.2 0-.3-.1-.4-.1-.1-.3-.1-.5-.1l-.1-.3c0-.2 0-.3.1-.3h3c.1.1.1.2.1.3 0 .2 0 .3-.1.3-.5.1-.8.2-1.1.5-.3.3-.6.7-.8 1.3l-1.3 2.8 2.5 5.2h.1l3.7-8.1c.3-.5.3-.9.2-1.2-.1-.3-.5-.4-1.1-.5-.1-.1-.1-.2-.1-.3s0-.3.1-.3h3.7c-.2.1-.2.2-.2.3z"/>
</svg>

to:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="title">
    <title id="title">Wikipedia logo</title>
    <path d="M22.3 6.3c0 .2 0 .3-.1.3-.7.1-1.2.5-1.6 1.1-.1.2-.2.4-.3.7l-4.6 10.1c-.1.2-.2.3-.2.3s-.1.1-.2.1c-.2 0-.4-.1-.5-.4L12.2 13l-2.8 5.5c-.1.3-.3.4-.5.4s-.4-.1-.5-.4L4.1 8.4c-.3-.8-.6-1.2-.8-1.4-.2-.2-.5-.3-1-.4-.1-.1-.1-.2-.1-.3 0-.2 0-.3.1-.3h4.3c.1.1.1.2.1.3 0 .2 0 .3-.1.3-.6.1-1 .2-1.1.4-.1.2 0 .6.3 1.2l3.6 8.2h.1l2.2-4.4L10 8.4c-.3-.7-.6-1.2-.8-1.4s-.5-.3-.9-.4c-.1-.1-.1-.2-.1-.3 0-.2 0-.3.1-.3h3.6c.1.1.1.2.1.3 0 .2 0 .3-.1.3-.4.1-.6.2-.6.4s.1.6.4 1.2l1 1.9 1-1.9c.3-.6.5-.9.5-1.1 0-.2 0-.3-.1-.4-.1-.1-.3-.1-.5-.1l-.1-.3c0-.2 0-.3.1-.3h3c.1.1.1.2.1.3 0 .2 0 .3-.1.3-.5.1-.8.2-1.1.5-.3.3-.6.7-.8 1.3l-1.3 2.8 2.5 5.2h.1l3.7-8.1c.3-.5.3-.9.2-1.2-.1-.3-.5-.4-1.1-.5-.1-.1-.1-.2-.1-.3s0-.3.1-.3h3.7c-.2.1-.2.2-.2.3z" role="presentation"/>
</svg>

I pass on adding <desc> in this proposal as a trade-off for keeping file-size and additional work low.
An open question is internationalization support.

Details

	Subject	Repo	Branch	Lines +/-
	WikimediaUI theme: Unify and refine WikimediaUI icons	oojs/ui	master	+1 K -1 K

Customize query in gerrit

Event Timeline

Volker_E created this task.Feb 10 2017, 8:44 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 10 2017, 8:44 PM

SamanthaNguyen subscribed.Feb 11 2017, 12:56 AM

Zeto87 moved this task from Backlog to Reviewing on the OOUI board.Feb 11 2017, 7:57 PM

@Nikerabbit Any hints for dealing with SVG strings form I18n perspective?

Thanks for asking. I don't have first hand experience, but for example there is some info in Commons about translating SVGs. Unfortunately, according to the spec systemLanguage and switch cannot be used for title elements. It seems the only option would be to serve different SVG based on the user language. For that I think there are many options from pre-generated translated files to dynamically alterting the SVGs on the server side or client side. Resource loader already has some technologies for this kind of thing.

Nemo_bis subscribed.Feb 16 2017, 7:06 AM

Note that our usage of the icons is almost always either decorative (in which case the image shouldn't even be mentioned by a screenreader) or as part of actions (in which case this information needs to be provided by the the button or action control (also because actions are usually more context specific then the particular image used on the button/link etc).

These accessibility criteria that are quoted are mostly targeting the inlining of SVG into other HTML, or when viewing a standalone SVG document, but we don't actually do that. That doesn't mean that it wouldn't be good to provide those descriptions, in case we ever do in the future, but it doesn't seem like a high priority atm.

Actually, i'd argue that this is a higher priority for SVG content uploaded by end users then for OOjs UI icons.

Volker_E triaged this task as Low priority.Feb 16 2017, 6:47 PM

Volker_E moved this task from Reviewing to Next-up on the OOUI board.Feb 24 2017, 8:28 PM

From SFHTML5 SVG and Responsive Images talk by Sarah Drasner adding lang="en" is important to add for screenreader support as well.

Volker_E renamed this task from Consider adding `<title>` element, ARIA `role=img` and `aria-labelledyby` attributes to OOjs UI's icon SVGs to Consider adding `<title>` element, ARIA `role=img` and `aria-labelledby` attributes to OOjs UI's icon SVGs .May 21 2017, 1:07 PM

SamanthaNguyen unsubscribed.Aug 12 2017, 1:10 AM

Patch-For-Review at https://gerrit.wikimedia.org/r/#/c/400091/?

Change 400091 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] WikimediaUI theme: Unify and refine WikimediaUI icons

https://gerrit.wikimedia.org/r/400091

gerritbot added a project: Patch-For-Review.Jan 3 2018, 1:07 AM

Volker_E renamed this task from Consider adding `<title>` element, ARIA `role=img` and `aria-labelledby` attributes to OOjs UI's icon SVGs to Consider adding `<title>` element, ARIA `role=img` and `aria-labelledby` attributes to OOUI's icon SVGs .Jan 6 2018, 7:36 AM

Volker_E moved this task from Next-up to Doing on the OOUI board.

Volker_E updated the task description. (Show Details)

Volker_E moved this task from Doing to Reviewing on the OOUI board.Jan 17 2018, 12:44 AM

Volker_E claimed this task.Jan 30 2018, 5:32 PM

Volker_E moved this task from Reviewing to Waiting for breaking release on the OOUI board.

Change 400091 merged by jenkins-bot:
[oojs/ui@master] WikimediaUI theme: Unify and refine WikimediaUI icons

https://gerrit.wikimedia.org/r/400091

• Petar.petkovic removed a project: Patch-For-Review.Mar 20 2018, 10:55 AM

Jdforrester-WMF moved this task from Waiting for breaking release to OOUI-0.26.0 on the OOUI board.Mar 20 2018, 6:01 PM

Jdforrester-WMF edited projects, added OOUI (OOUI-0.26.0); removed OOUI.

Volker_E closed this task as Resolved.Mar 20 2018, 7:56 PM

Consider adding `<title>` element, ARIA `role=img` and `aria-labelledby` attributes to OOUI's icon SVGs Closed, ResolvedPublicActions

Description

Details

Event Timeline

Consider adding `<title>` element, ARIA `role=img` and `aria-labelledby` attributes to OOUI's icon SVGs
Closed, ResolvedPublic
Actions