Contrib.social

Add option to mark decorative SVG icons as aria-hidden

Open on Drupal.org →
Created on 3 April 2023, about 2 years ago
Updated 26 February 2024, about 1 year ago

Problem/Motivation

Currently, the svg_image_field module does not provide a way to make purely decorative SVG icons accessible. According to the article "Accessible SVG Icons" by CSS-Tricks, a proper way to make these icons accessible is to apply the aria-hidden attribute to them.
By adding this feature, the module would improve accessibility and help website owners meet accessibility standards such as WCAG 2.1.

Proposed resolution

Extend the field formatter svg_image_field_formatter with a new boolean type setting, apply_aria_hidden.

Remaining tasks

  1. The patch is ready for review.
  2. Update documentation

User interface changes

Field formatter settings form has a new checkbox labelled as 'Apply the aria-hidden attribute to the rendered svg element.'

API changes

None.

Data model changes

Schema definition of field.formatter.settings.svg_image_field_formatter is extended with a new setting named apply_aria_hidden.

Example config updates after patch is applied:

--- a/config/core.entity_view_display.node.page.default.yml
+++ b/config/core.entity_view_display.node.page.default.yml
@@ -34,6 +34,7 @@ content:
       height: 25
       enable_alt: true
       enable_title: true
+      apply_aria_hidden: true
       link: ''
       force_fill: false
       sanitize: true
✨ Feature request
Status

Needs work

Version

2.3

Component

Code

Created by

🇭🇺Hungary zserno

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

Merge Requests

Comments & Activities

  • Issue created by @zserno
  • Comment about 2 years ago →
    🇭🇺Hungary zserno
  • Comment over 1 year ago →
    🇨🇦Canada mandclu

    While I 100% agree that this would be best practice, I wonder if some site admins would be concerned that the checkbox would be abused, e.g. authors would just always use it instead of taking the time to write alt text. Would it make sense to have a form setting to enable display of the checkbox, and set it to enable by default?

  • Comment over 1 year ago →
    🇪🇨Ecuador jwilson3

    Needed a re-roll to apply to latest 2.3.x

  • Status changed to Needs work over 1 year ago
  • Comment over 1 year ago →
    🇪🇨Ecuador jwilson3

    1. I wonder if some site admins would be concerned that the checkbox would be abused, e.g. authors would just always use it instead of taking the time to write alt text.

      We already have an option to disable the alt text field which is just as dangerous and ripe for abuse.

    2. Disabling the alt text option currently just removes the attribute entirely from the IMG tag, but I would argue that we should make alt text and aria-hidden behave consistently. When empty, add alt="" on IMG tag or aria-hidden on inline SVG tag. When not empty add alt text value on IMG tag and add aria-label containing the alt text value on inline SVGs (per the proposal on ✨ Use aria-label for 'Enable alt attribute' when 'Output SVG Inline' is enabled Postponed: needs info ).
    3. If this approach 👆makes sense, then I think it could actually be achieved through clever configuration of existing field options without necessarily adding a new aria hidden option. Namely, enable the alt field but make it optional (ie. not required) on the field config and then just have authors leave the alt text blank when uploading.
    4. If this 👆👆 approach doesn't make sense then at the very least, we must hide the aria hidden checkbox field when "Output SVG inline" is unchecked using #states api.
  • First commit to issue fork.
  • Merge request !22Add aria-hidden form option → (Open) created by jayhuskins
contrib.social Blog FAQ Discussions
Production build 0.71.5 2024