“Web 可访问性”一词定义了一组开发人员需要遵循的准则，以使Web应用程序的交互更加方便。任何网站的内容、UI/UX 设计和布局都应该是可访问的。在这篇文章中，我们研究了前端团队可以做些什么来轻松地将他们的网站提升到适合Web可访问性的标准。

　　保持标记清洁

　　无论你使用什么标记，都要正确整齐地构建它，避免跳过关卡。例如，在HTML中使用 <button> 元素而不是 <span> 或 <div>。使用 <nav> 进行导航，使用 <button> 进行页面操作。

　　将 <strong> 或 <em> 元素与 <bold> 或 <i> 区分开来。前两者用于对内容的语义强调，后两者用于视觉强调。

　　l 确保横幅中的公司徽标链接回网站的主页。

　　l 使用 <lang> 属性告诉浏览器在网站上使用哪种语言。

　　l 如果你想在视觉上和屏幕阅读器中隐藏内容，请使用 hidden 属性。

　　l 为长页面添加锚链接(跳转链接)，以便用户可以跳过他们不需要的内容并继续相关部分。

　　注意页面语义

　　用户和机器(屏幕阅读器、盲文显示器)都应该能够识别页面结构。通过使用页面上的分段(<header>、<footer>、<article>、<nav>)和标题元素来创建语义布局。这有助于定义网页的清晰层次轮廓，并区分主要(主要：<h1>、<h2>、<article>)和次要(不太重要：<h3> - <h6>、<footer>)内容。

　　当你在页面中使用标题时，不要使用格式(字体样式和大小)伪造标题属性 (<h>) 的实际标记，因为这不允许辅助技术识别这些是标题。

　　在适当的情况下在网页中使用 ARIA 地标。ARIA(可访问的富 Internet 应用程序)是一个综合技术规范，用于将可访问性信息添加到本地不可访问的元素(特别是使用 JavaScript、AJAX 和 DHTML 开发的元素)。使用 ARIA 地标，开发人员可以扩展 HTML 功能并将适当的语义(即属性)应用到 UI 和内容元素，以便辅助技术理解这些。

　　这是一个 HTML 语义元素(<header>、<nav>、<main>、<footer>)如何与 ARIA 角色属性(“banner”、“navigation”、“main”、“contentinfo”)组合的示例使用户更容易使用屏幕阅读器进行网站导航。

　　尽管大多数 ARIA 功能最近都是在 HTML5 中实现的(你绝对应该喜欢这些!)，但并非所有屏幕阅读器和浏览器(例如 IE)都足够复杂，仅依赖于 HTML 语义。适当使用 ARIA 的一些示例是分配角色来描述某些类型的小部件(“菜单”、“树项”、“滑块”)，定义描述拖放源和放置目标的拖放属性，以及添加警报以通知有关动态页面更改的辅助技术。

　　支持标签导航

　　使元素的 Tab 顺序(也称为文档对象模型或 DOM 顺序)与视觉顺序一致。从 Tab 顺序中删除不必要的元素，以免混淆使用 Tab 或辅助设备导航的用户。

　　使导航元素的焦点可见。你可以为此使用第三方插件或 <outline> 属性，该属性为在选项卡式导航(或其替代方案)时具有焦点的页面元素和链接提供视觉反馈。

　　使用 <tabindex> 属性可以使链接、按钮和表单字段等元素具有焦点，并且可以通过 Enter 键和/或空格键进行选择。即使具有 <tabindex> 属性和 0 整数值的不可聚焦元素也可以成为可聚焦元素，例如<h3 tabindex="0">一个可聚焦的标题</h3>

　　如果页面上有弹出窗口，导航优先级应该允许首先关闭它们。完成此操作后，理想情况下，焦点应该跳回到用户被打开的模式窗口打断的网页元素。为此，请将最后一个焦点元素存储在变量中。

　　为图像添加替代文本

　　屏幕阅读器几乎可以访问页面上的所有内容——图形信息除外。所以不要忘记为图像和其他图形添加替代文本(<img> alt 属性)。这不仅可以帮助使用辅助技术“阅读”屏幕的人，还可以帮助互联网连接不佳的用户。你的网站也将使用图像替代文本进行 SEO 优化。在Web前端培训中，不仅有理论知识的课程，也会有实操项目的训练，让你深入浅出地学习前端技术，弥补项目经验的空缺。

　　图像替代文本应该精确、简洁，并反映添加图像的主要目的。根据上下文，相同的图像可能有不同的替代文本，例如 如果将公司徽标放在标题中并将用户返回到主页，则其准确的替代文本可能是`<img alt="Company X logo - Home page.">`

　　l 在替代文本中，避免使用多余的“图像”或“图像”——无论哪种方式，辅助技术都会警告用户有图像。

　　l 以句点结束替代文本。这将使屏幕阅读器在 alt 文本中的最后一个单词之后暂停一点，从而为用户提供更愉快的体验。

　　l 具有多个可点击区域的图像(例如图像地图)的替代文本应提供这些链接的完整描述。此外，每个可点击区域都应该有相应的替代文本来描述其目的或目的地。

　　l 避免使用文字图片;如果你不能没有它们，替代文本应该包含与图像中相同的单词。

　　l 如果你有多个图像传达一条信息，则组中第一张图像的替代文本应包含整个组的信息。

　　l 要熟悉替代文本的普遍接受标准，你可以随时查看此替代文本决策树。

　　虽然必须为所有对理解内容很重要的图像添加替代文本，但对于与内容没有直接关系的菜单图标或装饰性图像(如封面)则无需这样做。对于这样的图像，只需使用一个空的 <img alt> 属性。

　　最后技巧

　　尽管这些提示肯定会增加你网站的包容性，但最好不要将 Web可访问性视为一套正式的指南。首先，它是一项全面的策略，可以关心所有用户并使你的网站内容可供他们使用——无论他们使用何种浏览器、互联网提供商或辅助设备。

者有话要说：此文是作者自己的学习总结，供大家参考，不足之处还请见谅和指正~

在学习完了基本的HTML+CSS标签之后，就可以尝试写一些简单的静态网页啦~练习的过程是充满成就感的，值得反复体会和思考！

网页结构

简单提一下常用于表示网页机构的标签：

header 整个页面的标题（也可表示一个内容区块）

main 页面主体部分

footer 整个页面的脚注（也可表示一个内容区块）

article 一块与上下文无关的独立内容

section 表示一个内容区块，常嵌套于article中

aside 在article之外与其内容相关的辅助信息

nav 页面中的导航栏

figure 表示一段独立的流内容

三栏布局

一个网页最少由header、main、footer三部分组成，那么从三栏布局开始练习吧。无论是上-中-下结构还是左-中-右结构，关键都在于设置中间部分的宽高或位置。我们知道网页的主体内容（版心）是处于居中位置、随网页缩放而缩放的。那么左右（或上下）两栏固定后，须使中间部分自适应。以下总结了几种三栏布局的方法，以左-中-右结构为例：

先写左中右三个盒子。

1.使用float

需要注意的是，使用float方法需要在body部分改一下center盒子的位置，把center盒子放在right盒子之后（否则right盒子会跑到下一行右侧）。以上代码中，设置center盒子的左右外边距来实现宽度自适应，若父盒子layout无高度要求，可用min-height实现高度自适应。不加高度自适应也可，在未设置center盒子高度的情况下本身高度会随文本内容的扩充而自动增加。

2.使用position

三个盒子都分别使用绝对定位，left、right分别距离窗口左右端为0，center距离窗口左端的间距为left盒子的宽度，距离窗口右端的间距为right盒子的宽度。

3.使用flex

须给父盒子layout加上弹性盒属性，给center盒子设置大于0的flex值，利用弹性盒自动拉伸效果实现center盒子的宽度自适应。

4.使用table

给父盒子layout设置为table，宽度为整个窗口，给三个子盒子都设置为table-cell，此时三个盒子就有了表格的属性。固定left、right盒子的宽度，center盒子自动占满父盒子剩余宽度。需要注意的是，因为父盒子具有表格属性，当left、center、right三者中任意一个盒子高度改变时，其他两个盒子会跟着改变。

5.使用grid

将父盒子layout设置为grid，宽度为整个窗口，用template-rows设置行高，用template-columns分别设置三个盒子的宽度，其中auto实现center盒子的宽度自适应。需要注意的是，这里用template-rows设置了固定的行高，因此center的高度不会自适应。

仿写练习

适合初学者练习的网页有很多，可以打开网址之家去里面挑一挑，以静态页面为主的网站。作者自己是以豆瓣首页（局部）进行练习的。练习过程中，千万不要去看网站源码（此时你也有很多地方看不懂），先试着自己分析和思考，用所学的知识看看能做到哪一步。

放上对比图，还是有很多不一样的地方，网页也没有功能，作为初学者这都是正常的。静态网页练习的主要目的是熟悉HTML+CSS布局，培养做网页的思维。具体细节随着学习的深入，可以让网页更还原、页面更精美，网页功能也能逐步完善起来，实现真正的网站开发。