Contrib.social

Close button’s SVG icon image is missing required label and attribute

Open on Drupal.org →
Created on 20 October 2023, almost 2 years ago
Updated 23 October 2023, almost 2 years ago

Problem/Motivation

  1. SVG images require the following elements and attributes:
    1. element or aria-label
    2. role=”img”
  2. These are used by screen reader users and non-mouse users

WCAG success criteria

1.3.1 Information and Relationships
4.1.2 Name, Role, Value

Steps to reproduce

  1. Open in mobile or desktop view
  2. Inspect the page in your browser
  3. Search for the <svg> code snippet below within the sidebar <aside>
  4. Verify that it’s missing the following:
    1. element (aka label)
    2. role=”img” attribute

Code snippet

<svg class="admin-toolbar__close-button-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path …></path>
</svg>

Potential resolution

  1. Add <title> element with meaningful value, which provides a label for the SVG image
  2. Add role=”img”
  3. Look up the width and height of the SVG image
<svg role=”img” class="admin-toolbar__close-button-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
	<title>Close admin toolbar</title>
<path …></path>
</svg>
🐛 Bug report
Status

Fixed

Version

1.0

Component

Code

Created by

🇪🇸Spain ckrina Barcelona

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.

Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024