Web 表单上帮助文本的可访问性最佳实践

Posted 2023-03-12

【中文标题】Web 表单上帮助文本的可访问性最佳实践

【英文标题】：Accessibility Best Practice for Help Text on web forms

【发布时间】：2021-02-08 11:33:12

【问题描述】：

我希望得到一些 a11y 的建议。

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

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

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

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

【参考方案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;

【参考方案2】：

需要考虑的事项

这里有几点需要考虑：

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

如何克服/满足要求。

以下解决方案通过以下方式考虑了第 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, 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 有一个要求，但如果你能够做到这一点，那么就这样做这是最方便的做事方式。

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