无障碍开发笔记2

鱼鱼爱写代码

已于 2023-06-02 09:09:51 修改

阅读量262

点赞数

文章标签：笔记

于 2023-05-26 12:16:27 首次发布

本文链接：https://blog.csdn.net/2301_77585245/article/details/130883938

版权

4. WAI-ARIAtabindex 属性

1.焦点

什么是焦点

当开启屏幕的阅读功能后，用户可以通过在屏幕上移动焦点来“浏览”内容。正确的焦点标注和焦点顺序能够让读屏软件用户获得更好的体验。

焦点顺序很重要

在移动应用中，如果界面可以进行顺序导航，且导航顺序影响含义和操作，则可聚焦元素应以保持其含义和可操作的顺序获取焦点。默认情况下，焦点顺序为从上到下，从左到右。

2.如何开启屏幕阅读器

iOS -VoiceOver 旁白

设置 - 辅助功能快捷键-勾选旁白，就可通过连续按三次侧边按钮开启和关闭旁白。

操作手势

Android - Talkback

Talkback 的快捷方式： 同时按压音量上下键 3 秒，即可打开/关闭屏幕朗读

操作手势

3.语义化的 HTML 标签

例如 <header> <footer> <nav> <section> <main> <aside> <button>，使用语义化的标签，主要影响两个方面：

选中元素时是否会整块选中
朗读时结尾会加上怎样的修饰词

其中默认设置下，目前仅 <button> 标签可以使得选中元素时会整块选中，而不单独选中子元素。至于修饰词这里列举具体的情况：

<header> 读作"xxx 横幅标志性内容"。
<footer> 读作"xxx 页脚标志性内容"。
<nav> 读作"xxx 导航标志性内容"。
<section> 仅读作"xxx"，没有结尾修饰词。
<main> 读作"xxx 主要标志性内容"。
<aside> 读作"xxx 补充标志性内容"。
<button> 读作"xxx 按钮"。
<a> 读作"xxx 链接"。
HTML 标签 role 属性值
header banner
footer contentinfo
nav navigation
section region
main main
aside complementary
button button
a link

HTML 标签	role 属性值
header	banner
footer	contentinfo
nav	navigation
section	region
main	main
aside	complementary
button	button
a	link

图片语义化依靠着 img 标签中的 alt 和 title 属性，其中 alt 用于图片描述，这个描述是给搜索引擎和屏幕阅读器使用。并且当图片无法显示时，页面会显示alt中的文字。
标题语义化包括了从 h1 到 h6 的标题，在没有 HTML5 新增加的结构标签时，更多的是由 heading 来表示页面的结构。
表格语义化 包括 table、caption、thead、tbody、tfoot、th 标签等等。

4. WAI-ARIA
tabindex 属性

在正常情况，只有 a 标签、button 以及 input 标签可以获得焦点，其他元素例如 div、span 等等是无法用是 tab 键获得焦点的。通过为标签属性中加入 tabindex，让 div 元素获得焦点，例如：

<div tabindex="0">这是能获得焦点的div</div>

它根据 tabindex 从小到大来控制 tab 的跳动顺序，虽然可以控制整个页面的浏览顺序，但是最好只使用 0 来指定 tabindex 属性。在上面也提到过打开控制面板查看页面结构 会发现 tab 默认的跳转顺序和 标签顺序是一致的，如果破坏掉了这个顺序对于一些不兼容 tabindex 的盲人辅助工具、浏览器会造成无法兼容的情况，

tabindex=0时，这种情况下会按正常的顺序遍历到这个可获得焦点的元素，不会有顺序上的差异
tabindex>0时，这种情况下会在遍历完tabindex="0"的元素后，再去遍历等于 1、等于 2 的……以此类推。
tab index= -1，这种情况使用tab键不会获得这个元素的焦点，但是可以通过 js 获得，对于需要脚本控制的元素，通常会把值设置为-1

role 属性

屏幕阅读器会识别 role 属性，告诉用户当前元素的类型。常用的类型有：button、link、checkbox、radio、switch、slider、progressbar、alert、dialog 等，role 属性应该针对场景使用合适的值，让用户感知当前的 UI 组件的类型。

**aria-*属性**

列举些常用的属性

aria-label：阅读的内容
aria-labelledby=#id：阅读指定元素的内容，值为指定元素的 id。优先级高于 aria-label
aria-hidden="true"：对屏幕阅读器不可见，即跳过。默认为 false
aria-checked="true"：按钮已选中，与 role="checkbox/raido"搭配使用
aria-selected="true"：选项已选中
aria-disabled="true"：按钮不可用
aria-haspopup="true"：当前元素会触发弹出式 UI 组件，与 aria-expanded 搭配使用。默认 false
aria-expanded="true"：当前元素的弹出式 UI 组已弹出，默认 false
进度条/滑块相关
- aria-valuemin：最小值
- aria-valuemax：最大值
- aria-valuenow：当前值
- aria-valuetext：阅读内容