什么是无障碍技术
无障碍技术指的是能够使所有人都能够方便地使用产品或服务的技术。对于 Web 应用程序，无障碍指的是所有人都能够访问并使用应用程序，包括那些视力受损、听力受损、肢体残障等对于普通人而言具有较大困难的人。
为什么我们需要无障碍技术
随着人们生活条件和生活水平的持续提高，我们的社会面临的是一个不断变化的人口结构，随之而来的是更多的用户需求，因此越来越多的用户使用计算机和互联网进行工作和生活。
而在这些用户之中，受到各种身体限制的人也呼唤着无障碍技术的支持。因此，作为 Web 前端开发工程师，了解和掌握无障碍技术，具备为所有用户创建高效、便捷的 Web 环境的能力非常重要。
如何建立 PC 端无障碍技术的开发环境
在建立 PC 端无障碍技术的开发环境前，我们需要了解和学习以下的一些知识：
1. 视觉障碍者使用互联网的习惯
在设计和开发无障碍网站之前，我们应该深入了解视障用户如何使用计算机和网站。网站开发者必须了解当今视障人士使用互联网的主要意见和用例，这些意见包括但不限于：
- 通常会使用屏幕阅读器读取网站内容，并且屏幕阅读器会快速扫描文本内容，因此网页布局应该清晰、结构化并具有可读性。
- 容易迷路或被分散的内容或链接很容易导致用户对网站的识别感和导航失望，对顶部导航、文本标题、导航条进行明确合理的定义和区分至关重要。
- 用图形或其他方式传达的信息都必须有文字或备选描述来传递相同的信息。
2. 网页开发中的无障碍技术
下面列举了一些 PC 端应用程序中的 Web 端无障碍技术。
2.1. 键盘操作
除了鼠标以外，键盘是 PC 端应用程序中最重要的操作工具之一。网站应该被设计成可以由键盘进行操作。
2.2. 屏幕阅读器
屏幕阅读器是无障碍用户的“听写员”，它们是通过视力残疾的用户通过声音接受信息的主要方式。开发人员应该确保他们编写的网站可以通过这些工具轻松地访问。
2.3. 网站可访问性
可访问性是确保对所有用户开放的重要方式。在呈现网站时，开发人员应该注意以下方面：
- 对于不同的文档类型，使用正确的 DOCTYPE
- 清晰、有语义的 HTML，尽可能少的表格
- 提供文档语言和字符编码的基本元数据
- 在 <script> 标记中用相反的顺序提供交互元素，以便屏幕阅读器正常工作</li> <li>对超链接进行正确的格式化，以便流畅地封装到主体文本中</li> </ul> <h3>3. 开发辅助工具</h3> <p>在开发 PC 端应用程序时，我们可以使用一些辅助工具来帮助我们满足无障碍标准。</p> <h4>3.1. aXe</h4> <p>aXe是一个开源的工具，用于评估网站是否符合WCAG 2.0和WCAG 2.1无障碍标准。</p> <h4>3.2. Sass（SCSS）</h4> <p>Sass 是一种流行的 CSS 预处理器，它允许编写更简洁和高效的 CSS，并且由于可扩展的特性，无障碍性可以成为 Sass 应用程序的一部分，为开发人员提供更多帮助和支持。</p> <h4>3.3. Gulp</h4> <p>Gulp 是一种自动化打包工具，可以轻松地为开发人员提供自动化辅助的维护功效，从而提高开发质量、缩短开发时间。</p> <h2>案例</h2> <p>下面这个案例展示了如何改进一个典型的 PC 障碍控制应用。</p> <h3>1. 链接标签分组</h3> <pre class="prettyprint login "><div class="my-buttons"> <a href="#" class="my-button">Button 1</a> <a href="#" class="my-button">Button 2</a> <a href="#" class="my-button">Button 3</a> </div></pre><h3>2. 使用 ARIA 规范自定义按钮</h3> <pre class="prettyprint login "><div class="my-buttons"> <button role="button" class="my-button">Button 1</button> <button role="button" class="my-button">Button 2</button> <button role="button" class="my-button">Button 3</button> </div></pre><h3>3. 点击“键盘”</h3> <pre class="prettyprint login ">var btn = document.querySelector(".my-button"); btn.addEventListener("keyup", function(e) { if (e.keyCode === 13) { e.target.click(); } });</pre><h3>4. 改变指针</h3> <pre class="prettyprint login ">/** * @param {boolean} tog 提高可视性指针可见 */ function togglePointer(tog) { let el = document.querySelector(".pointer"), val = tog ? "" : "none"; el.style.setProperty("display", val, "important"); } </pre><h3>5. 关闭扬声器</h3> <pre class="prettyprint login ">function toggleAudio() { let audioIcon = document.querySelector(".my-audio-icon"); audioIcon.classList.toggle("my-audio-icon--mute"); audioIcon.setAttribute("aria-muted", audioIcon.classList.contains("my-audio-icon--mute")); }</pre><h2>结论</h2> <p>建立 PC 端无障碍技术的开发环境可以帮助我们创建高效、便捷的 Web 环境，使所有用户都能够访问并使用应用程序。在建立 PC 端无障碍技术的开发环境时，我们需要了解和学习相关的知识，如视觉障碍者使用互联网的习惯、网页开发中的无障碍技术等等。同时，我们可以使用一些辅助工具来帮助我们满足无障碍标准。最后，通过案例的展示，我们可以更好地理解建立 PC 端无障碍技术的开发环境的重要性。</p> <blockquote> <p>来源：<a href="https://www.javascriptcn.com/post/66ef655a6fbf9601972f0704">JavaScript中文网</a> ，转载请注明来源 <a href="https://www.javascriptcn.com/post/66ef655a6fbf9601972f0704">https://www.javascriptcn.com/post/66ef655a6fbf9601972f0704</a></p> </blockquote>