有关aria-by和form字段的最佳实践的可访问性问题 [英] Accessibility Questions on best practices for aria-describedby and form fields

问题描述

下面的示例是用于收集名字的典型表单字段.我在输入上有一个aria- describeby，它引用了两个有助于描述输入功能的不同文本区域.

The following example is a typical form field for collecting a first name. I have an aria-describedby on the input referencing two different text-areas that help describe the inputs function.

• 通过引用描述的第一个aria是我所说的提示"，它基本上是输入中的占位符属性文本(也就是您在文本框后面看到的阴影文本). 提示"文本区域是一个跨度，具有一个类，可以将其隐藏起来，但仍会被屏幕阅读器读取.
• 引用的第二个aria是我所说的帮助"，它是信息提示文本(在标签旁边，您可以单击蓝色(i)图标以获取帮助文本).

我的困境！ 使用屏幕阅读器JAWS并在我的表单字段区域中浏览，它会读取信息提示框.然后，当我切换到输入时，它会读取标签，占位符文本，提示文本(这是我放置在跨度中的占位符文本)，以及最后是帮助文本，它又是信息提示文本.我觉得不需要aria所描述的咏叹调，因为该信息已被读取两次！
另一方面，如果我删除了所描述的咏叹调，那么我从网上阅读的内容也可能会引起问题.一些辅助技术不会读取占位符文本，因此我应该在此处放置它以确保已读取信息.信息提示框只是放置在标签旁边，而不是标签的一部分(因此偶然会忽略与控件/标签"的关联).

My Dilemma! Using the screen reader JAWS and tabbing through my form field area it reads the information bubble. Then when I tab to the input it reads the label, placeholder text, Hint text which is the placeholder text I placed in a span, and finally the Help text which is the information bubble text again. I feel like the aria-describedby are not needed because the information was read twice!
On the other hand, if I take out the aria-describedby I may cause issues too from what I have read online. Some assistive technologies don't read placeholder text, so I should have it there to make sure the information is read. The information bubble is just kind of placed next to the label not part of it (so the association to the ‘control / label’ could be overlooked by accident).

(上面讨论的示例)

   <div class="form-group">
        <span class="required" aria-required="true"><i title="Required" class="fas fa-asterisk fa-cl" aria-hidden="true"></i><span class="sr-only">Required</span></span>
        <label for="Textbox3836">First Name</label>
        <span tabindex="0" role="button" class="text-info help-icon" data-balloon-pos="down" data-balloon-length="large" id="Textbox3836_Help_desc" aria-label="Tip: Please enter your legal first name."><i class="fas fa-info-circle fa-lg" aria-hidden="true"></i></span>
        <input class="form-control" type="text" id="Textbox3836" name="Textbox3836" maxlength="250" placeholder="Ex: Andrew" data-identifier="Text box" aria-describedby="Textbox3836_Hint_desc Textbox3836_Help_desc">
        <span class="sr-only" id="Textbox3836_Hint_desc">Example Andrew</span>
    </div>

这是显示的信息窗口

请记住我需要支持的用户类型以及他们将使用的辅助技术类型.

Keep in mind the type of users I need to support and the types of assistive-technology they will uses.

• 盲人(屏幕阅读器产品，例如JAWS或NVDA)
• 视力受损(屏幕放大产品，例如ZoomText或SuperNova)
• 身体障碍(语音导航产品，例如Dragon Natural Speak)

其他信息:关于信息气泡，它以前是一个带有标题的图标标签，但这只是鼠标功能，对辅助技术不友好.

Additional Information: About the information bubble it used to be an icon tag with a title set on it but that is a mouse only feature and isn't friendly to assistive-technology.

推荐答案

与此相距不远.以下是一些注意事项/建议.

You aren't far away from where you need to be with this. Below are a few considerations / suggestions.

为什么不使用笔尖上的aria-describedby，而是为什么不使用笔尖键盘呢?您可能已经考虑过屏幕阅读器，但是那些在没有屏幕阅读器的情况下使用键盘或其他辅助技术的人呢?目前，他们无法访问您的提示".

Instead of using aria-describedby by on your tip, why not make the tip keyboard accessible. You may have considered screen readers but what about those who use the keyboard or other assistive technology without a screen reader. At present they cannot access your 'tip'.

最简单的解决方法(尽管不是完美的)是在焦点上显示tooltip并进行悬停，并使用tabindex="0"将笔尖变成可聚焦的项.缺点是您的屏幕阅读器用户仍然需要aria-describedby

The simplest fix (although not perfect) would be to show the tooltip on focus as well as hover and make the tip into a focusable item with tabindex="0". The downside of this is that your screen reader users would still need the aria-describedby

更好的解决方法是使笔尖本身易于访问，并使其可持久/可切换.

The better fix would be to make the tip itself accessible and also make it persistent / togglable.

因此，您将使用display:none作为div或span内容，位于DOM中按钮的旁边，然后使其激活并隐藏在 Enter 键上.

So you would use a div or span with display:none for the content, next to the button within the DOM and then make it activate and hide on Enter key press.

将其视为迷你模式(因此请具有关闭按钮，并确保可以使用 Escape 键将其关闭.与模式不同，您不必捕获焦点，但是您应该移动焦点使用tabindex="-1"和一些JS聚焦到工具提示，然后将焦点返回到关闭它时打开它的按钮).

Think of it like a mini-modal (so have a close button and make sure it can be closed with Escape key. Unlike a modal you do not have to trap focus, however you should move focus to the tooltip using tabindex="-1" and some JS and return focus to the button that opened it when it is closed).

此有关工具提示和"toggletips"的文章是一个很好的参考点，"toggletips '是我建议的方法，因为它更适合您的'i'按钮的目的.

This article about tooltips and 'toggletips' is a good reference point, 'toggletips' is the method I am suggesting as it fits the purpose of your 'i' button better.

我注意到您在此处添加了一些屏幕阅读器文本，这很棒.但是，您尚未考虑患有认知障碍的人.星星不如写(必需)"清晰.

I noticed you added some screen reader text here, which is great. However you haven't considered people with cognitive disabilities. Stars are not as clear as writing "(required)".

使用" (必填)" (例如，在<label>中写在输入名称之后，例如<label for="Textbox3836">First Name (required)</label>)而不是"*"然后，您无需再使用仅sr"文本以及对超棒字体的依赖(它们都有自己的辅助功能问题，请参阅最后的标题最终注意事项".)

By using " (required)" (written within the <label> after the name of the input, e.g. <label for="Textbox3836">First Name (required)</label>) instead of "*" you then remove the need for your "sr-only" text and the reliance on font-awesome fonts (which have their own accessibility problems...see the final heading 'Final Considerations').

对此没有正确或错误的答案.是的，某些屏幕阅读器不会公开此信息，而其他屏幕阅读器会公开，无论您做什么，都会给某些用户带来不太理想的体验.

There is no right or wrong answer on this. Yes some screen readers do not expose this information and others do, no matter what you do you are going to give a less than optimal experience for some users.

我会坚持做下去的方式，最好让一些用户两次听到信息而不是根本听不到.

I would stick with the way you have done it, better to have some users hear information twice than not at all.

但是，您可能会争辩说，因为您已正确地在第1点公开了提示信息，所以不需要第二点信息，因此可以将其删除，从而将其保留为那些确实在其中阅读的屏幕阅读器的占位符.

However you could argue that because you have exposed the hint information correctly in point 1, the second bit of information is then not necessary so could be removed, leaving it in place as a placeholder for those screen readers that do read it.

您可以做的是在提示"末尾的提示:"中输入信息:请输入您的法定名字. (例如，安德鲁)"

What you could do is include the information within your 'tip' at the end "Tip: Please enter your legal first name. (e.g. Andrew)"

在这里走极端，不确定是否应该使用例如".或"Ex:"例如，我将继续做一些研究，因为我总是使用例如"但是你让我思考.

Going to the extreme here, not sure whether you should use "e.g." or "Ex:" for example, I will go do some research as I always use "e.g." but you made me think.

正如我之前提到的，"font-awesome"如果最终用户替换了字体，则其他图标字体可能会使您的应用程序无法访问.

As I mentioned earlier, "font-awesome" and other icon fonts can make your application less accessible if the end user replaces fonts.

例如，患有阅读障碍的用户可以使用自定义样式表来覆盖页面上的所有字体.此时，您的图标将变成末日遗失的字体方块"，并失去所有含义.

For example a user with Dyslexia may use a custom stylesheet to override all the fonts on your page. At this point your icons become 'missing font squares of doom' and lose all meaning.

代替使用内联SVG，它们更快，更易于访问，减少了对超过100kb字体的需求，从而减慢了初始页面的渲染速度，并提供了更多控制权.

Instead use an inline SVG, they are faster, more accessible, reduce the need for over 100kb of fonts slowing your initial page render down and allow you more control.

最后，在您显示输入的图像上，输入和背景之间的对比度可能不符合对比度要求(未选中)-输入(边框或背景)的对比度应为3: 1到它在页面上的背景.

Finally on the image you show of your input the contrast between the input and the background may not meet contrast requirements (haven't checked) - the input (either the border or the background) should have a contrast ratio of 3:1 to the background of where it is on the page.

此外，您可能会发现此半相关的帖子关于我建议如何处理图像上的title属性的有趣问题.它可以帮助您为提示"部分组合一个模式.

Also you may find this semi-related post interesting with regards to how I suggest to handle the title attribute on an image. It might help you put a pattern together for your 'tips' section.

为了简单起见，首先将所有这些元素设计到页面中.

I would keep it simple, design all these elements into the page in the first place.

它使标记中的所有内容更清晰，更易于维护，为每个人提供提示信息，节省了对字体的要求，并且可以使外观看起来不错(我的示例有点粗糙) ).

It makes everything cleaner in your markup, is easier to maintain, provides hint information to everybody, saves the need for font-awesome and with a bit of fiddling can be made to look just as nice (my example is a bit rough).

查看示例:

.input-container label, .input-container span{
  display: block;
}
.input-container label{
   font-weight: bold;
   font-size: 1.2rem;
   cursor: pointer;
}
.input-container span{
   color: #555;
}
.input-container input{
   display: block;
   width: 94%;
   margin-top: 10px;
   padding: 2% 3%;
   border: 1px solid #666;
   border-radius: 5px;
}

.input-container {
   width: 75%;
   padding: 15px;
   background-color: #f8f9fa;
   border: 1px solid #333;
}

<div class="input-container">
  <label for="ID1">First Name (Required)</label>
  <span>Tip: Please enter your legal first name. For Example 'Andrew'</span>
  <input id="ID1" placeholder="Your First Name"/>
</div>

这篇关于有关aria-by和form字段的最佳实践的可访问性问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！