在箭头访问时，单词必须读作单个字母，因为它是邀请码，不应读作单词

编程问答 2022-10-03

问题描述

邀请码为：UHM85QP6

尝试了以下两种情况，但仍然无效。

case 1:

It's reading like letters only,while accessing single letter it is reading space also. It should read like individual characters.
We are doing this space thing through JavaScript and showing in sr-only.

<div>Your invitation code is:<span class="sr-only">U H M 8 5 Q P 6</span> <span aria-hidden="true" class="application-title">UHM85QP6</span></div>

case 2:

Its reading like words and billions for numbers.

<div>Your invitation code is: 
 <span class="sr-only">U</span><span class="sr-only">H</span><span class="sr-only">M</span><span class="sr-only">8</span><span class="sr-only">5</span><span class="sr-only">Q</span><span class="sr-only">P</span><span class="sr-only">6</span> <span aria-hidden="true" class="application-title">UHM85QP6</span></div> ```

case 1 image,while doing in down arrow its reading individual characters,but the issue is while doing right and left arrow its reading with spaces also. Accessing through left and right also,it should reading like individual characters without spaces.

[1]: https://i.stack.imgur.com/ONeqW.png

解决方法

我的建议是什么都不做。丢弃 .sr-only 跨度和 aria-hidden，只逐字包含代码。如果您愿意，请保留样式范围：

<div>Your invitation code is: <span class="application-title">UHM85QP6</span>

作者无需尝试代表用户管理屏幕阅读器。屏幕阅读器用户习惯于将电话号码读为数十亿，或者像单词一样发音缩写和邀请码。

屏幕阅读器用户可以选择使用不同的粒度来阅读文本：块、行、单词或字符。确切的命令各不相同，但大多数屏幕阅读器都提供此功能。自信的用户通常会即时切换模式，一次读取一个字符以澄清邀请码。例如，他们可能在一台设备上阅读，然后在另一台设备上打字，需要慢慢来。

我认为您已经尝试优化使用屏幕阅读器的文本转语音音频输出时邀请代码的声音，而牺牲了其他使用方法。用户还可以使用盲文输出设备阅读，并可以执行其他操作，如选择和复制。我们不想让这些情况变得更糟。

让我们更仔细地看看您尝试过的方法。

案例 1：

  • span.sr-only 内的空格表示每个字符都被视为一个单词。请记住，句子中的一些单词通常只有一个字母长（例如英语中的“I”和“a”；葡萄牙语中的“o”、“a”、“e”和“é”）。因此，当邀请码有空格时，屏幕阅读器会将每个字母视为一个单词。一次读一个单词，空格不发音，但一次读一个字符，空格发音。这就是为什么在使用向下或向右箭头键时您会听到不同的输出；您正在使用单词和字符阅读模式。预计会在字符浏览中公布空格。
  • span.sr-only 中的空格也在盲文设备上输出。这些设备通常具有非常有限的尺寸，并且空间是不必要的。
    • 存在邀请码不会一次全部显示的风险，因为盲文显示器会将其换行（就像单独的单词一样）。许多盲文设备只有一行！
    • 如果没有空格，整个邀请码将被视为一个单词，这样更好，因为盲文显示器会尽量将其保持在一行，而不会将其拆分。因此，用户遗漏部分代码的风险较小。
  • 空格可能会给想要选择和复制邀请码的用户带来问题，因此他们可以将其粘贴到其他地方。
    • 屏幕阅读器将忽略可见代码，因为 aria-hidden。用户必须复制包含空格的 .sr-only 版本。将其粘贴到其他应用程序中时，可能会因为多余的空格而被拒绝。
    • 不使用屏幕阅读器的用户可能会复制两个版本的代码！这有点偶然，具体取决于用于选择文本的方法（单击/拖动、在页面中查找或插入符号浏览模式）。所以他们最终将 UHM85QP6 U H M 8 5 Q P 6 粘贴到另一个应用程序中，但它被拒绝了。这是因为 .sr-only CSS 不会从 DOM 中删除任何内容，它只是将其剪辑到呈现的布局中。 （另外：不可见文本是已知的 security risk when copying specimen terminal commands from tutorials。）

情况 2：

它的读法就像单词和数十亿的数字。

它读起来像一个单词，因为没有任何空格！跨度直接相互跟随，它们之间没有任何空格：

<span class="sr-only">U</span><span class="sr-only">H</span>

屏幕阅读器不必对 span 元素做任何事情，因为它们具有通用角色。

没有屏幕阅读器的用户也有将邀请码复制两次的风险，如情况 1。

accessibilityaccessibilitynvda