[a11y]: Empty state accessibility violations

[anamikaanu96]

Package

@carbon/ibm-products

Browser

Firefox

Operating System

Windows

Package version

v2.53.0-rc.0

React version

No response

Automated testing tool and ruleset

Manual testing

Assistive technology

JAWS

Description

• [ ] Heading level hierarchy is not maintained

  Issue : Heading level hierarchy is not maintained Recommended Fix : Hope the "Empty State content block could be a sub part of a Main Header , as well as sub part of the Parent page : Hence , expected to assign the Heading Level in accordance to the Parent page Heading level structure . Generic recommendation for maintaining the Heading level hierarchy : Well organised headings helps the user to quickly skim through the page content and get an overview. Headings should be concise and reflect the content. It is a good practice to arrange headings in an hierarchical order. This issue is reported in all Variants of Empty State.

• [ ] Text alternative for the given Image is not meeting the WCAG Requirements

  Issue : Text alternative for the given Image is not meeting the WCAG Requirements The existing Image - "Search Lense " given with -"Test alt text": This Graphic not conveying any info - this observed as "Decorative " Image - Decorative Images expected to hide from screen reader detection , which is not done .

  Recommended Fix : Please confirm the given Image is a Informative /Decorative , and expected to choose the fix accordingly :

  1. informative graphics should be given a descriptive alternative text so that the users of assistive technology can understand them.
  2. decorative/non informative graphics should be hidden from assistive technology so that they do not distract the user. This issue is reported in Empty State - with custom illustration

WCAG 2.1 Violation

No response

Reproduction/example

https://ibm-products.carbondesignsystem.com/?path=/story/ibm-products-patterns-empty-state-emptystate--default&globals=viewport:basic

Steps to reproduce

Heading level hierarchy Issue is reported in all the variants of Empty State. Text alternative for the given Image is not meeting the WCAG Requirements - reported in Empty State - with custom illustration

Code of Conduct

• [x] I agree to follow this project's Code of Conduct
• [x] I checked the current issues for duplicate problems

[elycheea]

As discussed on sizing, we should treat the images/illustrations in empty state as decorative as we do on the full-page error.