WAI-ARIA —— 让盲人更清楚我们的网页

2024-03-20 19:20
文章标签 网页 清楚 盲人 wai aria

本文主要是介绍WAI-ARIA —— 让盲人更清楚我们的网页,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

我曾经根据网上一些流行的无障碍建议对博客进行改进,希望能方便视障人士浏览我的博客,但经过一番“改进”之后,我发现这些建议并不完全奏效,用 NVDA 实际测试后,网站的无障碍可访问性并没有得到明显提升。最近几天,我重新思考了无障碍网页的设计,最终得到一些比较有效的方法,在这里整理一下!

一. 视障人士是如何浏览网页的?

要想让盲人清楚我们的网页,首先要了解盲人是如何浏览网页。如大家熟知,视障人士是通过屏幕阅读器来感知网页,但屏幕阅读器并非如网上的一些说法那样,是一个纯文本浏览器。事实上,屏幕阅读器就是一个桌面读取软件,可以直接读取桌面并播报其内容。因此,我们平时使用什么浏览器,视障人士也可以使用这些浏览器,也因为这样,屏幕阅读器并不会禁用网页中的 JavaScript 和 CSS。所以,开发一个适用于视障人士的网页与开发一个普通网页并不会有本质上的区别。

但是,视障人士浏览网页时确实有些不同,由于无法直接看到页面,他们会采取用移动鼠标,然后根据屏幕阅读器的语音提示告知鼠标当前的内容的方式来浏览页面。而且,更多的时候,他们会使用 tab 键改变焦点,从而按一定顺序浏览页面。因此,作为一个开发者,如果想让视障人士更加清楚我们网页的内容,我们需要做的就是在网页上添加屏幕阅读器认可的标识。而标识的工具正是 WAI-ARIA 规范。

二.什么是 WAI-ARIA ?

WAI-ARIA 是一个为残疾人士等提供无障碍访问动态、可交互 Web 内容的技术规范,为浏览器、媒体播放器、辅助技术的开发人员以及 Web 内容开发者定义了可以获得更广泛跨平台可访问性的方法。

更为直接地说,WAI-ARIA 可以标识出网页中的内容及其变化,并让屏幕阅读器识别出然后告知盲人。而且幸运的是,WAI-ARIA 被 IE8+ 以及所有现代浏览器支持。

根据 W3C 的完整规范,WAI-ARIA 具有大量的属性,在开发中由于实际情况的限制,开发者很难使用全部的属性。实际上,使用几个常用而重要的属性就能让视障人士更清楚我们的网页了。

三. 6条建议

WAI-ARIA 的属性有很多,网上也有很多优化建议,但并不完全适用,于是我经过了两天的测试总结出以下比较实用的三点基本建议和三条补充建议。

1. 使用 role="button" 标记出起按钮作用的超链接

role 属性用于标识出网页的模块或组件,如 main 为主要内容区,banner 为横幅区,toolbar 为工具栏等。在前端开发中,常常使用 a 标签模拟按钮,这种起按钮作用的链接,必须标识 role="button" 来告知屏幕阅读器把它看作按钮而不是超链接。

关于这一点,在我以前的文章《提高模拟按钮的可访问性》中已经从可访问性的角度作出详细说明。在使用 NVDA 测试的过程中,role="button" 起了很大的作用。如果一个起按钮作用的链接被标识为 button 组件,那么 NVDA 会告知用户这是一个按钮。相反,如果一个链接没有被标识为 button 组件,那么 NVDA 会直接告知用户这是一个链接,但用户点击这个链接后,由于开发者会为作为按钮用的链接阻止默认跳转,因此浏览器不会产生任何动作,这就给盲人带来极大的干扰。因此,为起按钮作用的链接标记 role="button" 非常必要。

2. 使用合适的语句填写 alt 属性

alt 属性用作图片无法加载或图片无法被用户识别(如盲人无法看到图片)的替代文本,因此合理的使用 alt 信息有助于于盲人认知网页中的图片内容。这一点也是相当重要的,它是盲人用户最方便、最直接的了解图片信息的途径。更具体地说,针对中文网站,合理地使用 alt 信息即:

  • alt 使用准确的中文描述,这段描述需要反映图片的基本意义,但不能冗长
  • 不必为无实质意义的图片添加 alt 信息,有些建议会为所有图片添加 alt 信息,但某些图片,如装饰性图片,添加 alt 信息只会为盲人带来干扰。无内容意义或网站引导作用的图片不必添加 alt 信息,如果不希望省略 alt 信息,可以添加 alt=""

3. 合理进行网页布局

合理进行网页布局是设计网页时最基本的要求之一,在对待盲人用户时显得尤为重要,由于无法直接看到网页的布局,他们只能通过挪动鼠标或 tab 键,再通过屏幕阅读器的报读了解页面,因此网页的合理布局显得尤为重要,这让他们更容易想象到网页的结构。合理的网页布局至少包括以下两点:

  • 页眉、导航栏、主内容、辅助内容、页脚等区域需要合理布局,有清楚的分隔
  • 分级标题(h1, h2, h3...)的合理使用,屏幕阅读器能识别不同分级的标题并告知盲人用户,因此合理使用标题能告知盲人网站的脉络

以上三条基本建议非常容易实施,却能使视障人士更为容易的了解我们的网页内容,接下来再介绍三条补充建议。

4. 使用更多的 WAI-ARIA 属性

role 属性,ARIA 属性和 ARIA 状态属性是 ARIA 的组成部分。

(1)role 属性

上面已经提到过 role 属性了,除了 button 外,它还有许多属性值,表示不同的模块或组件,例如:

1
2
3
4
5
6
7
8
9
10
11
12
< header class = "header" role = "banner" >
     < h1 >< a href = "./index.html" >网站标题</ a ></ h1 >
     < nav class = "navigation" role = "navigation" >
         < ul class = "sitemenu" role = "menubar" >
             < li class = "sitemenu_item" role = "menuitem" >< a href = "javascript:;" title = "第1项" >第1项</ a ></ li >
             < li class = "sitemenu_item" role = "menuitem" >< a href = "javascript:;" title = "第2项" >第2项</ a ></ li >
             < li class = "sitemenu_item" role = "menuitem" >< a href = "javascript:;" title = "第3项" >第3项</ a ></ li >
             < li class = "sitemenu_item" role = "menuitem" >< a href = "javascript:;" title = "第4项" >第4项</ a ></ li >
             < li class = "sitemenu_item" role = "menuitem" >< a href = "javascript:;" title = "第5项" >第5项</ a ></ li >
         </ ul >
     </ nav >
</ header >

这是一个兼具 HTML5 语义和 ARIA 可访问性的页头及导航结构,其中 role="banner" 代表横幅区,role="navigation" 代表导航模块,role="menubar" 代表菜单栏模块,role="menuitem" 代表菜单项,使用 NVDA 测试,开启“朗读查看器”,可以看到如下面的效果:

nvda

使用 tab 键切换焦点,NVDA 可以识别出一级标题、导航菜单、菜单项等信息,这让盲人用户可以更清楚地了解到他的焦点正处于什么元素上。

除此之外,role 属性还有一个重要的用途就是标明模拟元素,例如模拟的弹框,不会像 alert 的弹框那样被屏幕阅读器直接识别,这时可以用 role="alertdialog" 标出,屏幕阅读器会识别出这是一个警告弹出框。另外还有模拟的多选框、单选框等等,都可以用相应的 role 属性标出。

(2)ARIA 属性

ARIA 属性增强网页的功能描述,如 aria-autocomplete,配合 HTML5 中 autocomplete 表示出输入框的自动提示功能是否有提供;除了作为补充作用,ARIA 属性还可以增强普通的 HTML 元素,例如,aria-haspopup 属性可以定义一个有弹出菜单的按钮。

1
2
3
4
5
6
7
8
< li role = "menubar" aria-haspopup = "true" >
     < h3 id = "menu_title" >点击展开菜单</ h3 >
     < ul id = "menu_ohter" class = "menu_ohter" role = "menubar" aria-hidden = "true" >
         < li role = "menuitem" aria-checked = "true" >第1项</ li >
         < li role = "menuitem" aria-checked = "false" >第2项</ li >
         < li role = "menuitem" aria-checked = "false" >第3项</ li >
     </ ul >
  </ li >
1
.menu_other { display : none ; }
1
2
3
4
5
6
7
var menuTitle = document.getElementById( 'menu_title' ),
       menuOther = document.getElementById( 'menu_other' );
menuTitle.addEventListener( 'click' , function (){
     menuOther.style.display = 'block' ;
     menuOther.setAttribute( 'aria-hidden' , false ); // ARIA 属性支持 JavaScript 操作
});
(3)ARIA 状态属性

ARIA 状态属性则用于描述网页元素的各种状态,如 aria-checked 表明元素是否有被选中,上面有使用到的 aria-hidden 表示元素是否隐藏(不可见)。例如上面的例子中,动态改变 aria-hidden 则可以描述出元素的状态变化。

比较遗憾的是,ARIA 属性并没有得到很好的重视。从盲人的角度,更多的盲人并不大在意 ARIA 属性的各种反馈提示;从读屏软件的角度,目前国内的屏幕阅读器大多不支持 ARIA,因此上面的测试也是使用国外的免费屏幕阅读器 NVDA 进行;从浏览器的角度,不同的浏览器实际得到的效果也各有差异,根据我的试用,在 Chrome 和 Firefox 之中,Firefox 的效果更好,而且盲人用户也更喜欢使用 Firefox 和 IE 浏览网页,因此我们进行 ARIA 相关开发时可以尽量选择使用 Firefox 。

详细的 ARIA 属性可以参考 W3C 和《WAI-ARIA无障碍网页应用属性完全展示》。

5. 不必增加额外的 title 属性

虽然不大方便,但事实上,屏幕阅读器会无视 title 属性,更不会把 title 的值读出,因此很遗憾,为元素增加额外的 title 是徒劳的。

6. 不要滥用 tabindex 属性

tabindex 用于指定使用 tab 键改变焦点时的顺序,盲人用户已经形成自己的顺序逻辑,如果你的网页布局合理,那就不需要过多地使用 tabindex 属性,甚至为每个元素添加 tabindex ,这只会让盲人用户感到混乱!

补充资料:

  • NVDA官网
  • 8 Myths About How Blind People Use the Internet
  • I thought title text improved accessibility. I was wrong.
  • 创建无障碍的对话框

本文由 Kayo Lee 发表,本文链接:http://kayosite.com/wai-aria-and-html5-role.html

这篇关于WAI-ARIA —— 让盲人更清楚我们的网页的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/830489

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

禁止复制的网页怎么复制

禁止复制的网页怎么复制 文章目录 禁止复制的网页怎么复制前言准备工作操作步骤一、在浏览器菜单中找到“开发者工具”二、点击“检查元素(inspect element)”按钮三、在网页中选取需要的片段,锁定对应的元素四、复制被选中的元素五、粘贴到记事本,以`.html`为后缀命名六、打开`xxx.html`,优雅地复制 前言 在浏览网页的时候,有的网页内容无法复制。比如「360

火语言RPA流程组件介绍--浏览网页

🚩【组件功能】:浏览器打开指定网址或本地html文件 配置预览 配置说明 网址URL 支持T或# 默认FLOW输入项 输入需要打开的网址URL 超时时间 支持T或# 打开网页超时时间 执行后后等待时间(ms) 支持T或# 当前组件执行完成后继续等待的时间 UserAgent 支持T或# User Agent中文名为用户代理,简称 UA,它是一个特殊字符串头,使得服务器

起点中文网防止网页调试的代码展示

起点中文网对爬虫非常敏感。如图,想在页面启用调试后会显示“已在调试程序中暂停”。 选择停用断点并继续运行后会造成cpu占用率升高电脑卡顿。 经简单分析网站使用了js代码用于防止调试并在强制继续运行后造成电脑卡顿,代码如下: function A(A, B) {if (null != B && "undefined" != typeof Symbol && B[Symbol.hasInstan

(入门篇)JavaScript 网页设计案例浅析-简单的交互式图片轮播

网页设计已经成为了每个前端开发者的必备技能,而 JavaScript 作为前端三大基础之一,更是为网页赋予了互动性和动态效果。本篇文章将通过一个简单的 JavaScript 案例,带你了解网页设计中的一些常见技巧和技术原理。今天就说一说一个常见的图片轮播效果。相信大家在各类电商网站、个人博客或者展示页面中,都看到过这种轮播图。它的核心功能是展示多张图片,并且用户可以通过点击按钮,左右切换图片。

C#设计模式(1)——单例模式(讲解非常清楚)

一、引言 最近在学设计模式的一些内容,主要的参考书籍是《Head First 设计模式》,同时在学习过程中也查看了很多博客园中关于设计模式的一些文章的,在这里记录下我的一些学习笔记,一是为了帮助我更深入地理解设计模式,二同时可以给一些初学设计模式的朋友一些参考。首先我介绍的是设计模式中比较简单的一个模式——单例模式(因为这里只牵涉到一个类) 二、单例模式的介绍 说到单例模式,大家第一

【IPV6从入门到起飞】4-RTMP推流,ffmpeg拉流,纯HTML网页HLS实时直播

【IPV6从入门到起飞】4-RTMP推流,ffmpeg拉流,纯HTML网页HLS实时直播 1 背景2 搭建rtmp服务器2.1 nginx方案搭建2.1.1 windows 配置2.1.2 linux 配置 2.2 Docker方案搭建2.2.1 docker 下载2.2.2 宝塔软件商店下载 3 rtmp推流3.1 EV录屏推流3.2 OBS Studio推流 4 ffmpeg拉流转格式

【Qt】Qt与Html网页进行数据交互

前言:此项目使用达梦数据库,以Qt制作服务器,Html制作网页客户端界面,可以通过任意浏览器访问。 1、Qt与网页进行数据交互 1.1、第一步:准备qwebchannel.js文件 直接在qt的安装路径里复制即可 1.2、第二步:在Qt的.pro文件加载webchannel组件 在.pro文件添加如下组件: QT += core gui sql webchannel wi