Accessibility 无障碍支持

Michael18811380328

已于 2024-03-11 17:48:25 修改

阅读量896

点赞数 22

分类专栏： CSS web前端用户体验文章标签： Accessibility 前端无障碍

于 2024-03-06 14:03:23 首次发布

本文链接：https://blog.csdn.net/weixin_41697143/article/details/136500430

版权

web前端同时被 3 个专栏收录

62 篇文章 1 订阅

订阅专栏

CSS

33 篇文章 0 订阅

订阅专栏

用户体验

16 篇文章 0 订阅

订阅专栏

Accessibility 无障碍支持

最近有国外客户重点提出，需要项目中的无障碍支持，这部分内容之前没有专门留意过，简单整理记录一下。

无障碍介绍

MDN 官方定义：

Web 无障碍涉及确保内容保持无障碍，无论访问 web 的人员或方式。
任何用户都可以使用其所有的功能和内容，特别是有身体或精神障碍的用户。

键盘鼠标和触摸屏用户，以及用户访问网络的任何其他方式，包括屏幕阅读器，都能够访问网站。
无论人们的听觉、视觉、身体或认知能力如何，应用程序都应该是可以理解和使用的。
网站也不应该造成伤害：像动画这样的 web 特性会导致偏头痛或癫痫发作。

无障碍评估测试方法

可以使用谷歌浏览器或者火狐浏览器进行评估测试

谷歌浏览器测试

1、打开需要测试的网页（例如 www.baidu.com），右键空白处，点击菜单“检查”，打开控制台，切换到 Lighthouse 面板。
在这里插入图片描述

2、选择设备（例如 Desktop）和策略（Accessibility），点击右侧分析（Analyze page load）按钮。

3、等待浏览器检测一段时间，控制台给出整体 Accessibility 评分和具体问题描述。开发测试人员根据报告更改页面的无障碍属性。

例如 www.baidu.com 结果是 73分（橙色，不满足要求）

在这里插入图片描述

MDN 官方网页都在 90 分以上（绿色，基本满足要求）

在这里插入图片描述

直接查看某个元素，也可以看到详细无障碍属性。

例如下面的“更多”按钮，对比度 15.42 满足要求，键盘可聚焦性满足要求，name 和 role 属性存在。

在这里插入图片描述

火狐浏览器测试

火狐浏览器和谷歌浏览器交互类似，也可以参考

1、打开需要测试的网页（例如 www.baidu.com），右键空白处，点击菜单“检查”，打开控制台，切换到“无障碍环境”，点击检查问题，可以显示具体每个有问题的节点。

例如下图中，浅灰色文字和背景色的对比度是 1.92，不符合 WCAG （Web Content Accessibility Guidelines）无障碍文本标准。

在这里插入图片描述

2、点击模拟，可以测试视觉正常，或者色盲状况下的网页颜色效果，可以视觉上定性判断网页的无障碍支持。例如 cloud.seatable.cn 支持红色盲用户的使用。

在这里插入图片描述

无障碍改进策略

无障碍改进策略，包括功能层面的文本内容、页面布局、替代文本，音频视频格式，代码层面的 HTML、CSS、JS 、WAI_ARIA、多媒体、移动端等方面。改进后，期望的定量评分达到 90 分。

文本标签

具体文本标签的状态和属性，参考 https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA/Attributes

aria-label

aria-label 属性用来给当前元素加上的标签描述，接受字符串作为参数，是用不可视的方式给元素加 label。aria-label 属性可以用在任何典型的 HTML 元素中，并不需要配合特定的 ARIA role 才能使用。

实际场景：某个图标按钮链接，使用 aria-label 表示对应的功能，使用最多。

<a href="xxx" title={gettext('List')} aria-label={gettext('List')}></a>

在这里插入图片描述

aria-hidden

aria-hidden=“true” 把该元素和它的所有子元素从无障碍 dom 树上移除。这样做可以通过隐藏下列内容来提升使用辅助技术的用户体验：

纯装饰性的内容，如图标、图片
重复的内容，如重复的文本
屏幕外或被折叠的内容，如菜单

<Link to={'shared-with-ocm/'}>
    <span aria-hidden="true"></span>
    <span className="nav-text">{gettext('Shared from other servers')}</span>
</Link>

实际场景：seahub 首页中，左侧图标是纯修饰性文本，没有必要展示到盲人阅读器上。

在这里插入图片描述

aria-expanded

在元素上设置aria-expanded属性，以指示控件是展开还是折叠，以及受控元素是显示还是隐藏。通常使用在下拉菜单中。

实际场景1：

<Dropdown isOpen={this.state.isOpMenuOpen} toggle={this.toggleOpMenu}>
  <DropdownToggle
    tag="i"
    data-toggle="dropdown"
    title={gettext('More operations')}
    aria-label={gettext('More operations')}
    aria-expanded={this.state.isOpMenuOpen}
  />
  <div>xxx
</Dropdown>

实际场景2：

<Fragment>
  <button
    aria-haspopup="true"
    aria-expanded={this.state.isUploadMenuShow}
    aria-controls="upload-menu"
>{gettext('Upload')}</button>
  {this.state.isUploadMenuShow && (
    <div className="menu dropdown-menu" role="menu" id="upload-menu">
    </div>
  )}
</Fragment>

例如 seahub 中资料库下拉按钮的图标，点击后下拉菜单展开，那么使用 aria-expanded = true 表示受控的菜单是展开状态。

在这里插入图片描述

aria-selected

aria-selected属性表示各种小部件的当前“选定”状态。

实际场景：共享对话框中，点击左侧某个 Nav 那么 aria-selected = true 表示当前组件是选定状态。

<Nav>
  <NavItem role="tab" aria-selected={activeTab === 'userPermission'} aria-controls="user-perm-panel">
    <NavLink>
      {gettext('User Permission')}
    </NavLink>
  </NavItem>
</Nav>

在这里插入图片描述

aria-controls

全局 aria-controls 属性标识一个或多个元素，该元素的内容或存在由设置该属性的元素控制。

    <Nav>
      <NavItem role="tab"aria-selected={activeTab === 'userPermission'} aria-controls="user-perm-panel">
        <NavLink></NavLink>
      </NavItem>
    </Nav>
    <TabContent activeTab={this.state.activeTab}>
      <TabPane tabId="userPermission" role="tabpanel" id="user-perm-panel">
      </TabPane>
    </TabContent>

在这里插入图片描述

aria-haspopup

aria-haspopup属性指示交互式弹出元素的可用性和类型，该元素可以由设置该属性的元素触发。

<DropdownToggle
  title={gettext('More operations')}
  aria-label={gettext('More operations')}
  data-toggle="dropdown"
  aria-expanded={this.state.isItemMenuShow}
  aria-haspopup={true}
/>

在这里插入图片描述

aria-owns

当DOM层次结构不能用于表示父元素与其子元素之间的视觉、功能或上下文关系时，aria-owns属性标识一个或多个元素。

例如知乎的消息图标和弹框，在 DOM 层级上不是父元素和子元素的关系，那么使用 aria-owners 表示所属关系。

在这里插入图片描述

aria-live

全局aria-live属性表示元素将被更新，并描述用户代理、辅助技术和用户可以从活动区域期待的更新类型。

assertive

Indicates that updates to the region have the highest priority and should be presented to the user immediately. 指示对区域的更新具有最高优先级，并且应立即呈现给用户。

off (default)

Indicates that updates to the region should not be presented to the user unless the user is currently focused on that region. 指示除非用户当前专注于该区域，否则不应向用户显示对该区域的更新。

polite

Indicates that updates to the region should be presented at the next graceful opportunity, such as at the end of speaking the current sentence or when the user pauses typing. 指示应在下一次适当的机会（如在说出当前句子的末尾或用户暂停键入时）显示对区域的更新。

例如知乎点赞按钮，使用 aria-live=“polite” 表示下一次机会时展示区域更新

在这里插入图片描述

aria-autocomplete

aria autocomplete属性指示输入文本是否可以触发对组合框、搜索框或文本框的用户预期值的一个或多个预测的显示，并指定如果进行预测将如何显示。

none (default)

When a user is providing input, no automatic suggestion is displayed.

inline

aria-autocomplete=“inline” text suggesting one way to complete the provided input may be dynamically inserted after the caret.

list

aria-autocomplete=“list” When a user is providing input, an element containing a collection of values that could complete the provided input may be displayed.

both

aria-autocomplete=“both” an input to offer both models at the same time. When a user is providing input, an element containing a collection of values that could complete the provided input may be displayed. If displayed, one value in the collection is automatically selected, and the text needed to complete the automatically selected value appears after the caret in the input.

例如知乎的搜索框，输入文本后，会触发下拉列表展开，aria-autocomplete=‘list’

在这里插入图片描述

aria-activedescendant

当焦点集中在组合小部件、组合框、文本框、组或应用程序上时，aria-activesubscription属性标识当前活动的元素。

在这里插入图片描述

HTML 标签属性

user-scalable

很多网页设置了 user-scalable=no 属性，对于那些依靠屏幕放大率来正确查看网页内容的低视力用户来说，禁用缩放是个问题。

Disabling zooming is problematic for users with low vision who rely on screen magnification to properly see the contents of a web page.

user-scalable：Allows the device to zoom in and out. Values are yes or no. User-scalable assigned to 1.0 means the website is allowing the user to zoom in or zoom out. But if you assign it to user-scalable=no, it means the website is not allowing the user to zoom in or zoom out.

user-scalable: 允许设备放大和缩小。用户可伸缩性指定为 true，意味着网站允许用户放大或缩小。但如果设置为缩放=false，则意味着网站不允许用户放大或缩小。

有的国内开发者反馈，移动端如果不设置这个属性，可能出现输入框获取焦点时，自动缩放页面等情况（实际测试苹果手机自动缩放，安卓手机没有自动缩放）。

浏览器兼容性：苹果为了提高 Safari 中网站的辅助功能，屏蔽了 Meta 下的 user-scalable=no 功能。Safari 始终允许用户缩放网页，user-scalable 设置无效（What’s New in Safari 10.0 Accessibility Pinch-to-zoom is always enabled for all users. The viewport setting for user-scalable is ignored. ）。

其他网站的情况：

1、PC 和移动端是一个网页，都没有设置 user-scalable 属性（user-scalable 默认是 true，允许用户缩放网页）。主要是 reactstrap、MDN 官方网站、北京市人民政府、airtable 等。

2、PC 和移动端是两个网页，移动端有 user-scalable = no 不允许缩放, PC 端 user-scalable = yes 允许缩放，主要是京东、淘宝，知乎等。

解决：

1、PC 和移动端是一个网页，牺牲一部分 PC 端无障碍支持，都是 user-scalable = no。目前使用这个解决方案。

2、PC 和移动端是一个网页，设置无障碍支持，都是 user-scalable = yes，部分移动端自动缩放。

3、PC 和移动端写不同的网页，设置不同的 user-scalable 属性。

<meta name="viewport" content="user-scalable=no" />

在这里插入图片描述

国外的 Airtable 和国内的知乎等网页中，没有加这个属性。

在这里插入图片描述

Role

HTML 中 Role 属性的含义

Role 定义了内容的语义，允许屏幕阅读器和其他工具以符合用户对该类型对象的期望的方式来展示和支持与该对象的互动。roles 以 role=“role_type” 的形式添加到 HTML 元素中，其中 role_type 是 ARIA 规范中的一个角色名称。

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes

https://developer.mozilla.org/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls

https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA/Roles/button_role

实际使用，如果一个 span div 可以点击（类似按钮的交互），那么可以加一个 role='button 的属性，便于屏幕阅读器进行展示和互动。

文本对比度

例如表单页面中，深灰色文本和浅灰色背景色，对比度 2.73 不符合无障碍文本标准。

W3C建议对正文文本和图像文本的对比度应满足以下要求：

小文本的背景对比度应该要达到 4.5:1
大文本的对比度应该至少是与背景的 3:1

具体文字颜色和对比度，参考字体颜色规范文档，这是我的另一篇博客链接 https://editor.csdn.net/md/?articleId=136500236

这里对比度场景较多，可能要设计师改动整体样式。

键盘事件

W3C建议，可点击元素（按钮输入框）必须可以被聚焦，且有交互式语义。

当前表单中，通过 TAB 直接打开对应的编辑器（例如签名面板）而不是先让按钮获取焦点，然后再打开签名面板。这次先改动明显的键盘事件问题。

总结

1、国外网站中基本支持无障碍，我测试 MDN github airtable 等网站都支持比较好。

2、国内网站中，支持无障碍的水平参差不齐，例如知乎做的就非常好，百度首页就做的一般，还有很多改进空间。

参考资料

Web Accessibility Initiative：https://www.w3.org/WAI/standards-guidelines/wcag/
什么是无障碍：https://developer.mozilla.org/zh-CN/docs/Learn/Accessibility/What_is_accessibility
Lighthouse 无障碍功能评分：https://developer.chrome.com/docs/lighthouse/accessibility/scoring?utm_source=lighthouse&utm;_medium=devtools&hl;=zh-cn

Michael18811380328

关注

22
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
Accessibility 无障碍支持

Web 无障碍涉及确保内容保持无障碍，无论访问 web 的人员或方式。任何用户都可以使用其所有的功能和内容，特别是有身体或精神障碍的用户。键盘鼠标和触摸屏用户，以及用户访问网络的任何其他方式，包括屏幕阅读器，都能够访问网站。无论人们的听觉、视觉、身体或认知能力如何，应用程序都应该是可以理解和使用的。网站也不应该造成伤害：像动画这样的 web 特性会导致偏头痛或癫痫发作。国外网站中基本支持无障碍，我测试 MDN github airtable 等网站都支持比较好。
复制链接

扫一扫