为确保您的网站可供尽可能多的用户访问,让网页适应不同屏幕尺寸只是其中一种方式。下面列出了一些您应该注意的其他因素。
色觉缺陷
不同的人感知颜色的方式不尽相同。红色盲的人不会将红色视为一种独特的颜色。绿色盲代表绿色盲。对于蓝色盲的人,蓝色为蓝色。
一些工具可以让你大致了解你的配色方案如何呈现给具有不同色觉的用户。
Firefox 的“无障碍”标签页包含一个标有模拟的下拉菜单和一列选项。
![模拟红色盲(无法感知红色)。](https://web.developers.google.cn/static/learn/design/accessibility/image/simulated-protanopia-re-1d45e86addd67.png?authuser=8&hl=sl)
![模拟蓝色盲(无法感知蓝色)](https://web.developers.google.cn/static/learn/design/accessibility/image/simulated-tritanopia-bl-84fb927cae768.png?authuser=8&hl=sl)
在 Chrome 开发者工具中,您可以通过“渲染”标签页模拟视觉缺陷。
这些工具是特定于浏览器的工具。您还可以在操作系统级别模拟不同的视觉类型。
在 Mac 上,转到:
- 系统偏好设置
- 无障碍
- 显示
- 色彩滤镜
- 启用色彩滤镜
选择其中一个选项。
一般来说,只依靠颜色来区分不同元素并不是一个好主意。例如,您可以(也应该)为您的链接使用与周围文本不同的颜色。但是,您还应应用一些其他样式指示器,例如给链接加下划线或加粗显示。
a { color: red; }
a { color: red; font-weight: bold; }
色彩对比度
某些颜色组合可能会导致问题。如果前景色和背景色之间的反差不够大,文本就会难以阅读。色彩对比度低是网络上最常见的无障碍功能问题之一,但幸运的是,您可以在设计过程的早期发现该问题。
您可以使用下面这些工具来测试文字和背景颜色的对比度:
- tota11y 是一个可添加到浏览器工具栏中的小书签。
- VisBug 是一款浏览器扩展程序,适用于所有主流桌面浏览器。
- Firefox 的无障碍功能检查器可以检查视觉对比度问题。
- 您还可以使用 Chrome 开发者工具发现和修正低对比度文本。
- 在 Microsoft Edge 浏览器中,您可以使用颜色选择器测试文本颜色对比度。
最好在 CSS 中始终同时声明 color
和 background-color
。不要假定背景颜色是浏览器的默认背景颜色。用户可以并且确实可以更改浏览器使用的颜色。
body { color: black; }
body { color: black; background-color: white; }
高对比度
有些用户将其操作系统设置为使用高对比度模式。您可以在自己的操作系统上尝试执行此操作。
在 Mac 上,转到:
- 系统偏好设置
- 无障碍
- 显示
选择相应选项,以提高对比度。
有一项媒体功能可以检测是否有人启用了高对比度模式。您可以针对 prefers-contrast
媒体功能查询以下三个值:no-preference
、less
和 more
。您可以使用这些信息来调整网站的调色板。
用户也可以在操作系统中设置使用反色的偏好设置。
在 Mac 上,转到:
- 系统偏好设置
- 无障碍
- 显示
选择反转颜色选项。
请确保您的网站仍然适合使用反色浏览的用户。请留意框阴影,这些阴影可能需要在颜色反转时进行调整。
字号
用户可在浏览器中调整颜色并不是唯一可调整的内容,用户还可以调整默认字体大小。随着视力下降,他们可能会调整浏览器或操作系统中的默认字体大小,随着时间的推移,其数量会越来越多。
您可以使用相对字体大小来调整这些设置。避免使用 px
等单位。请改用相对单位,例如 rem
或 ch
。
请尝试更改浏览器中的默认文字大小设置。您可以在浏览器偏好设置中执行此操作。或者,您也可以在访问网页时执行放大操作。如果默认字体大小增大 200%,您的网站是否仍能正常运行?400% 怎么样?
如果某位用户通过桌面设备访问您的网站,并且字体大小会放大到 400%,那么应该与通过小屏幕设备访问您网站的用户具有相同的布局。
![清除左点 com。](https://web.developers.google.cn/static/learn/design/accessibility/image/clearleft-dot-com-5486d64205cac.png?authuser=8&hl=sl)
键盘导航
并非每个人都会使用鼠标或触控板浏览网页。键盘是另一种浏览网页的方式,因为 tab
键特别有用。用户可以快速从一个链接或表单字段切换到另一个链接或表单字段。
无论用户使用鼠标、触控板还是键盘,使用 :hover
和 :focus
伪类设置样式的链接将显示这些样式。使用 :focus-visible
伪类为链接设置样式,以便仅使用键盘导航操作。您可以使这些样式更加醒目。
a:focus,
a:hover {
outline: 1px dotted;
}
a:focus-visible {
outline: 3px solid;
}
当用户从链接切换到链接或者从表单字段切换到表单字段时,这些元素将按照它们在文档结构中出现的顺序获得焦点。这也应与视觉顺序一致。
请谨慎处理 CSS order
属性。您可以将它与 Flexbox 和网格结合使用,按照元素在 HTML 中的顺序以不同的视觉顺序放置元素。这项功能非常强大,但可能会让用户在使用键盘进行导航时感到困惑。
使用键盘上的 tab
键测试您的网页,确保按 Tab 键顺序合理。
在 Firefox 浏览器开发者工具的无障碍面板中,有一个显示 Tab 键键顺序选项。启用此功能会在每个可聚焦元素上叠加数字。
减少动作
动画和动作是让网页设计变得生动的绝佳方式。但对于某些人来说,这些动作可能会非常难以辨别,甚至会导致恶心。
有一个功能查询可以传达用户是否希望减少运动。它称为 prefers-reduced-motion
。
SS 过渡或动画的任何位置包含它。
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
影响。也可以使用过渡不透明度和淡入淡出。动作减少并不一定意味着没有动画。
语音
用户的网络体验各不相同。并非所有人都在屏幕上显示您的网站。屏幕阅读器等辅助技术会将屏幕上输出的信息转换成语音内容。
屏幕阅读器支持各种应用,包括网络浏览器。为了让网络浏览器能够与屏幕阅读器有效通信,当前正在访问的网页需要有用的语义信息。
之前,您了解了仅限图标的按钮如何添加一个属性,以便为视力正常的用户指定按钮的用途。这只是强大基础 HTML 重要性之一。
标题
请合理使用 <h1>
、<h2>
、<h3>
等标题。屏幕阅读器会使用这些标题生成文档大纲,您可使用键盘快捷键浏览大纲。
<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>
<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>
结构
使用 <main>
、<nav>
、<aside>
、<header>
和 <footer>
等地标元素来组织页面内容。屏幕阅读器用户便可直接跳到这些地标。
<div class="header">...</div> <div class="navigation">...</div> <div class="maincontent">...</div> <div class="sidebar">...</div> <div class="footer">...</div>
<header>...</header> <nav>...</nav> <main>...</main> <aside>...</aside> <footer>...</footer>
表单
请确保每个表单字段都有一个关联的 <label>
元素。您可以使用 <label>
元素中的 for
属性和表单字段上相应的 id
属性,将标签与表单字段相关联。
<span class="formlabel">Your name</span> <input type="text">
<label for="name">Your name</label> <input id="name" type="text">
图像
始终使用 alt
属性提供图片的文字说明。
<img src="dog.jpg">
<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">
如果图片仅用于展示,您仍应添加 alt
属性,但可以为其指定空值。
<img src="texture.png">
<img src="texture.png" alt="">
Jake Archibald 发表了一篇关于撰写优秀的alt
文字的文章。
链接
尽量在链接内提供描述性文字。请避免使用“点击此处”或“更多”这样的措辞。
<p>To find out more about our latest offers, <a href="/offers.html">click here</a>.</p>
<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 Application”(可访问的富互联网应用)。借助其词汇,您可以在没有合适的 HTML 元素可用时提供语义信息。
如果您需要创建尚未作为 HTML 元素提供的界面元素,请熟悉 ARIA。
使用 JavaScript 添加的定制化功能越多,您就越需要了解 ARIA。如果您坚持使用原生 HTML 元素,则可能不需要任何 ARIA。
如果可以的话,请通过屏幕阅读器的真实用户进行测试。这不仅能让您更好地了解用户浏览网页的方式,还能在设计无障碍功能时避免凭空猜测。
让真人进行测试是揭示您可能做出的任何假设的绝佳方式。在下一单元中,您将了解用户与网站互动的不同方式,在这一方面,人们也很容易做出假设。
检查您的掌握程度
测试您对无障碍功能知识的掌握情况
借助 CSS,开发者可以覆盖字体大小等用户偏好设置,最坏的情况是:
body { font-size: 12px; }
就足够了。为避免覆盖用户的字体大小偏好设置,可以使用?
px
。rem
。世界上每个人都会使用鼠标。
alt 属性为空的图片有什么作用?