无障碍开发微信小程序学习笔记
source link: https://blog.kamino.link/2022/03/31/%E6%97%A0%E9%9A%9C%E7%A2%8D%E5%BC%80%E5%8F%91/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
无障碍开发微信小程序学习笔记
无障碍开发参考ARIA - 无障碍 | MDN (mozilla.org)
一些关键词的解释:
- 走查:即walk-through,动词,开发人员模拟软件执行。
- 热区:界面中可交互的部分。
- ARIA:即Accessible Rich Internet Applications,是一组属性,使残障人士更容易访问Web。
ARIA是一种给html标签添加辅助语义的技术,来自W3C的网络无障碍计划。ARIA分成三部分:roles、states、properties。
roles
:标识控件是什么states
:标识控件目前的状态(可用、不可用、禁用)properties
:标识控件的属性(可拖动、可点击等)
使用ARIA的例子1–状态变化
开发者应该使用ARIA来标识不同的控件,然后用CSS选择器来控制元素可见度,而不是用自定义类名,比如这是一个单选框组件的实例:
<ul id="fontMenu" class="menu" role="menu" aria-hidden="true">
<li id="sans-serif"
class="menu-item"
role="menuitemradio"
tabindex="-1"
aria-controls="st1"
aria-checked="true">Sans-serif</li>
<li id="serif"
class="menu-item"
role="menuitemradio"
tabindex="-1"
aria-controls="st1"
aria-checked="false">Serif</li>
...
li[aria-checked="true"] {
font-weight: bold;
background-image: url('images/dot.png');
background-repeat: no-repeat;
background-position: 5px 10px;
}
var processMenuChoice = function(item) {
// 'check' the selected item
item.setAttribute('aria-checked', 'true');
// 'un-check' the other menu items
var sib = item.parentNode.firstChild;
for (; sib; sib = sib.nextSibling ) {
if ( sib.nodeType === 1 && sib !== item ) {
sib.setAttribute('aria-checked', 'false');
}
}
};
使用ARIA的例子2–可见度变化
<div class="text">
<label id="tp1-label" for="first">First Name:</label>
<input type="text" id="first" name="first" size="20"
aria-labelledby="tp1-label"
aria-describedby="tp1"
aria-required="false" />
<div id="tp1" class="tooltip"
role="tooltip"
aria-hidden="true">Your first name is optional</div>
</div>
div.tooltip[aria-hidden="true"] {
display: none;
}
var showTip = function(el) {
el.setAttribute('aria-hidden', 'false');
}
ARIA roles
使用:aria-roles="xxx"
,列出了文档中完成的roles,忽略部分描述文章结构的role。
roles 解释 roles 解释
button
按钮,对应<button>
switch
开关
checkbox
多选框,对应<label>
radio
单选框
listbox
选择列表,对应<select>
option
选择列表下的item
link
超链接,对应<a>
progressbar
进度条
slider 滑动选择 textbox 输入框
gridcell
grid下的单元格,对应<td>
cell
row下的单元格
rowgroup 多个行的组合 rowheader 行标题
table
表格,对应<table>
row
行
tabpanel 选项卡内容 tab 选项卡本身
tablist 包裹tab的选项卡列表
table是不能交互的,展示数据的表格;而grid是排版上的可以交互的表格。
<!-- 不可交互table -->
<div role="table" aria-label="Semantic Elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81">
<div id="semantic_elements_table_desc">Semantic Elements to use instead of ARIA's roles</div>
<div role="rowgroup">
<div role="row">
<span role="columnheader" aria-sort="none">ARIA Role</span>
<span role="columnheader" aria-sort="none">Semantic Element</span>
</div>
</div>
<div role="rowgroup">
<div role="row" aria-rowindex="11">
<span role="cell">header</span>
<span role="cell">h1</span>
</div>
<div role="row" aria-rowindex="16">
<span role="cell">header</span>
<span role="cell">h6</span>
</div>
<div role="row" aria-rowindex="18">
<span role="cell">rowgroup</span>
<span role="cell">thead</span>
</div>
<div role="row" aria-rowindex="24">
<span role="cell">term</span>
<span role="cell">dt</span>
</div>
</div>
</div>
<!--可交互grid-->
<table role="grid" aria-labelledby="id-select-your-seat">
<caption id="id-select-your-seat">Select your seat</caption>
<tbody role="presentation">
<tr role="presentation">
<td></td>
<th>Row A</th>
<th>Row B</th>
</tr>
<tr>
<th scope="row">Aisle 1</th>
<td tabindex="0">
<button id="1a" tabindex="-1">1A</button>
</td>
<td tabindex="-1">
<button id="1b" tabindex="-1">1B</button>
</td>
<!-- More Columns -->
</tr>
<tr>
<th scope="row">Aisle 2</th>
<td tabindex="-1">
<button id="2a" tabindex="-1">2A</button>
</td>
<td tabindex="-1">
<button id="2b" tabindex="-1">2B</button>
</td>
<!-- More Columns -->
</tr>
</tbody>
</table>
进度条实例
<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div>
选项卡实例
<div class="tabs">
<div role="tablist" aria-label="Sample Tabs">
<button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1" tabindex="0">
First Tab
</button>
<button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">
Second Tab
</button>
<button role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3" tabindex="-1">
Third Tab
</button>
</div>
<div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
<p>Content for the first panel</p>
</div>
<div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
<p>Content for the second panel</p>
</div>
<div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden>
<p>Content for the third panel</p>
</div>
</div>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK