A11ying with Sanna - Testing for accessibility A little testing workshop

Answers

Keyboard page

  • There is a visually hidden link (href to this page) with the label "Do you know where you are?"
  • In the radio button set, the Javascript option's label is not attached correctly to the select field.
  • The select element's label is not attached correctly to the select field.
  • Elements with multiple links to it should be h2 since it's not related to element semantics. This will also fix the problem of the headings under this heading being the same level as the parent heading.
    • The heading links only change color on hover. That is not enough. The url links have bolder underline on hover, which provides another visual cue.
    • The url link and the heading link have the same target. All links to the same target should have the same link text.

Screen readers page

  • Same form errors as on the keyboard page.
  • The first Open menu button works for sighted users but gives no information to assistive technology users.
  • Not all of the cards have matching visual and accessible names.
  • Note! With Sonoma the visually hidden texts get read first. Ventura works normally, and Windows with NVDA reads it correctly. This shows why multiple screen readers should be tested.

Visuals page

  • The text paragraph describing the text spacing bookmarklet prevents the user from changing the necessary values.
  • The toggled color contrast for the text doesn't pass the criterion.
  • The button "Can you access this button with a keyboard" cannot be accessed with a keyboard.

Zooming page

  • The button on the page has restricted height and width in pixels, which is problematic. Avoid styling buttons like this. There can always be longer texts in buttons and zooming affects the button content as well.
  • Heading level skipping.

Automated tools page

  • Skipping heading levels.
  • An empty heading.
  • An empty ul-element.

Other things