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

问题描述

我希望得到一些建议。

目前我的注册表单（长表单）在表单字段元素下方有静音小文本的“帮助文本”。

问题：客户希望它以 (?) 样式悬停在图标上。

我知道这会给触摸屏用户带来问题，但也会导致其他可访问性问题。

我想知道是否有经过验证的解决方案？您对我如何实现客户想要的但保持可访问性有建议吗？

解决方法

无法访问仅悬停的解决方案。好吧，一些高级用户将能够深入研究并获得一些信息，但大多数屏幕阅读器用户会不走运。我目前看到的最可行的解决方案是将 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);
  border: 0;
}

需要考虑的事项

这里有几件事情需要考虑：

问号是否足够清晰以表明它对该领域有帮助？我会说不，但我仍然会在这个例子中使用它，我鼓励你使用实际的词来形容可能难以联想的认知障碍患者。
键盘用户必须能够访问信息
屏幕阅读器用户还必须能够访问信息并了解您的“？”意思是因为它没有断章取义的意思。
屏幕放大镜用户需要能够将鼠标光标移动到提示文本上而不会关闭（很多工具提示往往会失败）

如何克服/满足要求。

以下解决方案以下列方式考虑了第 2-4 点：

可见信息是由 <button> 元素获得焦点触发的。我们确保该按钮在被 e.preventDefault() 点击时不会提交任何信息。 请注意 - 没有操作的按钮通常不是一个好主意，如果您愿意使用“切换提示”而不是“工具提示”，那么我们可以解决这个问题，但是这个是我们必须做出的妥协才能使小费自动进行。
我使用了一些视觉上隐藏的文本并隐藏了问号来向屏幕阅读器用户解释该按钮的用途。我使用 aria-describedby 将工具提示文本添加到屏幕阅读器用户的通知中。
我只是确保 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); /*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有一个要求，但如果你能够做到这一点，那么就这样做这是最方便的做事方式。

如果您需要“提示”按钮，请将其设置为切换提示而不是工具提示，这样您就可以让按钮实际执行操作，并且所有内容对屏幕阅读器用户都有意义。