持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天，点击查看活动详情
将Alt文本添加到图像中
c
信息图像是传达与内容相关的重要信息的图像。您应该能够用几个单词的alt文本来描述它们显示的内容。
假设我们经营着一个健身博客，并正在撰写一篇关于如何在家锻炼的文章，并在文章中使用以下图像。
这张图片应该向博客读者传达一个关于你做紧缩练习所需东西的信息。此图像的alt文本可能是这样的：
<img src="crunch_exercise.png" alt="You must have a good quality exercise mat and workout clothing to avoid back injuries and skin allergies">
我们为图像提供的alt文本清楚地告诉了视障用户我们的图像传达的信息。
另一方面，装饰图像仅用于在网页上进行装饰——也许它们只是分解内容或补充文本中的一般描述。
用作图标的图像是装饰图像的绝佳例子。Airbnb主页有一个导航栏，上面有多个图标（如红色圆圈中的图标），指示Airbnb可用的不同类型的生活空间。导航栏中使用的图标用于装饰目的，我们可以将它们的alt文本留空。
Airbnb主页
<!-- Example of decorative image -->
<img src="decorative_img.png" alt="">
维护标题层次结构
如果您没有在正确的层次结构中使用标题（从< h1 >-最大-到< h6 >-最小的），屏幕阅读器可能会认为缺少一些内容。
因此，最好仅将< h1 >用于主标题，< h2 >用于标题后面的标题，h3用于子标题，等等。
考虑以下示例：我们有一个包含几个标题的网页。< h1 >用于文档标题，< h2 >用于二级文档标题，< h 3>用于子标题，< h4 >用于迷你标题（< h3 >之后的标题）。
标题层次结构示例
以下是此网页的代码。注意其中不同的标题标签：
<h1>Facts about dogs</h1>
<img src="dog.png" alt="a cute dog resting under the sun">
<h2>What makes a dog the best pet?</h2>
<p>Dogs are everyone's favorite and there are numerous science backed reasons behind it mentioned below</p>
<h3>Dogs can sense a lie</h3>
<p>Yup! You read it right! Dogs are smart enough to tell when a praise is sincere. They have a pretty sharp mind.</p>
<h3>Dogs have a great sense of smell</h3>
<p>Dogs have a sense of small that's 40x better than ours and this quality plays an important role in building a stronger bond between a human and a dog. The reasons to it are given below</p>
<h4>1. They can smell a stanger sneaking into your garage</h4>
<p>Dogs can spot a stranger because of their strong sense of smell and save you from theft.</p>
<h4>2. They can tell you whenever you forget to put meat in the fridge after a grocery run</h4>
<p>Dogs might make you give them a half of the meat you bought from the supermarket but they can also help you save the remaining half. Thanks to their sense of smell!</p>
使用Aria属性或标签标签进行输入字段
Aria标签或标签告诉屏幕阅读器输入字段期望什么类型的信息。没有它们，屏幕阅读器将不知道输入字段的目的，这将为视障用户提供糟糕的用户体验。
<!-- Aria label example -->
<input type="text" placeholder="Enter your name" aria-label="Enter your name">
<!-- Label tag example -->
<label>Full Name: <input type="text" placeholder="Enter your name"></label>
示例一使用aria属性让屏幕阅读器读取用户在名称输入字段中输入的内容。
示例二使用带有文本全名的标签，该标签可由屏幕阅读器阅读。
提供关键词功能
并非所有用户都可以使用指向设备（鼠标），但许多网站不向用户提供键盘功能。这阻止了仅使用键盘的用户返回您的网站。
一个简单的例子是将单击事件监听器添加到表单的提交按钮中，而不是使用提交事件（这要求用户单击才能提交表单）。看看下面的示例：
<!-- Example one -->
<form>
<label>Full name: <input type="text" value=""></label>
<label>Email: <input type="email" value=""></label>
<button onclick="handleSubmit>Submit</button>
</form>
<!-- Example two -->
<form>
<label>Full name: <input type="text" value=""></label>
<label>Email: <input type="email" value=""></label>
<button>Submit</button>
</form>
示例一在提交按钮上使用单击事件侦听器。这意味着按下键盘上的Enter键不会提交表单。
示例二使用 onsubmit 事件，并为该事件分配 JavaScript 函数。这样，单击或输入按钮都会运行 handleSubmit 函数。
使用无障碍调色板
糟糕的颜色对比破坏了非残疾人和残疾人的整体体验。因此，在设计网站时，正确对比度和互补颜色很重要。
对比度检查器等工具可以帮助您了解颜色对比度是否足以正确可见。无障碍颜色对比度有助于残疾人区分网页上的元素。请参阅下面好色和坏颜色组合的示例。
好色和坏颜色组合的例子
第一个框有一个深蓝色的背景，这使得白色更容易阅读。另一方面，第二个框有一个绿色背景，带有粉红色的文本，不容易阅读，会导致眼睛疲劳。
提供音频和视频内容的替代方案
听不见或看不清的用户可能会发现很难访问网站的音频和视频内容。
为了为他们提供更好的体验，请为您使用的任何音频提供成绩单，并在视频内容中添加易于阅读的字幕。
确保内容易于理解
易于理解的内容没有无法解释的行话和技术短语。
假设您经营一家分析公司，并且是数据科学领域的专家。但您的用户可能包括当前或潜在的客户和求职者。这些人可能没有足够的技术知识来理解塞满了行话的内容。
我们是一个分析专家团队，擅长汇总所有可用仓库的数据，检测异常，对大量数据进行批量处理，并应用强大的算法来满足您的业务需求。
上面的文本充满了不是每个人都能理解的分析术语。这会让你失去访客——如果他们不明白你做什么，他们为什么要投资你？
查看以下同一文本的简化版本，该版本使用每个人都能理解的更平易近人的术语：
我们是一个专家团队，专门从所有可用来源收集数据，识别该数据中的错误，在更短的时间内以更高的准确性处理大量数据，并做出预测来解决您的业务需求。
确保您的内容以每个人都能轻松理解的语言实现其目的。
结论
无障碍网站对于良好的用户体验至关重要。一个可访问的网站不仅可以吸引新用户，还可以吸引老用户一遍又一遍地返回。
在网站可访问性方面，还有很多工作要做。但有了这些技巧和窍门，可以显著改善网站或应用程序的用户体验。
