Tips for accessibility testing

position: absolute !important;clip: rect(1px 1px 1px 1px); /* IE6, IE7 */clip: rect(1px, 1px, 1px, 1px);
  1. Add ARIA attributes to indicate when a button has been pressed:
role=button aria-pressed=true;
role=alert;
  1. Add jump links for long forms
  2. Display all fields causing errors
  3. Make sure to include field names in the error
  4. If a field has an invalid value, explain how the user can fix it. Invalid value could mean anything, but letting the user know that no spaces are allowed in an ID field allows them to quickly fix the problem.
  5. Set aria-live=”assertive”. Be sure to check any browser discrepancies
  1. Code the dialog title and headers as H1-H2.
  2. Make the rest of the dialog focusable, as well as any buttons, links, and fields.
  3. Create a focusable element inside the dialog and set its role=document. This will allow the screen reader to perceive the content of a dialog as a normal web page. Move the focus back to the the last focus point (generally the button that launched the dialog) in the application when it is closed. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role)
  • PAGE UP: Move to the previous month.
  • PAGE DOWN: Move to the next month.
  • CTRL + PAGE UP: Move to the previous year.
  • CTRL + PAGE DOWN: Move to the next year.
  • CTRL + HOME: Open the datepicker if closed.
  • CTRL/COMMAND + HOME: Move to the current month.
  • CTRL/COMMAND + LEFT: Move to the previous day.
  • CTRL/COMMAND + RIGHT: Move to the next day.
  • CTRL/COMMAND + UP: Move to the previous week.
  • CTRL/COMMAND + DOWN: Move the next week.
  • ENTER: Select the focused date.
  • CTRL/COMMAND + END: Close the datepicker and erase the date.
  • ESCAPE: Close the datepicker without selection.

--

--

--

Storyteller, process optimizer, relationship builder, stakeholder uniter, experience creator. (MS in HCI/AI/UX)

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

CC_Week 4

Summer Internship Automated Paint System Selection

Breaking Down Metaverse

How I created my first Website?

25 Days of Making 2020 Edition Build 1: Light Up Squishy Circuits

Will Wong of Spacesmith: Five Things You Need To Create A Highly Successful Career As An Architect

We don’t do it for the gold, but…

How to approach user onboarding for products

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Courtney Jordan

Courtney Jordan

Storyteller, process optimizer, relationship builder, stakeholder uniter, experience creator. (MS in HCI/AI/UX)

More from Medium

Web Accessibility — You will be surprised at how easy it is

Generate Mochawesome HTML / JSON Reports in Cypress

The small thing I hope I knew before writing frontend tests