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屏幕閱讀器，以另一種方式體驗網絡。 請享用！