在箭头访问中,单词必须像单个字母一样阅读,因为它是邀请代码,它不应该像单词一样阅读
On arrow access, word has to read like individual letters as it is invitation code , it should not read like words
邀请码为: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>
作者无需尝试代表用户管理屏幕 reader。屏幕 reader 用户习惯于将电话号码读成十亿,或将缩写词和邀请码读成单词。
屏幕reader 用户可以选择使用不同的粒度来阅读文本:块、行、字或字符。确切的命令各不相同,但大多数屏幕 reader 都提供此功能。自信的用户通常会即时切换模式,并一次阅读一个字符来弄清楚邀请码。例如,他们可能在一台设备上阅读然后在另一台设备上打字,需要慢慢来。
我认为您已尝试优化邀请代码声音时使用文本到语音音频输出的方式screen reader,以其他使用方式为代价。用户还可以使用盲文输出设备进行阅读,并可以执行其他操作,例如 select-and-copy。我们不想让这些情况变得更糟。
让我们更仔细地看看您尝试过的方法。
案例一:
span.sr-only
中的空格表示每个字符都被视为一个单词。请记住,句子通常有一些只有一个字母长的单词(例如英语中的“I”和“a”;葡萄牙语中的“o”、“a”、“e”和“é”)。所以当邀请码有空格时,每个字母都会被屏幕word当作一个reader。一次读一个单词,空格不发音,但一次读一个字符,空格发音。这就是为什么您在使用向下或向右箭头键时会听到不同的输出;您正在使用单词和字符阅读模式。预计字符浏览中会公布空格。
span.sr-only
中的空格也在盲文设备上输出。这些设备的尺寸通常非常有限,而且这些空间是不必要的。
- 存在邀请码不会一次全部显示的风险,因为盲文显示会将其换行(就像单独的单词一样)。许多盲文设备只有一根线!
- 如果没有空格,整个邀请码将被视为一个单词,这样更好,因为盲文显示会尽量将其保持在一行上,而不会将其拆分。因此,用户错过部分代码的风险较小。
- 这些空格可能会给想要 select 并复制邀请码的用户带来问题,以便他们可以将其粘贴到其他地方。
- 屏幕 readers 将忽略可见代码,因为
aria-hidden
。用户必须复制包含空格的 .sr-only
版本。当它被粘贴到另一个应用程序中时,它可能会因为多余的空格而被拒绝。
- 不使用屏幕的用户 reader 有复制代码 两个 版本的风险!这有点偶然,具体取决于对 select 文本使用何种方法(click/drag、在页面中查找或插入符号浏览模式)。所以他们最终将
UHM85QP6 U H M 8 5 Q P 6
粘贴到另一个应用程序中,但它被拒绝了。这是因为 .sr-only
CSS 不会从 DOM 中删除任何内容,它只是将其剪辑到呈现的布局中。 (旁白:不可见的文字是已知的 security risk when copying specimen terminal commands from tutorials。)
案例二:
Its reading like words and billions for numbers.
它读起来像一个词,因为没有任何空格!跨度直接彼此跟随,它们之间没有任何空格:
<span class="sr-only">U</span><span class="sr-only">H</span>
Screen readers 不必对 span 元素做任何事情,因为它们具有通用角色。
没有屏幕的用户reader也有复制邀请码两次的风险,如案例1。
邀请码为: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>
作者无需尝试代表用户管理屏幕 reader。屏幕 reader 用户习惯于将电话号码读成十亿,或将缩写词和邀请码读成单词。
屏幕reader 用户可以选择使用不同的粒度来阅读文本:块、行、字或字符。确切的命令各不相同,但大多数屏幕 reader 都提供此功能。自信的用户通常会即时切换模式,并一次阅读一个字符来弄清楚邀请码。例如,他们可能在一台设备上阅读然后在另一台设备上打字,需要慢慢来。
我认为您已尝试优化邀请代码声音时使用文本到语音音频输出的方式screen reader,以其他使用方式为代价。用户还可以使用盲文输出设备进行阅读,并可以执行其他操作,例如 select-and-copy。我们不想让这些情况变得更糟。
让我们更仔细地看看您尝试过的方法。
案例一:
span.sr-only
中的空格表示每个字符都被视为一个单词。请记住,句子通常有一些只有一个字母长的单词(例如英语中的“I”和“a”;葡萄牙语中的“o”、“a”、“e”和“é”)。所以当邀请码有空格时,每个字母都会被屏幕word当作一个reader。一次读一个单词,空格不发音,但一次读一个字符,空格发音。这就是为什么您在使用向下或向右箭头键时会听到不同的输出;您正在使用单词和字符阅读模式。预计字符浏览中会公布空格。span.sr-only
中的空格也在盲文设备上输出。这些设备的尺寸通常非常有限,而且这些空间是不必要的。- 存在邀请码不会一次全部显示的风险,因为盲文显示会将其换行(就像单独的单词一样)。许多盲文设备只有一根线!
- 如果没有空格,整个邀请码将被视为一个单词,这样更好,因为盲文显示会尽量将其保持在一行上,而不会将其拆分。因此,用户错过部分代码的风险较小。
- 这些空格可能会给想要 select 并复制邀请码的用户带来问题,以便他们可以将其粘贴到其他地方。
- 屏幕 readers 将忽略可见代码,因为
aria-hidden
。用户必须复制包含空格的.sr-only
版本。当它被粘贴到另一个应用程序中时,它可能会因为多余的空格而被拒绝。 - 不使用屏幕的用户 reader 有复制代码 两个 版本的风险!这有点偶然,具体取决于对 select 文本使用何种方法(click/drag、在页面中查找或插入符号浏览模式)。所以他们最终将
UHM85QP6 U H M 8 5 Q P 6
粘贴到另一个应用程序中,但它被拒绝了。这是因为.sr-only
CSS 不会从 DOM 中删除任何内容,它只是将其剪辑到呈现的布局中。 (旁白:不可见的文字是已知的 security risk when copying specimen terminal commands from tutorials。)
- 屏幕 readers 将忽略可见代码,因为
案例二:
Its reading like words and billions for numbers.
它读起来像一个词,因为没有任何空格!跨度直接彼此跟随,它们之间没有任何空格:
<span class="sr-only">U</span><span class="sr-only">H</span>
Screen readers 不必对 span 元素做任何事情,因为它们具有通用角色。
没有屏幕的用户reader也有复制邀请码两次的风险,如案例1。