web表单上帮助文本的无障碍最佳实践

Question

我希望得到一些建议。

目前我的注册表格(长表格)有"帮助文本"在表单字段元素下面的静音小文本

问题:客户端希望它是在(?)风格悬停在图标。

我知道这会给触屏用户带来问题，更不用说其他可访问性问题了。

我想知道是否有一个久经考验的解决方案?你有什么建议，我如何才能实现客户想要的，但保持可访问性?

Answer 1

不能访问仅悬停的解决方案。好吧，一些高级用户可以深入研究并获得一些信息，但大多数屏幕阅读器用户就不那么幸运了。我现在看到的最可行的解决方案是在问号上添加role="button" aria-label="help"，当用户点击它(点击，而不是悬停!)时，显示一条带有role="alert"的短消息。如果你的客户端不想看到它，让它只屏幕阅读器(参见sr-only类在各种框架中，例如在Bootstrap)。如果您的框架或库没有这样的类，请以以下示例为例:

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}

Answer 2

注意事项

这里有几件事需要考虑:

1. 问号是否足够清楚，它是对该领域的帮助?我会说不，但我仍然会在这个例子中使用它，我鼓励你使用实际的词汇，因为有认知障碍的人可能会挣扎于联想。
2. 键盘用户必须能够访问
信息
3. 屏幕阅读器用户还必须能够访问信息并理解您的"?">
4. 屏幕放大镜用户需要能够将鼠标光标移动到提示文本上而不会关闭它(很多工具提示往往会失败)

如何克服/解释需求。

下面的解决方案以以下方式考虑了第2-4点:

2. 显示的信息是由聚焦的<button>元素触发的。我们确保按钮不提交任何信息时，点击e.preventDefault()。请注意一个没有动作的按钮通常不是一个好主意，如果你愿意使用"切换提示"的话。而不是"工具提示"那么我们可以解决这个问题，但这是我们必须做出的妥协，使小费自动。
3. 我使用了一些视觉隐藏文本并隐藏问号来向屏幕阅读器用户解释按钮的作用。我使用aria-describedby将工具提示文本添加到屏幕阅读器用户的公告中。
4. 我只是确保CSS考虑到屏幕放大镜在显示信息时悬停在提示文本上。我使用了一个技巧，用与左边背景相同颜色的边框来确保按钮区域和工具提示区域之间没有间隙。如果你需要它是真正透明的，你需要在它之间添加一个不可见的元素，你可以检查焦点。

例子

var helpBtn = document.querySelectorAll('button.help');
// important even with automatic actions to explain whether a button is opened or closed.
var openHandler = function(e){
this.setAttribute('aria-expanded', true);
}
var closeHandler = function(e){
this.setAttribute('aria-expanded', false);
}
// using a button in a form could lead to unexpected behaviour if we don't stop the default action.
var clickHandler = function(e){
e.preventDefault();
}
// adding all the event handlers to all of the help buttons for different scenarios.
for(x = 0; x < helpBtn.length; x++){
helpBtn[x].addEventListener('focus', openHandler);
helpBtn[x].addEventListener('mouseover', openHandler);
helpBtn[x].addEventListener('blur', closeHandler);
helpBtn[x].addEventListener('mouseout', closeHandler);
helpBtn[x].addEventListener('click', clickHandler);
}

.visually-hidden { 
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px; 
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

form{
max-width: 400px;
}
label{
float: left;
width: 88%;
margin-right: 2%;
}
input{
box-sizing: border-box;
position: relative;
width: 100%;
}
.help-container{
position: relative;
float: left;
width: 10%;
height: 2.5rem;
}
.help{
width: 100%;
height: 100%;
}
.tool-tip{
position: absolute;
left: 100%;
top: 0;
background-color: #333;
color: #fff;
padding: 0.65rem;
border-left: 10px solid #fff;
display: none;
min-width: 200px;
}
button:focus ~ .tool-tip,
button:hover ~ .tool-tip,
.tool-tip:hover{
display: block;
}

<form>
<label>First Name
<input name="first-name" placeholder="Your First Name"/>
</label>
<div class="help-container">
<button class="help" aria-describedby="first-name-tooltip">
<span aria-hidden="true">?</span><span class="visually-hidden">Help for First Name</span>
</button>
<div class="tool-tip" id="first-name-tooltip" aria-hidden="true">
When filling in your first name, please ensure it is all capitals as I like to feel like I am being shouted at.
</div>
</div><br/><br/><br/><br/>

<label>Last Name
<input name="last-name" placeholder="Your Last Name"/>
</label>
<div class="help-container">
<button class="help" aria-describedby="last-name-tooltip">
<span aria-hidden="true">?</span><span class="visually-hidden">Help for Last Name</span>
</button>
<div class="tool-tip" id="last-name-tooltip" aria-hidden="true">
When filling in your last name, please ensure it is all lower case so it feels like you are whispering it to me.
</div>
</div>

</form>

最终想法

对于那些偶然发现这个问题和答案的人:

这将是更好的直接在标签下的文本，总是可见的(所以如果你能做到这一点，那么做那个)，OP有一个要求，但如果你能做到这一点，那么做它，因为这是最方便的方式来做事情。

如果你需要一个"提示"按钮，让它成为一个切换提示而不是工具提示，这样你就可以让按钮实际执行一个动作，一切都将对屏幕阅读器用户有意义。