https:\/\/www.tpgi.com\/required-attribute-requirements<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out “Managing User Focus with :focus-visible“. In this post we are going to look at using a screen reader when navigating a form, and also some best practices. Editor’s Note: Edits were made throughout […]<\/p>\n","protected":false},"author":288735,"featured_media":377734,"comment_status":"open","ping_status":"closed","sticky":true,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"Demystifying Screen Readers: Accessible Forms and Best Practices","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[466,595],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/04\/braille-machine-scaled.jpg?fit=2560%2C1920&ssl=1","jetpack-related-posts":[{"id":288425,"url":"https:\/\/css-tricks.com\/the-difference-between-keyboard-and-screen-reader-navigation\/","url_meta":{"origin":377733,"position":0},"title":"The difference between keyboard and screen reader navigation","date":"May 29, 2019","format":false,"excerpt":"There are a few differences between keyboards and screen readers and L\u00e9onie Watson highlights of them: When using the tab key, keyboard focus and screen reader focus are synchronised with each other. The rest of the time, screen reader users have an enormous range of commands at their disposal for\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/tab-key.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":206,"url":"https:\/\/css-tricks.com\/accessiblility-basics-turn-your-css-off\/","url_meta":{"origin":377733,"position":1},"title":"Accessibility Basics: How Does Your Page Look To A Screen Reader?","date":"October 29, 2007","format":false,"excerpt":"Good web designers spend a lot of time making their pages accessible. One way to think about accessibility is to think about the extreme case scenario of having every single thing deactivated on your site except plain old HTML. I'm talking no images, no CSS, no Flash, no Javascript. If\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":372855,"url":"https:\/\/css-tricks.com\/comparing-jaws-nvda-and-voiceover\/","url_meta":{"origin":377733,"position":2},"title":"A Brief Introduction to JAWS, NVDA, and VoiceOver","date":"September 1, 2022","format":false,"excerpt":"A screen reader is an important accessibility tool for people with no or limited vision. People who are blind or those with low vision can use a screen reader to navigate the computer. Screen readers will read contents on the screen and explain to the user what is on the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/jaws-nvda-voiceover.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":375722,"url":"https:\/\/css-tricks.com\/setting-up-a-screen-reader-testing-environment-on-your-computer\/","url_meta":{"origin":377733,"position":3},"title":"Setting up a screen reader testing environment on your computer","date":"December 12, 2022","format":false,"excerpt":"Sara Soueidan with everything you need, from what screen reading options are out there all the way to setting up virtual machines for them, installing them, and configuring keyboard options. It's truly a one-stop reference that pulls together disparate tips for getting the most out of your screen reading accessibility\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/sara-screen-reader-keyboard-options.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":20195,"url":"https:\/\/css-tricks.com\/w3conf-leonie-watson-design-like-you-give-a-damn-practical-accessibility-for-web-professionals\/","url_meta":{"origin":377733,"position":4},"title":"[W3Conf] L\u00e9onie Watson: “Design like you give a damn: Practical accessibility for web professionals”","date":"February 22, 2013","format":false,"excerpt":"L\u00e9onie Watson (@leoniewatson) is a digital accessibility consultant from Bristol, UK. She believes in the importance of accessibility and also that it's not a hinderance to creativity. These are my notes from his presentation at W3Conf in San Francisco as part of this live blog series. What sends L\u00e9onie's heart\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":20025,"url":"https:\/\/css-tricks.com\/navigation-in-lists-to-be-or-not-to-be\/","url_meta":{"origin":377733,"position":5},"title":"Navigation in Lists: To Be or Not To Be","date":"January 29, 2013","format":false,"excerpt":"If you Google around on whether or not you should use lists as the markup for navigation on websites, you'll find no debate. Every article suggest that yes you should. The vast majority of tutorials you read will use lists for navigation. The vast majority of templates you see will\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/377733"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/288735"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=377733"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/377733\/revisions"}],"predecessor-version":[{"id":377799,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/377733\/revisions\/377799"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/377734"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=377733"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=377733"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=377733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}