Skip to content

Images alt attribute in an editing context #1520

@afercia

Description

@afercia

Splitting this out from #1309

One interesting thing we've recently discussed in the accessibility team, during the review of the new media widgets, is the different purpose the alt text has in the front-end and in an editing context (ie. when editing a post).

As a general rule, we all know that (I'll simplify a bit):

  • purely decorative images should have an empty alt text alt=""
  • images that convey relevant information, should use a meaningful alt text

However, when in an editing context, things are slightly different. Will try to do my best to explain. While editing a post, users need to know what the image they've added is.
When users add an alt text to the image because they want to communicate the image purpose in the front-end, that also serves the purpose to make the image recognizable in the editor.
However, when the image is purely decorative, users will set an empty alt text. That's perfectly correct for the front-end but it will also make the image not recognizable for screen reader users because images with an alt="" are just ignored.

Ideally, when in the editor, also images intended to use an empty alt="" should have something to make them perceivable and announced by screen readers. Not sure about the best option, but maybe this is something worth considering as a nice improvement Gutenberg could bring in.

As a reference, the solution implemented for the image widget was to remove the empty alt attribute in the editor when there's no alt value, so at least the filename gets announced. Not sure that's the best available option and maybe we could consider an improved solution.
xwp/wp-core-media-widgets#47
xwp/wp-core-media-widgets#50

Metadata

Metadata

Assignees

Labels

[Feature] MediaAnything that impacts the experience of managing media[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).

Type

No type
No fields configured for issues without a type.

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions