--- URL: "/zh-CN/blog/2024-08/accessibility_design.html" LLMS_URL: "/zh-CN/blog/2024-08/accessibility_design.md" lastUpdated: true commentabled: true recommended: true title: "如何开发无障碍的前端Web 网页" description: "如何开发无障碍的前端Web 网页" date: pageClass: "blog-page-class" --- --- lastUpdated: true commentabled: true recommended: true title: 如何开发无障碍的前端Web 网页 description: 如何开发无障碍的前端Web 网页 date: 2024-08-26 11:18:00 pageClass: blog-page-class --- # 如何开发无障碍的前端Web 网页 # Web 无障碍设计（Accessibility in Web design，也叫网站可及性 ）是要让所创建的网站对所有用户都可用/可访问，不管用户的生理/身体能力如何、不管用户是以何种方式访问网站。 这里整理了一份Web 无障碍相关的内容，涵盖了目前常用的标准和标签写法，方便大家取阅。 让网页完全支持无障碍功能有一定成本，我们可以在让代码更规范，更语义化等方面去改变；`比如给图片标签加上一个alt属性描述`，这个举动只需要1秒钟的时间，带来的用户体验确是跨越性的，也许只有一个视力障碍的用户在访问我们的官网，我想他在访问我们页面-点击图片的时候，朗读出图片描述信息的时候，一定会很欣慰。 ## 无障碍好处有哪些？（帮助残障人士，并使网站收益） ## 为什么不是所有网站都能无障碍访问？你可能也会问自己为什么存在 “无障碍” 的问题，为什么不是所有网站都能让所有用户无障碍访问？要进行无障碍设计有许多不同原因，其中包括残疾人用户的需求、不同的人访问和使用互联网的不同途径和方式。 ### 帮助视障用户 ### 视障用户包括色盲用户、完全失明用户（盲人）。如果图片不带有相关文字描述，则视障用户在理解图片方面会存在问题。如果图片没有文字描述，看不见图片的盲人用户就无法知道图片表达的是什么。色盲用户在识别设计元素（包括文字）方面也会存在问题，因为色盲用户所能识别的色彩不足以辨别所有的设计元素（包括背景色和页面颜色）。 所开发的网站，如果没有考虑到适应于屏幕发音阅读器（读屏软件, 如 JAWS）或 “非可视” 浏览器（或叫声音浏览器、读屏浏览器，如 MozBraille）。读屏浏览器是一个可以发音阅读出网站的浏览器，帮助有视觉障碍的用户访问网站。一个在可视浏览器（如 IE）上看起来良好的网站，在读屏浏览器下可能听起来非常糟糕。 ### 帮助听障用户 ### 听障用户在听觉上存在问题。用声音传达的信息无法被听障用户所理解，简单解决方法是提供另外途径的信息传达方式，而不仅仅是声音，例如用文字描述、用图片。 ### 帮助残障用户（肢体伤残的用户） ### 如果你不是残障用户，你无法想象他们（残疾人）的网络体验。例如，你曾经试过不使用鼠标去访问网站吗？除非你很幸运的遇到一个无障碍访问良好的网站，否则你肯定觉得非常困难。残障用户经常无法使用鼠标，除非创建网站的导航和输入方式的需求中就考虑残障人士的需求，否则残障人士可能完全无法使用你的网站。 ### 帮助认知和神经障碍用户 ### 网站往往比较复杂，要想找到我们所想要的信息经常不太容易。如果网站设计的过于复杂、导航不一致、存在让人分心（抓狂）的重复性动画，情况会更加糟糕。这些设计元素会导致认知和神经有障碍的用户的使用问题，甚至会让这些用户完全无法使用网站。 ### 残障人士之外（所有用户都能受益） ### 前面我们知道如果我们存在某方面残障，使用互联网是件困难的事情。然后，web 无障碍访问不仅仅帮助到残障人士，良好理解和遵循 Web 无障碍设计，可以让所有用户都受益、更好的服务用户。 - 使用移动手机、Web-TV 的用户 - 低带宽的用户 - 在吵杂环境下使用网站的用户 - 容易被 “屏幕眩光” 伤到眼睛的用户 - 开车时的用户 - 低文化水平的用户 - 第二语言访问的用户（国外用户） - 不同学习方式和习惯的用户 - 处理好 Web 无障碍访问问题也可以改善： ### 页面传输和网站更便于维护 ### 更优内容索引、内容搜索，提高搜索引擎的排名； ### 网站获得更好市场机会 ### 让你的网站具有可及性还有其它原因。根据目前数据，在许多国家残疾人用户占到人口的 10%~20%，如果能吸收前面提到的残障人士成为你的网站的用户，可以提高你网站的市场占有率。 许多国家的老龄化人口都在增加，年龄的增大会带来更多的无障碍访问问题，包括视觉障碍、听觉障碍、记忆力下降等。如果你的网站能吸收老年人用户，也会大大提升你网站的市场占有率。 所以，无障碍访问是可以直接带来经济效益的。 ## 无障碍 Web 标准 ## [Web内容无障碍指南（WCAG）2.1概述-官方链接](https://www.w3.org/Translations/WCAG21-zh/#text-alternatives) ### 摘要 ### WCAG 2.1提供了一系列的建议，目的是使Web内容对更广泛的用户群体更加易于访问。这包括视力、听力、运动能力、语言和认知能力受限的人士。遵循这些准则不仅可以提高网站的无障碍性，还能增强所有用户的体验。 ### 背景 ### WCAG 2.1基于WCAG 2.0，并加入了新的成功标准以解决特定用户群体的需求。 这些准则是国际性的，旨在跨越不同的技术和平台。 ### 适用范围 ### 适用于台式机、笔记本、平板和移动设备上的Web内容。 ### 主要原则 ### WCAG 2.1围绕四个核心原则构建，即： - **可感知性**：信息和用户界面组件必须以可感知的方式呈现。 - 替代文本：为非文本内容提供文本替代，以便转换为大字体、盲文、语音等。 - 时基媒体：为音频和视频内容提供替代，如字幕、音频描述和手语翻译。 - 适应性：创建内容时，确保不同呈现方式下信息和结构不丢失。 - 可辨别性：提高内容的可见性和听力清晰度，例如适当的颜色对比和文本间距。 - **可操作性**：用户界面组件和导航必须可操作。 - 键盘可访问：确保所有功能都可以通过键盘操作。 - 充足的时间：为用户提供足够的时间来阅读和使用内容，避免突然的时限。 - 癫痫和身体反应：避免设计可能引发癫痫或身体不适的内容。 - 可导航性：提供帮助用户导航和定位的方法，如清晰的标题和链接目的。 - **可理解性**：信息和用户界面操作必须是可理解的。 - 可读性：使文本内容易于阅读和理解，包括语言和方言的使用。 - 可预测性：让网页以可预见的方式呈现和操作，保持导航和标识的一致性。 - 辅助输入：帮助用户避免和纠正错误，提供错误建议和预防机制。 - **鲁棒性**：内容必须健壮，以被各种用户代理正确解释。 - 兼容：使用标准编码技术，确保内容的兼容性和未来的可维护性。 - 一致性：确保网站整体符合无障碍标准，提供一致性声明。 ### 如何确保网站在不同浏览器和设备上都能提供良好的无障碍体验？ ### - **遵循WCAG准则**：根据Web内容无障碍指南（WCAG），确保你的网站满足至少AA级标准。 - **使用语义化的HTML**：使用适当的HTML标签来传达其含义，例如使用`
`, `