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

使 DetailsView 508 中的文本框、复选框、下拉菜单兼容

发布于 2024-08-06 01:07:57 字数 73 浏览 12 评论 0原文

我有详细信息视图，其中有几个下拉列表和复选框。现在我正在尝试使这些输入字段符合 508 标准。

有人知道这个修复吗？

原文

分享到QQ

分享到微博

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

发布评论

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

恍梦境° 2024-08-13 01:07:57

第 508 条的适用段落是

(n) 当电子表格设计为在线填写时，表格应允许使用辅助技术的人员访问填写和提交表格所需的信息、字段元素和功能，包括所有指示和提示.

这对应于 WCAG 的部分 “上下文和方向信息。”正确使用 label 元素（包括 for 标签）几乎涵盖了与下拉列表和复选框相关的所有内容。例如：

<label for="mysel">Select a language:</label>
    <select name="mysel" id="mysel">
        <option value="en-us">US English</option>

等等，或者

<input type="checkbox" name="mycb" id="mycb" value="Reminders - Yes"/> 
<label for="mycb">I would like to receive email reminders</label>

The applicable paragraph of Section 508 is

(n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

This corresponds to the section of WCAG on "context and orientation information." Proper use of the label element, including the for label, covers almost everything related to dropdown lists and checkboxes. For example:

<label for="mysel">Select a language:</label>
    <select name="mysel" id="mysel">
        <option value="en-us">US English</option>

etc., or

<input type="checkbox" name="mycb" id="mycb" value="Reminders - Yes"/> 
<label for="mycb">I would like to receive email reminders</label>

回复收藏 0 原文

娇柔作态 2024-08-13 01:07:57

试试这个例子。
完全无障碍且符合 508 标准。文本框、复选框和下拉菜单适用于屏幕阅读器和键盘访问

<!DOCTYPE html>
<html lang="en">
<head>

  <title>Accessible DetailsView</title>
</head>
<body>

<form>
  <fieldset>
    <legend>Details</legend>
    <div>
      <label for="textbox1">Textbox 1:</label>
      <input type="text" id="textbox1" name="textbox1" aria-describedby="textbox1-desc">
      <div id="textbox1-desc" class="sr-only">Enter text in Textbox 1</div>
    </div>

    <div>
      <label for="checkbox1">
        <input type="checkbox" id="checkbox1" name="checkbox1">
        Checkbox 1
      </label>
    </div>

    <div>
      <label for="dropdown1">Dropdown 1:</label>
      <select id="dropdown1" name="dropdown1" aria-describedby="dropdown1-desc">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
      </select>
      <div id="dropdown1-desc" class="sr-only">Select an option from Dropdown 1</div>
    </div>
  </fieldset>
</form>

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

</body>
</html>

Try this example.
fully accessible and meet the 508 criteria as well. textbox, checkbox, and dropdown works on screen readers and keyboard access

<!DOCTYPE html>
<html lang="en">
<head>

  <title>Accessible DetailsView</title>
</head>
<body>

<form>
  <fieldset>
    <legend>Details</legend>
    <div>
      <label for="textbox1">Textbox 1:</label>
      <input type="text" id="textbox1" name="textbox1" aria-describedby="textbox1-desc">
      <div id="textbox1-desc" class="sr-only">Enter text in Textbox 1</div>
    </div>

    <div>
      <label for="checkbox1">
        <input type="checkbox" id="checkbox1" name="checkbox1">
        Checkbox 1
      </label>
    </div>

    <div>
      <label for="dropdown1">Dropdown 1:</label>
      <select id="dropdown1" name="dropdown1" aria-describedby="dropdown1-desc">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
      </select>
      <div id="dropdown1-desc" class="sr-only">Select an option from Dropdown 1</div>
    </div>
  </fieldset>
</form>

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

</body>
</html>

回复收藏 0 原文

~没有更多了~