• Home
  • home > webfront > SGML > web >

    Web内容的无障碍性(3):ARIA角色Roles值示与aria-*属性值列表说明

    Author：zhoulujun Date：

    ARIA实现很简单，只需给html5元素，增加ARIA属性与角色即可。但是ARIA角色值与属性值都非常多，除了几个简单，基本是处于懵逼状态。整理出他们的列表汇总出来，这也我们在开发过程中，就好查阅与使用

    上篇《Web内容的无障碍性(2):实现WAI-ARIA无障碍网页及注意实现》，知识讲解ARIA相关的知识及使用，但是ARIA角色值与属性值都非常多，除了几个简单，基本是处于懵逼状态。本文对几年前张鑫旭老师的《WAI-ARIA无障碍网页应用属性完全展》的属性表的简化增补版本

    ARIA 角色值分类列表

    角色以有意义的方式指示元素的类型。 假定屏幕阅读器遇到包含 role=navigation 的页面上的一个 HTML 元素。 屏幕阅读器将知道此 HTML 元素用于导航，用户将能直接使用导航功能而非通过所有链接选择标签。

    角色有以下三种类型：

    • 作为导航界标的界标角色。

    • 结构性角色定义文档的结构并帮助组织内容。

    • 小组件角色由独立的 UI 小组件和复合小组件构成，其中复合小组件是两个或多个独立小组件的容器。

    ARIA 中有 8 个界标角色、18 个结构性角色、25 个独立界面小组件角色和 9 个复合 UI 小组件角色。

    界标角色结构性角色小组件角色独立小组件复合小组件
    applicationarticleregionalertprogressbarcombobox
    bannercolumnheaderrowalertdialogradiogrid
    complementarydefinitionrowheaderbuttonscrollbarlistbox
    contentinfodirectoryseparatorcheckboxslidermenu
    formdocumenttoolbardialogspinbuttonmenubar
    maingroup gridcellstatusradiogroup
    navigationheading linktabtablist
    searchimg logtabpaneltree
     list marqueetextboxtreegrid
     listitem menuitemtimer 
     math menuitemcheckboxtooltip 
     note menuitemradiotreeitem 
     presentation option  


    ARIA Roles值示意及说明表

    role属性值含义说明
    alert表示警告例如ajax操作返回错误信息的div标签。
    alertdialog表示警告弹出框自定义的出错提示弹框。
    application表示应用例如自定义的时间选择器。
    button表示按钮大家都懂的，没啥好说的
    checkbox表示复选框同样，大家都懂的，没啥好说的
    combobox表示下拉列表框


    grid表示网格
    gridcell表示网格单元类似于table & table-cell
    group表示组合并


    heading表示应用程序标题头例如时间选择器中的月份标题：
    listbox表示列表框


    log表示日志记录类似三国杀右侧记录战事区域；或是比赛文字直播记录区域。
    menu表示菜单


    menubar表示菜单栏


    menuitem表示菜单项


    menuitemcheckbox表示可复选的菜单项


    menuitemradio表示只能单选的菜单项


    option表示选项
    presentation表示称述左边示例的HTML为一个自定义的滑动条。而role="presentation"所在div显示的就是当前滑动位置对应的值。
    progressbar表示进度条


    radio表示单选自定义单选框控件的时候使用，下图为左侧HTML的效果图：
    radiogroup表示单选组


    region表示区域例如用在div区域显示隐藏切换的时候。
    row表示行用在表格模拟的行列表上，对应table下面的tr标签。
    separator表示分隔反应在下图就是那条黑色的1像素水平分隔线：
    slider表示滑动条


    spinbutton表示微调例如下面这个数值微调效果截图：
    tab表示标签


    tablist表示标签列表


    tabpanel表示标签面板


    timer表示计数模拟计数器，使用在动态显示规律数值变化的地方
    toolbar表示工具栏左边HTML表示一个剪切，复制，粘贴三功能在一起的工具栏。
    tooltip表示提示文本


    tree表示树形效果见下面treeitem中的图。
    treeitem表示树结构选项


    ARIA 属性值示意及说明表

    属性名属性值说明
    aria-activedescendant字符串。表示后代元素的id值。aria-activedescendant 属性定义了当工具栏获取焦点时，哪一个工具栏的子控件获取了焦点。在此HTML示例中，工具栏的第一个控件（拥有id “button1″）是能获取焦点的子控件。
    aria-atomic字符串。表示区域内容是否完整播报。值可以为true和false。当为true时，表示辅助设备需要把整个区域内容都通报给使用者；如果为false则表示只需要通报修改的部分。还是这个时间选择器年月标题的例子。这里的aria-atomic为true则表示当时间改变的时候，这里的年月日期要完整播放，不要只改了月份就只报月份内容。
    aria-autocomplete字符串。表示用户的文本框的自动提示是否提供。可选值有：inline, list, both, none.目前，该属性对于inline和list两个值的含义暂不清楚。不过可以确定的是该属性对应HTML5中autocomplete属性。需要注意的是，如果aria-autocomplete="list", aria-autocomplete="inline"或aria-autocomplete="both"被设置在支持autocomplete的元素上，则autocomplete的属性值需要设成"on", 如果是aria-autocomplete="none"，则需要设成"off"
    aria-busy字符串。表当前区域的忙碌状态。默认为false, 表清除busy状态；可选为true, 表该区域正在加载；或为error, 表示该区域验证无效。如果某个区域内(如这里ul)有多个地方需要修改，需要全部修改完毕再通知使用者的话，就可以先将aria-busy设为true, 等到全部内容更新完毕后再设成false. 该属性可以避免辅助工具在区域内容更新完毕前不断即时提醒使用者。
    aria-controls字符串。空格分隔的id属性值列表。该属性定义了元素间不能通过文档结构决定的关联关系。ariaControls属性主要被role为group, region, 或widget的元素使用。
    aria-describedby字符串。空格分隔的id属性值列表。同样的，该属性定义了文档结构表现不出来的的元素间的相互关联性。该属性旨在通过标签提供更多用户可能需要的信息。如果指定了不只一个id, 所有元素会合并在一起共同创建一条单独的描述。
    aria-dropeffect字符串。表示拖拽效果。可选值有：copy, move, reference, execute, popup, none, 依次表示：复制，移动，参照，执行，弹出以及没有效果。该属性用在拖拽上。
    aria-flowto字符串。空格分隔的id值们。如果该属性值对应的是单独的id, 辅助技术会恢复目标元素的阅读；如果对应的是多个id, 则辅助技术会让用户去选择、导航到目标元素。
    aria-grabbed字符串。拖拽中元素的捕获状态。可选值有:true, false, undefined. 默认为undefined，表示元素捕获状态未知。true表示元素可以捕获；false表示不能被捕获。该属性用在拖拽上。类似于HTML5中的draggable属性。
    aria-haspopup字符串。true表示点击的时候会出现菜单或是浮动元素； false表示没有pop-up效果。


    aria-label字符串。定义一个字符串值标记当前元素。
    aria-labelledby字符串。空格分隔的id们aria-labelledby一般用在区域元素上，对于的id一般为对应的标题或是标签元素的id.关系型属性。
    aria-level数值。表示等级。上面的HTML类似于<h2>次标题</h2>
    aria-live字符串。可选值有：off, polite, assertive, rude。默认为off, 表示不宣布更新；polite表示只有用户闲时宣布；assertive表示尽快对用户宣布；rude表示即时提醒用户，必要的时候甚至中断用户。绝大多数的更新应该在用户闲暇的时候告知，即时提示对用户是一种干扰。如果希望内容完全更新后再提示，可以使用上面提到的aria-busy.


    左侧的HTML为时间选择控件的年月标题部分，aria-live="assertive"表示的是当用户选择了新的时间的时候，尽快通知用户时间发生了变更。

    aria-multiselectable字符串。表示是否可多选。默认为false, 表示一次只能选择一个项。true表示一次可以选择多个项。例如手风琴展开收起效果，我们可以使用aria-multiselectable来告知辅助设备，一次可以展开多个项还是只有一个展开。
    aria-owns字符串。值为目标元素id.aria-owns表示元素所拥有的，这里这里的文本框拥有其对应的下拉列表。



    aria-posinset数值。表示当前位置。用在设置和获取一个集合内某项的当前位置。
    aria-readonly字符串。表示是否只读。默认为false, 表示元素值可以被修改；true表示元素指不能被改变。
    aria-relevant字符串。表示区域内哪些操作行为需要做出反应。可选值有：additions, removals, text, all，可以空格分隔多个一起显示. additions表示新增节点的时候做出反应；removals表示删除节点时重要操作；text表示文本改变是值得重视的；all等同于同时使用上面三个属性值。左边的HTML表示当日志内容有添加的时候做出反应。
    aria-required字符串。元素值是否必需。默认为false, 表示元素值可以为空；true表示元素值是必需的。多半用在表单控件中。对应HTML5中required属性。
    aria-secret字符串。表示机密状态。具体含义不详
    aria-setsize数值。设置的尺寸大小值。顾名思意
    aria-sort字符串。表示表格或格栅中的项是以升序排列还是降序排列。可选值：ascending(↑), descending(↓), none, other.Widget组件应用属性。
    aria-valuemax数值。表允许的最大值。用在范围组件上。对应于HTML5中的max属性。
    aria-valuemin数值。表示允许的最小值。用在范围组件上。对应于HTML5中的min属性。
    aria-valuenow数值。表示当前值。用在范围组件上。对应于value属性。
    aria-valuetext字符串。定义等同于aria-valuenow人可读的文本。用在范围组件上。


    参考文章：

    https://www.zhangxinxu.com/wordpress/2012/03/wai-aria-无障碍阅读/

    aria初探（一） https://www.cnblogs.com/dingyuanxin/p/4052518.html

    aria-label及aria-labelledby应用 https://www.cnblogs.com/dingyuanxin/p/4052524.html




    转载本站文章《Web内容的无障碍性(3):ARIA角色Roles值示与aria-*属性值列表说明》,
    请注明出处：https://www.zhoulujun.cn/html/webfront/SGML/web/2016_0330_8343.html

    收藏
    上一篇：Web内容的无障碍性(2):实现WAI-ARIA无障碍网页及注意实现
    下一篇：再谈沙箱：前端所涉及的沙箱细讲