{"id":57414,"date":"2018-12-20T04:19:06","date_gmt":"2018-12-20T11:19:06","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2018\/12\/i-used-the-web-for-a-day-using-a-screen-reader\/"},"modified":"2018-12-20T04:19:06","modified_gmt":"2018-12-20T11:19:06","slug":"i-used-the-web-for-a-day-using-a-screen-reader","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2018\/12\/i-used-the-web-for-a-day-using-a-screen-reader\/","title":{"rendered":"I Used The Web For A Day Using A Screen Reader"},"content":{"rendered":"<link rel=\"canonical\" href=\"https:\/\/www.smashingmagazine.com\/2018\/12\/voiceover-screen-reader-web-apps\/\"><title>I Used The Web For A Day Using A Screen Reader<\/title><\/p>\n<article>\n<header>\n<h1>I Used The Web For A Day Using A Screen Reader<\/h1>\n<address>Chris Ashton<\/address>\n<p>                  <time datetime=\"2018-12-19T13:30:48+01:00\">2018-12-19T13:30:48+01:00<\/time><time datetime=\"2018-12-19T22:10:27+00:00\">2018-12-19T22:10:27+00:00<\/time><\/header>\n<p>This article is part of a series in which I attempt to use the web under various constraints, representing a given demographic of user. I hope to raise the profile of difficulties faced by real people, which are avoidable if we design and develop in a way that is sympathetic to their needs. Last time, I <a href=\"https:\/\/www.smashingmagazine.com\/2018\/07\/web-with-just-a-keyboard\/\">navigated the web for a day with just my keyboard<\/a>. This time around, I\u2019m avoiding the screen and am using the web with a screen reader.<\/p>\n<h3>What Is A Screen Reader?<\/h3>\n<p>A screen reader is a software application that interprets things on the screen (text, images, links, and so on) and converts these to a format that visually impaired people are able to consume and interact with. Two-thirds of screen reader users choose speech as their screen reader output, and <a href=\"https:\/\/webaim.org\/projects\/screenreadersurvey7\/\">one-third of screen reader users choose braille<\/a>.<\/p>\n<p>Screen readers can be used with programs such as word processors, email clients, and web browsers. They work by mapping the contents and interface of the application to an accessibility tree that can then be read by the screen reader. Some screen readers have to <a href=\"https:\/\/github.com\/nvaccess\/nvda\/tree\/master\/source\/appModules\">manually map specific programs to the tree<\/a>, whereas others are more generic and should work with most programs.<\/p>\n<div>\n<h4>Accessibility Originates With UX<\/h4>\n<p>You need to ensure that your products are inclusive and usable for disabled people. A BBC iPlayer case study, by Henny Swan. <a href=\"https:\/\/www.smashingmagazine.com\/2015\/02\/bbc-iplayer-accessibility-case-study\/\">Read article\u00a0?<\/a><\/p>\n<\/div>\n<aside data-audience=\"non-subscriber\">\n<div>\n<div>\n<p>Front-end is messy and complicated these days. That&#8217;s why we publish <a href=\"https:\/\/smashed.by\/perfpanelarticles\">articles<\/a>, <a href=\"https:\/\/smashed.by\/perfpanelbooks\">printed books<\/a> and <a href=\"https:\/\/smashed.by\/perfpaneltv\">webinars<\/a> with useful techniques to improve your work. Even better: <a href=\"https:\/\/smashed.by\/perfpanelmembership\">Smashing Membership<\/a> with a growing selection of <strong>front-end\u00a0&#038;\u00a0UX goodies<\/strong>. So you get your work done, better and faster.<\/p>\n<p>      <a href=\"https:\/\/smashed.by\/perfpanelmembership\"><br \/>\n        Explore Smashing Membership\u00a0?<br \/>\n      <\/a>\n      <\/div>\n<div>\n        <a href=\"https:\/\/smashed.by\/perfpanelmembership\"><\/p>\n<div>\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.smashingmagazine.com\/images\/smashing-cat\/cat-rollerderby.svg\" alt=\"Smashing Cat, just preparing to do some magic stuff.\" width=\"310\" height=\"400\"><\/div>\n<p>      <\/a>\n      <\/div>\n<\/p><\/div>\n<\/aside>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ed1b3348-2d0c-4e96-a5ee-057d17b1eb27\/07-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/07-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ed1b3348-2d0c-4e96-a5ee-057d17b1eb27\/07-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ed1b3348-2d0c-4e96-a5ee-057d17b1eb27\/07-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ed1b3348-2d0c-4e96-a5ee-057d17b1eb27\/07-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ed1b3348-2d0c-4e96-a5ee-057d17b1eb27\/07-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/07-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"Chart showing popularity of desktop screen readers ranks JAWS first, NVDA second and VoiceOver third.\"><\/a><figcaption>\n\t\t\tPie chart from the Screen Reader Survey 2017, showing that JAWS, NVDA and VoiceOver are the most used screen readers on desktop. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ed1b3348-2d0c-4e96-a5ee-057d17b1eb27\/07-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>On Windows, the most popular screen reader is <a href=\"https:\/\/www.freedomscientific.com\/Products\/Blindness\/JAWS\">JAWS<\/a>, with almost half of the overall screen reader market. It is commercial software, costing around a thousand dollars for the home edition. An open-source alternative for Windows is <a href=\"https:\/\/www.nvaccess.org\/\">NVDA<\/a>, which is used by just under a third of all screen reader users on desktop.<\/p>\n<p>There are other alternatives, including <em>Microsoft Narrator<\/em>, <em>System Access<\/em>, <em>Window-Eyes<\/em> and <em>ZoomText<\/em> (not a full-screen reader, but a screen magnifier that has reading abilities); the combined sum of these equates to about 6% of screen reader usage. On Linux, <a href=\"https:\/\/wiki.gnome.org\/Projects\/Orca\">Orca<\/a> is bundled by default on a number of distributions.<\/p>\n<p>The screen reader bundled into macOS, iOS and tvOS is <em>VoiceOver<\/em>. VoiceOver makes up 11.7% of desktop screen reader users and rises to 69% of screen reader users on mobile. The other major screen readers in the mobile space are <em>Talkback<\/em> on Android (29.5%) and <em>Voice Assistant<\/em> on Samsung (5.2%), which is itself <a href=\"https:\/\/www.inclusiveandroid.com\/content\/what-are-differences-between-galaxy-talkback-and-google-talkback\">based on Talkback, but with additional gestures<\/a>.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3c6b39a7-a829-4a14-b411-9d65ee161661\/08-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/08-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3c6b39a7-a829-4a14-b411-9d65ee161661\/08-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3c6b39a7-a829-4a14-b411-9d65ee161661\/08-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3c6b39a7-a829-4a14-b411-9d65ee161661\/08-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3c6b39a7-a829-4a14-b411-9d65ee161661\/08-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/08-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"Table showing popularity of mobile screen readers. Ranks VoiceOver first, Talkback second, Voice Assistant third.\"><\/a><figcaption>\n\t\t\tPopularity of mobile screen readers: Ranks VoiceOver first, Talkback second, Voice Assistant third. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3c6b39a7-a829-4a14-b411-9d65ee161661\/08-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>I have a MacBook and an iPhone, so will be using VoiceOver and Safari for this article. <a href=\"http:\/\/www.hollier.info\/browserpairing\/\">Safari is the recommended browser to use with VoiceOver<\/a>, since both are maintained by Apple and should work well together. Using VoiceOver with a different browser can lead to unexpected behaviors.<\/p>\n<h3>How To Enable And Use Your Screen Reader<\/h3>\n<p>My instructions are for VoiceOver, but there should be equivalent commands for your screen reader of choice.<\/p>\n<h4>VoiceOver On Desktop<\/h4>\n<p>If you\u2019ve never used a screen reader before, it can be a daunting experience. It\u2019s a major culture shock going to an auditory-only experience, and not knowing how to control the onslaught of noise is unnerving. For this reason, the first thing you\u2019ll want to learn is how to turn it off.<\/p>\n<p>The shortcut for turning VoiceOver off is the same as the shortcut for turning it on: <kbd>?<\/kbd> + <kbd>F5<\/kbd> (<kbd>?<\/kbd> is also known as the <kbd>Cmd<\/kbd> key). On newer Macs with a touch bar, the shortcut is to <a href=\"https:\/\/www.igeeksblog.com\/how-to-use-voiceover-with-touch-bar-on-macbook-pro\/\">hold the command key and triple-press the Touch ID button<\/a>. Is VoiceOver speaking too fast? Open VoiceOver Utility, hit the \u2018Speech\u2019 tab, and adjust the rate accordingly.<\/p>\n<p>Once you\u2019ve mastered turning it on and off, you\u2019ll need to learn to use the \u201cVoiceOver key\u201d (which is actually two keys pressed at the same time): <kbd>Ctrl<\/kbd> and <kbd>?<\/kbd> (the latter key is also known as \u201cOption\u201d or the <kbd>Alt<\/kbd> key). Using the <kbd>VO<\/kbd> key in combination with other keys, you can navigate the web.<\/p>\n<p>For example, you can use <kbd>VO<\/kbd> + <kbd>A<\/kbd> to read out the web page from the current position; in practice, this means holding <kbd>Ctrl<\/kbd> + <kbd>?<\/kbd> + <kbd>A<\/kbd>. Remembering what <kbd>VO<\/kbd> corresponds to is confusing at first, but the <kbd>VO<\/kbd> notation is for brevity and consistency. It is possible to configure the <kbd>VO<\/kbd> key to be something else, so it makes sense to have a standard notation that everyone can follow.<\/p>\n<p>You may use <kbd>VO<\/kbd> and arrow keys (<kbd>VO<\/kbd> + <kbd>?<\/kbd> and <kbd>VO<\/kbd> + <kbd>?<\/kbd>) to go through each element in the DOM in sequence. When you come across a link, you can use <kbd>VO<\/kbd> + <kbd>Space<\/kbd> to click it \u2014 you\u2019ll use these keys to interact with form elements too.<\/p>\n<p>Huzzah! You now know enough about VoiceOver to navigate the web.<\/p>\n<h4>VoiceOver On Mobile<\/h4>\n<p>The mobile\/tablet shortcut for turning on VoiceOver varies according to the device, but is generally a \u2018triple click\u2019 of the home button (after <a href=\"https:\/\/support.apple.com\/en-us\/HT204390\">enabling the shortcut in settings<\/a>).<\/p>\n<p>You can read everything from the current position with a <code>Two-Finger Swipe Down<\/code> command, and you can select each element in the DOM in sequence with a <code>Swipe Right or Left<\/code>.<\/p>\n<p>You now know as much about iOS VoiceOver as you do desktop!<\/p>\n<h4>Navigating By Content Type<\/h4>\n<p>Think about how you use the web as a sighted user. Do you read every word carefully, in sequence, from top to bottom? No. Humans are lazy by design and have learned to \u2018scan\u2019 pages for interesting information as fast as possible.<\/p>\n<p>Screen reader users have this same need for efficiency, so most will navigate the page by content type, e.g. headings, links, or form controls. One way to do this is to open the shortcuts menu with <kbd>VO<\/kbd> + <kbd>U<\/kbd>, navigate to the content type you want with the <kbd>?<\/kbd> and <kbd>?<\/kbd> arrow keys, then navigate through those elements with the <kbd>??<\/kbd> keys.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/925b8749-3a34-4688-9c62-92bc30308cc4\/03-i-used-the-web-for-a-day-using-voiceover.jpg?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/03-i-used-the-web-for-a-day-using-voiceover.jpg 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/925b8749-3a34-4688-9c62-92bc30308cc4\/03-i-used-the-web-for-a-day-using-voiceover.jpg 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/925b8749-3a34-4688-9c62-92bc30308cc4\/03-i-used-the-web-for-a-day-using-voiceover.jpg 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/925b8749-3a34-4688-9c62-92bc30308cc4\/03-i-used-the-web-for-a-day-using-voiceover.jpg 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/925b8749-3a34-4688-9c62-92bc30308cc4\/03-i-used-the-web-for-a-day-using-voiceover.jpg 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/03-i-used-the-web-for-a-day-using-voiceover.jpg?w=900\" sizes=\"100vw\" alt=\"screenshot of 'Practice Webpage Navigation' VoiceOver tutoriasl screen\"><\/a><figcaption>\n\t\t\t(<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/925b8749-3a34-4688-9c62-92bc30308cc4\/03-i-used-the-web-for-a-day-using-voiceover.jpg\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>Another way to do this is to enable \u2018Quick Nav\u2019 (by holding <kbd>?<\/kbd> along with <kbd>?<\/kbd> at the same time). With Quick Nav enabled, you can select the content type by holding the <kbd>?<\/kbd> arrow alongside <kbd>?<\/kbd> or <kbd>?<\/kbd>. On iOS, you do this with a <code>Two-Finger Rotate<\/code> gesture.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bf25ff8d-fbbf-47d4-9b40-e61f001bed07\/15-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/15-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bf25ff8d-fbbf-47d4-9b40-e61f001bed07\/15-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bf25ff8d-fbbf-47d4-9b40-e61f001bed07\/15-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bf25ff8d-fbbf-47d4-9b40-e61f001bed07\/15-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bf25ff8d-fbbf-47d4-9b40-e61f001bed07\/15-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/15-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"screenshot of rota in VoiceOver, currently on 'Headings'\"><\/a><figcaption>\n\t\t\tSetting the rotor item type using keyboard shortcuts. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bf25ff8d-fbbf-47d4-9b40-e61f001bed07\/15-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>Once you\u2019ve selected your content type, you can skip through each rotor item with the <kbd>??<\/kbd> keys (or <code>Swipe Up or Down<\/code> on iOS). If that feels like a lot to remember, it\u2019s worth bookmarking this super handy <a href=\"http:\/\/pauljadam.com\/demos\/iosvocheatsheet.html\">VoiceOver cheatsheet<\/a> for reference.<\/p>\n<p>A third way of navigating via content types is to use trackpad gestures. This brings the experience closer to how you might use VoiceOver on iOS on an iPad\/iPhone, which means having to remember only one set of screen reader commands!<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ab272861-fd5f-45e9-a690-85e9e8a1d5a2\/09-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/09-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ab272861-fd5f-45e9-a690-85e9e8a1d5a2\/09-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ab272861-fd5f-45e9-a690-85e9e8a1d5a2\/09-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ab272861-fd5f-45e9-a690-85e9e8a1d5a2\/09-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ab272861-fd5f-45e9-a690-85e9e8a1d5a2\/09-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/09-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"screenshot of \u2018Practice Trackpad Gestures\u2019 VoiceOver tutorial screen\"><\/a><figcaption>\n\t\t\t(<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ab272861-fd5f-45e9-a690-85e9e8a1d5a2\/09-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>You can practice the gesture-based navigation and many other VoiceOver techniques in the built-in training program on OSX. You can access it through System Preferences ? Accessibility ? VoiceOver ? Open VoiceOver Training.<\/p>\n<p>After completing the tutorial, I was raring to go!<\/p>\n<div><\/div>\n<h3>Case Study 1: YouTube<\/h3>\n<h4>Searching On YouTube<\/h4>\n<p>I navigated to the YouTube homepage in the Safari toolbar, upon which VoiceOver told me to \u201cstep in\u201d to the web content with <kbd>Ctrl<\/kbd> + <kbd>?<\/kbd> + <kbd>Shift<\/kbd> + <kbd>?<\/kbd>. I\u2019d soon get used to stepping into web content, as the same mechanism applies for embedded content and some form controls.<\/p>\n<p>Using Quick Nav, I was able to navigate via form controls to easily skip to the search section at the top of the page.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2bfbd6df-45f8-43c8-96ac-635364406784\/18-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/18-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2bfbd6df-45f8-43c8-96ac-635364406784\/18-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2bfbd6df-45f8-43c8-96ac-635364406784\/18-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2bfbd6df-45f8-43c8-96ac-635364406784\/18-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2bfbd6df-45f8-43c8-96ac-635364406784\/18-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/18-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"screenshot of YouTube homepage\"><\/a><figcaption>\n\t\t\tWhen focused on the search field, VoiceOver announced: &#8216;Search, search text field Search&#8217;. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2bfbd6df-45f8-43c8-96ac-635364406784\/18-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>I searched for some quality content:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/da11e526-37c5-46b2-99c2-e750d2416009\/16-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/16-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/da11e526-37c5-46b2-99c2-e750d2416009\/16-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/da11e526-37c5-46b2-99c2-e750d2416009\/16-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/da11e526-37c5-46b2-99c2-e750d2416009\/16-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/da11e526-37c5-46b2-99c2-e750d2416009\/16-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/16-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"Screenshot of 'impractical jokers' in input field\"><\/a><figcaption>\n\t\t\tWho doesn\u2019t love Impractical Jokers? (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/da11e526-37c5-46b2-99c2-e750d2416009\/16-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>And I navigated to the search button:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f4799180-b88b-4a56-9ea6-5df8f96a3272\/17-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/17-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f4799180-b88b-4a56-9ea6-5df8f96a3272\/17-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f4799180-b88b-4a56-9ea6-5df8f96a3272\/17-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f4799180-b88b-4a56-9ea6-5df8f96a3272\/17-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f4799180-b88b-4a56-9ea6-5df8f96a3272\/17-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/17-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"VoiceOver announces \u201cPress Search, button.\u201d\"><\/a><figcaption>\n\t\t\tVoiceOver announces \u201cPress Search, button.\u201d (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f4799180-b88b-4a56-9ea6-5df8f96a3272\/17-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>However, when I activated the button with <kbd>VO<\/kbd> + <kbd>Space<\/kbd>, nothing was announced.<\/p>\n<p>I opened my eyes and the search had happened and the page had populated with results, but I had no way of knowing through audio alone.<\/p>\n<p>Puzzled, I reproduced my actions with devtools open, and kept an eye on the network tab.<\/p>\n<p>As suspected, YouTube is making use of a performance technique called \u201cclient-side rendering\u201d which means that JavaScript intercepts the form submission and renders the search results in-place, to avoid having to repaint the entire page. Had the search results loaded in a new page like a normal link, VoiceOver would have announced the new page for me to navigate.<\/p>\n<p>There are entire articles dedicated to <a href=\"https:\/\/www.smashingmagazine.com\/2015\/05\/client-rendered-accessibility\/\">accessibility for client-rendered applications<\/a>; in this case, I would recommend YouTube implements an <code>aria-live<\/code> region which would announce when the search submission is successful.<\/p>\n<div><\/div>\n<p><strong>Tip #1: Use <code>aria-live<\/code> regions to announce client-side changes to the DOM.<\/strong><\/p>\n<pre><code><div role=\"region\" aria-live=\"polite\" class=\"off-screen\" id=\"search-status\"><\/div>\n\n<form id=\"search-form\">\n  <label>\n    <span class=\"off-screen\">Search for a video<\/span>\n    <input type=\"text\" \/>\n  <\/label>\n  <input type=\"submit\" value=\"Search\" \/>\n<\/form>\n\n<script>\n  document.getElementById('search-form').addEventListener('submit', function (e) {\n    e.preventDefault();\n    ajaxSearchResults(); \/\/ not defined here, for brevity\n    document.getElementById('search-status').textContent = 'Search submitted. Navigate to results below.'; \/\/ announce to screen reader\n  });\n<\/script>\n<\/code><\/pre>\n<p>Now that I\u2019d cheated and knew there were search results to look at, I closed my eyes and navigated to the first video of the results, by switching to Quick Nav\u2019s \u201cheadings\u201d mode and then stepping through the results from there.<\/p>\n<h4>Playing Video On YouTube<\/h4>\n<p>As soon as you load a YouTube video page, the video autoplays. This is something I value in everyday usage, but this was a painful experience when mixed with VoiceOver talking over it. I couldn\u2019t find a way of disabling the autoplay for subsequent videos. All I could really do was load my next video and quickly hit <code>CTRL<\/code> to stop the screen reader announcements.<\/p>\n<p><strong>Tip #2: Always provide a way to suppress autoplay, and remember the user\u2019s choice.<\/strong><\/p>\n<p>The video itself is treated as a \u201cgroup\u201d you have to step into to interact with. I could navigate each of the options in the video player, which I was pleasantly surprised by \u2014 I doubt that was the case back in the days of Flash!<\/p>\n<p>However, I found that some of the controls in the player had no label, so \u2018Cinema mode\u2019 was simply read out as \u201cbutton\u201d.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/18bdf3a0-2590-41f5-80d8-642b34aaeaf6\/11-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/11-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/18bdf3a0-2590-41f5-80d8-642b34aaeaf6\/11-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/18bdf3a0-2590-41f5-80d8-642b34aaeaf6\/11-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/18bdf3a0-2590-41f5-80d8-642b34aaeaf6\/11-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/18bdf3a0-2590-41f5-80d8-642b34aaeaf6\/11-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/11-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"screenshot of YouTube player\"><\/a><figcaption>\n\t\t\tFocussing on the &#8216;Cinema Mode&#8217; button, there was no label indicating its purpose. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/18bdf3a0-2590-41f5-80d8-642b34aaeaf6\/11-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p><strong>Tip #3: Always label your form controls.<\/strong><\/p>\n<p>Whilst screen reader users are predominantly blind, about 20% are classed as \u201clow vision\u201d, so can see some of the page. Therefore, a screen reader user may still appreciate being able to activate \u201cCinema mode\u201d.<\/p>\n<p>These tips aren\u2019t listed in order of importance, but if they were, this would be my number one:<\/p>\n<p><strong>Tip #4: Screen reader users should have functional parity with sighted users.<\/strong><\/p>\n<p>By neglecting to label the \u201ccinema mode\u201d option, we\u2019re excluding screen reader users from a feature they might otherwise use.<\/p>\n<p>That said, there are cases where a feature <em>won\u2019t<\/em> be applicable to a screen reader \u2014 for example, a detailed SVG line chart which would read as a gobbledygook of contextless numbers. In cases such as these, we can apply the special <code>aria-hidden=\"true\"<\/code> attribute to the element so that it is ignored by screen readers altogether. Note that we would still need to provide some off-screen alternative text or data table as a fallback.<\/p>\n<p><strong>Tip #5: Use <code>aria-hidden<\/code> to hide content that is not applicable to screen reader users.<\/strong><\/p>\n<p>It took me a long time to figure out how to adjust the playback position so that I could rewind some content. Once you\u2019ve \u201cstepped in\u201d to the slider (<kbd>VO<\/kbd> + <kbd>Shift<\/kbd> + <kbd>?<\/kbd>), you hold <kbd>?<\/kbd> + <kbd>??<\/kbd> to adjust. It seems unintuitive to me but then again it\u2019s not the first time Apple have made some <a href=\"https:\/\/twitter.com\/ChrisBAshton\/status\/1042021681190133760\">controversial keyboard shortcut decisions<\/a>.<\/p>\n<h4>Autoplay At End Of YouTube Video<\/h4>\n<p>At the end of the video I was automatically redirected to a new video, which was confusing \u2014 no announcement happened.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b689567f-a71c-49ec-9506-319d5279739d\/13-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/13-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b689567f-a71c-49ec-9506-319d5279739d\/13-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b689567f-a71c-49ec-9506-319d5279739d\/13-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b689567f-a71c-49ec-9506-319d5279739d\/13-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b689567f-a71c-49ec-9506-319d5279739d\/13-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/13-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"screenshot of autoplay screen on YouTube video\"><\/a><figcaption>\n\t\t\tThere\u2019s a visual cue at the end of the video that the next video will begin shortly. A cancel button is provided, but users may not trigger it in time (if they know it exists at all!) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b689567f-a71c-49ec-9506-319d5279739d\/13-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>I soon learned to navigate to the Autoplay controls and disable them:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/dfca1bf5-ae3a-46d9-b02b-c4dc27b6112d\/12-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/12-web-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7fecd66b-db6c-4fb6-9867-97331153757d\/12-web-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7fecd66b-db6c-4fb6-9867-97331153757d\/12-web-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7fecd66b-db6c-4fb6-9867-97331153757d\/12-web-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7fecd66b-db6c-4fb6-9867-97331153757d\/12-web-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/12-web-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"In-video autoplay disable\"><\/a><figcaption>\n\t\t\tIn-video autoplay disable. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/dfca1bf5-ae3a-46d9-b02b-c4dc27b6112d\/12-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>This doesn\u2019t prevent a video from autoplaying when I load a video page, but it does prevent that video page from auto-redirecting to the next video.<\/p>\n<h3>Case Study 2: BBC<\/h3>\n<p>As news is something consumed passively rather than by searching for something specific, I decided to navigate BBC News by headings. It\u2019s worth noting that you don\u2019t need to use Quick Nav for this: VoiceOver provides element search commands that can save time for the power user. In this case, I could navigate headings with the <kbd>VO<\/kbd> + <kbd>?<\/kbd> + <kbd>H<\/kbd> keys.<\/p>\n<p>The first heading was the cookie notice, and the second heading was a <code><\/p>\n<h2><\/code> entitled \u2018Accessibility links\u2019. Under that second heading, the first link was a \u201cSkip to content\u201d link which enabled me to skip past all of the other navigation.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/19e3105d-9b83-43af-8741-61c00597b8ab\/22-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/22-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/19e3105d-9b83-43af-8741-61c00597b8ab\/22-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/19e3105d-9b83-43af-8741-61c00597b8ab\/22-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/19e3105d-9b83-43af-8741-61c00597b8ab\/22-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/19e3105d-9b83-43af-8741-61c00597b8ab\/22-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/22-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"\u201cSkip to content\u201d link is accessible via keyboard tab and\/or screen reader navigation.\"><\/a><figcaption>\n\t\t\t\u201cSkip to content\u201d link is accessible via keyboard tab and\/or screen reader navigation. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/19e3105d-9b83-43af-8741-61c00597b8ab\/22-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>\u2018Skip to content\u2019 links are very useful, and not just for screen reader users; see my previous article \u201c<a href=\"https:\/\/www.smashingmagazine.com\/2018\/07\/web-with-just-a-keyboard\/\">I used the web for a day with just a keyboard<\/a>\u201d.<\/p>\n<p><strong>Tip #6: Provide \u2018skip to content\u2019 links for your keyboard and screen reader users.<\/strong><\/p>\n<p>Navigating by headings was a good approach: each news item has its own heading, so I could hear the headline before deciding whether to read more about a given story. And as the heading itself was wrapped inside an anchor tag, I didn\u2019t even have to switch navigation modes when I wanted to click; I could just <kbd>VO<\/kbd> + <kbd>Space<\/kbd> to load my current <a href=\"https:\/\/www.bbc.co.uk\/news\/newsbeat-46418451\">article choice<\/a>.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7329d74d-2d92-49b9-9afe-2e9b6382513c\/23-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/23-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7329d74d-2d92-49b9-9afe-2e9b6382513c\/23-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7329d74d-2d92-49b9-9afe-2e9b6382513c\/23-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7329d74d-2d92-49b9-9afe-2e9b6382513c\/23-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7329d74d-2d92-49b9-9afe-2e9b6382513c\/23-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/23-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"Headings are also links on the BBC\"><\/a><figcaption>\n\t\t\tHeadings are also links on the BBC. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7329d74d-2d92-49b9-9afe-2e9b6382513c\/23-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>Whereas the homepage skip-to-content shortcut linked nicely to a <code>#skip-to-content-link-target<\/code> anchor (which then read out the top news story headline), the article page skip link was broken. It linked to a different ID (<code>#page<\/code>) which took me to the <code>group<\/code> surrounding the article content, rather than reading out the headline.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f63c2311-4676-4e59-98e1-133f0350ebc0\/21-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/21-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f63c2311-4676-4e59-98e1-133f0350ebc0\/21-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f63c2311-4676-4e59-98e1-133f0350ebc0\/21-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f63c2311-4676-4e59-98e1-133f0350ebc0\/21-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f63c2311-4676-4e59-98e1-133f0350ebc0\/21-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/21-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"\u201cPress visited, link: Skip to content, group\u201d &mdash; not the most useful skip link result.\"><\/a><figcaption>\n\t\t\t\u201cPress visited, link: Skip to content, group\u201d \u2014 not the most useful skip link result. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f63c2311-4676-4e59-98e1-133f0350ebc0\/21-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>At this point, I hit <kbd>VO<\/kbd> + <kbd>A<\/kbd> to have VoiceOver read out the entire article to me.<\/p>\n<p>It coped pretty well until it hit the Twitter embed, where it started to get quite verbose. At one point, it unhelpfully read out \u201cLink: 1068987739478130688\u201d.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e22221c7-e4f1-4690-9595-1d7b13cd4257\/19-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/19-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e22221c7-e4f1-4690-9595-1d7b13cd4257\/19-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e22221c7-e4f1-4690-9595-1d7b13cd4257\/19-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e22221c7-e4f1-4690-9595-1d7b13cd4257\/19-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e22221c7-e4f1-4690-9595-1d7b13cd4257\/19-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/19-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"VoiceOver can read out long links with no context.\"><\/a><figcaption>\n\t\t\tVoiceOver can read out long links with no context. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e22221c7-e4f1-4690-9595-1d7b13cd4257\/19-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>This appears to be down to some slightly dodgy markup in the video embed portion of the tweet:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bea4429d-79d9-4e21-be73-84917d0ef48b\/24-i-used-the-web-for-a-day-using-voiceoverv.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/24-i-used-the-web-for-a-day-using-voiceoverv.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bea4429d-79d9-4e21-be73-84917d0ef48b\/24-i-used-the-web-for-a-day-using-voiceoverv.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bea4429d-79d9-4e21-be73-84917d0ef48b\/24-i-used-the-web-for-a-day-using-voiceoverv.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bea4429d-79d9-4e21-be73-84917d0ef48b\/24-i-used-the-web-for-a-day-using-voiceoverv.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bea4429d-79d9-4e21-be73-84917d0ef48b\/24-i-used-the-web-for-a-day-using-voiceoverv.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/24-i-used-the-web-for-a-day-using-voiceoverv.png?w=900\" sizes=\"100vw\" alt=\"We have an anchor tag, then a nested div, then an img with an <code>alt<\/code> attribute with the value: \u201cEmbedded video\u201d.&#8221;><\/a><figcaption>\n\t\t\tWe have an anchor tag, then a nested <code>div<\/code>, then an <code>img<\/code> with an <code>alt<\/code> attribute with the value: \u201cEmbedded video\u201d. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bea4429d-79d9-4e21-be73-84917d0ef48b\/24-i-used-the-web-for-a-day-using-voiceoverv.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>It appears that VoiceOver doesn\u2019t read out the <code>alt<\/code> attribute of the nested image, and there is no other text inside the anchor, so VoiceOver does the most useful thing it knows how: to read out a portion of the URL itself.<\/p>\n<p>Other screen readers may work fine with this markup \u2014 your mileage may vary. But a safer implementation would be the anchor tag having an <code>aria-label<\/code>, or some off-screen visually hidden text, to carry the alternative text. Whilst we\u2019re here, I\u2019d probably change \u201cEmbedded video\u201d to something a bit more helpful, e.g. \u201cEmbedded video: click to play\u201d).<\/p>\n<p>The link troubles weren\u2019t over there:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/33fa4485-105b-4516-ac8e-9d7ee013898c\/20-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/20-web-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/c4619687-4e5f-473d-8558-597f023e9b5a\/20-web-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/c4619687-4e5f-473d-8558-597f023e9b5a\/20-web-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/c4619687-4e5f-473d-8558-597f023e9b5a\/20-web-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/c4619687-4e5f-473d-8558-597f023e9b5a\/20-web-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/20-web-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"One link simply reads out \u201cLink: 1,887\u201d.\"><\/a><figcaption>\n\t\t\tOne link simply reads out \u201cLink: 1,887\u201d. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/33fa4485-105b-4516-ac8e-9d7ee013898c\/20-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>Under the main tweet content, there is a \u2018like\u2019 button which doubles up as a \u2018likes\u2019 counter. Visually it makes sense, but from a screen reader perspective, there\u2019s no context here. This screen reader experience is bad for two reasons:<\/p>\n<ol>\n<li>I don\u2019t know what the \u201c1,887\u201d means.<\/li>\n<li>I don\u2019t know that by clicking the link, I\u2019ll be liking the tweet.<\/li>\n<\/ol>\n<p>Screen reader users should be given more context, e.g. \u201c1,887 users liked this tweet. Click to like.\u201d This could be achieved with some considerate off-screen text:<\/p>\n<pre><code><style>\n  .off-screen {\n    clip: rect(0 0 0 0);\n    clip-path: inset(100%);\n    height: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n<\/style>\n\n<a href=\"\/tweets\/123\/like\">\n  <span class=\"off-screen\">1,887 users like this tweet. Click to like<\/span>\n  <span aria-hidden=\"true\">1,887<\/span>\n<\/a>\n<\/code><\/pre>\n<p><strong>Tip #7: Ensure that every link makes sense when read in isolation.<\/strong><\/p>\n<p>I read a few more articles on the BBC, including a feature \u2018long form\u2019 piece.<\/p>\n<h4>Reading The Longer Articles<\/h4>\n<p>Look at the following screenshot from another <a href=\"https:\/\/www.bbc.co.uk\/news\/resources\/idt-sh\/the_bridge_that_crossed_an_ocean\">BBC long-form article<\/a> \u2014 how many different images can you see, and what should their <code>alt<\/code> attributes be?<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/63396bad-503f-4f62-935e-01b2b247fcfb\/33-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/33-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/63396bad-503f-4f62-935e-01b2b247fcfb\/33-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/63396bad-503f-4f62-935e-01b2b247fcfb\/33-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/63396bad-503f-4f62-935e-01b2b247fcfb\/33-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/63396bad-503f-4f62-935e-01b2b247fcfb\/33-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/33-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"Screenshot of BBC article containing logo, background image and foreground image (with caption).\"><\/a><figcaption>\n\t\t\tScreenshot of BBC article containing logo, background image, and foreground image (with caption). (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/63396bad-503f-4f62-935e-01b2b247fcfb\/33-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>Firstly, let\u2019s look at the foreground image of Lake Havasu in the center of the picture. It has a caption below it: \u201cLake Havasu was created after the completion of the Parker Dam in 1938, which held back the Colorado River\u201d.<\/p>\n<p>It\u2019s best practice to provide an <code>alt<\/code> attribute even if a caption is provided. The <code>alt<\/code> text should describe the image, whereas the caption should provide the context. In this case, the <code>alt<\/code> attribute might be something like \u201cAerial view of Lake Havasu on a sunny day.\u201d<\/p>\n<p>Note that we shouldn\u2019t prefix our <code>alt<\/code> text with \u201cImage: \u201d, or \u201cPicture of\u201d or anything like that. Screen readers already provide that context by announcing the word \u201cimage\u201d before our <code>alt<\/code> text. Also, keep <code>alt<\/code> text short (under 16 words). If a longer <code>alt<\/code> text is needed, e.g. an image has a lot of text on it that needs copying, <a href=\"https:\/\/www.w3schools.com\/TagS\/att_img_longdesc.asp\">look into the <code>longdesc<\/code> attribute<\/a>.<\/p>\n<p><strong>Tip #8: Write descriptive but efficient <code>alt<\/code> texts.<\/strong><\/p>\n<p>Semantically, the screenshot example should be marked up with <code><\/p>\n<figure><\/code> and <code><figcaption><\/code> elements:<\/p>\n<pre><code><figure>\n  <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/www.smashingmagazine.comhavasu.jpg?w=900\" alt=\"Aerial view of Lake Havasu on a sunny day\" \/>\n  <figcaption>Lake Havasu was created after the completion of the Parker Dam in 1938, which held back the Colorado River<\/figcaption>\n<\/figure>\n<\/code><\/pre>\n<p>Now let\u2019s look at the background image in that screenshot (the one conveying various drinking glasses and equipment). As a general rule, background or presentational images such as these should have an empty <code>alt<\/code> attribute (<code>alt=\"\"<\/code>), so that VoiceOver is explicitly told there is no alternative text and it doesn\u2019t attempt to read it.<\/p>\n<p>Note that an empty <code>alt=\"\"<\/code> is NOT the same as having no <code>alt<\/code> attribute, which is a big no-no. If an <code>alt<\/code> attribute is <em>missing<\/em>, screen readers will read out the image filenames instead, which are often not very useful!<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ed49ac59-e947-453b-bbd3-326ebe7beff7\/10-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/10-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ed49ac59-e947-453b-bbd3-326ebe7beff7\/10-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ed49ac59-e947-453b-bbd3-326ebe7beff7\/10-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ed49ac59-e947-453b-bbd3-326ebe7beff7\/10-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ed49ac59-e947-453b-bbd3-326ebe7beff7\/10-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/10-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"screenshot from BBC article\"><\/a><figcaption>\n\t\t\tMy screen reader read out \u2018pushbutton-mr_sjdxzwy.jpg, image\u2019 because no `alt` attribute was provided. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ed49ac59-e947-453b-bbd3-326ebe7beff7\/10-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p><strong>Tip #9: Don\u2019t be afraid to use empty <code>alt<\/code> attributes for presentational content.<\/strong><\/p>\n<h3>Case Study 3: Facebook<\/h3>\n<p>Heading over to Facebook now, and I was having withdrawal symptoms from earlier, so went searching for some more <em>Impractical Jokers<\/em>.<\/p>\n<p>Facebook takes things a step or two further than the other sites I\u2019ve tried so far, and instead of a \u2018Skip to content\u2019 link, we have no less than two dropdowns that link to pages or sections of pages respectively.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/890f7380-540b-4bde-970a-204cfb0efd06\/28-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/28-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/890f7380-540b-4bde-970a-204cfb0efd06\/28-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/890f7380-540b-4bde-970a-204cfb0efd06\/28-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/890f7380-540b-4bde-970a-204cfb0efd06\/28-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/890f7380-540b-4bde-970a-204cfb0efd06\/28-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/28-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"Facebook offers plenty of skip link keyboard shortcuts.\"><\/a><figcaption>\n\t\t\tFacebook offers plenty of skip link keyboard shortcuts. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/890f7380-540b-4bde-970a-204cfb0efd06\/28-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>Facebook also defines a number of keys as shortcut keys that can be used from anywhere in the page:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/84ab7e00-24cb-47fa-9982-30857be92c0d\/32-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/32-web-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2358dedb-7fde-4e65-8d10-79e2aa6b6654\/32-web-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2358dedb-7fde-4e65-8d10-79e2aa6b6654\/32-web-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2358dedb-7fde-4e65-8d10-79e2aa6b6654\/32-web-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/2358dedb-7fde-4e65-8d10-79e2aa6b6654\/32-web-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/32-web-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"Keyboard shortcuts for scrolling between news feed items, making new posts, etc.\"><\/a><figcaption>\n\t\t\tKeyboard shortcuts for scrolling between news feed items, making new posts, etc. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/84ab7e00-24cb-47fa-9982-30857be92c0d\/32-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>I had a play with these, and they work quite well with VoiceOver \u2014 once you know they\u2019re there. The only problem I see is that they\u2019re proprietary (I can\u2019t expect these same shortcuts to work outside of Facebook), but it\u2019s nice that Facebook is really trying hard here.<\/p>\n<p>Whilst my first impression of Facebook accessibility was a good one, I soon spotted little oddities that made the site harder to navigate.<\/p>\n<p>For example, I got very confused when trying to navigate this page via headings:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4fb14c5f-2490-4754-b8ef-6f375868a205\/25-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/25-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4fb14c5f-2490-4754-b8ef-6f375868a205\/25-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4fb14c5f-2490-4754-b8ef-6f375868a205\/25-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4fb14c5f-2490-4754-b8ef-6f375868a205\/25-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4fb14c5f-2490-4754-b8ef-6f375868a205\/25-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/25-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"The \u201cPages Liked by This Page\u201d heading (at the bottom right of the page) is in focus, and is a \u201cheading level 3\u201d.\"><\/a><figcaption>\n\t\t\tThe \u201cPages Liked by This Page\u201d heading (at the bottom right of the page) is in focus, and is a \u201cheading level 3\u201d. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4fb14c5f-2490-4754-b8ef-6f375868a205\/25-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>The very first heading in the page is a heading level 3, tucked away in the sidebar. This is immediately followed by heading level SIX in the main content column, which corresponds to a status that was shared by the Page.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/88138a4c-9c15-4598-86bc-958c9f7a573a\/26-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/26-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/88138a4c-9c15-4598-86bc-958c9f7a573a\/26-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/88138a4c-9c15-4598-86bc-958c9f7a573a\/26-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/88138a4c-9c15-4598-86bc-958c9f7a573a\/26-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/88138a4c-9c15-4598-86bc-958c9f7a573a\/26-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/26-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"\u2018Heading level 6\u2019 on a status shared to the Page.\"><\/a><figcaption>\n\t\t\t\u2018Heading level 6\u2019 on a status shared to the Page. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/88138a4c-9c15-4598-86bc-958c9f7a573a\/26-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>This can be visualized with the <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/web-developer\/bfbameneiokkgbdmiekhjnmfkcnldhhm\">Web Developer plugin for Chrome\/Firefox<\/a>.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3cd8c082-d549-43f7-9c92-34d72e942014\/27-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/27-web-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/43491b2e-038c-4cf6-8023-c114af149673\/27-web-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/43491b2e-038c-4cf6-8023-c114af149673\/27-web-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/43491b2e-038c-4cf6-8023-c114af149673\/27-web-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/43491b2e-038c-4cf6-8023-c114af149673\/27-web-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/27-web-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"h1 goes to multiple h6s, skipping h2\/h3\/h4\/h5\"><\/a><figcaption><code>h1<\/code> goes to multiple <code>h6<\/code>s, skipping <code>h2<\/code>, <code>h3<\/code>, <code>h4<\/code>, <code>h5<\/code>. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3cd8c082-d549-43f7-9c92-34d72e942014\/27-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>As a general rule, it\u2019s a good idea to have <a href=\"https:\/\/dequeuniversity.com\/rules\/axe\/3.0\/heading-order\">sequential headings with a difference no higher than 1<\/a>. It\u2019s not a deal-breaker if you don\u2019t, but it\u2019s certainly confusing coming to it from a screen reader perspective and worrying that you\u2019ve accidentally skipped some important information because you jumped from a <code>h1<\/code> to a <code>h6<\/code>.<\/p>\n<p><strong>Tip #10: Validate your heading structure.<\/strong><\/p>\n<p>Now, onto the meat of the website: the posts. Facebook is all about staying in touch with people and seeing what they\u2019re up to. But we live in a world where <code>alt<\/code> text is an unknown concept to most users, so how does Facebook translate those smug selfies and dog pictures to a screen reader audience?<\/p>\n<p>Facebook has an <a href=\"https:\/\/code.fb.com\/ios\/under-the-hood-building-accessibility-tools-for-the-visually-impaired-on-facebook\/\">Automatic Alt Text<\/a> generator which uses object recognition technology to analyze what (or who) is in a photo and generate a textual description of it. So, how well does it work?<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1c65ef79-eeba-4095-863a-302775202e7d\/01-i-used-the-web-for-a-day-using-voiceover.jpg?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/01-web-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bebc624c-e7d9-418d-bcfc-4c6874a6d087\/01-web-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bebc624c-e7d9-418d-bcfc-4c6874a6d087\/01-web-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bebc624c-e7d9-418d-bcfc-4c6874a6d087\/01-web-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bebc624c-e7d9-418d-bcfc-4c6874a6d087\/01-web-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/01-web-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"Cambridge Cathedral\"><\/a><figcaption>\n\t\t\tHow do you think this image fared with the Automatic Alt Text Generator? (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1c65ef79-eeba-4095-863a-302775202e7d\/01-i-used-the-web-for-a-day-using-voiceover.jpg\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>The <code>alt<\/code> text for this image was \u201cImage may contain: sky, grass and outdoor.\u201d It\u2019s a long way off recognizing \u201cCambridge Cathedral at dusk\u201d, but it\u2019s definitely a step in the right direction.<\/p>\n<p>I was incredibly impressed with the accuracy of some descriptions. Another image I tried came out as \u201cImage may contain: 3 people, including John Smith, Jane Doe and Chris Ashton, people smiling, closeup and indoor\u201d \u2014 very descriptive, and absolutely right!<\/p>\n<p>But it does bother me that memes and jokes that go viral on social media are inherently inaccessible; Facebook treats the following as \u201cImage may contain: bird and text\u201d, which whilst true is a long way off the true depiction!<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a014c8bc-f5f9-4d60-9de5-853b48930f3a\/02-i-used-the-web-for-a-day-using-voiceover.jpg?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/02-web-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/67734153-f4e2-4f61-836f-6aa9a862fa61\/02-web-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/67734153-f4e2-4f61-836f-6aa9a862fa61\/02-web-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/67734153-f4e2-4f61-836f-6aa9a862fa61\/02-web-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/67734153-f4e2-4f61-836f-6aa9a862fa61\/02-web-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/02-web-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"Scientifically, a raven has 17 primary wing feathers, the big ones at the end of the wing. They are called pinion feathers. A crow has 16. So, the difference between a crown and a raven is only a matter of a pinion.\"><\/a><figcaption>\n\t\t\tSadly, Facebook\u2019s <code>alt<\/code> text does not stretch to images-with-text-on. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a014c8bc-f5f9-4d60-9de5-853b48930f3a\/02-i-used-the-web-for-a-day-using-voiceover.jpg\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>Luckily, <a href=\"https:\/\/www.facebook.com\/help\/214124458607871\">users can write their own <code>alt<\/code> text if they wish<\/a>.<\/p>\n<h3>Case Study 4: Amazon<\/h3>\n<p>Something I noticed on Facebook, happens on Amazon, too. The search button appears <em>before<\/em> the search input field in the DOM. That\u2019s despite the fact that the button appears <em>after<\/em> the input field visually.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4876fe31-8e18-4393-a3b6-c97ccff863ae\/34-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/34-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4876fe31-8e18-4393-a3b6-c97ccff863ae\/34-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4876fe31-8e18-4393-a3b6-c97ccff863ae\/34-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4876fe31-8e18-4393-a3b6-c97ccff863ae\/34-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4876fe31-8e18-4393-a3b6-c97ccff863ae\/34-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/34-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"Screenshot of Chrome inspector against Amazon search area\"><\/a><figcaption>\n\t\t\tThe &#8216;nav-fill&#8217; text input appears lower in the DOM than the search button. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4876fe31-8e18-4393-a3b6-c97ccff863ae\/34-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>Your website is likely to be in a logical order visually. What if somebody randomly moved parts of your webpage around \u2014 would it continue to make sense?<\/p>\n<p>Probably not. That\u2019s what can happen to your screen reader experience if you aren\u2019t disciplined about keeping your DOM structure in sync with your visual design. Sometimes it\u2019s easier to move content with CSS, but it\u2019s usually better to move it in the DOM.<\/p>\n<p><strong>Tip #11: Make the DOM order match the visual order.<\/strong><\/p>\n<p>Why these two high profile sites choose not to adopt this <a href=\"https:\/\/www.w3.org\/TR\/WCAG20-TECHS\/C27.html\">best practice guideline<\/a> with their search navigation baffles me. However, the button and input text are not so far apart that their ordering causes a big accessibility issue.<\/p>\n<h4>Headings On Amazon<\/h4>\n<p>Again, like Facebook, Amazon has a strange headings order. I searched via headings and was most confused that the first heading in the page was a heading level 5 in the \u201cOther Sellers on Amazon\u201d section:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/74c66b9d-be42-4a56-9d0d-3f0d619ea588\/29-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/29-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/74c66b9d-be42-4a56-9d0d-3f0d619ea588\/29-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/74c66b9d-be42-4a56-9d0d-3f0d619ea588\/29-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/74c66b9d-be42-4a56-9d0d-3f0d619ea588\/29-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/74c66b9d-be42-4a56-9d0d-3f0d619ea588\/29-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/29-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"Screenshot of Amazon product page with VoiceOver overlay\"><\/a><figcaption>\n\t\t\t&#8216;First heading, heading level 5, Other Sellers on Amazon&#8217;. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/74c66b9d-be42-4a56-9d0d-3f0d619ea588\/29-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>I thought this must be a bug with the screen reader, so I dug into Amazon\u2019s source code to check:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/08eeaf3f-e3f1-4a1b-807a-aefc1716dc19\/30-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/30-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/08eeaf3f-e3f1-4a1b-807a-aefc1716dc19\/30-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/08eeaf3f-e3f1-4a1b-807a-aefc1716dc19\/30-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/08eeaf3f-e3f1-4a1b-807a-aefc1716dc19\/30-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/08eeaf3f-e3f1-4a1b-807a-aefc1716dc19\/30-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/30-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"screenshot of source code\"><\/a><figcaption>\n\t\t\tThe h5 &#8216;Other Sellers on Amazon&#8217; appears on line 7730 in the page source. It is the first heading in the page. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/08eeaf3f-e3f1-4a1b-807a-aefc1716dc19\/30-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>The h1 of the page appears <em>almost 10,000 lines down<\/em> in the source code.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3a0490c5-8db7-42eb-a2a2-5fe90d441029\/31-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/31-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3a0490c5-8db7-42eb-a2a2-5fe90d441029\/31-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3a0490c5-8db7-42eb-a2a2-5fe90d441029\/31-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3a0490c5-8db7-42eb-a2a2-5fe90d441029\/31-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3a0490c5-8db7-42eb-a2a2-5fe90d441029\/31-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/31-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"screenshot of source code\"><\/a><figcaption>\n\t\t\tThe &#8216;Red Dead Redemption 2 PS4&#8217; h1 appears on line 9054. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3a0490c5-8db7-42eb-a2a2-5fe90d441029\/31-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>Not only is this poor semantically and poor for accessibility, but this is also poor for SEO. Poor SEO means fewer conversions (sales) \u2014 something I\u2019d expect Amazon to be very on top of!<\/p>\n<p><strong>Tip #12: Accessibility and SEO are two sides of the same coin.<\/strong><\/p>\n<p>A lot of what we do to improve the screen reader experience will also improve the SEO. Semantically valid headings and detailed <code>alt<\/code> text are great for search engine crawlers, which should mean your site ranks more highly in search, which should mean you\u2019ll bring in a wider audience.<\/p>\n<p>If you\u2019re ever struggling to convince your business manager that creating accessible sites is important, try a different angle and point out the SEO benefits instead.<\/p>\n<h3>Miscellaneous<\/h3>\n<p>It\u2019s hard to condense a day\u2019s worth of browsing and experiences into a single article. Here are some highlights and lowlights that made the cut.<\/p>\n<h4>You\u2019ll Notice The Slow Sites<\/h4>\n<p>Screen readers cannot parse the page and create their accessibility tree until the DOM has loaded. Sighted users can scan a page while it\u2019s loading, quickly determining if it\u2019s worth their while and hitting the back button if not. Screen reader users have no choice but to wait for 100% of the page to load.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/758398a6-0d15-4911-bcf3-9285c294390e\/14-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/14-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/758398a6-0d15-4911-bcf3-9285c294390e\/14-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/758398a6-0d15-4911-bcf3-9285c294390e\/14-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/758398a6-0d15-4911-bcf3-9285c294390e\/14-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/758398a6-0d15-4911-bcf3-9285c294390e\/14-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/14-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"Screenshot of a website, with '87 percent loaded' in VoiceOver overlay\"><\/a><figcaption>\n\t\t\t87 percent loaded. I can\u2019t navigate until it\u2019s finished. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/758398a6-0d15-4911-bcf3-9285c294390e\/14-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>It\u2019s interesting to note that whilst making a performant website benefits all, it\u2019s especially beneficial for screen reader users.<\/p>\n<h4>Do I Agree To What?<\/h4>\n<p>Form controls like this one from NatWest can be highly dependent on spacial closeness to denote relationships. In screen reader land, there is no spacial closeness \u2014 only siblings and parents \u2014 and guesswork is required to know what you\u2019re ticking \u2018yes\u2019 to.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f13ffad8-ff2b-4d41-97b8-b0039b0a8e7b\/04-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/04-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f13ffad8-ff2b-4d41-97b8-b0039b0a8e7b\/04-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f13ffad8-ff2b-4d41-97b8-b0039b0a8e7b\/04-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f13ffad8-ff2b-4d41-97b8-b0039b0a8e7b\/04-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f13ffad8-ff2b-4d41-97b8-b0039b0a8e7b\/04-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/04-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"Screenshot of web form, \u2018Tick to confirm you have read this\u2019\"><\/a><figcaption>\n\t\t\tNavigating by form controls, I skipped over the \u2018Important\u2019 notice and went straight to the \u2018Tick to confirm\u2019 checkbox. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f13ffad8-ff2b-4d41-97b8-b0039b0a8e7b\/04-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>I would have known what I was agreeing to if the disclaimer had been part of the label:<\/p>\n<pre><code><label>\n  Important: We can only hold details of one trip at a time.\n  <input type=\"checkbox\" \/> Tick to confirm you have read this. *\n<\/label>\n<\/code><\/pre>\n<h4>Following Code Is A Nightmare<\/h4>\n<p>I tried reading a <a href=\"https:\/\/css-tricks.com\/the-trick-to-viewport-units-on-mobile\/\">technical article on CSS Tricks using my screen reader<\/a>, but honestly, found the experience totally impossible to follow. This isn\u2019t the fault of the CSS Tricks website \u2014 I think it\u2019s incredibly complex to explain technical ideas and code samples in a fully auditory way. How many times have you tried debugging with a partner and rather than explaining the exact syntax you need, you give them something to copy and paste or you fill it in yourself?<\/p>\n<p>Look how easily you can read this code sample from the article:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9fe84e21-def6-4825-8b0c-d2936b54c0b9\/05-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/05-i-used-the-web-for-a-day-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9fe84e21-def6-4825-8b0c-d2936b54c0b9\/05-i-used-the-web-for-a-day-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9fe84e21-def6-4825-8b0c-d2936b54c0b9\/05-i-used-the-web-for-a-day-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9fe84e21-def6-4825-8b0c-d2936b54c0b9\/05-i-used-the-web-for-a-day-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9fe84e21-def6-4825-8b0c-d2936b54c0b9\/05-i-used-the-web-for-a-day-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/05-i-used-the-web-for-a-day-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"Sample of code from CSS Tricks\"><\/a><figcaption>\n\t\t\t(<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9fe84e21-def6-4825-8b0c-d2936b54c0b9\/05-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>But here is the screen reader version:<\/p>\n<blockquote><p>slash slash first we get the viewport height and we multiple it by one [pause] percent to get a value for a vh unit let vh equals window inner height star [pause] zero zero one slash slash then we set the value in the [pause] vh custom property to the root of the document document document element style set property [pause] vh dollar left brace vh right brace px<\/p><\/blockquote>\n<p>It\u2019s totally unreadable in the soundscape. We tend not to have punctuation in comments, and in this case, one line flows seamlessly into the next in screen reader land. camelCase text is read out as separate words as if they\u2019d been written in a sentence. Periods such as <code>window.innerHeight<\/code> are ignored and treated as \u201cwindow inner height\u201d. The only \u2018code\u2019 read out is the curly brackets at the end.<\/p>\n<p>The code is marked up using standard <code><\/p>\n<pre><\/code> and <code><code><\/code> HTML elements, so I don\u2019t know how this could be made better for screen reader users. Any who do persevere with coding have my total admiration.<\/p>\n<p>Otherwise, the only fault I could find was that the logo of the site had a link to the homepage, but no <code>alt<\/code> text, so all I heard was \u201clink: slash\u201d. It\u2019s only in my capacity as a web developer that I know if you have a link with an attribute <code>href=\"\/\"<\/code> then it takes you to the website homepage, so I figured out what the link was for \u2014 but \u201clink: CSS Tricks homepage\u201d would have been better!<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ade15d2a-b813-4788-bf82-8572764ad3e1\/06-i-used-the-web-for-a-day-using-voiceover.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/06-web-using-voiceover.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9fd339cd-4e23-470d-996d-d19cd50b84be\/06-web-using-voiceover.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9fd339cd-4e23-470d-996d-d19cd50b84be\/06-web-using-voiceover.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9fd339cd-4e23-470d-996d-d19cd50b84be\/06-web-using-voiceover.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9fd339cd-4e23-470d-996d-d19cd50b84be\/06-web-using-voiceover.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/06-web-using-voiceover.png?w=900\" sizes=\"100vw\" alt=\"screenshot showing markup of CSS Tricks website\"><\/a><figcaption>\n\t\t\t(<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ade15d2a-b813-4788-bf82-8572764ad3e1\/06-i-used-the-web-for-a-day-using-voiceover.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<h4>VoiceOver On iOS Is Trickier Than OSX<\/h4>\n<p>Using VoiceOver on my phone was an experience!<\/p>\n<p>I gave myself the challenge of navigating the Twitter app and writing a Tweet, with the screen off and using the mobile keyboard. It was harder than expected and <a href=\"https:\/\/twitter.com\/ChrisBAshton\/status\/1069352746241937408\">I made a number of spelling mistakes<\/a>.<\/p>\n<p>If I were a regular screen reader user, I think I\u2019d have to join the <a href=\"https:\/\/webaim.org\/projects\/screenreadersurvey7\/#mobilekeyboard\">41% of mobile screen reader users who use an external keyboard<\/a> and invest in a Bluetooth keyboard. Clara Van Gerven came to the same conclusion when she <a href=\"https:\/\/nfb.org\/blog\/atblog\/sighted-guide-voiceover\">used a screen reader for forty days in 2015<\/a>.<\/p>\n<p>It was pretty cool to activate <a href=\"https:\/\/support.apple.com\/en-gb\/HT201443\">Screen Curtain mode<\/a> with a triple-tap using three fingers. This turned the screen off but kept the phone unlocked, so I could continue to browse my phone without anyone watching. This feature is essential for blind users who might otherwise be unwittingly giving their passwords to the person watching over their shoulder, but it also has a side benefit of being great for saving the battery.<\/p>\n<h3>Summary<\/h3>\n<p>This was an interesting and challenging experience, and the hardest article of the series to write so far.<\/p>\n<p>I was taken aback by little things that are obvious when you stop and think about them. For instance, when using a screen reader, it\u2019s almost impossible to listen to music at the same time as browsing the web! Keeping the context of the page can also be difficult, especially if you get interrupted by a phone call or something; by the time you get back to the screen reader you\u2019ve kind of lost your place.<\/p>\n<p>My biggest takeaway is that there\u2019s a big cultural shock in going to an audio-only experience. It\u2019s a totally different way to navigate the web, and because there is such a contrast, it is difficult to even know what constitutes a \u2018good\u2019 or \u2018bad\u2019 screen reader experience. It can be quite overwhelming, and it\u2019s no wonder a lot of developers avoid testing on them.<\/p>\n<p>But we shouldn\u2019t avoid doing it just because it\u2019s hard. As Charlie Owen said in her talk, <a href=\"https:\/\/sonniesedge.co.uk\/talks\/dear-developer\"><em>Dear Developer, the Web Isn\u2019t About You<\/em><\/a>: This. Is. Your. <strong>Job<\/strong>. Whilst it\u2019s fun to build beautiful, responsive web applications with all the latest cutting-edge technologies, we can\u2019t just pick and choose what we want to do and neglect other areas. <em>We<\/em> are the ones at the coal face. <em>We<\/em> are the only people in the organization capable of providing a good experience for these users. What we choose to prioritize working on today might mean the difference between a person being able to use our site, and them not being able to.<\/p>\n<p>Let us do our jobs responsibly, and let\u2019s make life a little easier for ourselves, with my last tip of the article:<\/p>\n<p><strong>Tip #13: Test on a screen reader, little and often.<\/strong><\/p>\n<p>I\u2019ve tested on screen readers before, yet I was very ropey trying to remember my way around, which made the day more difficult than it needed to be. I\u2019d have been much more comfortable using a screen reader for the day if I had been regularly using one beforehand, even for just a few minutes per week.<\/p>\n<p>Test a little, test often, and ideally, test on more than one screen reader. Every screen reader is different and will read content out in different ways. Not every screen reader will read \u201c23\/10\/18\u201d as a date; some will read out \u201ctwo three slash one zero slash one eight.\u201d Get to know the difference between application bugs and screen reader quirks, by exposing yourself to both.<\/p>\n<p><em>Did you enjoy this article? This was the third one in a series; read how <a href=\"https:\/\/www.smashingmagazine.com\/2018\/05\/using-the-web-with-javascript-turned-off\/\">I Used The Web For A Day With JavaScript Turned Off<\/a> and how <a href=\"https:\/\/www.smashingmagazine.com\/2018\/07\/web-with-just-a-keyboard\/\">I Used The Web For A Day With Just A Keyboard<\/a>.<\/em><\/p>\n<div>\n  <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/logo-red-13.png?w=900\" alt=\"Smashing Editorial\"><span>(rb, ra, yk, il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I Used The Web For A Day Using A Screen Reader I Used The Web For A Day Using A Screen Reader Chris Ashton 2018-12-19T13:30:48+01:002018-12-19T22:10:27+00:00 This article is part of a series in which I attempt to use the web under various constraints, representing a given demographic of user. I hope to raise the profile&#8230;<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2018\/12\/i-used-the-web-for-a-day-using-a-screen-reader\/\"> Read the full article&#8230;<\/a><\/p>\n","protected":false},"author":4,"featured_media":57415,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-57414","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"I Used The Web For A Day Using A Screen ReaderI Used The Web For A Day Using A Screen Reader Chris Ashton 2018-12-19T13:30:48+01:002018-12-19T22:10:27+00:00This article is part of a series in which I attempt to use the web under various constraints, representing a given demographic of user. I hope to raise the profile of difficulties\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2018\/12\/i-used-the-web-for-a-day-using-a-screen-reader\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"I Used The Web For A Day Using A Screen Reader | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"I Used The Web For A Day Using A Screen ReaderI Used The Web For A Day Using A Screen Reader Chris Ashton 2018-12-19T13:30:48+01:002018-12-19T22:10:27+00:00This article is part of a series in which I attempt to use the web under various constraints, representing a given demographic of user. I hope to raise the profile of difficulties\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2018\/12\/i-used-the-web-for-a-day-using-a-screen-reader\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2018-12-20T11:19:06+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2018-12-20T11:19:06+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"I Used The Web For A Day Using A Screen Reader | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"I Used The Web For A Day Using A Screen ReaderI Used The Web For A Day Using A Screen Reader Chris Ashton 2018-12-19T13:30:48+01:002018-12-19T22:10:27+00:00This article is part of a series in which I attempt to use the web under various constraints, representing a given demographic of user. I hope to raise the profile of difficulties\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2018\\\/12\\\/i-used-the-web-for-a-day-using-a-screen-reader\\\/#article\",\"name\":\"I Used The Web For A Day Using A Screen Reader | Design for Immersive Technologies\",\"headline\":\"I Used The Web For A Day Using A Screen Reader\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/07-i-used-the-web-for-a-day-using-voiceover.png?fit=400%2C259&ssl=1\",\"width\":400,\"height\":259},\"datePublished\":\"2018-12-20T04:19:06-07:00\",\"dateModified\":\"2018-12-20T04:19:06-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2018\\\/12\\\/i-used-the-web-for-a-day-using-a-screen-reader\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2018\\\/12\\\/i-used-the-web-for-a-day-using-a-screen-reader\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2018\\\/12\\\/i-used-the-web-for-a-day-using-a-screen-reader\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2018\\\/12\\\/i-used-the-web-for-a-day-using-a-screen-reader\\\/#listItem\",\"name\":\"I Used The Web For A Day Using A Screen Reader\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2018\\\/12\\\/i-used-the-web-for-a-day-using-a-screen-reader\\\/#listItem\",\"position\":3,\"name\":\"I Used The Web For A Day Using A Screen Reader\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2018\\\/12\\\/i-used-the-web-for-a-day-using-a-screen-reader\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2018\\\/12\\\/i-used-the-web-for-a-day-using-a-screen-reader\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2018\\\/12\\\/i-used-the-web-for-a-day-using-a-screen-reader\\\/\",\"name\":\"I Used The Web For A Day Using A Screen Reader | Design for Immersive Technologies\",\"description\":\"I Used The Web For A Day Using A Screen ReaderI Used The Web For A Day Using A Screen Reader Chris Ashton 2018-12-19T13:30:48+01:002018-12-19T22:10:27+00:00This article is part of a series in which I attempt to use the web under various constraints, representing a given demographic of user. I hope to raise the profile of difficulties\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2018\\\/12\\\/i-used-the-web-for-a-day-using-a-screen-reader\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/07-i-used-the-web-for-a-day-using-voiceover.png?fit=400%2C259&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2018\\\/12\\\/i-used-the-web-for-a-day-using-a-screen-reader\\\/#mainImage\",\"width\":400,\"height\":259},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2018\\\/12\\\/i-used-the-web-for-a-day-using-a-screen-reader\\\/#mainImage\"},\"datePublished\":\"2018-12-20T04:19:06-07:00\",\"dateModified\":\"2018-12-20T04:19:06-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"I Used The Web For A Day Using A Screen Reader | Design for Immersive Technologies","description":"I Used The Web For A Day Using A Screen ReaderI Used The Web For A Day Using A Screen Reader Chris Ashton 2018-12-19T13:30:48+01:002018-12-19T22:10:27+00:00This article is part of a series in which I attempt to use the web under various constraints, representing a given demographic of user. I hope to raise the profile of difficulties","canonical_url":"https:\/\/www.taterboy.com\/blog\/2018\/12\/i-used-the-web-for-a-day-using-a-screen-reader\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2018\/12\/i-used-the-web-for-a-day-using-a-screen-reader\/#article","name":"I Used The Web For A Day Using A Screen Reader | Design for Immersive Technologies","headline":"I Used The Web For A Day Using A Screen Reader","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/07-i-used-the-web-for-a-day-using-voiceover.png?fit=400%2C259&ssl=1","width":400,"height":259},"datePublished":"2018-12-20T04:19:06-07:00","dateModified":"2018-12-20T04:19:06-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2018\/12\/i-used-the-web-for-a-day-using-a-screen-reader\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2018\/12\/i-used-the-web-for-a-day-using-a-screen-reader\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2018\/12\/i-used-the-web-for-a-day-using-a-screen-reader\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2018\/12\/i-used-the-web-for-a-day-using-a-screen-reader\/#listItem","name":"I Used The Web For A Day Using A Screen Reader"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2018\/12\/i-used-the-web-for-a-day-using-a-screen-reader\/#listItem","position":3,"name":"I Used The Web For A Day Using A Screen Reader","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2018\/12\/i-used-the-web-for-a-day-using-a-screen-reader\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2018\/12\/i-used-the-web-for-a-day-using-a-screen-reader\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2018\/12\/i-used-the-web-for-a-day-using-a-screen-reader\/","name":"I Used The Web For A Day Using A Screen Reader | Design for Immersive Technologies","description":"I Used The Web For A Day Using A Screen ReaderI Used The Web For A Day Using A Screen Reader Chris Ashton 2018-12-19T13:30:48+01:002018-12-19T22:10:27+00:00This article is part of a series in which I attempt to use the web under various constraints, representing a given demographic of user. I hope to raise the profile of difficulties","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2018\/12\/i-used-the-web-for-a-day-using-a-screen-reader\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/07-i-used-the-web-for-a-day-using-voiceover.png?fit=400%2C259&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2018\/12\/i-used-the-web-for-a-day-using-a-screen-reader\/#mainImage","width":400,"height":259},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2018\/12\/i-used-the-web-for-a-day-using-a-screen-reader\/#mainImage"},"datePublished":"2018-12-20T04:19:06-07:00","dateModified":"2018-12-20T04:19:06-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"I Used The Web For A Day Using A Screen Reader | Design for Immersive Technologies","og:description":"I Used The Web For A Day Using A Screen ReaderI Used The Web For A Day Using A Screen Reader Chris Ashton 2018-12-19T13:30:48+01:002018-12-19T22:10:27+00:00This article is part of a series in which I attempt to use the web under various constraints, representing a given demographic of user. I hope to raise the profile of difficulties","og:url":"https:\/\/www.taterboy.com\/blog\/2018\/12\/i-used-the-web-for-a-day-using-a-screen-reader\/","article:published_time":"2018-12-20T11:19:06+00:00","article:modified_time":"2018-12-20T11:19:06+00:00","twitter:card":"summary","twitter:title":"I Used The Web For A Day Using A Screen Reader | Design for Immersive Technologies","twitter:description":"I Used The Web For A Day Using A Screen ReaderI Used The Web For A Day Using A Screen Reader Chris Ashton 2018-12-19T13:30:48+01:002018-12-19T22:10:27+00:00This article is part of a series in which I attempt to use the web under various constraints, representing a given demographic of user. I hope to raise the profile of difficulties"},"aioseo_meta_data":{"post_id":"57414","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 23:47:50","updated":"2026-08-22 08:13:36","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tI Used The Web For A Day Using A Screen Reader\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"I Used The Web For A Day Using A Screen Reader","link":"https:\/\/www.taterboy.com\/blog\/2018\/12\/i-used-the-web-for-a-day-using-a-screen-reader\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-eW2","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/12\/07-i-used-the-web-for-a-day-using-voiceover.png?fit=400%2C259&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/57414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=57414"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/57414\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/57415"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=57414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=57414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=57414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}