search

internetarchive / iaux

Monorepo for Archive.org UX development and prototyping.
GNU Affero General Public License v3.0
65 stars 86 forks source link

Wayback Search - proposed a11y improvements #907

Open krisztin opened 4 months ago

krisztin commented 4 months ago

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)