Windows 10 无障碍设计实践-JavaScript中文网-JavaScript教程资源分享门户

无障碍设计是指在设计产品、服务或环境时，考虑到所有用户的需求，不仅仅是对聋哑、盲人、失明和麻痹病人等残障人士的需求考虑，而且考虑到普通人的特殊需求，如年龄、文化、语言和技能等。在产品的设计过程中，为了达到无障碍设计的效果，需要遵循一些原则和技巧，接下来我们将介绍无障碍设计在 Windows 10 中的实践方法。

无障碍原则

为了遵循无障碍原则，我们需要考虑以下几点：

可接受性：产品应该适用于所有用户，无论其残障状况、文化差异、语言技能等各种因素。
灵活性：提供多种方式完成一项任务，以满足不同的用户需求。
直观型：产品的设计应该清晰简洁，对于所有用户都易于理解。
易用性：产品的功能应该容易被理解、掌握和使用。
安全性：无障碍设计产品的所有功能和数据都应该是安全和保护用户隐私的。

无障碍技巧

设计无障碍产品时，需要采用一些技巧，以帮助更多的用户进行试用、操作和享受产品的服务。以下是几项重要的技巧：

色彩对比度：产品中应该采用足够高的背景色与前景色之间的对比度，以便于视力受损的用户使用。例如，可以将黑色文本放置在白色背景上，或者选取一种够用的背景色与文本到前景色之间的颜色对比度。
```
.text_wrapper {
    color: #000000;
    background-color: #FFFFFF;
    /* specified in WCAG2.0 at 4.5: https://www.w3.org/TR/WCAG20/#visual-audio-contrast */
    border-color: rgba(0,0,0,0.15);
}
```
字体选择：采用易于阅读的字体，如 sans-serif 系列的字体，来增加文本的可读性。同时，控制字体的大小，以适应不同的屏幕、分辨率和设备。
```
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 14pt;
    line-height: 1.6;
}
```
键盘操作：提供键盘操作方式，以方便只有使用键盘的用户进行操作。键盘操作应该是无歧义的，也就是说应该保持与鼠标操作一致的效果，并且用户可以使用 Tab 键在各个输入框和按钮之间导航，使用 Enter 键选取。
```
<button type="button" onclick="myFunction()">Click Me!</button>

<script>
    function myFunction() {
        document.getElementById("demo").innerHTML = "Hello World!";
    }
</script>
```
图片说明：为所有的图片和图表提供说明文本，这能让使用助视设备的用户了解到图片的内容。使用 alt 属性就是为标签添加说明文本的最好选择。
```
<img src="example.jpg" alt="A view of the forest in autumn." />
```

视听播放：在视听播放内容的场合中，为媒体内容提供提取文字或音频辅助说明同步的字幕或说明，以方便听力或视觉障碍用户能够理解内容。

<video src="example.mp4" controls>
    <track kind="subtitles" srclang="en" src="subtitles.vtt" label="English subtitles" />
    Sorry, your browser doesn't support embedded videos.
</video>

无障碍实践

实现 Windows 10 中的无障碍设计需要采用一些技术和标准，比如使用 HTML、CSS、JavaScript，遵照 ARIA 标准，以及遵循 WCAG2.1 标准等等。下面是几个实际场合的无障碍设计实践示例。

无障碍表单设计

表单是 Web 应用中不可或缺的一部分，它将用户与网站的互动封装成一项最基本的交互形式。为确保表单的无障碍性，我们可以使用以下几个技巧：

使用 label 元素：在控件中使用 label 元素会让这些控件的名称直接与该元素相关联，这是一种简单而有效的提高表单无障碍性的方法。理想的情况是使用 for 属性和 id 属性将 label 元素与控件直接关联起来。
```
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
```

提供错误信息：当用户提交了表单的时候，我们需要确保用户输入的内容是合法和正确的。如果表单中有错误，则应使用相应的技术提供给用户错误信息，以便他们能够找到并更正输入错误。

<form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" aria-invalid="true" required />
    <div role="alert" aria-atomic="true">
        Please enter your username.
    </div>
    <button type="submit">Submit</button>
</form>

为表单元素进行键盘支持：表单中的每个表单元素都应该支持键盘操作，以便于键盘使用者可以正确操作表单。任何可编辑的文本控件都应该支持基本键盘操作，如 Tab、Shift+Tab、Enter 和 Esc。

-- -------------------- ---- -------
------ ----------- ------------ ------------------ ---------------------- --

--------
    -------- ----------------- -
        --- --- - --------- -- --------
        -- ---- --- --- -
            -------------------
            ---------- ------- ---------
        -
    -
---------

无障碍网页设计

Web 应用程序是 Windows 10 中最常见的无障碍场合之一，因此，设计一个无障碍的 Web 应用程序是至关重要的。以下是一些在设计 Web 应用程序时应该考虑的示例。

扩展文本大小可被缩放：有些用户可能需要放大文本，以便在浏览器中更容易阅读内容，因此，请确保您的网页在文本放大大小时，内容可以正常呈现。
```
-- -------------------- ---- -------
---- -
    ---------- -----
-

------ ----------- ------ -
    ---- -
        ---------- -----
    -
-
```
图标要搭配文字使用：图标是 Web 应用中最常用的演示图像，但是请确保将文字与图标配合使用，来描述图标的作用。
```
<button aria-label="Play">
    <svg width="25" height="25">
        <use xlink:href="#play" />
    </svg>
</button>
```
使用颜色有意义：不应将颜色用于不符合颜色对比度标准 WCAG2.1 的任务，颜色在用于传达有意义的内容时会被视为一种信号，因此需要特别注意。
```
button:hover {
    background-color: #34495e;
    color: #FFFFFF;
}
```
为所有链接提供足够的说明：所有链接都应该提供说明，以帮助用户理解链接的内容和含义。
```
<a href="example.com">This is an example link.</a>
```

结论

在这篇文章中，我们探讨了 Windows 10 中的无障碍设计实践方法，并提供了一些无障碍原则和技巧。这样，我们就可以根据这些方法和技术，设计更加人性化和无障碍的产品，以帮助残障人士和特殊人群打破障碍，并实现更好的生活质量。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6744579fc22b09372b146e69