[DOCS]: Ensures <img> elements have alternate text or a role of none or presentation.

[Suriya617]

What happened?

Proper alt text is not defined for the image present after ‘Click on … Android section’ text under ‘Packaging’ heading. Screen reader is announcing as ‘Unlabeled graphic’.

How do we reproduce the behavior?

Repro steps:

1. Open the URL: https://docs.pwabuilder.com/#/builder/android in edge dev browser and login with v-.
2. Now Run Fast Pass from AI4W.
3. Observe the issue.

What do you expect to happen?

Ensures elements have alternate text or a role of none or presentation.

What environment were you using?

Test Environment: OS: Windows11 OS Version: 23H2 (Build 25905.1000) Browser: Edge Dev (Version 117.0.2007.0 (Official build) dev (64-bit)) Screen reader: Narrator Tool: AI4W

Additional context

Element path: .docs-image:nth-child(12) > img[width="550"]

Snippet:

How to fix: Fix any of the following:

• Element does not have an alt attribute
• aria-label attribute does not exist or is empty
• aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
• Element has no title attribute
• Element's default semantics were not overridden with role="none" or role="presentation"

Notes: This issue repro throughout.

User Impact: Screen reader users will get impacted as users will not be able to the purpose of the image and will not be able to make track of the content properly.

WCAG Reference link: https://www.w3.org/WAI/WCAG21/Understanding/non-text-content

Attachments: