search

pwa-builder / PWABuilder

The simplest way to create progressive web apps across platforms and devices. Start here. This repo is home to several projects in the PWABuilder family of tools.
https://docs.pwabuilder.com
Other
2.55k stars 273 forks source link

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

Open Anshi0420 opened 11 months ago

Anshi0420 commented 11 months ago

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:

https://github.com/pwa-builder/PWABuilder/assets/117908911/737aaa83-62d3-409c-992b-7c1dc5b5156b

Ensures image element has alt as none or presentation for decorative image Alt text is not defiedn for the image for Awesame your PWA store is ready
microsoft-github-policy-service[bot] commented 10 months ago

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

microsoft-github-policy-service[bot] commented 10 months ago

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

microsoft-github-policy-service[bot] commented 10 months ago

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

microsoft-github-policy-service[bot] commented 10 months ago

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

microsoft-github-policy-service[bot] commented 9 months ago

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

microsoft-github-policy-service[bot] commented 9 months ago

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

microsoft-github-policy-service[bot] commented 9 months ago

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

microsoft-github-policy-service[bot] commented 8 months ago

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

Anshi0420 commented 1 week ago

Issue still repro at latest UI.

image

microsoft-github-policy-service[bot] commented 1 day ago

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .