前言
现如今，我们离不开各种各样的设备：手机、平板、笔记本、台式机等等。同时，由于人们的需求和偏好，上述设备的尺寸、屏幕、分辨率等等也各异。如何在不同设备上提供同样的服务，给所有用户提供更好的体验，一直是前端开发的难点。
但请不要忘记，还有一部分人群，他们往往被我们所忽略：这些人可能视力有障碍、听力有障碍、身体有障碍，或者是慢性疾病患者，如颈椎病、腰椎病等等。为了让这部分人群也能像正常人一样使用我们的网页，我们需要实现无障碍响应式设计。
在本篇文章中，我们将会探讨无障碍响应式设计的相关知识以及如何为设备用户提供更好的体验。
知识点
什么是无障碍响应式设计？
无障碍响应式设计是指提供给所有用户，不论其视力、听力、身体能力等等与设备无关的相同服务。这就意味着，网站应该如何科学地处理文本、图像、视频、音频等等内容。
为什么要用无障碍响应式设计？
我们回头看一下我们面对的群体：人群越来越广泛，有各种各样的需求和偏好。如果我们无法提供一个便利、舒适的使用环境，我们就很难吸引人们使用我们的产品。如果我们能考虑这些用户的需求和偏好，有针对性地进行优化和改进，我们就能让他们感到被尊重和关爱，从而吸引他们成为我们的用户，提高我们网页的品牌价值。
怎么做无障碍响应式设计？
接下来，我们来一步步学习如何进行无障碍响应式设计。
1. 使用语义化标签
通常，大部分人都使用 HTML 5 标签。但是，很多人只是因为这些标签的语义化而使用它们。语义化标签不仅有利于 SEO 的优化，而且作为无障碍响应式设计的重要性，语义化标签能让屏幕阅读器更好地理解页面，并使页面实施无障碍机制时更容易。
下面是一些语义化标签：
<header></header> <nav></nav> <main></main> <section></section> <article></article> <aside></aside> <footer></footer>
2. 使用适当的文本颜色和背景色
使用适当的文本颜色和背景色可以让站点更加易读，为视力受损用户带来便利。从现实来看，很多人认为黑色背景暴露出的光较多，不利于眼睛健康，灰色背景线条较弱，颜色层次过少等等问题。因此，我们应该采用一种或多种颜色、背景色搭配，使用户更自由地选择他、她偏好的风格。
3. 字体和字号的选择
例如，在 PC 上，很多网站的字体都选择了不同的字体，而这一情况在移动端则不推荐。在移动端，我们应该选择更加流畅和统一的字体和字号。我们可以通过设置图像和视频的大小来控制尺寸，以保证在各种尺寸下文本的易读性。
4. 图像和视频的选取
在应用无障碍设计时，图像和视频也是相当重要的一部分。例如，我们需要为盲人患者准备一个 “alt” 属性，使其在阅读您网页图像时，阅读器将读出其描述（文字）。
<img src=“图片地址” alt=“图像描述">
<video>
<source src="视频地址" type="video/mp4">
<source src="视频地址" type="video/ogg">
<track kind="captions" src="path/to/captions.vtt" label="English" srclang="en">
<track kind="captions" src="path/to/french-captions.vtt" label="Français" srclang="fr">
<track kind="chapters" src="path/to/chapters.vtt" />
</video>这里我们使用 “alt” 属性，对图像进行描述，把这些重要信息告诉盲人患者。另外，如果是视频，我们还可以标注它的字幕以及章节，为各种视力上的障碍用户提供更好的服务。
5. 更加友好的表单
表单是用户向我们网页传达信息的主要方式。在应用无障碍设计时，表单也是一个重点。我们应该在输入区域添加一个简要描述，这样在阅读器读出表格时用户也能得到清晰的信息。同时，这也可以防止出现意想不到的情况，让用户满意。
在 HTML 中，可以使用 “placeholder” 属性来代替输入框中的描述，这可以支持所有用户的操作方式，包括手动输入、语音识别等等。
6. 键盘支持
在无障碍响应式设计中，我们也要为那些可能无法使用鼠标或触屏设备的人提供支持，例如使用键盘触发操作。我们应该抽象出方便键盘可访问的代码，通过设置属性 “tabindex” 来实现这一目的。
例如：
<a href="#" aria-label="打开菜单" tabindex="1" onkeydown="return true"></a> <button type="button" aria-label="视频播放" tabindex="2" onclick="return true"></button>
7. 流式布局
为了能够适应各种设备与屏幕尺寸，我们可以采用浮动布局，进行自适应设计，让用户在各种设备上都能愉快地使用我们网页。在自适应设计中，我们可以使用 EM 或 REM 单位指定 CSS，使页面自适应于用户的设备屏幕尺寸。在这个屏幕上，用户可以看到最佳的展示效果。如下：
-- -------------------- ---- -------
-- --------------- --
------ --- --- ----------- ------- -
---- -
------ -----
-
---- --- -
------ -----
-
-
---- -
------ ------
-
---- --- -
------ ------
-在移动端，我们可以使用設置 CSS，使其针对移动设备的自适应性做进一步的调整。
-- -------------------- ---- -------
------ ------ --- ----------- ------ - -- --------- --
---- -
-----------
---------------
-
--- -
------------
------------
-
-结论
在完成本文所述内容后，我们不仅能为那些视力受损、听力受损、身体不便的用户带来便利，同时也能为我们所有的用户提供一个更好的使用体验。这就是无障碍响应式设计的魅力和要义。本文所述的无障碍响应式设计的指导思想，可以在未来的工作中实际将其应用，以提高我们网页的竞争力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f6134ac5c563ced57f5e9b