网站无障碍入门的 4 个原则
我刚入行做前端开发的时候，没人跟我提过网站无障碍设计。我甚至不知道网站无障碍设计是违法的，直到有一天，一个大学客户找到我们团队，希望我们帮忙做个无障碍审核。我当时真是大吃一惊。
我开始深入研究，但发现很多资料令人望而生畏。有些内容我完全看不懂，需要消化的信息量也很大，但我最终还是弄明白了。（其实我现在还在摸索阶段。）
我后来了解到，无障碍设计并不一定令人望而生畏，甚至可以很有趣。
如果当初能有一些实用的原则帮助我掌握基本知识，那对我会有很大的帮助。
那么，让我来和你们分享一下：
本的自创网页无障碍原则
它们不是规则。
这是我在开始开发无障碍网站时必须做出的思维转变。
让我们开始吧。
原则一：网页设计不仅仅是平面设计
我第一次做网页设计工作时，有人给了我一张网站图片，让我把它变成一个网站。
之后，设计师们仔细地将我的网站与他们设计的网站图片进行了比较，并告诉我我犯的所有错误。
行高应为 18px，而不是 16px。
这个灰色不是我想要的那种浅灰色，应该是极浅的灰色。
阴影模糊效果偏差了一个像素。
诸如此类的事情。他们给我留下了非常深刻的印象，我学到了很多东西。
但我们谁也没有真正考虑到网络并非可控媒介。我们太关注作品的视觉效果，以至于没有考虑网站在99美元的安卓手机上使用3G网络时的表现，也没有考虑色盲人士或完全失明人士的体验。
而正是因为这些人身处这样的环境，才能访问互联网，这使得网页设计远比平面设计重要得多。
因此，我没有仅仅关注视觉元素，而是将我的工作分为三个主要任务。
网页设计的三项任务
任务 1：编写良好的（语义化的）标记。
首要任务是编写良好的标记语言。
这意味着要合理组织页面内容，并正确使用 HTML。HTML 默认是可访问的，所以如果我们从一开始就做对了，我们的工作就会轻松得多。稍后我们会花更多时间讨论这个问题。
任务 2：使用 CSS增强标记。
第二个任务是使用 CSS 来增强我们编写的优秀标记。
CSS 应该用来强调内容的含义，使其更具意义和影响力。但前提是，你必须首先使用正确的 HTML，否则你的工作将会困难得多。
任务 3：使用 JavaScript 为 HTML 和 CSS添加交互功能
第三项任务是使用 JavaScript 在结构和样式上添加交互功能。
前后对比
这种方法与我过去构建网站的方式不同之处在于，我过去总是选择最容易设置样式的元素，然后使用它。
我需要大号字体，所以我会使用 h1 标签。
我的界面很复杂，像手风琴一样折叠起来，所以我会用到很多div元素。
诸如此类。但这仅仅关注视觉方面。要构建无障碍网站，我们需要考虑的不仅仅是网站与图片的匹配程度。它超越了视觉设计或平面设计。这就是为什么我们称之为网页设计。
这就引出了原则二。
原则二：尽快：尽可能语义化。
我建议这样做。
每次你开始打字<div>……
停止。
照照镜子。
问问你自己。
我可以使用更具语义性的元素吗？
如何判断是否有更具语义性的元素可以使用？
Mozilla开发者网络有一个页面，按用途整理了所有HTML元素。（这个参考资料非常棒——一定要用！）
让我们来看看 s 的一些语义替代方案<div>。
替代方案<div>
如果您有一个独立的页面部分，请考虑使用<section>标签。
如果你有博客、新闻文章、论坛帖子或任何类型的独立内容，你可以使用<article>。
多个相同类型的组件相邻放置？考虑使用有序列表或无序列表（<ul>或<ol>）。
博客文章顶部有标题和元数据部分吗？使用 <head> 标签<header>。文章底部有标签等内容部分吗？使用 <body> 标签<footer>。
有侧边栏吗？使用感叹号<aside>！
如果需要添加可点击元素，请使用按钮<button>。这一点很重要。如果需要添加可点击元素但又不是链接，则最好使用按钮。
我再重复一遍：如果它需要可点击但又不是链接，那么你最好使用按钮。我们稍后会详细讨论这一点。
记住：尽快。尽可能做到语义清晰。
原则三：网站即使不显示任何内容也应该美观。
我的意思是，即使你从网页中移除所有 CSS，你的网站仍然应该是可读且可用的。
这条原则实际上强调了原则 2 的要点：尽可能做到语义清晰。
不妨这样想：如果你的标记是语义化的，那么你使用的元素就能够传达含义。这意味着浏览器会提供相应的交互方式和指示符，来解释你的标记的含义和/或功能。
所以，“裸测试”实际上是对你的标记语义化程度的测试。
你的标记应该看起来像一个结构良好的提纲，就像我们以前在学校写研究论文时所做的那样。
如何核实这一点？
以下是代码。如果您将其粘贴到开发者工具控制台中，它将清除<head>文档中的所有内容，包括样式。
document.head.parentNode.removeChild(document.head);
它的作用是找到文档头部，然后删除它的所有子项。
大多数时候，我把它当作浏览器里的一个小书签来使用。
javascript:(function() {
document.head.parentNode.removeChild(document.head);
})();
要将其用作书签，请在浏览器中添加一个新书签。在地址栏中，复制并粘贴上面的代码，而不是输入网址。现在，您可以在任何网站上点击此书签，它将移除文档头部的所有样式。
让我们来看一个实际的例子。
Google 登录表单
我想大家应该都很熟悉谷歌的登录表单。它包含标题、邮箱输入框，以及“忘记邮箱”、“创建账号”和“下一步”几个按钮。
那么，当我们赤裸裸地观察它时会发生什么呢？
裸露的谷歌登录表单
移除样式后，我们仍然保留了漂亮的“登录”标题，因此我们知道此页面是关于什么的。
我们有一些输入，但标签不太清晰。
还有……我们的纽扣都去哪儿了？
仔细观察，你会发现以前是“下一步”、“忘记电子邮件”和“创建帐户”按钮的地方，现在都变成了普通文本。
现在我们有三个输入，而不是之前的一个，标签似乎在它们后面。
“下一步”和“创建账户”按钮的位置互换了。
所以所有东西都还在，但我最担心的是那些按钮，它们不像真正的按钮，不够清晰。
我还要说明一点，谷歌没有使用 HTML<button>元素并不意味着这个表单本身就无法访问，只是意味着他们需要用 JavaScript 和键盘交互来做更多工作，而这些工作通常浏览器都会为你完成。
我通常用“裸测试”来检验自己的网站是否易于访问。网站未能通过“裸测试”并不意味着它一定无法访问。即使网站未能通过“裸测试”，它仍然可以访问。但“裸测试”会揭示出你未使用语义标记的地方，而这些地方可能需要特别关注其可访问性。
裸体测试中需要注意什么
以下是我运行此测试时要检查的内容。
首先，我会检查网站结构是否合理。内容顺序是否正确？每个部分是否有清晰的标题，以及正确的标题级别？
其次，内容看起来是否条理清晰？我能否像浏览提纲一样快速浏览页面并了解其内容？
第三，我会查看交互元素是否真的具有交互性。如果我使用 `<div>` 标签创建了一堆交互元素<div>，它们看起来可能并不具备交互性。这时我就知道需要花更多时间检查这些元素的键盘功能，以确保其符合无障碍访问标准。
最后，我想确保输入框有清晰的标签。
以上大致概括了裸测试的内容。重申一下，该测试的目的是揭示网站语义上的不足，并指出需要花更多时间进行测试的区域，以确保这些组件的可访问性。
原则四：与你的电脑对话
这是我的第四条也是最后一条自创原则：跟你的电脑说话。
好吧，也许你不用真的对着电脑自言自语。我的意思是，要和电脑进行通信——使用ARIA 属性给浏览器提供一些上下文信息。
ARIA属性
ARIA 代表可访问的富互联网应用程序，如果您选择使用 ARIA 状态、角色和属性，它们可以告诉浏览器有关您的网页的某些信息。
我建议您在适当的情况下使用它们。用户看不到它们，但浏览器和屏幕阅读器会在后台使用它们为用户提供一些额外的上下文信息。
以下是一些例子：
aria-label
可以将这个aria-label属性添加到 HTML 元素中，以便告诉屏幕阅读器该元素是什么。我经常在链接上使用这些属性，为屏幕阅读器用户提供链接指向位置的额外上下文信息。
aria-expanded
该aria-expanded属性用于指示元素是展开还是折叠状态。例如，您可以将其用于控制主导航的汉堡菜单按钮。当屏幕阅读器用户将焦点放在该属性值为aria-expandedfalse 的按钮上时，屏幕阅读器会朗读类似“主菜单，折叠按钮”的内容，用户便知道可以展开菜单。
aria-describedby
该aria-describedby属性指向一个描述当前元素的元素。如果您想向输入框添加一些错误文本，可以使用此属性。
以下是一个例子：
<label for="example-input">Email</label>
<input type="email" id="example-input" aria-describedby="email-error" />
<div id="email-error">
<p>The email address is in an invalid format.</p>
</div>
在这个例子中，表单提交时，文本“电子邮件地址格式无效。”会被动态添加到输入框中。当输入框获得焦点时，屏幕阅读器会朗读这条信息。
aria-live
ARIA-live 会告知计算机页面上的某个区域稍后会更新。这在 AJAX 应用中非常实用。它的值可以设置为友好、积极或关闭。
ARIA 意味着额外的背景信息
使用这些属性，您可以为浏览器提供额外的上下文，以便更好地了解某个元素的功能，并为屏幕阅读器和其他辅助技术的用户提供更多上下文。
原则：回顾
我的四个简单原则就介绍到这里。
简单回顾一下：
- 原则一：网页设计不仅仅是平面设计。
- 原则二是尽可能做到语义清晰。
- 原则三：网站即使不显示任何内容，也应该看起来很美观。
- 原则 4 是与你的电脑对话，使用 ARIA。
只要谨记这些原则，你就能避免因使用只关注外观的非语义代码而犯下的很多错误。
如果您想了解如何将这些知识付诸实践，我即将推出一门免费的电子邮件课程：《常见的网站无障碍错误及修复方法》 。点击此处注册即可获取课程！
文章来源：https://dev.to/benrobertson/4-principles-for-getting-started-with-website-accessibility-1d15