在互联网时代，我们越来越依赖于网站来获取信息、进行交流以及进行各种业务操作。然而，我们少有意识到，有大量的视觉障碍人士和听觉障碍人士也需要通过网站来获取信息和完成操作。这就需要我们关注无障碍访问，为所有用户提供友好的站点体验。
无障碍访问的重要性
根据世界卫生组织的数据，全球有超过2亿人口患有视觉障碍，其中约有3600万人是失明或极度近视的。而听障人士则有2亿多。这些人也是互联网用户，需要使用属于自己的助技术或者工具来访问网站。
如果我们让网站只适合于视觉能力完好的人并忽略每个人的差异，那么网站的可用性，可访问性和可接受性就会降低。这可能导致我们失去一个广泛的目标受众和市场份额，给业务带来损失。
如何让网站更友好？
HTML 标记语言
HTML 是建立网站的基础语言。对于无障碍访问来说，我们需要使用正确的 HTML 标记，以确保网站的内容和结构在任何情况下都可以得到正确地理解和呈现。
- 好的页面标题。每个页面都应该有一个清晰明确的标题，以便被屏幕阅读器识别和朗读。
- 语义结构化的 HTML。通过将网站内容分解成段落、标题、列表和表格等语义标签，我们可以让算法、搜索引擎和屏幕阅读器更好地理解网站的内容结构。
- 有描述性的链接。通过在链接文本中添加描述性信息，无法使用图像的人可以理解该链接的目的和位置。
- 正确使用表格。尽量避免使用复杂的表格布局，而是使用适当的表格标签，如
<th>、<thead>和<tbody>。 - 提供替代文本。在网站中使用图像和其他媒体时，应该提供替代文本来描述它们的用途和内容。
CSS 样式表
CSS 是网站样式的主要控制方法。对于无障碍访问来说，我们需要使用正确的 CSS 样式，以确保网站的可读性和可操作性。
- 不要使用靠近文本颜色的背景色，这可能导致低视力用户无法分辨出文本。
- 避免过于明亮的颜色和动画效果，这可能会触发某些疾病的光敏性反应。
- 使用高对比的颜色，以便于所有人看清楚所展示的内容。
- 对于鼠标悬停和键盘焦点，使用不同颜色和其他可视指示器来区分。
JavaScript
JavaScript 是网站中用于动态效果的主要方式。对于无障碍访问来说，我们需要使用正确的 JavaScript 基础以确保用户可以正常地访问和使用网站。
- 对于一些点击或者交互行为，提供键盘操作的替代方案，因为并不是所有人都能够用鼠标或者触摸屏来访问网站。
- 提供输入框提示，因为盲人屏幕阅读器会自动忽略页面上的标签，所以在表单上需要通过其他方式告诉他们正在输入什么。
- 避免在网站中使用自动弹出的模态框或者弹窗。
示例代码
以下是一个页面组成的HTML和CSS样式的实例。前提是我们已经设置正确的HTML标签和外部样式表。我们将在HTML代码中使用<img>和<div>元素，创建一个简单的页面，为用户展示一张图片和一些文本。这个示例页面的实际用途不重要，我们将侧重于如何使其对视力和听力障碍用户友好。
<div class="container"> <h1>宠物照片</h1> <img src="./images/pet.jpg" alt="一只小宠物在草地上玩耍"> <p>这是我可爱的小宠物在草地上玩耍。她在追猫，然后继续追蝴蝶。我很高兴能与您分享这张照片。</p> </div>
现在，让我们添加一些 CSS 样式以改善页面布局和可读性：
-- -------------------- ---- ------- ---------- - ---------- ------ ------- ----- -------- ----- ----------------- ----- ------ ----- ---------- ----- ------------ ---- ----------- ----- - --- - ---------- ----- -
页面现在显得比之前更加好看了，并且对屏幕阅读器和听力障碍用户的友好程度更高。我们通过使用适当的 HTML 标记来构建语义结构，CSS 样式来实现设计，以及 JavaScript 基础知识来提供交互，确保我们的网站对所有用户都有更好的适用性和可访问性。
结论
无障碍访问是一个被忽视的问题，我们需要为所有用户提供友好的站点体验。通过正确使用 HTML、CSS 和 JavaScript，我们可以让网站具有更好的可用性、可访问性和可接受性，为用户创造更好的体验。为确保网站的友好，在开发和维护过程中，我们需要注意和跟进相关的国家和地区规定和标准，不断学习，不断修正和提升我们的技术水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6736e7d50bc820c582570881