添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
个性的火柴  ·  使用 Albumentations ...·  2 天前    · 
体贴的煎饼  ·  helm和opreator ...·  1 年前    · 
重感情的饭卡  ·  python - Show string ...·  1 年前    · 
失望的作业本  ·  DEPRECATE Pragma·  2 年前    · 

不同的人对颜色的感知不同。红色盲患者无法将红色视为一种独特的颜色。绿色盲患者无法感知绿色。对于蓝色盲患者,它是蓝色的。

有些工具可以让您大致了解您的配色方案在不同色觉类型的用户眼中是如何呈现的。

Firefox 的“无障碍”标签页 包含一个标签为 模拟 的下拉菜单,其中包含一个选项列表。

色彩对比度

某些颜色组合可能会导致问题。如果前景色和背景色之间的对比度不够,文字就会难以辨认。色彩对比度不佳是 Web 上最常见的无障碍功能问题之一,但幸运的是,您可以在设计流程的早期发现此类问题。

以下是一些可用于测试文本和背景颜色对比度的工具:

  • VisBug 是一款适用于所有主要桌面浏览器的浏览器扩展程序。
  • Firefox 的无障碍功能检查器 可以检查视觉对比度问题。
  • 您还可以 使用 Chrome 开发者工具发现并修复对比度较低的文本
  • 在 Microsoft Edge 浏览器中,您可以 使用颜色选择器测试文本颜色对比度
  • 建议您始终在 CSS 中将 color background-color 一起声明。请勿假定背景颜色会是浏览器的默认颜色。用户可以更改浏览器使用的颜色,而且确实会更改。

    body {
      color: black;
    

    用户可以在浏览器中调整的不仅仅是颜色,还可以调整默认字体大小。随着视力下降,他们可能会调整浏览器或操作系统中的默认字体大小,随着年龄的增长而不断调高字号。

    您可以使用相对字号来响应这些设置。避免使用 px 等单位。请改用 remch 等相对单位。

    请尝试更改浏览器中的默认文本大小设置。您可以在浏览器偏好设置中执行此操作。或者,您也可以在访问网页时通过放大来执行此操作。如果将默认字体大小增大 200%,您的网站是否仍能正常运行?400% 怎么样?

    如果用户在桌面设备上访问您的网站,并将字号调高到 400%,则应该会看到与在小屏幕设备上访问您的网站的用户相同的布局。

    并非所有用户都使用鼠标或触控板来浏览网页。键盘是浏览网页的另一种方式,其中 tab 键特别有用。用户可以快速从一个链接或表单字段移动到下一个。

    无论用户使用的是鼠标、触控板还是键盘,使用 :hover:focus 伪类设置样式的链接都会显示这些样式。使用 :focus-visible 伪类为链接设置样式,以便仅通过键盘导航。您可以让这些样式更加醒目。

    a:focus,
    a:hover {
      outline: 1px dotted;
    a:focus-visible {
      outline: 3px solid;
    @media (prefers-reduced-motion: no-preference) {
        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>

    使用合理的语义 HTML 可让屏幕阅读器等辅助技术以及语音助理等其他音频输出设备更轻松地访问您的网页。

    某些没有对应 HTML 元素的界面 widget:轮播界面、标签页、折叠式布局等。需要从头开始使用 HTML、CSS、JavaScript 和 ARIA 构建。

    ARIA 是“Accessible Rich Internet Applications”(具有无障碍功能的丰富互联网应用)的缩写。借助其词汇,您可以在没有合适的 HTML 元素时提供语义信息。

    如果您需要创建尚未作为 HTML 元素提供的界面元素,请熟悉 ARIA

    您使用 JavaScript 添加的自定义功能越多,就越需要了解 ARIA。如果您坚持使用原生 HTML 元素,则可能不需要任何 ARIA。

    请尽可能使用屏幕阅读器的真实用户进行测试。这不仅有助于您更好地了解他们如何浏览网页,还能让您在设计时无需猜测,就能考虑到无障碍功能。

    与真实用户进行测试是发现您可能做出的任何假设的绝佳方式。在下一单元中,您将了解用户与您的网站互动的方式,这也是一个很容易做出假设的方面。

    检查您的理解情况

    测试您对无障碍功能的了解

    在最糟糕的情况下,使用 CSS 时,开发者可以覆盖用户偏好设置(例如字体大小)吗?

    只需使用 body { font-size: 12px; } 即可。
    用户偏好设置具有强大影响力,但无法提供完全控制。

    为避免覆盖用户的字体大小偏好设置,请使用?

    绝对单位,例如 px
    使用时,这些字体不会考虑用户的字体大小偏好设置。
    rem 等相对单位。
    这样,开发者就可以构建包含用户字体大小偏好的长度。

    世界上每个人都在使用鼠标。

    有些用户使用语音、键盘、游戏手柄、屏幕阅读器或其他方式进行互动。
    除了常见的鼠标外,还有许多替代方案。

    带有空 alt 属性的图片会产生什么影响?

    浏览器会自动为用户添加这些权限。
    并非任何浏览器的功能。
    图片被视为呈现性图片。
    假设图片对于内容的使用不重要。
    向屏幕阅读器读出“空字符串”
    事实并非如此。
    Nothing
    肯定会发生什么。

    如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。

    最后更新时间 (UTC):2021-12-23。

    [[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2021-12-23。"],[],[],null,[]]