Improve accessibility of layout preview icons

Created on 18 August 2022, almost 3 years ago

Updated 23 January 2023, over 2 years ago

Here is an example of the preview icon for Two Column layout.

<svg width="125" height="150" class="layout-icon layout-icon--layout-twocol" data-drupal-selector="edit-settings-wrapper-icon">
  <title data-drupal-selector="edit-settings-wrapper-icon-title">Two column</title>
  <g data-drupal-selector="edit-settings-wrapper-icon-region-top">
    <title data-drupal-selector="edit-settings-wrapper-icon-region-top-title">top</title>
    <rect x="0.5" y="0.5" width="124" height="46.333333333333" stroke-width="1" class="layout-icon__region layout-icon__region--top" data-drupal-selector="edit-settings-wrapper-icon-region-top-rect"></rect>
  </g>
  <g data-drupal-selector="edit-settings-wrapper-icon-region-first">
    <title data-drupal-selector="edit-settings-wrapper-icon-region-first-title">first</title>
    <rect x="0.5" y="51.833333333333" width="59.5" height="46.333333333333" stroke-width="1" class="layout-icon__region layout-icon__region--first" data-drupal-selector="edit-settings-wrapper-icon-region-first-rect"></rect>
  </g>
  <g data-drupal-selector="edit-settings-wrapper-icon-region-second">
    <title data-drupal-selector="edit-settings-wrapper-icon-region-second-title">second</title>
    <rect x="65" y="51.833333333333" width="59.5" height="46.333333333333" stroke-width="1" class="layout-icon__region layout-icon__region--second" data-drupal-selector="edit-settings-wrapper-icon-region-second-rect"></rect>
  </g>
  <g data-drupal-selector="edit-settings-wrapper-icon-region-bottom">
    <title data-drupal-selector="edit-settings-wrapper-icon-region-bottom-title">bottom</title>
    <rect x="0.5" y="103.16666666667" width="124" height="46.333333333333" stroke-width="1" class="layout-icon__region layout-icon__region--bottom" data-drupal-selector="edit-settings-wrapper-icon-region-bottom-rect"></rect>
  </g>
</svg>

Note how many titles it has.

NVDI screen reader announce the image as follows.

Clickable two column graphic two column.

That sounds confusing. I propose we change it to something like "Regions of the two column layout".

📌 Task

Status

Active

Version

10.0 ✨

Component

Other →

Last updated 2 days ago

Created by

🇷🇺Russia Chi

Live updates comments and jobs are added and updated live.

Accessibility
It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Needs accessibility review
Used to alert the accessibility topic maintainer(s) that an issue significantly affects (or has the potential to affect) the accessibility of Drupal, and their signoff is needed (see the governance policy draft for more information). Useful links: Drupal's accessibility standards, the Drupal Core accessibility gate.

Incomplete comments

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Comment over 2 years ago →
🇨🇦Canada mgifford Ottawa, Ontario
I'm not opposed to this change, but not sure if it is better. I'm not sure what the best phrasing of this would be. How does it compare with the other layout preview icons?

From the old text, is "Clickable" relevant? Agreed that "graphic" should be assumed. Also why is "two column" repeated?

Just need some more input from content folks.
Comment about 2 years ago →
🇨🇦Canada mgifford Ottawa, Ontario
Marking it as https://www.w3.org/WAI/WCAG21/Understanding/non-text-content for now.
Comment 25 days ago →
🇨🇦Canada mgifford Ottawa, Ontario
The bigger challenge of embedding the title in like <title data-drupal-selector="edit-settings-wrapper-icon-title">Two column</title> is multilingual content. We need to be able to switch languages.

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024