Fix a11y audit: Missing aria-hidden on some decorative SVGs #2691

hannahiss · 2024-08-19T13:08:45Z

Note: Please transform - [ ] into - (NA) in the description when things are not applicable

Related issues

#2667

Description

Add missing aria-hidden on SVGs when needed:

Orange navbar: docs version check-mark
Orange navbar: mode toggler icons and check-mark
Tag: informative tag with icon
Docs navigation toggler (on small screens)
Checks & radios: toggle buttons with icons
Position utility: example "Marker"

NB:

To be moved in another PR => remove visually-hidden text redundant with SVG's title of Github icon

To be noted:

Algolia's DocSearch inserts two svg to explain user that Ctrl+K (Apple + K) can be used to open search panel, but Ctrl/Apple is made with an SVG without any label or title. Moreover, the panel itself contains a SVG that is missing title or label. This pb is identified but not solved in this PR
for nested SVGs:
- decorative ones: aria-hidden on the parent
- informative ones: on parent SVG, role="img" + aria-label + eventually <title> inside, on child SVG aria-hidden="true"
Issues coming from Bootstrap have been included in a Bootstrap PR Docs: missing aria-hidden on some decorative SVGs twbs/bootstrap#40756:
- SVGs in docs version submenu
- SVGs in mode toggler submenu
- SVG in position utility: example "Marker"
- SVGs in Features example
- But there are a lot more remaining in the examples

Motivation & Context

A11y audit fixes: these SVGs are decorative, they must have an attribute aria-hidden="true" so that assistive technologies ignore them.

Types of change

Bug fix (non-breaking which fixes an issue)

Live previews

…ves? - removing visually-hidden text redundant with svg's title

netlify · 2024-08-19T13:10:17Z

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	`b2fefbc`
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/66ea87237d0cac00081857ff
😎 Deploy Preview	https://deploy-preview-2691--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

…ves? - Fix missing aria-hidden="true" in docs version and mode submenus

louismaximepiton

Missing some in:

Orange Navbars with mode selector
The first Tag example
Download app page for the mode selector
Form example page for the mode selector
Icons > External SVG file
Checks & radios > With icon
Position > Examples
docs-subnav.html
example.html shortcode replacement
orange-global-headers.html for mode selector
orange-logo.svg About > Brand
OBS-logo.svg About > Brand

I don't know what should be done on the `site/static/docs//assets//.svg

What do we decide for nested svgs ? There might be issues with download app page and placeholder shortcode.

Maybe some of the examples above need to be backported to Bootstrap first

Do we need any migration guide for this ? Maybe enumerating the different possibilities could so the trick.

site/layouts/partials/docs-versions.html

site/layouts/partials/theme-toggler.html

hannahiss · 2024-08-21T13:10:14Z

site/layouts/partials/theme-toggler.html

+  <svg class="bi theme-icon-active" aria-hidden="true"><use href="#ui-auto-mode"></use></svg>
  <span class="{{ if $isExamples }}visually-hidden{{ else }}d-lg-none ms-2{{ end }}" id="bd-theme-text">Toggle mode</span>
 </button>
 <ul class="dropdown-menu dropdown-menu-end{{ if $isExamples }} shadow{{ else }} mb-2{{ end }}" aria-labelledby="bd-theme-text">
  <li>
    <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
-      <svg class="bi me-2"><use href="#ui-light-mode"></use></svg>
+      <svg class="bi me-2" aria-hidden="true"><use href="#ui-light-mode"></use></svg>
      Light
-      <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+      <svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
    </button>
  </li>
  <li>
    <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
-      <svg class="bi me-2"><use href="#ui-dark-mode"></use></svg>
+      <svg class="bi me-2" aria-hidden="true"><use href="#ui-dark-mode"></use></svg>
      Dark
-      <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+      <svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
    </button>
  </li>
  <li>
    <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
-      <svg class="bi me-2"><use href="#ui-auto-mode"></use></svg>
+      <svg class="bi me-2" aria-hidden="true"><use href="#ui-auto-mode"></use></svg>
      Auto
-      <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+      <svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>


To be done in Bootstrap PR too

hannahiss · 2024-08-22T15:45:57Z

I did a full check of code and of your remarks. I have some remarks myself:

Missing some in:

Orange Navbars with mode selector

The first Tag example

Download app page for the mode selector

Form example page for the mode selector

Icons > External SVG file

I don't think we need aria-hidden here. It is a SVG code to be saved in an external file and then used in HTML in a <svg> tag with aria-hidden. What do you think?

Checks & radios > With icon

Position > Examples

docs-subnav.html

example.html shortcode replacement

I guess you're talking about the line 44 but I'm not sure what I should do...

orange-global-headers.html for mode selector

orange-logo.svg About > Brand

OBS-logo.svg About > Brand

For the logos in <figure> with figcaption, I think we should keep the alts (maybe enhanced: Orange full logo, Orange reduced logo and OBS logo) without aria-hidden because all examples I'v seen with figcaption do so... What do you think?

I don't know what should be done on the `site/static/docs//assets//.svg

You mean the SVG files? Nothing has to be done, we have to set aria-hidden or not when we use these files in code.

What do we decide for nested svgs ? There might be issues with download app page and placeholder shortcode.

I tried with NVDA, it only says "Graphique" and the title provided, not mentioning the inside SVG... We should ask to EASE when we will talk about this audit...

Maybe some of the examples above need to be backported to Bootstrap first

Yes, see PR twbs/bootstrap#40756 that is complete at this time.

Do we need any migration guide for this ? Maybe enumerating the different possibilities could so the trick.

Well, yes, we could attract users' attention on the fact that we added aria-hidden in Orange navbar mode selector, tags with icon, and toggle buttons?

patrickhlauke · 2024-08-23T08:53:43Z

coming over here from the bootstrap PR, I just want to ask directly: are you currently seeing a problem with decorative <svg>s that don't have text content in them being announced by a particular browser/screen reader combination? because generally, <svg>s without any text nodes/attributes should be, from my experience, completely ignored and not announced by SRs, the same way SRs won't announce things like presentational bunches of <div>s and <span>s. i.e. the extra aria-hidden="true" is unnecessary and has no practical effect (unless I'm missing a particular browser/SR combo that does announce them somehow unless they're hidden?)

i mean, as a belt-and-braces "just in case at some point we do use an <svg> that does contain a text node or similar", sure...just want to point out that it's generally completely unnecessary (as far as i know anyway)

hannahiss · 2024-08-23T14:50:28Z

coming over here from the bootstrap PR, I just want to ask directly: are you currently seeing a problem with decorative <svg>s that don't have text content in them being announced by a particular browser/screen reader combination? because generally, <svg>s without any text nodes/attributes should be, from my experience, completely ignored and not announced by SRs, the same way SRs won't announce things like presentational bunches of <div>s and <span>s. i.e. the extra aria-hidden="true" is unnecessary and has no practical effect (unless I'm missing a particular browser/SR combo that does announce them somehow unless they're hidden?)

i mean, as a belt-and-braces "just in case at some point we do use an <svg> that does contain a text node or similar", sure...just want to point out that it's generally completely unnecessary (as far as i know anyway)

Well, you're right, I can't see the issue in my tests (with NVDA/Chrome, the SVGs without aria-hidden are correctly ignored) but this has been asked by our accessibility experts... So I trust their advice.

louismaximepiton

I think dark-mode.md:8356 SVG would need an aria-hidden="true" and all the SVGs coming from it (30 SVGs until line 8821) (btn-group with icon for Day Week and Month).

Missing some in:

Orange Navbars with mode selector

The first Tag example

Download app page for the mode selector

Form example page for the mode selector

Icons > External SVG file

I don't think we need aria-hidden here. It is a SVG code to be saved in an external file and then used in HTML in a <svg> tag with aria-hidden. What do you think?

Fine with this.

Checks & radios > With icon

Position > Examples

docs-subnav.html

example.html shortcode replacement

I guess you're talking about the line 44 but I'm not sure what I should do...

Ah nevermind, I thought something broke the shortcode, but it seems to be a previous commit (Difference between the generated code in the v5.2 and v5.3). I'll create an issue on our side.

orange-global-headers.html for mode selector

orange-logo.svg About > Brand

OBS-logo.svg About > Brand

For the logos in <figure> with figcaption, I think we should keep the alts (maybe enhanced: Orange full logo, Orange reduced logo and OBS logo) without aria-hidden because all examples I'v seen with figcaption do so... What do you think?

Already seen but yeah definitely.

I don't know what should be done on the `site/static/docs//assets//.svg

You mean the SVG files? Nothing has to be done, we have to set aria-hidden or not when we use these files in code.

True, sorry about that.

What do we decide for nested svgs ? There might be issues with download app page and placeholder shortcode.

I tried with NVDA, it only says "Graphique" and the title provided, not mentioning the inside SVG... We should ask to EASE when we will talk about this audit...

I think we should have a consistent approach, I've seen the nested SVG having an aria-hidden and some having nothing.

Do we need any migration guide for this ? Maybe enumerating the different possibilities could so the trick.

Well, yes, we could attract users' attention on the fact that we added aria-hidden in Orange navbar mode selector, tags with icon, and toggle buttons?

Maybe just a mention to say that people should check their SVG to have either aria-hidden="true", or aria-label, or aria-labelledby|describedby, or a <title>, or an alternative text.

hannahiss · 2024-09-05T15:49:00Z

I think dark-mode.md:8356 SVG would need an aria-hidden="true" and all the SVGs coming from it (30 SVGs until line 8821) (btn-group with icon for Day Week and Month).

Done

orange-logo.svg About > Brand

OBS-logo.svg About > Brand

For the logos in <figure> with figcaption, I think we should keep the alts (maybe enhanced: Orange full logo, Orange reduced logo and OBS logo) without aria-hidden because all examples I'v seen with figcaption do so... What do you think?

Already seen but yeah definitely.

Maybe we can ask tomorrow to EASE about this...?

I think we should have a consistent approach [for nested SVGs], I've seen the nested SVG having an aria-hidden and some having nothing.

OK, we'll ask about that to EASE tomorrow as we planned

Maybe just a mention to say that people should check their SVG to have either aria-hidden="true", or aria-label, or aria-labelledby|describedby, or a <title>, or an alternative text.

Done

Fix a11y audit bug 0-3: Do the images have appropriate text alternati…

ec6ffab

…ves? - removing visually-hidden text redundant with svg's title

hannahiss changed the title ~~Fix a11y audit bug 0-3: Do the images have appropriate text alternati…~~ Fix a11y audit bug 0-3: Do the images have appropriate text alternatives? Aug 19, 2024

hannahiss mentioned this pull request Aug 19, 2024

Accessibility audit #2667

Open

Fix a11y audit bug 0-3: Do the images have appropriate text alternati…

b9c0400

…ves? - Fix missing aria-hidden="true" in docs version and mode submenus

hannahiss marked this pull request as ready for review August 19, 2024 14:00

louismaximepiton reviewed Aug 20, 2024

View reviewed changes

site/layouts/partials/docs-versions.html Outdated Show resolved Hide resolved

site/layouts/partials/theme-toggler.html Show resolved Hide resolved

hannahiss marked this pull request as draft August 21, 2024 12:46

hannahiss changed the title ~~Fix a11y audit bug 0-3: Do the images have appropriate text alternatives?~~ Fix a11y audit: Missing aria-hidden on SVGs Aug 21, 2024

hannahiss commented Aug 21, 2024

View reviewed changes

hannahiss added 5 commits August 21, 2024 15:20

Move some fixes to Bootstrap PR

be6217c

Missing aria-hidden

e5006c1

Missing aria-hidden

99204ae

Missing aria-hidden

089c1fa

Missing aria-hidden

4768a6e

hannahiss changed the title ~~Fix a11y audit: Missing aria-hidden on SVGs~~ Fix a11y audit: Missing aria-hidden on some decorative SVGs Aug 22, 2024

hannahiss added 2 commits August 22, 2024 16:37

Missing aria-hidden

09f72e7

Fix to be moved in another PR

f300ec3

hannahiss added v5 accessibility docs Improvements or additions to documentation labels Aug 22, 2024

hannahiss marked this pull request as ready for review August 23, 2024 14:50

louismaximepiton requested changes Aug 27, 2024

View reviewed changes

hannahiss added 3 commits September 5, 2024 17:25

Merge branch 'main' into main-his-a11y-0-3-aria-hidden

01b6f1f

Fix a11y audit: add 30 missing aria-hidden="true" in dark-mode.md

54a813f

Fix a11y audit: add mention of SVGs accessibility in migration guide

75d5a96

louismaximepiton approved these changes Sep 6, 2024

View reviewed changes

hannahiss added 2 commits September 10, 2024 15:23

Merge branch 'main' into main-his-a11y-0-3-aria-hidden

00b1086

Merge branch 'main' into main-his-a11y-0-3-aria-hidden

b2fefbc

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix a11y audit: Missing aria-hidden on some decorative SVGs #2691

Fix a11y audit: Missing aria-hidden on some decorative SVGs #2691

hannahiss commented Aug 19, 2024 •

edited

Loading

netlify bot commented Aug 19, 2024 •

edited

Loading

louismaximepiton left a comment

hannahiss Aug 21, 2024

hannahiss commented Aug 22, 2024

patrickhlauke commented Aug 23, 2024 •

edited

Loading

hannahiss commented Aug 23, 2024

louismaximepiton left a comment

hannahiss commented Sep 5, 2024

Fix a11y audit: Missing aria-hidden on some decorative SVGs #2691

Are you sure you want to change the base?

Fix a11y audit: Missing aria-hidden on some decorative SVGs #2691

Conversation

hannahiss commented Aug 19, 2024 • edited Loading

Related issues

Description

Motivation & Context

Types of change

Live previews

netlify bot commented Aug 19, 2024 • edited Loading

✅ Deploy Preview for boosted ready!

louismaximepiton left a comment

Choose a reason for hiding this comment

hannahiss Aug 21, 2024

Choose a reason for hiding this comment

hannahiss commented Aug 22, 2024

patrickhlauke commented Aug 23, 2024 • edited Loading

hannahiss commented Aug 23, 2024

louismaximepiton left a comment

Choose a reason for hiding this comment

hannahiss commented Sep 5, 2024

hannahiss commented Aug 19, 2024 •

edited

Loading

netlify bot commented Aug 19, 2024 •

edited

Loading

patrickhlauke commented Aug 23, 2024 •

edited

Loading