英文:
How to set text to be accessible on a webpage
问题
当用户在我的页面上点击标签时，它会遍历所有链接和按钮，简而言之，所有互动元素。这部分工作正常。
但是，对于有辅助功能限制的人，他们如何知道页面上有文本并将其读出或切换到它呢？
这里的规范是什么？因为我在像stackoverflow和bbc.co.uk这样的知名网站上尝试了相同的操作。它们也是只有在链接和按钮上使用标签导航，而忽略文本。
那么文本怎么办呢？我尝试使用箭头键，但什么都没有发生。如果我按下箭头，它会滚动页面。
我明白，用户可以选择文本然后使用屏幕阅读器来朗读它。但这是基于他们能够首先选择文本。
期望的行为是什么？我们如何处理文本以便朗读？
想象一个页面的格式如下。目前，按标签键跳过所有文本，只突出显示链接和按钮。我们如何处理文本以实现辅助功能？如何设置键盘访问，或者我是否误解了，文本应该被忽略？
标题1
这是一些示例文本。
标题2
这是一些更多的示例文本。
标题3
这里有更多的示例文本。
附注：如果有影响，我使用的是带有内置屏幕阅读器的 Mac。也尝试过使用 Windows 和 NVDA，结果相同。
英文:
When a user clicks tab on my page, it travels to all the links and buttons. Simply anything that is interactive. This works fine.
But how will a person that has accessibility limitations know there is a text on the page and to get it read out or to tab to it.
What's the norm here. Cause I tried the same on well known sites like stackoverflow and bbc.co.uk. They are doing the same where tabbing only works on links and buttons. It ignores text.
What about text. I tried using arrow keys which does nothing. If I press down it scrolls the page.
I get that the person could highlight the text and then get it read out to them with a screen reader. But that is assuming they are able to highlight in the first place.
What's the expected behaviour. How do we deal with text to get read out.
Imagine a page in following format. At present tab skips all text and only highlights the links and buttons. How do we handle text for accessibility. How do we set it up for keyboard access or have I pictured this wrong and text should indeed be ignored.
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<p>This is some sample text.</p>
<h2>Heading 2</h2>
<p>This is some more sample text.</p>
<h3>Heading 3</h3>
<p>Here's even more sample text.</p>
<!-- All the above ignored by screen reader unless you highlight with a mouse, arrow key does nothing even on sites like bbc.co.uk -->
<button>Button 1</button>
<a href="#">Link 1</a>
<button>Button 2</button>
<a href="#">Link 2</a>
</body>
</html>
P.S: If it matters, using mac with built in screen reader. Also tried on Windows with NVDA, same outcome.
答案1
得分: 1
桌面屏幕阅读器区分阅读和交互。后者是通过 Tab 键完成的。
正如你提到的，_箭头键_通常用于阅读，但只能与修改键一起使用。
根据 WebAIM 的指南 使用 VoiceOver 评估 Web 无障碍性，你可以使用
VO + a 来开始阅读
VO + → 来读取下一项
这里提到的 VoiceOver 的修改键，也就是 VO，可以自定义。默认情况下，它是 Control + Option。所以你需要按下 Control + Option + a 来开始阅读。
英文:
You don’t need to do anything additional to allow for reading your website (except for providing a proper semantic structure of your document, which you did).
Desktop screen readers distinguish between reading and interaction. The latter is done via the <kbd>Tab</kbd> keys.
As you mentioned, arrow keys are usually used for reading, but only together with a modifier key.
According to WebAIM’s guide on Using VoiceOver to Evaluate Web Accessibility, you can use
<kbd>VO</kbd>+<kbd>a</kbd> to start reading
<kbd>VO</kbd> + <kbd>→</kbd> to read next item
The modifier key for VoiceOver, here referred to as <kbd>VO</kbd> can be customised. By default, it’s <kbd>Control</kbd> + <kbd>Option</kbd>. So you’d press <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd>a</kbd> to start reading.
答案2
得分: 1
你基本上在问如何使用屏幕阅读器。@andy已经提到了VoiceOver，所以我会评论NVDA，因为你说“在Windows上也尝试了NVDA，结果相同。”
使用 tab 键只是导航网页的一种方式。任何人都可以使用 tab 键，无论是否正在运行屏幕阅读器。
但是在PC上使用像NVDA（或JAWS）这样的屏幕阅读器，你有大量用于导航的快捷键。当NVDA运行时，向下箭头将导航到下一个DOM元素(*)，这样你就可以访问页面上的所有文本。
(*) 它实际上不是下一个DOM元素，而是辅助树中的下一个元素，这类似于DOM的子集。根据“Accessible Name and Description Computation 1.1”文档，其中的“介绍”部分说道：
用户代理从DOM获取信息并创建称为辅助性树的并行结构，由辅助对象组成。辅助对象提供有关其角色、状态和属性的信息。
“辅助性树”被定义为：
表示用户界面（UI）结构的辅助对象树。辅助树中的每个节点代表通过辅助性API公开的UI中的一个元素；例如，一个按钮、一个复选框或容器。
此外，如果您处于“表单模式”，向下箭头可能 不会 导航到下一个DOM元素。屏幕阅读器有两种模式可以运行：“表单模式”和“浏览模式”（实际模式名称可能因不同的屏幕阅读器而异，但在概念上它们是“表单”和“浏览”）。默认情况下，这两种模式会自动在其间切换（除非您更改了屏幕阅读器的设置）。
在“浏览模式”中，向下箭头键将移动到下一个DOM元素。浏览模式还允许许多其他键盘快捷键，例如 H 键用于导航到下一个标题（<h1>、<h2>等），T 键用于导航到下一个表格（<table>），L 键用于导航到下一个列表（<ul>、<ol>、<dl>）等。NVDA和JAWS有类似的键盘快捷键，但有时快捷键的字母可能不同。
如果你用 tab 到一个表单元素，比如一个 <input>，NVDA和JAWS会自动从“浏览模式”切换到“表单模式”。在浏览模式下，所有键盘事件首先由屏幕阅读器解释，但在表单模式下，键盘事件被发送到浏览器。这使您能够在 <input> 中键入字母“H”、“T”或“L”，而不会导致屏幕阅读器尝试导航到下一个标题、表格或列表（分别）。因此，当你处于“表单模式”时，向下箭头将 不会 移动到下一个DOM元素。
当你说向下箭头键在NVDA下无效时，可能就是你遇到的情况。
英文:
You are essentially asking how to use a screen reader. @andy already spoke about VoiceOver so I'll comment on NVDA since you said "Also tried on Windows with NVDA, same outcome."
Using the <kbd>tab</kbd> key is just one way to navigate a webpage. Anyone can use <kbd>tab</kbd> regardless of whether a screen reader is running or not.
But with a screen reader such as NVDA (or JAWS) on a PC, you have a ton of shortcut keys for navigating. When NVDA is running, the down arrow will navigate to the next DOM elements (*) so you can access all the text on the page.
(*) It's not really the next DOM element but the next element in the accessibility tree, which is like a subset of the DOM. From the "Accessible Name and Description Computation 1.1" document, the "Introduction" section says:
>User agents acquire information from the DOM and create a parallel structure called the accessibility tree, made up of accessible objects. An accessible object provides information about its role, states, and properties.
And the "accessibility tree" is defined as:
> Tree of accessible objects that represents the structure of the user interface (UI). Each node in the accessibility tree represents an element in the UI as exposed through the accessibility API; for example, a push button, a check box, or container.
Also, the down arrow might not navigate to the next DOM element if you are in "forms mode". You have two modes you can run a screen reader in: "Forms mode" and "Browse mode". (The actual term for the mode might be different for different screen readers but conceptually they're "forms" and "browse"). The two modes automatically switch between the two by default (unless you change your screen reader settings).
In "browse mode", the down arrow key moves to the next DOM element. Browse mode also allows lots of other keyboard shortcuts such as the <kbd>H</kbd> key to navigate to the next heading (<h1>, <h2>, etc), the <kbd>T</kbd> key to navigate to the next table (<table>), the <kbd>L</kbd> key to navigate to the next list (<ul>, <ol>, <dl>), etc. NVDA and JAWS have similar keyboard shortcuts but occasionally the shortcut letter might be different.
If you <kbd>tab</kbd> to a form element such as an <input>, NVDA and JAWS will automatically switch from "browse mode" to "forms mode". In browse mode, all keyboard events are interpreted by the screen reader first but in forms mode, the keyboard events are sent to the browser. This lets you type the letter "H" or "T" or "L" into the <input> without the screen reader trying to navigate to the next heading, table, or list (respectively). So when you're in "forms mode", the down arrow will not move to the next DOM element.
That might be what you were experiencing when you said the down arrow key was not working with NVDA.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论