-
VisBug google 扩展非常好用
一般来说，纯粹依靠颜色来区分不同的元素并不是一个好主意。 例如，您应该将链接设置为与周围文本不同的颜色。 但是您还应该应用一些其他样式指示器，例如在链接下划线或将它们加粗。
Don't
a { color: red;}
Do
a { color: red; font-weight: bold;}
Color contrast
一些颜色组合会引起麻烦。 如果前景颜色和背景颜色之间没有足够的对比度，文本就会变得难以阅读。 颜色对比度差是网络上最常见的可访问性问题之一，但幸运的是，您可以在设计过程的早期发现这一问题。
以下是一些可用于测试文本和背景颜色对比度的工具：
- Firefox 的辅助功能检查器 可以检查视觉对比度问题。
- 您还可以使用 Chrome DevTools 发现并修复低对比度文本。
- 在 Microsoft 的 Edge 浏览器中，您可以使用颜色选择器测试文本颜色对比度 .
始终在 CSS 中同时声明 color 和 background-color 是个好主意。 不要假设背景颜色是浏览器的默认颜色。 人们可以而且确实会更改浏览器使用的颜色。
Don't
body { color: black;}
Do
body { color: black; background-color: white;}
Font size
人们不仅可以在浏览器中调整颜色，还可以调整默认字体大小。 随着他们的视力下降，他们可能会调整浏览器或操作系统中的默认字体大小，随着时间的推移增加数字。
您可以使用相对字体大小来响应这些设置。 避免使用像 px 这样的单位。 请改用 rem 或 ch 等相对单位。
尝试更改浏览器中的默认文本大小设置。 您可以在浏览器首选项中执行此操作。 或者您可以在访问网页时通过放大来执行此操作。如果默认字体大小增加 200%，您的网站是否仍能正常工作？ 400%怎么样？
在桌面计算机上访问您的网站且字体大小增加到 400% 的人应该获得与在小屏幕设备上访问您的网站的人相同的布局。
Headings
明智地使用<h1>、<h2>、<h3> 等标题。 屏幕阅读器使用这些标题来生成可以使用键盘快捷键导航的文档大纲。
Don't
<div class="heading-main">Welcome to my page</div>
<div class="heading-secondary">About me</div>
<div class="heading-tertiary">My childhood</div>
<div class="heading-secondary">About this website</div>
<div class="heading-tertiary">How this site was built</div>
Do
<h1>Welcome to my page</h1>
<h2>About me</h2>
<h3>My childhood</h3>
<h2>About this website</h2>
<h3>How this site was built</h3>
Structure
使用<main>、<nav>、<aside>、<header> 和<footer> 等标志性元素来构建页面内容。 屏幕阅读器用户可以直接跳转到这些地标。
Don't
<div class="header">...</div>
<div class="navigation">...</div>
<div class="maincontent">...</div>
<div class="sidebar">...</div>
<div class="footer">...</div>
Do
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>
Forms
确保每个表单域都有一个关联的<label>元素。 您可以使用 <label> 元素上的 for 属性和表单字段上相应的 id 属性将标签与表单字段相关联。
Don't
<span class="formlabel">Your name</span><input type="text">
Do
<label for="name">Your name</label><input id="name" type="text">
Images
始终使用 alt 属性提供图像的文本描述。
Don't
<img src="dog.jpg">
Do
<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">
如果图像纯粹是展示性的，您仍应包含 alt 属性，但您可以为其指定一个空值。
Don't
<img src="texture.png">
Do
<img src="texture.png" alt="">
Jake Archibald 发表了一篇关于编写出色的 alt 文本 的文章。
尝试在链接中提供描述性文字。 避免使用“点击此处”或“更多”等短语。
Don't
<p>To find out more about our latest offers, <a href="offers.html">click here</a>.</p>
Do
<p>Find out more about <a href="offers.html"> our latest offers</a>.</p>
ARIA
使用合理的语义 HTML 将使您的网页更容易被屏幕阅读器等辅助技术以及语音助手等其他音频输出访问。
一些没有相应 HTML 元素的界面小部件：轮播、选项卡、手风琴等。 这些需要结合使用 HTML、CSS、JavaScript 和 ARIA 从头开始构建。
ARIA 代表 Accessible Rich Internet Applications。 它的词汇表允许您在没有合适的 HTML 元素可用时提供语义信息。
针对自定义一些不能被屏幕阅读器识别的结构，建议加上role.
Keyboard navigation
并非每个人都使用鼠标或触控板来浏览网页。 键盘是浏览页面的另一种方式，其中 Tab 键特别有用。 用户可以从一个链接或表单域快速移动到下一个。
使用 :hover 和 :focus 伪类设置样式的链接将显示这些样式，无论用户使用的是鼠标、触控板还是键盘。 使用 :focus-visible 伪类来为键盘导航设置链接样式。 您可以使这些样式格外引人注目。
Reduced motion
动画和动作是让网页设计栩栩如生的绝佳方式。 但对于某些人来说，这些动作可能会让人迷失方向，甚至会引起恶心。
有一个功能查询可以传达用户是否更喜欢较少的运动。 它被称为更喜欢减少运动。 在您使用 CSS 过渡或动画的任何地方包含它。
a:hover {
transform: scale(150%);
}
@media (prefers-reduced-motion: no-preference) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
}
prefers-reduced-motion 媒体查询专门针对屏幕上的移动。 如果您在不应受 prefers-reduced-motion 影响的元素颜色上使用过渡。 过渡不透明度和交叉淡入淡出也可以。 减少运动并不一定意味着没有动画。
Voice
人们对网络的体验不同。 不是每个人都在屏幕上看到您的网站。 屏幕阅读器等辅助技术将输出到屏幕的信息转换为口语。
屏幕阅读器适用于各种应用程序，包括网络浏览器。 为了让 Web 浏览器与屏幕阅读器进行有用的通信，当前正在访问的网页中需要有有用的语义信息。
之前，您了解了纯图标按钮如何需要包含一个属性来为视力不佳的用户指定按钮的用途。 这只是强大的基础 HTML 重要性的一个例子。