编程|Web前端：创建符合Web可访问性标准的HTML布局 unix

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