什么是无障碍性
无障碍性（Accessibility）指的是对于身体或者认知上存在障碍的人士，提供在和正常人有同等访问和使用同等信息的机会和能力。
在Web设计中，无障碍性意味着网站、应用程序和在线工具能够被尽可能广泛的人访问和使用，无论人们的能力和技能水平如何，同时，为了可达性、可用性及可维护性的需求，我们需要使用 CSS 和 JavaScript 增强无障碍性。
CSS 的无障碍性应用
概念理解
在 HTML 页面上，CSS 用于设置网页的样式和排版，以及视觉效果等。但是，CSS 也可以增强无障碍性。
在许多情况下，CSS 可以替代 HTML 标签以提高可访问性和可用性。 CSS 使得我们可以改变文本尺寸、背景颜色、字体样式等。因此，可以使用 CSS 来定义和改变重要信息和页面元素的呈现方式，以更好的实现无障碍性。
使用 CSS 隐藏不必要的元素
通过 CSS，可以隐藏页面上的一些元素（如错误消息、不必要的段落等），因此可以提高用户浏览无障碍性体验。这可以通过使用 display:none;、visibility:hidden; 或者负值的text-indent来实现。
/* 隐藏无用元素 */
.hidden {display:none;}
/* 可见但不可点击 */
.invisible {visibility:hidden;}
/* 隐藏内容但不占用位置 */
.hidden-text {text-indent:-9999px;}改变网站字体大小
网站的字体大小对于视障人士来说非常重要。CSS 可以帮助我们增加或减小字体大小。可以使用CSS中的font-size属性，通过 em 或者 rem 单位设置字体大小，同时也可以用 JavaScript 将用户字体大小存储在Cookie中，以便下次进入该网站时以用户偏好设置字体大小。
/* 使用 (em) 适应用户选择 */
body {font-size: 1em;}
h1 {font-size: 2em;}
h2 {font-size: 1.5em;}
/* 不使用百分比尺寸 */
html {font-size: 16px;}
body {font-size: 1rem;}对比度
对比度也是无障碍性的一个重要标准，对于某些视力障碍的人群，访问页面会面临困扰。通过 CSS，可以设置文字颜色和背景颜色，从而提高页面的可读性。
/* 设置高可读性 */
body {color:#333; background:#F6F6F6;}
/* 高对比度 */
body { color: #fff; background: #000;}
/* 使用 focus */
:focus {outline: 2px solid #0FF;}JavaScript 的无障碍性应用
概念理解
JavaScript 是一种编程语言，用于在交互式用户界面中增加动态行为。这包括 Web 应用程序，浏览器游戏，行业工具和移动应用程序等。
虽然 JavaScript 主要用于开发交互式应用程序，但它也可以被用于增强无障碍性。JavaScript 功能可以用于几个无障碍性方面，例如：焦点管理， 键盘快捷键，屏幕阅读器等等。
按钮焦点
当用户使用键盘浏览网页时，焦点元素向用户提供某种视觉标志以知道他们当前的位置，这可以通过简单的 JavaScript 实现。
/* 设定焦点 */
document.getElementById("button").focus();连接简写
很多链接在页面上只是一行文字。这种情况下，这些链接不是容易点击的，我们可以通过 JavaScript 实现，将一段超链接的文字包裹在一个a标签中。
/* 添加超链接 */
var links = document.getElementsByTagName("p");
for (var i = 0; i < links.length; i++) {
var text = links[i].innerHTML;
links[i].innerHTML = "<a href='#'>" + text + "</a>";
}特定键功能
通过 JavaScript，可以为按下不同按键时产生特定的行为，例如：向后或向前移动焦点，换行等等。
-- -------------------- ---- -------
-- --------------- --
------------------- - ------------- -
-- ------ --- --- - -------------
------------------- -
---- ---
-------------------
------
---- ---
-------------------
------
---- ---
-------------------
------
---- ---
-------------------
------
-
--总结
无障碍性是一种对所有人都好的设计选择。对于开发人员来说，使用 CSS 和 JavaScript 来增强无障碍性是一种值得鼓励和实践的开发模式。它可以提高人们访问和使用信息的能力，并在开发特定类型的应用程序时表现出色。下面就是本文中使用到的所有代码：
-- -------------------- ---- -------
-- ------ --
------- ---------------
-- ------- --
---------- --------------------
-- ---------- --
------------ ----------------------
-- -- ---- ------ --
---- ----------- -----
-- ----------- -----
-- ----------- -------
-- -------- --
---- ----------- ------
---- ----------- ------
-- ------ --
---- ------------ --------------------
-- ---- --
---- - ------ ----- ----------- ------
-- -- ----- --
------ --------- --- ----- -------- -------------------- ---- -------
-- ---- --
------------------------------------------
-- ----- --
--- ----- - -----------------------------------
--- ---- - - -- - - ------------- ---- -
--- ---- - -------------------
------------------ - --- ---------- - ---- - -------
-
-- --------------- --
------------------- - ------------- -
-- ------ --- --- - -------------
------------------- -
---- ---
-------------------
------
---- ---
-------------------
------
---- ---
-------------------
------
---- ---
-------------------
------
-
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6471775d968c7c53b0f54d30