如何为屏幕阅读器访问设计网站

When we talk about the website design, it usually concerns how these websites appear to us visually — how colors and typography work together, how page elements are placed and spaced, and whether navigation links are placed in the right locations. However, not everyone interacts with websites this way, so we need to consider non-visual aspects of design as well.

It’s been estimated that, in the U.S., over有700万人经历视觉残疾这需要“替代方法来从事正常视力的人会使用眼睛进行任何活动。”这些人中的许多人都依靠辅助技术screen readersto experience websites and other digital content. As a designer, developer, and/or website owner, it’s on you to make your website accessible to this portion of your audience.

在本指南中，您将了解屏幕读取器是什么以及它们的工作方式。然后，我将解释一些最佳实践making your website more accessible对于那些使用屏幕阅读器的人来说，以确保您的内容可为每个人提供可用和愉快。

什么是屏幕阅读器？

A screen reader is a piece of computer software that converts digital text into audible and/or tactile form. Screen readers enable users to interact with their devices in a non-visual manner, and are used primarily by people who are blind or have low vision, as well as those with cognitive limitations that prevent them from viewing onscreen text and media. Many screen readers have additional features to help users navigate web pages, computer applications, and operating system interfaces.

Screen readers are an important and popular assistive technology. They enable the independent use of digital devices by those who otherwise would not be able, or who would face significant difficulty.

While most commonly utilized by people who are blind or who have low vision, screen readers also help those who:

• experience cognitive difficulties or learning disabilities like dyslexia.
• experience difficulties reading print.
• 正在学习一种语言。
• prefer consuming content auditorily to reading.

有些人也可能会使用屏幕读取器以及他们的视野有限。例如，在依靠屏幕读取器以获取基于文本的内容时，可以在视觉页面上观看网页上的图像和媒体。

How do screen readers work?

屏幕读取器是安装在设备上的软件应用程序（或bob电竞官方下载在某些情况下作为浏览器扩展程序），并与该设备上的其他应用程序一起使用。Windows，MacOS，Linux，iOS和Android都有各种免费和付费屏幕读取器。

用户使用键盘控制其屏幕读取器。屏幕读取器附带一个键盘命令库，该命令告诉屏幕读取器进行诸如开始/停止阅读，跳回去阅读一部分文本，拼写单词，跳过页面的不同部分，移动光标，请移动光标/集中精力，播放媒体文件，或单击链接，按钮或其他交互式元素。

Screen readers can translate text information into two forms, speech and braille. Most commonly, screen readers use text-to-Speech (TTS) technology to read text content aloud in a synthesized human voice. Proficient users of TTS screen readers often increase the reading speed far past what the average person is capable of reading visually.

In addition to TTS, some screen readers can convert onscreen text into braille. For this function, users connect an external device, called a refreshable braille display, which generates braille characters on a pad as the screen reader scans the text. Here’s what a typical refreshable braille display looks like:

Image Source

一些用户还喜欢一起使用TTS和刷新的盲文显示器。

屏幕读取器也可用于移动设备。由于大多数智能手机和平板电脑都没有物理键盘，因此这些设备的屏幕读取器依赖于触摸屏交互 - 刷卡，敲击和敲击和敲击 - 以控制播放和导航页面内容。

如何为屏幕阅读器设计您的网站

Given the popularity and importance of screen readers today, website owners and developers need to consider screen reader accessibility when building and maintaining their online properties. This ensures that all visitors have access to the same content and an optimal experience.

Screen readers translate web pages by reading HTML files directly, so everything the reader needs should be included in this file. Here are some basic steps you can take to help screen readers process your pages and make your website easy to navigate for screen reader users. To get the most from this section, we recommend刷在您的HTML上如果你需要。

Structure your HTML with the appropriate tags.

Screen readers use HTML tags to understand the content and regions of the page, and what elements are available for the user to select. For this reason, the most effective way to make your web pages accessible is to structure your HTML code with semantically rich tags.

When we say a tag is “semantically rich,” we mean that the name of the tag itself conveys its purpose to the screen reader. Tags like

,,

,

,
, and在语义上都是丰富的，因为这很明显它们从标签名称本身中是什么 -

is a paragraph,是一个图像，也是一个。另一方面，and

tags are generic, and not semantically rich — they could be used to any element. For these tags, you can use ARIA landmarks — we’ll cover those soon.

以几种原因，以这种方式编写HTML很重要。首先，屏幕读取器允许用户在同一类型的标签之间跳跃。这个常见的用途是标题，这是屏幕读取器用户的重要导航方法。当屏幕阅读器检测到使用

, for example, it allows users to jump between H2s, similar to how sighted users might scan a page by reading the headings.

第二，一些HTML元素，例如

, activate specific screen reader commands. When a screen reader sees thetag, it knows to let the user navigate horizontally and vertically through the table with their keyboard. This is why you should avoid making elements that看喜欢表，列表或按钮，但使用无与伦比的标签（例如
). Instead, use the appropriate tag when possible.

Finally, a