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

Wayback Search - proposed a11y improvements #907

Open
krisztin opened this issue Apr 28, 2024 · 0 comments · May be fixed by #912
Open

Wayback Search - proposed a11y improvements #907

krisztin opened this issue Apr 28, 2024 · 0 comments · May be fixed by #912
Labels
Design Bug Problem with UI/UX

Comments

@krisztin
Copy link

Description

ia-wayback-search package has some accessibility issues:

  1. SVGs have superfluous and missing attributes
  2. Inappropriate/unnecessary use of <fieldset>
  3. The input's label is display:none which makes it invisible for screenreaders
  4. Wayback Machine link is empty/unlabelled
  5. Input field has insufficient contrast to the background making it a difficult click target for people with vision issues
  6. Placeholder text with insufficient contrast

+1 Border radius mismatch (this is really just a visual/design thing)

Expectation

  1. SVGs in both instances (logo and search icon) are considered decorative as they serve no function and add no useful detail. WCAG 2.1. Guideline 1.1.1. on Decorative Images
  2. Fieldset should be a div
  3. The input needs proper, accessible labelling readable for screenreaders
  4. Link needs proper labelling readable for screenreaders
  5. Search field should have sufficient contrast making it clearly visible for people with low vision
  6. Placeholder text should have better contrast with the input's background colour

All these changes should improve the UX for users with screenreaders.

Proposal & Constraints

  1. SVGs to be made invisible for screenreaders with aria-hidden="true", they should also be made unfocusable (for the few IE users who still exist). See W3's support resource (under the examples tab)
  2. Replace fieldset with a div
  3. Remove the invisible label and instead add an aria-label="Search the Wayback Machine" attribute to the input
  4. Add an aria-label="Go to Wayback Machine homepage" attribute to the
  5. Either change the colour of the background of the input's parent element OR add a contrasting colour border to the input (see attached image below)
  6. Change input's BG colour to white. Unfortunately this will still be insufficient contrast but that is the nature of the placeholder attribute (hence it's often not advised to be used) (see attached image below)

+1 Make the border radius of the input field the same as the background element (currently fieldset) for a better visual harmony (see attached image below)

b4after-search

Stakeholders
Unsure, but I'm more than happy to pick this issue up (already have most of it done on my local fork)

@krisztin krisztin added the Design Bug Problem with UI/UX label Apr 28, 2024
@krisztin krisztin linked a pull request May 16, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Design Bug Problem with UI/UX
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant