Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accordion header '+' image missing alt attribute #111

Closed
deneb-alpha opened this issue Jun 20, 2024 · 0 comments · Fixed by #124
Closed

Accordion header '+' image missing alt attribute #111

deneb-alpha opened this issue Jun 20, 2024 · 0 comments · Fixed by #124
Assignees

Comments

@deneb-alpha
Copy link
Contributor

Project Title: Uyuni Website Refresh - Accessibility and Responsiveness (#205)

Accessibility/Responsive Issue

Page
Home/landingpage

Description
Alt text is missing on the image tags for the '+' svgs on the accordion section headers

Proposed Solution
This is an interesting one, because there's a couple ways to think about it...
The accordion is already open and displays the description under the title to the user - is the '+' an icon as in, does it convey meaning, or is it decorative.
A '+' would universally be understood as addition, but in the context of a collapsible accordion maybe a 'v' is more informative for 'expand' and '^' for 'collapse would be a better choice.
Or are we trying to build semantic markup.

Solutions
Solution 1 (quick): Give the in the accordions an alt attribute.
Solution 2 (semantic): Pull the tag out of the image, and use aria-hidden (if decorative) and role attributes.

Additional Notes

  • Article on font icons/icons and svg for consideration.
  • Article on semantics.

Screenshot
Screen Shot 2024-05-09 at 1 22 43 am

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

2 participants