无障碍访问1、键盘的无障碍访问1.1、务必了解的tabindex属性1.2、深入了解快捷键设置属性accesskey1.2.1、隐藏的元素能否触发accesskey快捷访问1.2.2、多个元素使用相同的accesskey属性值会怎样1.2.3、约定俗成的开发策略2、屏幕阅读无障碍访问2.1、尽可能使用原生元素和属性2.2、系统介绍ARIA规范属性2.2.1、ARIA role属性2.2.2、ARIA常规属性2.2.3、ARIA状态属性之所以要强调HTML的语义化一方面是部分HTML自带交互行为有助于降低Web开发成本另一方面就是它无障碍访问的能力。无障碍访问包括很多方面如颜色的对比度、按钮的大小以及辅助设备的访问与识别如鼠标和键盘的访问能力、屏幕阅读器或翻译工具的访问能力、虚拟键盘使用的能力等。这些都需要你对HTML有所了解才能做得出色。由于本书是介绍HTML的因此仅会介绍与之相关的无障碍访问包括物理键盘、屏幕阅读器及移动设备虚拟键盘。1、键盘的无障碍访问对于Web网页而言键盘的访问能力是最基本的因为不仅视力有障碍的人群需要网页有键盘访问能力即使是正常用户也需要网页中的控件元素可以通过键盘访问如按回车键提交表单、下拉列表的上下键选取等。随着智能电视的普及在电视机上也能访问网页此时遥控器就扮演了键盘的角色如果网页内容无法被键盘访问那么该网页在电视机上就不可用。其实做好网页的键盘无障碍访问特性很简单遵循以下原则即可所有具有点击行为的控件元素一定要使用a元素或者button元素如果能做到这一点那么即使没有鼠标网页也是基本可用的因为这两个元素天然可以被Tab键索引天然支持按回车键触发点击行为。如果万不得已使用div元素或span元素模拟按钮那么一定要设置tabindex“0”值必须是0至于原因且听我慢慢道来。1.1、务必了解的tabindex属性对于键盘访问最重要的HTML属性莫过于tabindex属性了这是一个全局属性顾名思义就是Tabindex也就是可以使用Tab键索引元素。该属性可以让任意的元素变成键盘可访问元素支持的值包括-1、0以及132767的整数如果属性值超过32767则会按照-1渲染。不同的tabindex属性值有着不同的含义。当tabindex属性值为-1时元素可以获得焦点点击或执行JavaScript的focus()方法​但是无法被Tab键索引。该值常用来转移焦点例如可以将弹窗上的元素设置为tabindex“-1”这样当弹窗出现时焦点就会自动转移到弹窗上而不是弹窗后的页面上。不过原生的dialog元素并不需要这么处理因为它本身就支持焦点转移并且对于dialog元素而言tabindex属性是无效的。tabindex-1的另外一个经典应用就是iOS Safari浏览器的无法失焦问题例如如下代码所示的a元素在点击之后会被聚焦(focus)但是此时你再点击页面空白区域该元素是不会失焦的。解决方法就是找到层级足够高的祖先元素不能是body元素可以是body子元素​然后设置tabindex-1任意的非控件HTML元素在设置了tabindex-1属性后点击的时候都是会有聚焦状态的。也就是点击空白区域会把原本附着在链接上的焦点转移到祖先元素上于是blur失焦就正常触发了。不过根据测试这个持续了近10年的体验问题在iOS 14之后被修复了。当tabindex属性值为0时元素可以被Tab键索引且索引顺序和input、button这类控件元素一致。当tabindex属性值是自然数的时候则对于IE、Edge及N年前的Chrome等浏览器tabindex是自然数的元素的索引顺序级别最高然后才是tabindex0的元素。在现在主流浏览器下tabindex0的元素的索引顺序级别最高tabindex是自然数的元素的索引顺序靠后甚至比浏览器窗体自身的控件元素的聚焦顺序还要靠后。表现为tabindex0的元素最先被聚焦随后浏览器自身各个按钮和地址栏被聚焦最后才是tabindex1的元素被聚集。tabindex1的元素在通过Tab键索引后聚焦的是tabindex0的元素tabindex0的元素在按下ShiftTab键后聚焦的是tabindex1的元素。tabindex2的元素一定比tabindex1的元素的索引值靠后。基本上tabindex属性要么被设置为-1要么被设置为0设置为自然数的场景现在已经很少见了。1.2、深入了解快捷键设置属性accesskey可能很多读者都不知道只要在HTML代码上设置一个属性就可以让浏览器支持我们自定义的快捷访问方式而这个神奇的属性就是本节要介绍的accesskey属性。在HTML 4.0.1中accesskey属性可以作用在以下元素上a、area、button、input、label、legend及textarea。在HTML 5中accesskey属性可以作用在任意元素上变成了HTML全局属性。例如作用在div元素上这里的属性值“1”对应的就是键盘上的数字1如果是accesskey“a”则“a”对应的就是键盘上的字母a。需要注意的是虽然accesskey属性值和键盘相对应但并不是说直接按下这个键就能快捷访问。浏览器是通过快捷键组合访问的方式进行页面元素的快速访问的具体的组合方式参见下表注意随着浏览器的迭代快捷键的组合方式可能会有调整​。IE浏览器和Chrome浏览器的组合键是一样的但是其交互行为却和其他浏览器都不一样例如在Windows操作系统下按下Alt1组合键IE浏览器只是让a元素获得焦点但是其他所有浏览器都会直接触发click行为。在我看来IE浏览器的这种行为是不友好的原因在于类似a、button这样的元素还可以在获得焦点后按下回车键触发click行为但是div这类元素是无法通过键盘触发点击行为的这就使div等元素设置的accesskey属性没有任何价值。相比之下Chrome等浏览器就没有这个问题如以下HTML代码此时我在Windows操作系统下按下Alt3组合键结果“测试”二字变成了红色如图所示。这说明直接触发了绑定的click点击事件。1.2.1、隐藏的元素能否触发accesskey快捷访问对于一个元素如果CSS display属性的计算值是none则无法通过Tab键进行索引聚焦。那么设置的accesskey快捷访问是否可以访问呢根据我的测试Chrome浏览器和Firefox浏览器是可以的元素即使隐藏只要设置了accesskey快捷访问按下对应组合键的时候就能触发click行为。例如在Windows操作系统下按下Alt1组合键页面会直接刷新。1.2.2、多个元素使用相同的accesskey属性值会怎样例如有如下所示的HTML代码在Chrome浏览器下第一行div元素的accesskey属性设置会被忽略第二行的文字变成了红色说明accesskey属性被重复设置的表现以后面的元素为准。而在Firefox浏览器下则两败俱伤两行div元素进行快捷键匹配的时候都不能触发点击事件变成了单纯的focus索引出现了聚焦虚框如图所示行为表现和IE浏览器一致。从上面的测试结果可以看出设置多个元素的accesskey属性值相同是一个比较严重的问题应当极力避免。1.2.3、约定俗成的开发策略accesskey属性的默认访问策略并不实用一是用户并不知道开发者在页面中藏了哪些快捷访问按键二是组合快捷键的学习成本实在太高因此经过多年的发展业界已经有了一些约定俗成的开发策略。其一舍弃组合快捷键使用JavaScript进行一些自定义让用户通过直接按下accesskey属性对应的值就可以访问对应的链接或者激活对应的元素。其二对某些操作的快捷键进行约定俗成的定义其中最著名、影响最广的就是所有的搜索输入框都使用斜杠字符“/”作为访问快捷键下图所示的就是脸书网站的accesskey属性设置。不仅是脸书像推特、MDN文档都使用“/”作为访问快捷键也就是你只要按下“/”键搜索框就会自动聚焦。我认为国内的网站也都可以使用此策略其他的快捷键先不要管就把搜索匹配用上只要大家都这么使用就会形成约定俗成的规范对于用户而言其实是一件好事。2、屏幕阅读无障碍访问在美国如果网页无法让残疾人正常访问企业可能会被要求重新设计网站不仅涉及金钱损失还要支付律师费。国内前几年也出台了老龄化适配政策随后也出现了专门支持无障碍访问的公司可见对无障碍访问的学习还是很有必要的不求精通至少要掌握一些基础知识。2.1、尽可能使用原生元素和属性目前国内的Web产品对无障碍访问的支持比较糟糕以至于你只要在网页开发的时候尽可能使用语义精准的HTML元素所实现的产品的无障碍访问能力已经超过绝大多数公司的产品。下面介绍关于Web无障碍访问的一些常识性的知识因为很多人在这方面容易犯错。有些按钮没有文字仅有一个小图标很多人图省事就使用一个span元素这是糟糕的做法。外面一定要嵌套button按钮如果是链接则可以使用a元素。桌面端网页有很多鼠标悬停显示下拉列表的效果这些效果一定要同时设置点击切换显隐否则触摸屏、屏幕阅读器或者键盘访问就会有障碍。弹出层或者弹出框一定要有关闭按钮按钮最好位于右上角如果这和视觉设计稿不符可以设置透明度为0这对视力有障碍的用户会非常友好。所有的控件元素在聚焦的时候一定要有样式变化建议使用outline添加轮廓下面这样的CSS设置务必避免图形化的内容一定要设置文字内容尤其是图标内容。以VoiceOver为例iOS、MAC OS X操作系统内置屏幕阅读器​下面的HTML代码是指不会有任何内容被朗读的只有按钮元素的title属性值会被朗读​但如果里面有文字那么视力有障碍的用户就能识别例如只要不是无关紧要的装饰性图片一定要使用img元素且一定设置alt描述值。如果图片有角标等信息则可以一并写在alt属性中比如图所示的角标效果就可以使用如下所示的HTML代码不要单独使用SVG图像因为哪怕设置title元素也是不会被读取的例如其中的“返回”二字并不会被读取而是会朗读宽泛的“图像”​。不过如果外面有链接元素则在VoiceOver下就会朗读“返回链接”​因为此时SVG从图像性质变成了链接内容。或者使用下一节介绍的ARIA规范属性aria-label此时辅助设备就会朗读“图像 返回”​。大家也可以开启VoiceOver亦叫“旁白”​试试想象自己是一个视力有障碍的用户测试一下自己目前所开发的Web页面能不能正常体验这是提升自己无障碍访问开发能力最快速的方法。2.2、系统介绍ARIA规范属性除原生的HTML元素和属性外我们还可以用ARIA规范定义的HTML属性增强Web产品的无障碍访问能力。从功能上区分这些属性可以分为三类ARIA role属性、ARIA常规属性和ARIA状态属性下面逐一进行介绍。2.2.1、ARIA role属性ARIA role属性可以让没有语义的HTML元素变成有语义的元素例如此时屏幕阅读器就会朗读“按钮 点击”​而不仅仅是“点击”​提升了无障碍访问能力。常用的role属性值包括下面这些。role“alert”表示警告例如Ajax数据请求失败在页面顶部或中间位置出现的提示信息role“alertdialog”表示弹出对话框和rolealert的区别在于alertdialog会有“关闭”或“确定”按钮例如视觉表现见下图。role“application”表示应用例如自定义的时间选择器。role“banner”表示网站的头部代替header元素的角色一个页面只能有一个例如role“button”表示按钮很好理解例如此role属性值多和tabindex0一起使用保证键盘的无障碍访问。网格与表格与网格和表格相关的role属性值较多因此将它们放在一起介绍详见下表。下面这段代码示意了以上部分role属性值的使用role“checkbox”表示复选框例如视觉表现如图所示。role“combobox”表示下拉列表组合框例如视觉表现如图所示。role“command”表示指令纯操作提示没有任何输入行为例如富文本编辑器中的CtrlZ组合键为撤销、CtrlB组合键为加粗、CtrlC组合键为复制等。role“complementary”表示补充内容类似于aside元素例如role“contentinfo”表示网站的页脚类似于footer元素例如role“definition”表示定义类似于dfn元素例如role“dialog”表示对话框类似于元素多用在自定义对话框组件上。role“document”表示复杂小部件或应用程序中的可聚焦内容多为描述信息辅助设备可上下切换阅读。例如文档结构角色有不少role属性值可用来表述文档结构信息各个属性值、描述及对应的语义化元素如表所示。role“feed”表示订阅源列表的容器订阅作品需要支持通过上下键进行定位浏览例如role“form”表示表单类似于form元素。role“generic”表示通用的元素也就是没有语义的元素类似于div、span元素。role“group”表示分组例如role“input”表示允许输入的小部件。role“landmark”表示标识例如在摘要中扮演导航的角色以方便辅助设备快速导航和查找内容。role“link”表示链接例如role“log”表示日志记录例如role“main”表示主要内容类似于main元素。role“marquee”表示滚动内容例如直播时出现的滚动信息列表role“math”表示数学公式例如此值多用在MathML语言无法使用的场景下。menu系列菜单栏、菜单、菜单子项均有对应的role属性值详见下表。代码表示使用示意视觉表现如图所示。role“navigation”表示导航类似于nav元素。role“none”rolepresentation的另外一种写法。role“note”表示注释类似于blockquote元素。role“option”表示listbox的可选项例如如果给内容设置role“option”则辅助设备会将里面的内容作为一个整体进行一次性阅读。role“presentation”用在让原来有语义的元素变得没有语义的场景下例如等同于role“progressbar”表示进度条例如视觉表现如图所示。roleradio和role“radiogroup”表示单选按钮和单选按钮组例如视觉表现如图所示。role“range”表示范围想要自定义类似meter、progress及input/range元素的时候可以考虑此值。role“region”表示区域类似于section元素。role“scrollbar”表示可触摸滚动条例如input/range元素的滚动条。role“search”表示搜索类似于search元素。例如建议使用role“searchbox”表示搜索输入框类似于input epub:type“search”元素。例如role“select”表示选择类似于select元素。role“separator”表示分隔符类似于hr元素。role“slider”表示滑块类似于input epub:type“range”元素。role“spinbutton”表示可上下微调的范围选择元素inputepub:type“number”元素就符合这个特质例如鼠标经过数值输入框的时候右侧会显现上下数值调整按钮如图所示。role“structure”表示结构化的文档元素。role“suggestion”表示建议内容推荐使用ins元素和del元素。role“switch”表示开关例如视觉表现如图所示。tab选项卡系列选项卡、选项卡列表、选项卡面板均有对应的role属性值详见下表。例如视觉表现如图所示。role“textbox”表示文本输入框类似于input epub:type“text”元素如果同时设置了aria-multiline“true”则等同于textarea元素。role“timer”表示计时器例如role“toolbar”表示工具栏用在一系列操作按钮的容器元素上。role“tooltip”表示悬浮提示元素。role“widget”表示小部件。role“window”表示窗口。2.2.2、ARIA常规属性ARIA常规属性有很多这里只介绍一些常用的。aria-activedescendant表示当前活动的子元素值为后代元素的id值例如在此HTML示例中aria-activedescendant属性定义了当工具栏获取焦点时工具栏的第一个控件拥有id“button1”是能获取焦点的子控件。aria-atomic表示区域内容是否完整播报值可以为true和false。当其值为true时表示辅助设备需要把整个区域内容都通报给使用者当其值为false时则表示只需要通报修改的部分。例如这里的aria-atomic属性值为true则表示当时间改变的时候这里的年月日要完整播报不要只改了月份就只报月份的内容。aria-autocomplete表示用户文本框的自动提示是否提供。可选值有inline、list、both和none。需要注意的是如果aria-autocompletelist/inline/both被设置在支持autocomplete的元素上则autocomplete属性值需要被设置为“on”​如果是aria-autocomplete“none”则需要被设置为“off”​。aria-busy表示当前区域的忙碌状态默认为false表示清除busy状态可选为true表示该区域正在加载或为error表示该区域验证无效。aria-controls表示当前区域控制的元素值为目标元素的id值例如aria-current表示当前元素的状态可选值有page、step、location、date、time、true和false。aria-description表示当前区域的描述信息值为描述内容例如该属性类似于aria-label不过aria-label描述的是简单的信息aria-description描述的是长句子。aria-describedby表示当前区域的描述信息值为描述信息元素的id值例如如果值指定了不止一个id那么所有元素会合并在一起共同创建一条单独的描述。aria-details表示当前区域更加详细的描述信息。aria-describedby描述的是纯文本而aria-details描述的信息可以有图片甚至包括交互内容。aria-flowto表示当前区域的下一个区域值为目标元素的id值。aria-haspopup表示当前区域是否有弹出框支持多种属性值具体如下。false没有弹出框。true有弹出框语义同menu属性值。menu有弹出菜单。listbox有弹出列表。tree有弹出树形结构。grid有弹出表格。dialog有弹出对话框。此属性比较常用因为在目前的Web开发中自定义弹出框、弹出层组件还是非常常见的。aria-keyshortcuts表示当前区域的快捷键值为快捷键内容例如aria-label表示交互元素的描述信息值为描述内容例如aria-labelledby表示交互元素的描述信息值为描述信息元素的id值例如aria-level表示当前区域的等级或层级值为数字。aria-level常用在roleheading元素上表示对应的标题的级别例如语义上等同于元素h3。aria-live表示当前区域的内容是否需要实时更新值为off默认值​、polite和assertive。当值为polite时表示在内容更新时辅助设备会在用户操作完成后播报当值为assertive时表示在内容更新时辅助设备会立即播报。aria-modal表示当前区域是否是模态对话框有半透明黑色背景​值为true或false。aria-multiline表示当前区域是否支持多行文本值为true或false。aria-multiselectable表示当前区域是否支持多选值为true或false。aria-orientation表示当前区域的方向值为horizontal或vertical。aria-owns表示当前区域拥有的元素值为目标元素的id值。aria-placeholder表示当前区域的占位符值为占位符内容。aria-posinset表示当前区域在父元素中的位置值为数字。aria-relevant表示当前区域的内容更新方式值为additions、removals、text、all等同于additions removals text和additions text默认值​。其中各个值的含义如下。additions表示添加内容时播报。removals表示删除内容时播报。text表示内容改变时播报。all表示添加、删除、改变内容时都播报。aria-roledescription表示定义当前元素角色信息的描述值为角色描述内容。例如此时屏幕阅读器会阅读“季度报告 幻灯片”​而不是“季度报告 文章”​。aria-setsize表示当前区域的子元素个数值为数字。例如aria-sort表示当前区域的排序方式值为ascending、descending、none默认值和other。aria-valuemax、aria-valuemin和aria-valuenow表示当前区域的最大值、最小值和当前值值为数字。对应元素输入框元素的max、min和value属性使用示意aria-valuetextaria-valuetext属性的作用是设置比aria-valuenow属性更为友好的文本朗读内容。例如在自定义下拉列表中aria-valuenow往往是选项的id但是朗读的内容应该是对应的文本描述此时就可以使用aria-valuetext。2.2.3、ARIA状态属性ARIA状态属性也有很多其数组值都是true或false常用的状态属性参见下表。