Accessibility compliance report R11852

[SmWorkGitHub]

Link to bug

https://design-system.hpe.design/

Current Behavior

This was an accessibility review done by the web compliance team required to get an hpe.com domain name. Report R11852 Issue summary with recommendations

All issues apply to the HPE DS home page.

1. Video: This video element does not have a mechanism that allows an accessible name value to be calculated
2. Navigation links appear as buttons wrapped in A tags. Example: foundation</button/></a/>
3. Screen reader is picking up a background image that should be ignored and has no aria-label: This svg element does not have a mechanism that allows an accessible name value to be calculated
4. Link wrapped with an extra A tag: This A element does not have a mechanism that allows an accessible name value to be calculated
5. This TRACK does not have a label attribute set to a text value:
6. Layout DIV surrounding the video: This DIV is focusable but lacks a role attribute.

Expected Behavior

1. Add aria-label to the video tag
2. Button tags nested under the A tags weren't expected. Dev to decide how to clean this up.
3. Ensure that screen readers ignore the background image
4. Remove extra A tag
5. Add an aria-label to the TRACK tag
6. Consider adding a role attribute to the layout DIV (optional to fix)

Screenshot or recording of bug

HPE DS Acc report.docx

Steps To Reproduce

Review HPE DS hom page with a screen reader or other ACC eval tool

[halocline]

hmmmm... The extra anchor tags are new and did not previously exist. I suspect upgrading to NextJS v13 introduced the extra anchor tags. Need to see if there was adjustments to Next/Link needed to be done as part of the upgrade.