WAIARIA无障碍网页应用属性完全展示Word文档下载推荐.docx
- 文档编号:19872539
- 上传时间:2023-01-11
- 格式:DOCX
- 页数:12
- 大小:18.04KB
WAIARIA无障碍网页应用属性完全展示Word文档下载推荐.docx
《WAIARIA无障碍网页应用属性完全展示Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《WAIARIA无障碍网页应用属性完全展示Word文档下载推荐.docx(12页珍藏版)》请在冰豆网上搜索。
ARIA就是包包中的Coach.
四、算了吧,盲人,这么小众,鸟个毛啊!
嘛,确实,反正你一辈子就照着设计图切几个死页面就够了。
五、靠,ARIA相关属性茫茫多,老子调戏前台都没时间,鸟这个!
ARIA相关属性虽然多,哥们,要晓得,时间紧的时候,做前戏就没有必要把每个部位都亲个遍,直接针对敏感部位就行了。
ARIA也是一样,知道几个常用的属性就可以了。
以后在领导面前吹嘘啊,面试得瑟啊什么的就有料了!
到现在全是文字,为了提高可阅读性,避免文字阅读吃力的潜在用户关闭本页面,是时候举个实际的例子提提大家的神了,让大家知道ARIA就是个冰激凌(跟屎放在一起只是肤色白了点而已)。
本例来自淘宝首页,大家有兴趣也可以自己看看,示例对象见下截图(淘宝网右上角选项卡):
使用firebug查看其对应的HTML代码,就可以看到aria的应用啦!
仔细一看,唷,这可是标准的选项卡ARIA属性应用(该用的属性都有),OK,对于常用的选项卡,就套用淘宝网这里的结构吧,很标准的。
就是增加几个role属性,增加几个aria-属性就可以了,然后,这个选项卡就变成了很牛逼很碉堡的无障碍阅读选项卡啦。
恩,这再一次验证了这个道理:
要变成牛人很简单——骑在牛身上就可以了。
哎呀哎呀,聪明好学的你可能希望知道这里aria-hidden,aria-labelledby是啥意思。
好同学,我被你这种学习的热情感动了,于是决把我这几天没日没夜整理的WAI-ARIA无障碍网页应用属性大全表展示出来,上面的两个属性,以及其他N多aria-的兄弟姐妹属性都可以从下面几个表中找到。
如果你被表格的高度吓住了不想看也没关系,记住这里,回头需要的时候再来找找,哦呵呵!
^_^
下面三个表,依次为:
ARIArole属性值表、ARIA属性表、ARIA状态属性表。
六、ARIA属性表
ARIARoles值示意及说明表role属性值
含义
HTML示意
说明
alert
表示警告
role="
alert"
>
例如ajax操作返回错误信息的div标签。
alertdialog
表示警告弹出框
时间:
选择日期...
例如自定义的时间选择器。
button
表示按钮
role="
button"
alt="
cut"
/>
copy"
paste"
大家都懂的,没啥好说的
checkbox
表示复选框
checkbox"
aria-checked="
mixed"
tabindex="
0"
所有姑娘
false"
晴川
true"
静秋
黄小仙
同样,大家都懂的,没啥好说的combobox
表示下拉列表框
晴川
静秋
黄小仙grid
表示网格
grid"
aria-labelledby="
grid1_label"
aria-readonly="
美女们
黄小仙
gridcell
表示网格单元
gridcell"
-1"
类似于table&
table-cell
group
表示组合并
group"
所有姑娘
黄小仙heading
表示应用程序标题头
heading"
aria-live="
assertive"
aria-atomic="
2012年3月
例如时间选择器中的月份标题:
listbox
表示列表框
黄小仙log
表示日志记录
log"
aria-relevant="
additions"
类似三国杀右侧记录战事区域;
或是比赛文字直播记录区域。
menu
表示菜单
美女
menu"
aria-hidden="
靓女
淑女
熟女menubar
表示菜单栏
menubar"
title="
美女菜单"
熟女menuitem
表示菜单项
menuitem"
aria-haspopup="
美女
靓女
淑女
熟女menuitemcheckbox
表示可复选的菜单项
menuitemcheckbox"
熟女menuitemradio
表示只能单选的菜单项
menuitemradio"
熟女option
表示选项
option"
黄小仙presentation
表示称述
45
左边示例的HTML为一个自定义的滑动条。
而role="
presentation"
所在div显示的就是当前滑动位置对应的值。
progressbar
表示进度条
progressbar"
aria-valuenow="
aria-valuemin="
aria-valuemax="
100"
23%radio
表示单选
美女们:
radio"
自定义单选框控件的时候使用,下图为左侧HTML的效果图:
radiogroup
表示单选组
radiogroup"
girl_label"
region
表示区域
region"
aria-expanded="
我之所以会出现,是因为主人你点击了某个命中注定的按钮。
例如用在div区域显示隐藏切换的时候。
row
表示行
row"
aria-selected="
用在表格模拟的行列表上,对应table下面的tr标签。
separator
表示分隔
separator"
熟女
反应在下图就是那条黑色的1像素水平分隔线:
slider
表示滑动条
45spinbutton
表示微调
spinbutton"
50"
50
例如下面这个数值微调效果截图:
tab
表示标签
tab"
熟女
腐女
tablist
表示标签列表
tablist"
腐女
tabpanel
表示标签面板
tabpanel"
timer
表示计数
timer"
all"
模拟计数器,使用在动态显示规律数值变化的地方
toolbar
表示工具栏
toolbar"
aria-activedescendant="
button1"
左边HTML表示一个剪切,复制,粘贴三功能在一起的工具栏。
tooltip
表示提示文本
姓名:
必须是美女姓名哦~~
如下图黄色的这个提示框:
tree
表示树形
tree"
效果见下面treeitem中的图。
treeitem
表示树结构选项
treeitem"
静秋
黄小仙
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- WAIARIA 障碍 网页 应用 属性 完全 展示