当前位置：文江博客话题详情

accessibility wai-aria wcag2.0

测量单位是否需要ARIA标签？

发布于 2025-01-24 05:57:34 字数 312 浏览 7 评论 0 原文

使用 nvda （Windows上的ScreenReader）， ＆lt; p＆gt; 36英寸产品具有此选项。＆lt;/p＆gt; 用 Voiceover （MacOS上的ScreenReader）读为“ 36 Quote产品”

，它读为“ 36英寸产品”，

以满足基本WCAG 2.1级别的要求，如果我使用 ARIA-LABEL 或类似于使NVDA正确读取“英寸”，还是这是NVDA问题？

查看WCAG文档，我很难找到有关测量单位的细节。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦途 2025-01-31 05:57:34

当您混合CM时，它可能会变得凌乱。暂时忽略CMS，当屏幕阅读器遇到标点符号时，可能会发生多种事情。

首先是用户可能设置了一定的详细水平。一些详细的水平宣布所有标点符号，包括句子结束时句子和时期的commmas。在浏览普通网站时，通常不是理想的行为，而是有时会派上用场的，例如您编写JavaScript代码并需要听到所有标点符号，因为它是语言的一部分。

另一个详细的水平是一些标点符号。逗号，周期，问号，感叹点等通常，而是诸如报价标记可能的其他人。至于将宣布哪些字符，它因屏幕阅读器而异。一些屏幕读取器会让您确切选择应宣布哪些字符。

屏幕读取器上还有另一个功能，可让您更改特定角色宣布的内容。这本质上是发音的词典。因此，我本可以“宣布为“ Quote”或“英寸”。

还请注意，您可以拥有不同的引用符号，例如。从技术上讲，我认为第一个被称为“双prime”和the第二是一个真实的报价标记（如果您具有“开放式报价”字符和一个“关闭引用”字符，该字符的角度可能会有所不同），而最后一个是“直Quote

” 某种方式宣布的内容，最好清楚并指定自己。

屏幕读取器设置和实际标点符号，如果您想要以 > 除非您在交互式元素上指定ARIA-LABEL。文本在屏幕上没有明显显示。请参阅 Bootstrap 3中的SR-仅是什么？有关更多信息“仅SR”。

因此，您可以拥有类似的东西：

the 36<span aria-hidden="true">"</span><span class="sr-only">inch</span> product

除了“ Inch”上的“仅SR”外，我还在引用/英寸符号上添加了 aria-hidden ，以便屏幕读取器忽略它。

最终结果是，视力用户将参见“ 36“产品”，屏幕读取器用户将听到“ 36英寸产品”。

还请注意盲文用户将阅读“ 36英寸产品”。

When you mix in CMS, it might get messy. Ignoring CMS for the moment, when a screen reader encounters punctuation, there are a variety of things that could happen.

The first is that the user might have certain verbosity levels set. Some verbosity levels announce all punctuation, including commmas in sentences and periods at the end of sentences. That's not usually a desired behavior when navigating a normal website but can sometimes come in handy such as when you're writing javascript code and need to hear all the punctuation because it's part of the language.

Another verbosity level is some punctuation. Commas, periods, question marks, exclamation points, etc are usually not announced but others such as quote marks might be. As far as which characters will be announced, it varies from screen reader to screen reader. Some screen readers will let you choose exactly which characters should be announced.

There's also another feature on screen readers that let you change what is announced for a particular character. It's essentially a dictionary of pronunciations. So I could have " announced as "quote" or "inches".

Also note that you can have different quote symbols such as. Technically, I think the first is called a "double prime" and the second is a real quote mark (which might look different if you have an "open quote" character and a "close quote" character, where the angle of the character looks different) and the last is a "straight quote".

Because of the variety of screen reader settings and actual punctuation characters, if you want something announced a certain way, it's best to be clear and specify it yourself.

I would not recommend using aria-label unless you are specifying the aria-label on an interactive element. If you have plain text, it's better to use an "sr-only" type class that provides text for a screen reader to announce but the text isn't visibly displayed on the screen. See What is sr-only in Bootstrap 3? for more info on "sr-only".

So you could have something like:

the 36<span aria-hidden="true">"</span><span class="sr-only">inch</span> product

In addition to the "sr-only" on "inch", I also added aria-hidden on the quote/inch symbol so that the screen reader will ignore it.

The end result is that the sighted user will see "the 36" product" and the screen reader user will hear "the 36 inch product".

Note also that a Braille user will read "the 36 inch product". They won't read the quote symbol because it's hidden from assistive technology. They'll read the actual word "inch".

回复收藏 0 原文

春庭雪 2025-01-31 05:57:34

不要做任何事情来解决这样的发音问题。除了解决问题以外，您有更多的机会创造其他问题。

实际上，它与NVDA或配音无关，而与使用的实际语音有关。
每种声音都会对文本做出不同的解释，在所有情况下，都不总是正确的。

请记住，

屏幕读取器和语音综合不会进行高级语言处理，如果他们完全做一些
，他们无法正确猜测您的真正意义，从语义上讲，
您几乎无法控制如何更改解释或帮助它弄清楚。用户控制下有发音词典，但并不能解决所有内容。

我本人是屏幕阅读器用户，实际上，对于最好的和最糟糕的是，我们已经习惯了这种发音或解释问题。
这通常不是一个大问题，因为即使它没有完全按照您的想法阅读，我们也足够聪明，可以理解它的含义。有时我们甚至取笑它。

您可以使用更专业的Unicode角色，而不是普通的双引号，例如U+2033，但这也不是理想的：

许多屏幕阅读器和/或声音不支持此类字符，导致垃圾或根本没有任何内容您
据我所知，这种u + 2033也可以有几种解释：英寸，秒或双序，

可以使用视觉上隐藏 /关闭屏幕文本 + Aria Hinded Technique，例如：

Product X is 36<span class="sr_only"> inch</span><span aria-hidden="true">"</span> long.

但是它可能非常复杂。在这种特殊情况下，它值得。
还要考虑以下事实：符号“ ”在表示“英寸”时几乎到处都可以理解，而单词“英寸”本身必须翻译，如果您的网站是多语言的，则必须翻译。
它经常被遗忘，但是标签，替代文本和隐藏的文本必须翻译为所有其他文本。

请注意，此解释问题不仅限于“ ）可以将其视为“ Quote”或“ inch”。例如，某些声音会系统地说“ CM”的“厘米”在某些情况下，这可能是不正确的

。许多小型缺陷都足够聪明，可以弄清楚这可能会帮助某些人，但对许多其他人来说都是更糟的。

Don't do anything to fix pronounciation issues like this. You have greater chances to create other problems than to fix them.

In fact, it isn't related to NVDA or VoiceOver, but rather to the actual voice used.
Each voice make make a different interpretation of the text, and none is always correct in all situations.

Remember that

Screen readers and speech synthesis don't make advanced language processing, if ever they do some at all
As a consequence, they can't guess correctly what you really mean, semantically speaking, all the time
You have almost no control on how to change the interpretation or help it figure it out. There are pronounciation dictionaries under user's control, but it doesn't solve everything.

I'm a screen reader user myself, and in fact, for the best and the worst, we are quite used to that kind of pronounciation or interpretation issues.
This is generally not a big problem, because even if it isn't read exactly as you think it should, we are smart enough to understand what it means anyway. Sometimes we even make fun of it.

You may use a more specialized unicode character instead of the normal double quote, for example U+2033, but it isn't ideal either:

Many screen readers and/or voices don't support such characters, leading to garbage or nothing at all pronounced
As far as I know, this U+2033 can have several interpretations, too: inch, seconds, or double prime

You may use the visually hidden / off screen text + aria-hidden technique, like this:

Product X is 36<span class="sr_only"> inch</span><span aria-hidden="true">"</span> long.

But it's probably quite complicated for what it's worth in this particular case.
Think also about the fact that the symbol " is probably understood almost everywhere when it means "inch", while the word "inch" itself has to be translated, if your site is multilingual.
It's often forgotten, but labels, alternative texts and hidden texts have to be translated as all other texts.

Note that this interpretation problem isn't limited to characters like " that can be taken as "quote" or "inch". For example, some voices will systematically say "centimeters" for "cm", while it may be incorrect in some contexts. Other example, "min" can be interpreted and spoken as "minimum" or "minutes".

The world of abbreviations and symbols is very complicated, but keep in mind as a tl,dr that despite a lot of small imperfections of that kind, we are smart enough to figure it out anyway. Don't try to find workarounds that might help some people, but make the experience worse for many others.

回复收藏 0 原文

江南烟雨〆相思醉 2025-01-31 05:57:34

区别很可能来自不同的屏幕读取器如何解释相同的输入。虽然语音对您的意思是“英寸”似乎“显而易见”，但并不是那么明显。除了为读者提供提示以外，您都不能做任何事情，以便他们不需要解释任何东西。

可以

<p>The <span aria-label="36 inches">36"</span> product had this option. Bla bla bla.</p>

在这里快速解决方案，您可以插入读者的提示，其中出现“令人困惑”的东西。

另一个更极端的方法是为屏幕读取器提供完全不同的内容，量身定制了他们的局限性以外的限制：

<p aria-hidden="true">The 36" product had this option. Bla bla bla.</p>
<p class="screen-reader-only">The 36 inches product had this option. Bla bla bla.</p>

第一段是仅视觉的，请注意 aria hidden 属性指示读者忽略整个内容。下一个是由第一个替换有问题的字符用正确的文本制成的。该类的定义如下：

.screen-reader-only {
    position: absolute;
    height: 1px;
    width: 1px;
    clip: rect(1px 1px 1px 1px); // IE 6 and 7
    clip: rect(1px,1px,1px,1px);
    clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
    -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
    overflow: hidden !important;
}

基本上隐藏了这片文本，同时仍然允许屏幕读取器捡起并阅读它。

源和完整说明最后一个技巧：

在此处也有一份阅读，以获取有关屏幕读取器处理特殊符号的更多详细信息： https://www.deque.com/blog/blog/dont -screen-Readers-Read-whats-screen-part-1-函数符号符号/

Most likely the difference comes from how the different screen readers interpret the same input. While the quote seems "obvious" to VoiceOver that you meant "inches", it wasn't that evident. You can't do pretty much anything about that, other than providing hints for the readers so that they all don't need to interpret anything.

A quick solution could be

<p>The <span aria-label="36 inches">36"</span> product had this option. Bla bla bla.</p>

Here you insert hints for the reader where something "confusing" appears.

Another, more extreme, way of doing the same would be to provide an entirely different content for the screen reader, tailored knowing their limitations besides the normal one:

<p aria-hidden="true">The 36" product had this option. Bla bla bla.</p>
<p class="screen-reader-only">The 36 inches product had this option. Bla bla bla.</p>

The first paragraph is visual-only, note the aria-hidden attribute that instructs readers to ignore the whole thing. The next one is crafted from the first replacing problematic characters with the proper text. The class is defined as follows:

.screen-reader-only {
    position: absolute;
    height: 1px;
    width: 1px;
    clip: rect(1px 1px 1px 1px); // IE 6 and 7
    clip: rect(1px,1px,1px,1px);
    clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
    -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
    overflow: hidden !important;
}

Which basically hiddens away from view this chunk of text, while still allowing screen readers to pick it up and reading it.

Source and full explanation of this last trick: https://accessible360.com/accessible360-blog/use-aria-label-screen-reader-text/

Also have a read here for more details on handling special symbols for screen readers: https://www.deque.com/blog/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols/

回复收藏 0 原文

~没有更多了~