Skip to content

Wayback Search - proposed a11y improvements #907

@krisztin

Description

@krisztin

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions