search

w3c / html-aria

ARIA in HTML
https://w3c.github.io/html-aria/
Other
181 stars 48 forks source link

Update needed for "no corresponding role" description due to mappings of SVG #232

Closed dd8 closed 3 years ago

dd8 commented 4 years ago

html-aria says svg has no corresponding role, and the only allowed roles are application, document or img

svg-aam says svg has implicit role graphics-document and any role is allowed https://www.w3.org/TR/svg-aam-1.0/#roleMappingGeneralRules

Firefox exposes svg in html as role=graphic Chrome exposes svg in html as role=SVGRoot Safari doesn't expose svg in html (treats it role=presentation)

This means there's no way to use inline <svg> elements for decorative images because role=presentation isn't allowed. You can see this causing a problem in practice here on www.gov.uk: https://github.com/validator/validator/issues/981

scottaohara commented 4 years ago

Role=presentation would not consistently work to mark all types of svgs as decorative. Accessible content inside such svgs could still be exposed. The gov.uk site as an example, the within can still be reached with voice over.

If an svg need to be treated as decorative and have no content exposed, it can be set to aria-hidden=true... which, upon further testing would also need to be set for certain child elements of the SVG (such as the <image>).

dd8 commented 4 years ago

Ok that makes sense disallowing role=presentation due to the inner SVG elements like links.

What about the implicit role for SVG elements? html-aam says no role (which matches Safari, but not Chrome/Firefox), svg-aam says role=graphics-document

scottaohara commented 4 years ago

HTML AAM presently says it maps to graphics-document role.

ARIA in HTML says "no corresponding role", because "graphics-document" is not presently a valid role for authors to use.

scottaohara commented 4 years ago

actually, strike my earlier statement here. I think this issue could be used as a reminder to revise the description of "no corresponding role" in ARA in HTML to more clearly indicate what was discussed here.

dd8 commented 4 years ago

May also be worth adding a note about using aria-hidden instead of role=presentation on inline SVG.

There are several behaviour differences for SVG referenced by <img src> vs inline <svg> and <svg><image href> that are not very obvious. Some folks will switch from <img src> to inline <svg> to reduce network requests not realising there's an accessibility impact.

scottaohara commented 4 years ago

Hmm. maybe. though information like that might be a better fit for https://w3c.github.io/using-aria/

scottaohara commented 3 years ago

closing this as duplicate to 158