[{"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 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\nWhat is a Screen Reader?<\/strong><\/h2>\n\n\n