无障碍设计的 web 开发实用技巧分享
无障碍设计是兼顾不同人群的需要和使用习惯，致力于构建一个可访问的 Web 环境。它是我们应该关注的一项重要且不可忽视的技术，尤其对于那些需要特殊关注的人群，比如视力和听力障碍者，老年人和人们在嘈杂环境中使用能力受到影响的用户。本文将介绍一些无障碍设计的实用技巧，帮助你开发可以让使用者更方便地了解和操作的网页应用程序。
- 良好的结构化 HTML
良好的结构化 HTML 是帮助提高网站可访问性的首要因素。无障碍设计要求网页的 HTML 要具有清晰的语义化，也就是在 HTML 中正确而准确地标记与页面上相应内容有关的语言，比如标题、文本、链接和表单。对盲人和其他视觉障碍者友好的 HTML 结构还可以有助于用户将屏幕阅读器的焦点放在页面的重要部分。
示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------- ---- ---------------
-------
------
--------
-------- ---------
-----
----
------ ----------------------
------ ----------------------
------ -------------------------
-----
------
---------
---- -------------
----------- -- --- ----------
------- -- ---- ------ ---------
------
------ ----------- ----------- --------- ----------------- ------
--------- -------------- ------------ --------- ------------------ ---- --------------------
------- -----------------------------
-------
------
--------
--------- ---- -- --------
---------
-------
-------- 图像的文本等效替代品
通过浏览器可以阅读文本的人可以轻松识别图像并了解其含义，但视障人士却不能。为了解决这个问题，应该提供图像的文本等效替代品。通过 HTML 的 alt 属性或 ARIA（可访问性互操作性技术）中的 aria-label 属性标记图像，以便能够适当地描述图像的内容。此外，使用 CSS 的 background-image 属性加载的图像也应提供文本等效替代品。
示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------- ----- ---------------
-------
------
------ ------------
---- ------------------ ------ ------- -- - --- -- - ------ ------
-------
-------- 根据用户输入更改样式
对于视力障碍的人士来说，网页上的视觉效果可能会使他们困扰，使得他们很难看到页面上的内容。作为一个开发者，你可以通过在网页上加入一些选项来帮助用户更好地控制网页的样式。尝试响应用户输入，让用户更改背景颜色、字号等等，以便用户个性化调整其浏览体验。同时，使用 CSS created Media Queries 来确保网页可以适应不同的窗口尺寸。
示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------- ----- ---------------
-------
----- -
------------ -----
------------------- ------
-
---- -
---------- -----------------
----------------- ------------------------
-
--------
-------
------
-------------- ----- ------------
------ --- ---- ----- -- --------- --- ---------
------
------ -------------------- -------------
------ ------------ -------------- ---------------- -------- -------- -----------
----
------ --------------------------------- --------------
------- ----------------------- ----------------------
------- ----------------------------
------- --------------------- -------------
------- --------------------- ---- -------------
------- -------------------- ---- -------------
---------
-------
-------
-------- 键盘键位的操作
你应该让你的网页是通过键盘操作可达的，不仅仅是通过鼠标。这一点对于视障人群来说尤为重要，因为他们的访问方式不同。在一些对障碍人群友好的网站中，大多会使用 Enter 键而非点击链接、按钮等。这简化了内容操作过程。另外，处理键盘焦点时，要确保焦点持续在用户需要的位置，以避免焦点跳过重要的元素。
示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------- -------- ---------------
-------
------
-------------- -------- ------------
----
------ ----------------------------
------ ------------------------------
------ ------------------------------
-----
----- -------- ---- ----- --- --- ---------------- --- -- ---- -- --- ---- ---- --- ----- ------------------ -- ------ --- ---------
--- ---------------------
------- -- --- ----- ------------
--- -----------------------
------- -- --- ------ ------------
--- -----------------------
------- -- --- ------ ------------
-------
-------- 表单处理
表单被用于向服务器提交数据或接受数据输入。为了使表单完成一个良好的用户体验，可以考虑一些无障碍设计的细节：
- 在表单标签中，通过 label 元素将每个表单字段与其标签相关联
- 提供足够的信息，以帮助用户了解如何使用表单，比如相应的说明文本
- 为每个文本字段提供提示，以帮助用户输入
- 对于非必填字段，提供相关提示和默认值，方便用户更快地完成表单填写
示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------- ---- ---------------
-------
------
----------- -------
--------- -------- --- ---- ----- -- --- -- ----------
------
------ ------------------------
------ ----------- --------- ----------- ---------
----
------ --------------------------
------ ------------ ---------- ------------ ---------
----
------ ------------------------------
------ ----------- ------------ ---------------
----
------ ------------------------------
--------- ------------ -------------- --------------------
----
------- -----------------------------
-------
-------
-------结论
无障碍设计可以让更多的人可以方便地访问您的网站和应用程序。通过一些注意细节和技巧，可以在开发过程中主动考虑无障碍设计的思路。从内容结构、图像替代品、可访问性样式、键盘焦点到表单处理等方面均应予以考虑，以创造一个易于使用和无障碍的网站。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677364166d66e0f9aae2b801