[{"id":377733,"date":"2024-04-19T07:26:47","date_gmt":"2024-04-19T14:26:47","guid":{"rendered":"https:\/\/css-tricks.com\/?p=377733"},"modified":"2024-04-26T08:11:28","modified_gmt":"2024-04-26T15:11:28","slug":"demystifying-screen-readers-accessible-forms-best-practices","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/demystifying-screen-readers-accessible-forms-best-practices\/","title":{"rendered":"Demystifying Screen Readers: Accessible Forms & Best Practices"},"content":{"rendered":"\n

This is the 3rd post in a small series we did on form accessibility. If you missed the 2nd post, check out Managing User Focus with :focus-visible<\/a>. In this post we are going to look at using a screen reader when navigating a form, and also some best practices.<\/p>\n\n\n\n

* Edits were made throughout in regards to some of the best practices and code sample additions.<\/strong> If you have ideas and feedback to build on this post, please let us know!<\/strong><\/em><\/p>\n\n\n

What is a Screen Reader?<\/strong><\/h2>\n\n\n

You may have heard the term \u201cscreen reader\u201d as you have been moving around the web. You might even be using a screen reader at this moment to run manual accessibility tests on the experiences you are building. A screen reader is a type of AT or assistive technology.<\/p>\n\n\n\n

A screen reader converts digital text into synthesized speech or Braille output, commonly seen with a Braille reader.<\/p>\n\n\n

\n
\"A
https:\/\/do.co\/3vQTmoW<\/a><\/figcaption><\/figure><\/div>\n\n\n

In this example, I will be using Mac VO. Mac VO (VoiceOver) is built-in to all Mac devices; iOS, iPadOS, and macOS systems. Depending on the type of device you are running macOS on, opening VO could differ. The Macbook Pro that is running VO I am writing this on doesn\u2019t have the touch bar, so I will be using the shortcut keys according to the hardware.<\/p>\n\n\n

Spinning Up VO on macOS<\/strong><\/h2>\n\n\n

If you are using an updated Macbook Pro, the keyboard on your machine will look something like the image below.<\/p>\n\n\n\n

You will start by holding down the cmd<\/code> key and then pressing the Touch ID three times quickly.<\/p>\n\n\n\n

\"MacBook<\/figure>\n\n\n\n

If you are on a MBP (MacBook Pro) with a TouchBar, you will use the shortcut cmd+fn+f5<\/code> to turn on VO. If you are using a traditional keyboard with your desktop or laptop, the keys should be the same or you will have to toggle VO on in the Accessibility settings.. Once VO is turned on, you will be greeted with this dialog along with a vocalized introduction to VO.<\/p>\n\n\n

\n
\"Welcome<\/figure><\/div>\n\n\n

If you click the \u201cUse VoiceOver\u201d button you are well on your way to using VO to test your websites and apps. One thing to keep in mind is that VO is optimized for use with Safari. That being said, make sure when you are running your screen reader test that Safari is the browser you are using. That goes for the iPhone and iPad as well.<\/p>\n\n\n\n

There are two main ways you can use VO from the start. The way I personally use it is by navigating to a website and using a combination of the tab, control, option, shift<\/code> and arrow keys, I can navigate through the experience efficiently with these keys alone.<\/p>\n\n\n\n

Another common way to navigate the experience is by using the VoiceOver Rotor<\/a>. The Rotor is a feature designed to navigate directly to where you want to be in the experience. By using the Rotor, you eliminate having to traverse through the whole site, think of it as a \u201cChoose Your Own Adventure\u201d.<\/p>\n\n\n

Modifier Keys<\/strong><\/h3>\n\n\n

Modifier keys are the way you use the different features in VO. The default modifier key or VO<\/code> is control<\/code> + option<\/code> but you can change it to caps lock or choose both options to use interchangeably.<\/p>\n\n\n\n

\"VoiceOver<\/figure>\n\n\n

Using the Rotor<\/strong><\/h2>\n\n\n

In order to use the Rotor you have to use a combination of your modifier key(s) and the letter \u201cU\u201d. For me, my modifier key is caps lock<\/code>. I press caps lock<\/code> + U<\/code> and the Rotor spins up for me. Once the Rotor comes up I can navigate to any part of the experience that I want using the left and right arrows.<\/p>\n\n\n

\n
\"VoiceOver<\/figure><\/div>\n\n\n
\n