My Initial Experience with a Screen Reader

我对屏幕阅读器的初步体验

As a new web developer, I have been learning to make my sites visually appealing but still be accessible, and all-in-all, it’s been going decent. I’ve been including cool icons in social-media navigations, but have been sure to include aria labels in their tags; I’ve been wrestling with getting my images to size properly, but have been sure to give them descriptive ‘alt’ text. For the most part, it has been straightforward. But despite knowing these best practices, there was still this part of me that was curious about what was going on under the hood, about how my websites could be experienced by someone with visual impairment. I needed to hear it for myself.

作为一个新的Web开发人员，我一直在学习使我的网站具有视觉吸引力，但仍然可以访问，而且总的来说，它一直都不错。 我一直在社交媒体导航中添加漂亮的图标，但一定要在其标签中包含aria标签； 我一直在努力调整图像的大小，但是一定要给它们提供描述性的“替代”文本。 在大多数情况下，它很简单。 但是，尽管了解这些最佳实践，但我仍然对这方面的内容感到好奇，这对于视力障碍者如何体验我的网站是很好奇的。 我需要自己听。

So I downloaded a screen reader and tried the thing out, to actually experience how the internet could be navigated in a different way. This blog post is just a little report on what I found during my initial interactions with the screen reader. It is in no way a tutorial, but is mostly my musings and takeaways from the experience.

因此，我下载了屏幕阅读器并进行了尝试，以实际体验如何以不同的方式浏览互联网。 这篇博客文章只是有关在与屏幕阅读器进行初次交互时发现的内容的小报告。 这绝不是教程，但主要是我的经验教训。

As a Windows user, I got the NVDA (NonVisual Desktop Access) screen reader, which is made free from NV Access, a not-for-profit organization made to support the development and upkeep of the software. I was lucky to find a great introduction tutorial by Rod Dodson, who, by the way, has a wonderful series on YouTube called A11ycasts detailing different facets of web-development accessibility.

作为Windows用户，我获得了NVDA (非可视桌面访问)屏幕阅读器，该阅读器是从NV Access免费获得的， NV Access是一个非盈利组织，旨在支持软件的开发和维护。 我很幸运能找到Rod Dodson 撰写的精彩入门教程，顺便说一句，他在YouTube上有一个精彩的系列叫做A11ycasts，详细介绍了Web开发可访问性的各个方面。

With it downloaded and ready to go, I opened it up and had the welcome menu pop open. Instantly, I became very aware of my mouse’s movements, because NVDA was reading out anything the mouse was hovering over. So if you sweep it over a paragraph quickly, it will try to read each line, only to have each attempt interrupted by the mouse moving onto another line. I quickly learned the ctrl key could briefly silence the narrator, allowing me to move onto a webpage without needlessly hearing certain things along the way. Though I would be using the mouse a bit, I largely wanted to try to learn how to use the keyboard for navigation more, because — quite simply — I had heard so much about the tab key being used a lot, with regards to focus states.

下载并准备就绪后，我打开它并打开了欢迎菜单。 立刻，我变得非常了解鼠标的移动，因为NVDA正在读取鼠标悬停的所有内容。 因此，如果您将其快速扫过一个段落，它将尝试读取每一行，只是使每次尝试都被鼠标移动到另一行而中断。 我很快了解到ctrl键可以使叙述者暂时静音，从而使我可以转到网页上，而不必沿途听到某些内容。 尽管我会稍微使用鼠标，但我很大程度上还是想尝试学习如何更多地使用键盘进行导航，因为-很简单-我听说过很多关于Tab键在焦点状态方面的用法。

I decided to go to Wikipedia, a nice simple page where I could take my new NVDA for a test drive. The first thing I really started to deeply understand was how linear the web site was from the screen reader’s perspective. With the keyboard as your navigator, you can only go forwards and backwards (e.g. tab or shift + tab). With the luxury of sight, however, there is an incredible amount of flexibility and privilege by having your eyes be able to dart around the screen at an incredible speed. But more than this ability to look around the screen, there is the ability to interpret things based on their colour, size, shape, and location. From the NVDA’s perspective, on the other hand, things can only be interpreted based on their text, hierarchy, and order. The text part is just the text content that is read out. But the ideas of hierarchy and order can be further explained with two keyboard keys: H and tab.

我决定去Wikipedia，这是一个非常简单的页面，在那里我可以将新的NVDA进行测试。 我真正开始深刻理解的第一件事是从屏幕阅读器的角度来看网站的线性程度。 使用键盘作为导航器时，您只能前后移动(例如，Tab或Shift + Tab)。 但是，凭借视觉的奢华，您的眼睛能够以惊人的速度在屏幕上Dart，因此拥有无与伦比的灵活性和特权。 但是，除了能够在屏幕上四处查看之外，还可以根据颜色，大小，形状和位置来解释事物。 另一方面，从NVDA的角度来看，只能根据文本，层次结构和顺序来解释事物。 文本部分只是读出的文本内容。 但是可以使用两个键盘键H和Tab进一步解释层次结构和顺序的思想。

H is for Hierarchy

H代表阶层

Hierarchy is about navigating through a website’s headers using the H key. If you keep pressing H, you will be taken through each heading name and then the heading level will be recited. So if I’m on the Wikipedia page for Accessibility and press H, it will read “Accessibility Heading One” and then I press it a couple more times, and it reads “Legislation Heading Level Two”. I can hear that the content and it’s role are important. Visually, a header’s importance is communicated by its size and sometimes by its font-weight or colour. But with the NVDA, it’s all about the number hierarchy. In one of Rod Dodson’s videos, he mentions that navigating through headings when first visiting a site is one of the go-to methods for people using assistive technologies like a screen reader. So this is key: your HTML markup has to have a logical hierarchy with headers, because they are a great, practical way to quickly navigate through a website and understand what is on the page.

层次结构是有关使用H键浏览网站标题的信息。 如果按住H键，将进入每个标题名称，然后列出标题级别。 因此，如果我在Wikipedia页面上可访问性并按H，它将显示“ Accessibility Heading One”(可访问性标题一)，然后再按两次，它将显示为“ Lesslation Heading Level Level 2”。 我听说内容及其作用很重要。 在视觉上，标题的重要性通过其大小(有时通过其字体粗细或颜色)来传达。 但是，对于NVDA来说，一切都与数字层次有关。 在罗德·多德森 ( Rod Dodson)的视频中 ，他提到，初次访问网站时浏览标题是使用辅助技术(如屏幕阅读器)的人们的首选方法之一。 所以这很关键： 您HTML标记必须具有带有标题的逻辑层次结构，因为它们是一种快速浏览网站并了解页面内容的实用方法 。

Order another and put it on my tab

订购另一个并将其放在我的标签上

The idea of order can be best explained with the tab key. This key will take you through every interactive element on the page (e.g. links, buttons, forms, etc.). This can be a little more monotonous because if you’ve ever been to Wikipedia, you know there are, well, a lot of links. Like the headings, the links are recited with the link’s name and the word ‘link’ or ‘visited link’ right after. While listening to certain links being read out, I noticed that if the anchor tag has a ‘title’ attribute, that will be read out, too. It’s sort of like a little elevator pitch for why you should click on the link. For sighted users, this title-attribute text can be automatically accessed by hovering over the link, but it somehow feels less salient than it being read out. It certainly made me realize I should try to include this attribute a little more in my own projects.

使用Tab键可以最好地说明订购的概念。 该键将带您浏览页面上的每个交互式元素(例如，链接，按钮，表单等)。 这可能有点单调，因为如果您曾经去过Wikipedia，那么您会知道有很多链接。 像标题一样，链接后面还会加上链接名称和单词“链接”或“访问的链接”。 在侦听某些链接被读取时，我注意到，如果定位标记具有'title'属性，则该链接也会被读取。 为什么您应该单击链接，有点像一个电梯音调。 对于有视力的用户，可以通过将鼠标悬停在链接上来自动访问该标题属性文本，但是与读出来相比，它的显着性不那么明显。 当然，这使我意识到我应该尝试在我自己的项目中多包含一些此属性。

Ultimately, the tab key really drove home that the order of all interactive elements in your markup needs to be correct. If one link has been absolutely positioned in an erratic way with CSS, the change in location must be reflected in the HTML, because with the screen reader, you’re either moving backwards or forwards.

最终，Tab键确实使您意识到标记中所有交互式元素的顺序必须正确。 如果使用CSS以一种不稳定的方式绝对定位了一个链接，则位置的变化必须反映在HTML中，因为使用屏幕阅读器时，您将向后或向前移动。

Simplicity

简单

I’d like to finish this brief exploration by saying that in some ways I prefer the experience of the screen reader. I describe it as linear, but I don’t say that in a bad way. Visually-speaking, lots of websites are quite busy and bloated with colours and odd layouts and tons of different things trying desperately to grab your attention. Sure, I can glance around the screen quickly and try to take it all in, but the reality is that I can’t take it all in and it quickly becomes exhausting. With the screen reader, it felt like a much more intentional, direct, simple way of getting information from the web (assuming the websites were accessible, mind you). But this is just to say that the ultimate takeaway is that simplicity should always be prioritized and treasured, and the heart of that starts with making sure your HTML has a strong, logical foundation.

在结束本简短的探究之前，我想说一些方面，我更喜欢屏幕阅读器的体验。 我将其描述为线性的，但我并没有说这很糟糕。 从视觉上讲，许多网站都非常忙碌，并且充斥着各种颜色，奇特的布局以及各种各样的事物，它们拼命地试图吸引您的注意力。 当然，我可以快速浏览一下屏幕并尝试将其全部吸收，但现实是我无法全部吸收，并且很快变得筋疲力尽。 使用屏幕阅读器，感觉就像是一种更有意，直接，简单的从网络获取信息的方式(假设您可以访问这些网站)。 但这只是说，最终的要点是，始终应将简单性放在首位并予以重视，而其核心在于确保HTML具有强大的逻辑基础。

Try it for yourself

自己尝试

Head over to NV Access and download the NVDA screen reader to experience the web in a different way. Enjoy!

转到NV Access并下载 NVDA屏幕阅读器，以另一种方式体验网络。 请享用！