Gallery: Add labels to img, figure and figcaption elements for accessibility #25560

scruffian · 2020-09-23T13:58:27Z

Fixes #13164

Description

This adds some attributes to the Gallery block markup for accessibility reasons:

Add the aria-describedby attribute to the figure element to declare what element contains the caption
Add an id to the corresponding figcaption to associate it with the figure
Also add the caption to the aria-label attribute on the image, as a fallback in case the describedby attribute doesn't work
Also add the caption to the title attribute on the link, as a fallback in case the describedby attribute doesn't work

How has this been tested?

Screenshots

Types of changes

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR.

github-actions · 2020-09-23T14:08:09Z

Size Change: +499 B (0%)

Total Size: 1.17 MB

Filename	Size	Change
`build/a11y/index.js`	1.14 kB	-1 B
`build/block-directory/index.js`	8.61 kB	+81 B (0%)
`build/block-editor/index.js`	129 kB	+154 B (0%)
`build/block-library/editor-rtl.css`	8.6 kB	+28 B (0%)
`build/block-library/editor.css`	8.6 kB	+28 B (0%)
`build/block-library/index.js`	135 kB	+211 B (0%)
`build/components/index.js`	168 kB	+697 B (0%)
`build/components/style-rtl.css`	15.4 kB	-89 B (0%)
`build/components/style.css`	15.4 kB	-89 B (0%)
`build/compose/index.js`	9.42 kB	+2 B (0%)
`build/core-data/index.js`	12 kB	+27 B (0%)
`build/data-controls/index.js`	1.27 kB	-1 B
`build/data/index.js`	8.42 kB	-13 B (0%)
`build/edit-site/index.js`	20.5 kB	-5 B (0%)
`build/edit-widgets/index.js`	17.7 kB	-133 B (0%)
`build/edit-widgets/style-rtl.css`	2.73 kB	-96 B (3%)
`build/edit-widgets/style.css`	2.73 kB	-97 B (3%)
`build/editor/index.js`	45.4 kB	+10 B (0%)
`build/format-library/index.js`	7.49 kB	+1 B
`build/rich-text/index.js`	13.5 kB	-215 B (1%)
`build/server-side-render/index.js`	2.6 kB	-1 B

ℹ️ View Unchanged

Filename	Size	Change
`build/annotations/index.js`	3.52 kB	0 B
`build/api-fetch/index.js`	3.35 kB	0 B
`build/autop/index.js`	2.72 kB	0 B
`build/blob/index.js`	620 B	0 B
`build/block-directory/style-rtl.css`	943 B	0 B
`build/block-directory/style.css`	942 B	0 B
`build/block-editor/style-rtl.css`	11.1 kB	0 B
`build/block-editor/style.css`	11.1 kB	0 B
`build/block-library/style-rtl.css`	7.61 kB	0 B
`build/block-library/style.css`	7.6 kB	0 B
`build/block-library/theme-rtl.css`	741 B	0 B
`build/block-library/theme.css`	741 B	0 B
`build/block-serialization-default-parser/index.js`	1.78 kB	0 B
`build/block-serialization-spec-parser/index.js`	3.1 kB	0 B
`build/blocks/index.js`	47.5 kB	0 B
`build/date/index.js`	31.9 kB	0 B
`build/deprecated/index.js`	772 B	0 B
`build/dom-ready/index.js`	568 B	0 B
`build/dom/index.js`	4.42 kB	0 B
`build/edit-navigation/index.js`	10.7 kB	0 B
`build/edit-navigation/style-rtl.css`	868 B	0 B
`build/edit-navigation/style.css`	871 B	0 B
`build/edit-post/index.js`	306 kB	0 B
`build/edit-post/style-rtl.css`	6.25 kB	0 B
`build/edit-post/style.css`	6.24 kB	0 B
`build/edit-site/style-rtl.css`	3.54 kB	0 B
`build/edit-site/style.css`	3.54 kB	0 B
`build/editor/editor-styles-rtl.css`	492 B	0 B
`build/editor/editor-styles.css`	493 B	0 B
`build/editor/style-rtl.css`	3.83 kB	0 B
`build/editor/style.css`	3.82 kB	0 B
`build/element/index.js`	4.44 kB	0 B
`build/escape-html/index.js`	733 B	0 B
`build/format-library/style-rtl.css`	547 B	0 B
`build/format-library/style.css`	548 B	0 B
`build/hooks/index.js`	1.74 kB	0 B
`build/html-entities/index.js`	621 B	0 B
`build/i18n/index.js`	3.55 kB	0 B
`build/is-shallow-equal/index.js`	709 B	0 B
`build/keyboard-shortcuts/index.js`	2.39 kB	0 B
`build/keycodes/index.js`	1.85 kB	0 B
`build/list-reusable-blocks/index.js`	3.02 kB	0 B
`build/list-reusable-blocks/style-rtl.css`	476 B	0 B
`build/list-reusable-blocks/style.css`	476 B	0 B
`build/media-utils/index.js`	5.12 kB	0 B
`build/notices/index.js`	1.69 kB	0 B
`build/nux/index.js`	3.27 kB	0 B
`build/nux/style-rtl.css`	671 B	0 B
`build/nux/style.css`	668 B	0 B
`build/plugins/index.js`	2.44 kB	0 B
`build/primitives/index.js`	1.34 kB	0 B
`build/priority-queue/index.js`	789 B	0 B
`build/redux-routine/index.js`	2.85 kB	0 B
`build/shortcode/index.js`	1.7 kB	0 B
`build/token-list/index.js`	1.24 kB	0 B
`build/url/index.js`	4.06 kB	0 B
`build/viewport/index.js`	1.74 kB	0 B
`build/warning/index.js`	1.13 kB	0 B
`build/wordcount/index.js`	1.17 kB	0 B

_{compressed-size-action}

enriquesanchez

Tested with VoiceOver on Safari and tried various combinations of images with and without alt, and with and without caption.

In all cases I felt enough information was being announced 👍

packages/block-library/src/gallery/gallery-image.js

tellthemachines · 2020-09-25T01:30:50Z

Tested this PR with both VoiceOver/Safari and NVDA/Firefox and found that aria-describedby doesn't stop the URL from being read out, and on NVDA/Firefox it doesn't read out the caption at all.

I've pushed a commit replacing it with a conditional aria-label, which will render the image caption ONLY if the image has no alt text defined, if there is a caption and if the image is inside a link. Testing on both the above screen readers shows this solution to work well.

enriquesanchez · 2020-09-25T21:07:36Z

Thanks, @tellthemachines!

Tested on VoiceOver and this is what I found:

1. If the image is a link and only has a caption
The caption gets announced twice:

2. If the image is a link and only has alt text
The alt text gets announced as expected:

3. If the image is a link and has both alt text and a caption
The alt text and caption get announced:

4. If the image is a link and has no alt text nor a caption
The image's URL gets announced:

I think this is feeling in good shape with the exception of #1. I don't think the caption should be announced twice. What do you think?

tellthemachines · 2020-09-28T05:23:22Z

I think this is feeling in good shape with the exception of #1. I don't think the caption should be announced twice. What do you think?

Hmm, I tried adding aria-hidden to the figcaption when the image has an aria-label, and that fixes the repetition in VoiceOver, but unfortunately causes a repetition in NVDA 😖. As it is, NVDA announces "figure [caption text] graphic link", but with aria-hidden on the figcaption it announces "[caption text] figure [caption text] graphic link".

I can't think of any other way to avoid the repetition in VoiceOver, and having to choose between the two, I'd rather optimise for NVDA as it's the more popular screen reader.
I'm also not super-keen on adding aria-hidden because then screen reader users may not be able to check that a caption has been output. What are your thoughts @enriquesanchez ?

…re accessible

Co-authored-by: Zebulan Stanphill <zebulanstanphill@protonmail.com>

This reverts commit d72429a4849e42469c3fb5c33ea08a2149c70c0e.

enriquesanchez · 2020-09-28T17:55:02Z

@tellthemachines I agree, definitively not a blocker and much better than what we had before. Thank you!

ZebulanStanphill · 2020-09-30T16:23:56Z

I'm not able to review at the moment, but I'd like to dismiss my previous review. How do I do that? I can't find any button to do so.

It has been addressed.

noisysocks

Code looks good and the block migration worked in my testing 👍

mtias · 2020-10-01T07:49:18Z

Did we consider adding these server side instead of serializing?

afercia · 2020-10-01T14:18:24Z

Thanks for this PR!

Did we consider to not use aria-label at all? When there's no alt text and there is a caption, the capiton could be used as the alt text. While the implementation in this PR works for software that understand ARIA, it doesn't work when the image is broken, not loaded, or images are disabled (because of reasons). For clarity, see the screenshot below:

On the left: broken image with no alt text and with aria-label
On the right: broken image with the aria caption value used as alt text

The alt text is always preferable as it can help also sighted users. Also, we should consider the first rule of ARIA use. /Cc @joedolson

enriquesanchez · 2020-10-02T22:44:28Z

When there's no alt text and there is a caption, the capiton could be used as the alt text.

@afercia I did not think of that scenario, thanks for raising it. Wouldn't the presence of the caption be enough?

mtias · 2020-10-05T12:50:33Z

If we aim to revert this can we do it before 9.2 is released to avoid extra deprecations?

…r accessibility (#25560)" This reverts commit 643007e.

afercia · 2020-10-05T15:27:29Z

I did not think of that scenario, thanks for raising it. Wouldn't the presence of the caption be enough?

@enriquesanchez my point is more about why to use an aria-label in that scenario when it's possible to populate the alt text? Usage of ARIA should be avoided when there's an equivalent HTML element or attribute that can be used.

ZebulanStanphill · 2020-10-14T03:19:21Z

@afercia I've made #26082 to improve the behavior.

scruffian requested review from mkevins and pinarol as code owners September 23, 2020 13:58

scruffian requested a review from enriquesanchez September 23, 2020 14:01

scruffian self-assigned this Sep 23, 2020

scruffian added [a11y] Labelling [Block] Gallery Affects the Gallery Block - used to display groups of images labels Sep 23, 2020

enriquesanchez added the Needs Accessibility Feedback Need input from accessibility label Sep 23, 2020

enriquesanchez approved these changes Sep 23, 2020

View reviewed changes

ZebulanStanphill added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Sep 24, 2020

ZebulanStanphill previously requested changes Sep 24, 2020

View reviewed changes

packages/block-library/src/gallery/gallery-image.js Outdated Show resolved Hide resolved

packages/block-library/src/gallery/gallery-image.js Outdated Show resolved Hide resolved

scruffian and others added 7 commits September 28, 2020 17:21

Add labels to img, figure and figcaption elements to make captions mo…

8e276bb

…re accessible

change aria-label to aria-describedby

941b402

Update packages/block-library/src/gallery/gallery-image.js

31b9b51

Co-authored-by: Zebulan Stanphill <zebulanstanphill@protonmail.com>

Update packages/block-library/src/gallery/gallery-image.js

59253d1

Co-authored-by: Zebulan Stanphill <zebulanstanphill@protonmail.com>

Replace aria-describedby with conditional aria-label.

5101511

Avoid caption repetition.

ecde835

Revert "Avoid caption repetition."

b34cfed

This reverts commit d72429a4849e42469c3fb5c33ea08a2149c70c0e.

tellthemachines force-pushed the update/gallery-accessible-markup branch from f0f9a35 to b34cfed Compare September 28, 2020 07:29

Add deprecation.

908081c

Remove unnecessary Id.

f6fbc2e

tellthemachines requested a review from ZebulanStanphill September 29, 2020 03:24

noisysocks approved these changes Oct 1, 2020

View reviewed changes

tellthemachines merged commit 643007e into master Oct 1, 2020

tellthemachines deleted the update/gallery-accessible-markup branch October 1, 2020 02:53

github-actions bot added this to the Gutenberg 9.2 milestone Oct 1, 2020

scruffian added a commit that referenced this pull request Oct 5, 2020

Revert "Gallery: Add labels to img, figure and figcaption elements fo…

bd1ea5a

…r accessibility (#25560)" This reverts commit 643007e.

scruffian mentioned this pull request Oct 5, 2020

Revert "Gallery: Add labels to img, figure and figcaption elements for accessibility" #25833

Closed

ZebulanStanphill mentioned this pull request Oct 14, 2020

Gallery block: use image caption as fallback for alt text. #26082

Merged

6 tasks

gziolo mentioned this pull request Nov 4, 2020

Gallery: Remove caption fallback for alt attribute #26676

Merged

2 tasks

priethor removed the [a11y] Labelling label Jul 24, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gallery: Add labels to img, figure and figcaption elements for accessibility #25560

Gallery: Add labels to img, figure and figcaption elements for accessibility #25560

scruffian commented Sep 23, 2020 •

edited

Loading

github-actions bot commented Sep 23, 2020 •

edited

Loading

enriquesanchez left a comment

tellthemachines commented Sep 25, 2020

enriquesanchez commented Sep 25, 2020

tellthemachines commented Sep 28, 2020

enriquesanchez commented Sep 28, 2020

ZebulanStanphill commented Sep 30, 2020

noisysocks left a comment

mtias commented Oct 1, 2020

afercia commented Oct 1, 2020

enriquesanchez commented Oct 2, 2020

mtias commented Oct 5, 2020

afercia commented Oct 5, 2020

ZebulanStanphill commented Oct 14, 2020

Gallery: Add labels to img, figure and figcaption elements for accessibility #25560

Gallery: Add labels to img, figure and figcaption elements for accessibility #25560

Conversation

scruffian commented Sep 23, 2020 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

github-actions bot commented Sep 23, 2020 • edited Loading

enriquesanchez left a comment

Choose a reason for hiding this comment

tellthemachines commented Sep 25, 2020

enriquesanchez commented Sep 25, 2020

tellthemachines commented Sep 28, 2020

enriquesanchez commented Sep 28, 2020

ZebulanStanphill commented Sep 30, 2020

noisysocks left a comment

Choose a reason for hiding this comment

mtias commented Oct 1, 2020

afercia commented Oct 1, 2020

enriquesanchez commented Oct 2, 2020

mtias commented Oct 5, 2020

afercia commented Oct 5, 2020

ZebulanStanphill commented Oct 14, 2020

scruffian commented Sep 23, 2020 •

edited

Loading

github-actions bot commented Sep 23, 2020 •

edited

Loading