{"id":372855,"date":"2022-09-01T10:47:16","date_gmt":"2022-09-01T17:47:16","guid":{"rendered":"https:\/\/css-tricks.com\/?p=372855"},"modified":"2022-09-07T10:41:47","modified_gmt":"2022-09-07T17:41:47","slug":"comparing-jaws-nvda-and-voiceover","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/comparing-jaws-nvda-and-voiceover\/","title":{"rendered":"A Brief Introduction to JAWS, NVDA, and VoiceOver"},"content":{"rendered":"\n<p>A <em>screen reader<\/em> 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 page. Screen readers allow people to use the computer for daily tasks.<\/p>\n\n\n\n<p>There are many screen reader software available for people through their operating system or through open source projects.<\/p>\n\n\n\n<p>A <a href=\"https:\/\/webaim.org\/projects\/screenreadersurvey9\/\" rel=\"noopener\">2021 research by WebAim<\/a> found that from 1568 responders, more than 53.7 percent of people surveyed used JAWS on Windows, more than 30.7 percent of people used NVDA on Windows and little over 6.5 percent of people used VoiceOver on macOS.<\/p>\n\n\n\n<p>JAWS and NVDA for Windows and VoiceOver for macOS are the most popular screen readers people use.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>First, I should clarify that this article will be written from my point of view. To give background, I have been a front-end developer at a non-profit for people with learning differences for over three years. I, along with my colleagues, seek to make our projects more accessible every day. I am not visually impaired and do not use these tools on a regular basis. For work, I have a Mac machine and test accessibility using VoiceOver.<\/p>\n\n\n\n<p>Here is my planned testing methodology:<\/p>\n\n\n\n<ol><li>Navigate the page by heading, until \u201cAccessibility APIs\u201d section.<ul><li><strong>Reason for this step:<\/strong> A <a href=\"https:\/\/heydonworks.com\/article\/responses-to-the-screen-reader-strategy-survey\/\" rel=\"noopener\">2016 survey by Heydon Pickering<\/a> found that most people who use screen readers navigate new pages by headings<\/li><\/ul><\/li><li>In the \u201cAccessibility APIs\u201d section, read the content and the unordered list inside.<\/li><li><code>TAB<\/code> to hear focusable items in the unordered list.<\/li><li>Jump to the Search field.<\/li><li><code>TAB<\/code> to hear a few items in the navigation section<\/li><\/ol>\n\n\n\n<p>To find similarities and differences between them, I decided to test a set of steps with each screen reader on a <a href=\"https:\/\/en.wikipedia.org\/wiki\/Screen_reader\" rel=\"noopener\">Wikipedia page about screen readers<\/a>. I will browse the web with Chrome for my tests. Testing all screen readers on the same page and browser will reduce the amount of variables and keep the tests consistent.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"jaws\">JAWS<\/h3>\n\n\n<p><strong><a href=\"https:\/\/www.freedomscientific.com\/products\/software\/jaws\/\" rel=\"noopener\">JAWS<\/a><\/strong> is an acronym for <strong>Job Access With Speech<\/strong> and is the most widely used screen reader in the world. It is only available on Windows. Depending on the plan and features, JAWS can be purchased anywhere from $90 yearly license all the way to $1605 for perpetual license.<\/p>\n\n\n\n<p>JAWS has predefined keyboard commands to navigate the web. Full list of keyboard commands can be found on <a href=\"https:\/\/www.freedomscientific.com\/training\/jaws\/hotkeys\/\" rel=\"noopener\">their website<\/a>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"demonstration\">Demonstration<\/h4>\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-vimeo wp-block-embed-vimeo wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"New Recording - 8\/22\/2022, 10:13:33 PM\" src=\"https:\/\/player.vimeo.com\/video\/742100446?h=0fdd09e165&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"266\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\"><\/iframe>\n<\/div><figcaption>JAWS Demo<\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-group ticss-4e8da091 has-white-color has-black-background-color has-text-color has-background\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>In the beginning of the demo, I am clicking on <code>H<\/code> key on my keyboard to go to the next heading. JAWS is moving down the page, reading me the headings along with their level.<\/p>\n\n\n\n<p class=\"ticss-f60bf34d\">Later in the video, I am clicking on number <code>2<\/code> and number <code>3<\/code> on my keyboard to have JAWS read Heading Levels 2s then later Heading Levels 3s. This is a great feature because we can move down the page and sections by heading level and get a better sense of the page layout.<\/p>\n\n\n\n<p class=\"ticss-41d8f3d7\">When I reach the \u201cAccessible APIs\u201d section, I press the <code>DOWN ARROW<\/code> key until the third item in the unordered list.<\/p>\n\n\n\n<p>Later in the demo, I am clicking on the <code>TAB<\/code> key for JAWS to read to me the next focusable item on the page, which is inside this list. I click <code>TAB<\/code> until I reach a focusable element in another section.<\/p>\n\n\n\n<p>Then I press <code>F<\/code> key to focus on the search field, which JAWS reads to me.<\/p>\n\n\n\n<p>Then I click on <code>TAB<\/code> and JAWS focuses on the navigation elements that are on the side of the page.<\/p>\n<\/div><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"pros-amp-cons\">Pros &amp; Cons<\/h4>\n\n\n<p>Pros:<\/p>\n\n\n\n<ul><li>JAWS is more customizable than other screen readers.<\/li><li>There are more options to navigate through the page.<\/li><li>JAWS is industry standard.<\/li><li>Widely used, which means there are lots of user to user support.<\/li><\/ul>\n\n\n\n<p>Cons:<\/p>\n\n\n\n<ul><li>JAWS is more complicated to use than NVDA or VoiceOver.<\/li><li>Some commands are not intuitive.<\/li><li>There are a lot more commands for the user to learn.<\/li><li>More learning curve for users.<\/li><li>JAWS is also not available on the Mac, which limits its users.<\/li><li>Costs anywhere between $90 &#8211; $1605 for the user.<\/li><li>JAWS has different key commands for desktop and laptop which may make it harder for users to transfer knowledge and may cause confusion.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"nvda\">NVDA<\/h3>\n\n\n<p><strong><a href=\"https:\/\/www.nvaccess.org\/about-nvda\/\" rel=\"noopener\">NVDA<\/a><\/strong>, or <strong>NonVisual Digital Access<\/strong>, is available on Windows only. Users need to download the software from NVDA&#8217;s website, <a href=\"https:\/\/www.nvaccess.org\/download\/\" rel=\"noopener\">NVAccess<\/a>. This software is free to download but does not come already installed on Windows machines. NVDA is the second most popular screen reader in the world according to WebAim\u2019s 2021 survey.<\/p>\n\n\n\n<p>Like other screen readers, NVDA has defined keyboard commands to navigate the web. NVDA&#8217;s full keyboard commands can be found on <a href=\"https:\/\/www.nvaccess.org\/files\/nvda\/documentation\/userGuide.html?#BasicNVDACommands\" rel=\"noopener\">their website<\/a>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"demonstration\">Demonstration<\/h4>\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-vimeo wp-block-embed-vimeo wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"New Recording - 8\/22\/2022, 9:58:56 PM\" src=\"https:\/\/player.vimeo.com\/video\/742097456?h=c012cc5600&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"266\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\"><\/iframe>\n<\/div><figcaption>NVDA Demo<\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-group ticss-d5e73b2b has-white-color has-black-background-color has-text-color has-background\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"ticss-8bb66d92\">In the demo I am clicking on <code>H<\/code> key on the keyboard to go to the next heading. First, NVDA reads me Heading Level 1, which is \u201cScreen reader\u201d. Then NVDA goes to read Heading Level 2s and 3s.<\/p>\n\n\n\n<p>When I reach \u201cReferences\u201d I begin to click on <code>TAB<\/code> on my keyboard for NVDA to focus on next focusable items.<\/p>\n\n\n\n<p>After focusing on a few items on the list, I click <code>ENTER<\/code> and go to the New York Times page.<\/p>\n<\/div><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"pros-amp-cons\">Pros &amp; Cons<\/h4>\n\n\n<p>Pros:<\/p>\n\n\n\n<ul><li>Overall, I found NVDA was able to provide me with information on the screen.<\/li><li>The out-of-the-box keyboard commands were easy to use and easy to learn.<\/li><li>NVDA is open source, which means the community can update and fix.<\/li><li>NVDA is free, which makes it an affordable option to Windows users.<\/li><\/ul>\n\n\n\n<p>Cons:<\/p>\n\n\n\n<ul><li>NVDA is not available on the Mac, which limits its users.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"voiceover\">VoiceOver<\/h3>\n\n\n<p><a href=\"https:\/\/support.apple.com\/guide\/voiceover-guide\/welcome\/web\" rel=\"noopener\"><strong>VoiceOver<\/strong><\/a> is the screen reader used in Mac. VoiceOver is only available on Mac not available in Windows. VoiceOver is free and is already installed on the computer, which removes barriers because this is part of the computer setup and the user does not have to download or purchase any additional software.<\/p>\n\n\n\n<p>VoiceOver has defined keyboard commands to navigate the web. VoiceOver&#8217;s full keyboard commands can be found on <a href=\"https:\/\/help.apple.com\/voiceover\/command-charts\/\" rel=\"noopener\">their website<\/a>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"demonstration\">Demonstration<\/h4>\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-vimeo wp-block-embed-vimeo\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"New Recording - 8\/22\/2022, 11:26:16 PM\" src=\"https:\/\/player.vimeo.com\/video\/742113568?h=88ef967b3a&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"256\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\"><\/iframe>\n<\/div><figcaption>VoiceOver Demo<\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-group ticss-f5417684 has-white-color has-black-background-color has-text-color has-background\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>In the demo, I am on a Wikipedia page and I am clicking on the VoiceOver Command (which is <code>Control+Option<\/code>) along with <code>Command+H<\/code> to navigate through the headings. VoiceOver reads the headings in order, starting from Heading Level 1, \u201cScreen Reader\u201d, to Heading Level 2, \u201cContents\u201d, to Heading Level 3, and so on.<\/p>\n\n\n\n<p>When I reach the \u201cAccessibility APIs\u201d section, I click on VoiceOver Command plus the <code>RIGHT ARROW<\/code>, to tell VoiceOver that I want it to read this section. Later I am clicking on the VoiceOver Command plus the <code>RIGHT ARROW<\/code> on my keyboard, to navigate the section.<\/p>\n\n\n\n<p>When I get on to the third item on the unordered list, I press <code>TAB<\/code> on my keyboard to focus on the next focusable element.<\/p>\n\n\n\n<p>I press <code>TAB<\/code> a few times, then I press VoiceOver Command plus <code>U<\/code>, to open the Form Control Menu. In the menu, I press <code>DOWN ARROW<\/code> until I hear the \u201cSearch Wikipedia\u201d option. When I hear it, I click <code>ENTER<\/code> and the screen reader focuses on the form field. In the form field, I press <code>TAB<\/code> to navigate to the navigation section.<\/p>\n<\/div><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"pros-amp-cons\">Pros &amp; Cons<\/h4>\n\n\n<p>Pros:<\/p>\n\n\n\n<ul><li>VoiceOver is easy to use and learn.<\/li><li>VoiceOver&#8217;s commands are intuitive.<\/li><li>Free tool that comes installed in every macOS device.<\/li><\/ul>\n\n\n\n<p>Cons:<\/p>\n\n\n\n<ul><li>VoiceOver is also not available on Windows, which limits its users.<\/li><li>VoiceOver is not an app and can only be updated when Apple releases macOS update.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"key-takeaways\">Key Takeaways<\/h3>\n\n\n<p>A screen reader is an important accessibility tool for people with no or limited vision. Screen readers allow people to use the computer for daily tasks.<\/p>\n\n\n\n<p>There are many screen reader softwares available. In this article I compared JAWS, NVDA, and VoiceOver.<\/p>\n\n\n\n<p>Here is a comparison chart overview of the three screen readers:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><td>JAWS<\/td><td>NVDA<\/td><td>VoiceOver<\/td><\/tr><tr><td>Operating System<\/td><td>Windows<\/td><td>Windows<\/td><td>macOS<\/td><\/tr><tr><td>Price<\/td><td>$90 &#8211; $1695<\/td><td>Free<\/td><td>Free<\/td><\/tr><tr><td># of users<\/td><td>50%<\/td><td>30%<\/td><td>6%<\/td><\/tr><tr><td>Ease of Use (subjective)<\/td><td>Hard<\/td><td>Easy<\/td><td>Easy<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>I found that for basic screen reader testing, most screen readers follow a similar keystroke pattern and knowledge from one screen reader can be used for others.<\/p>\n\n\n\n<p>All screen readers have their pros and cons. Ultimately, it&#8217;s up to user preference and also the operating system they use to determine which screen reader software is best for them.<\/p>\n\n\n\n<p class=\"is-style-explanation\">Previously: &#8220;<a href=\"https:\/\/css-tricks.com\/small-tweaks-can-make-huge-impact-websites-accessibility\/\">Small Tweaks That Can Make a Huge Impact on Your Website&#8217;s Accessibility<\/a>&#8221; (2018), and &#8220;<a href=\"https:\/\/css-tricks.com\/why-how-and-when-to-use-semantic-html-and-aria\/\">Why, How, and When to Use Semantic HTML and ARIA<\/a>&#8221; (2019), &#8220;<a href=\"https:\/\/css-tricks.com\/15-things-to-improve-your-website-accessibility\/\">15 Things to Improve Your Website Accessibility<\/a>&#8221; (2020), &#8220;<a href=\"https:\/\/css-tricks.com\/5-accessibility-quick-wins-you-can-implement-today\/\">5 Accessibility Quick Wins You Can Implement Today<\/a>&#8221; (2022).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 page. Screen readers allow people [&hellip;]<\/p>\n","protected":false},"author":288709,"featured_media":372973,"comment_status":"open","ping_status":"closed","sticky":false,"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":"","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":"Comparing JAWS, NVDA, and VoiceOver by Ilknur Eren","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[466,1664],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/jaws-nvda-voiceover.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":377733,"url":"https:\/\/css-tricks.com\/demystifying-screen-readers-accessible-forms-best-practices\/","url_meta":{"origin":372855,"position":0},"title":"Demystifying Screen Readers: Accessible Forms &#038; Best Practices","date":"April 19, 2024","format":false,"excerpt":"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. In this post we are going to look at using a screen reader when navigating a form, and also some best practices. *\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"A user using a braille machine with a computer.","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/04\/braille-machine-scaled.jpg?fit=1200%2C900&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":243138,"url":"https:\/\/css-tricks.com\/accessible-svgs\/","url_meta":{"origin":372855,"position":1},"title":"Accessible SVGs","date":"July 6, 2016","format":false,"excerpt":"Scalable Vector Graphic (SVG) is emerging as the preferred graphic format to use on the web today. Are you abandoning the icon font or replacing old pg, gif and png graphics for the well-supported SVG, too? Let\u2019s see how this will impact users of assistive technology (AT) and what is\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":296827,"url":"https:\/\/css-tricks.com\/weekly-platform-news-tracking-via-web-storage-first-input-delay-navigating-by-headings\/","url_meta":{"origin":372855,"position":2},"title":"Weekly Platform News: Tracking via Web Storage, First Input Delay, Navigating by Headings","date":"October 3, 2019","format":false,"excerpt":"In this week's roundup, Safari takes on cross-site tracking, the delay between load and user interaction is greater on mobile, and a new survey says headings are a popular way for screen readers to navigate a webpage. Let's get into the news. Safari\u2019s tracking prevention limits web storage Some social\u2026","rel":"","context":"In &quot;Weekly Platform News&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/wpn20190627.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":256519,"url":"https:\/\/css-tricks.com\/lets-talk-speech-css\/","url_meta":{"origin":372855,"position":3},"title":"Let&#8217;s Talk About Speech CSS","date":"July 11, 2017","format":false,"excerpt":"Boston, like many large cities, has a subway system. Commuters on it are accustomed to hearing regular public address announcements. Riders simply tune out some announcements, such as the pre-recorded station stop names repeated over and over. Or public service announcements from local politicians and celebrities\u2014again, kind of repetitive and\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/07\/speech.png?fit=1000%2C562&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":20025,"url":"https:\/\/css-tricks.com\/navigation-in-lists-to-be-or-not-to-be\/","url_meta":{"origin":372855,"position":4},"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 &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":354581,"url":"https:\/\/css-tricks.com\/some-articles-about-accessibility-ive-saved-recently-iv\/","url_meta":{"origin":372855,"position":5},"title":"Some Articles About Accessibility I\u2019ve Saved Recently IV","date":"October 29, 2021","format":false,"excerpt":"A guide to designing accessible, WCAG-compliant focus indicators \u2014 Sara Soueidan says you can make more accessible focus outlines by doing your own, rather than leaving it to the browser \u2014 as long as you do it right. Deep dive! a11y-syntax-highlighting \u2014 Eric Bailey's repo of code syntax highlighting themes\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/a11y-icon-pattern.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/jaws-nvda-voiceover.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/372855"}],"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\/288709"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=372855"}],"version-history":[{"count":11,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/372855\/revisions"}],"predecessor-version":[{"id":377506,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/372855\/revisions\/377506"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/372973"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=372855"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=372855"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=372855"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}