黑马Vue3 + ElementPlus + Pinia 小兔鲜电商项目2023版
黑马Vue3 + ElementPlus + Pinia 小兔鲜电商项目2023版
download：https://www.51xuebc.com/thread-570-1-1.html
vivo 场景下的 H5无障碍适配理论
一、背景
1.1 无障碍适配认知
无障碍（Accessibility）是指为各种才能程度的人们提供公平战争等的时机和体验，以便他们能够更容易地访问、运用和参与社会中的各种产品、效劳和环境。这些人包括身体残疾、听力、视觉、认知和学习障碍等各种才能程度的人。
1.2 无障碍适配缘由
常见的障碍类型包括：视觉障碍、听觉障碍、认知障碍、行动障碍。这些“有障碍”的群体，在运用软件时无法像普通人一样操作，他们或许看不清，需求更大的字体，或许看不到，需求语音播报，又或许听不清听不到，需求依赖视觉反应，或许肢体操作不便当，无法自在支配手机。
所以，国度和企业需求站在“有障碍”的群体考虑，为各种才能程度的人们提供公平战争等的时机和体验。
【政策】：2011年《中国残疾人事业“十二五”规划纲要》指出了， 建立无障碍环境的主要任务之 一就是增强信息无障碍建立，并明白了相关的政策措施。
【容纳性】：无障碍适配是一个重要的设计和开发目的，能够协助您的网站或应用程序愈加容纳和可访问。
【经济性】：无障碍适配不只是一种道德义务，也是一种经济利益，由于它能够为您的网站带来更普遍的受众和更好的用户体验，带动业务增长。
1.3 无障碍适配引导
除了系统默许支持的大字体、内容播报、语音辨认、字幕、语音控制等根底无障碍适配，更多的页面交互还是需求前端工程师们完成适配，所以开发者们需求开发出可辨认的web页面，让障碍群体能够正常访问和运用。本文主要针对视障人群停止无障碍适配。
二、无障碍操作
在无障碍开发前，前端工程师们需求理解下无障碍的操作手势，站在障碍人群的角度体验操作，这样才干开发出更好的交互体验。也能防止因操作错误招致开发错误和反复开发。
2.1 读屏幕软件
首先我们需求理解下针对视力障碍人员运用的读屏设备或软件，常见的读屏软件，如下列表：
由于我们是在vivo手机内做挪动端安卓手机无障碍适配，以下的计划、案例等引见均是基于Android-TalkBack。
2.2 常用操作手势
借助 TalkBack 手势，能够在 Android 设备上停止导航和执行常用操作，以下操作为安卓9.1版及更高版本，仅在vivo手机的操作。
三、常用属性引见
3.1 aria属性
ARIA全称“Accessible Rich Internet Applications（可访问的富互联网应用）”，是W3C的Web无障碍推进组织在2014年3月20日发布的可访问富互联网应用完成指南。是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术标准。ARIA 用于进步运用 HTML、CSS、JavaScript、AJAX 和相关技术开发的动态内容和高级 UI 控件的辅助功用。ARIA 如今正式成为 HTML5 标准的一局部，还能够嵌入在常用的 JavaScript 库中。
3.2 aria状态
3.3 role属性
role将元素标志为不同的属性，常用属性“button（按钮），region（图形）”，依据定义的不同属性，播报不同的内容。
3.4 tabindex 属性
tabindex 属性的运用能够使得本来无法获得焦点的元素获取焦点。目的是为了运用户能够用键盘访问任何能够用鼠标访问的元素。我们晓得，运用 Tab 键能够按文档次第 tab 到一切能够获取焦点的元素。tabindex 能够设置为 -1， 0 或者是任何自然数。
当用户运用 Tab 键阅读页面时，元素获取焦点的次第是依照 HTML 代码里面元素呈现的次第排列的，有时跟实践看到的页面次第并不分歧。
四、无障碍适配案例
4.1 项目适配案例
1.言语设置
在全局元素中的 lang 属性设置页面的言语：
英文：
<html lang="en">
中文：
<html lang="zh-CN"></html>
国内的中文项目普通需求设置为中文，假如设置成了英文，有些数字会播报成英文。
2.层级属性
假如项目还没开端适配，则开启无障碍播报，会发现标签div和span默许作为焦点并播报，这样的话焦点和播报内容就十分分散。
备注：绿色框为焦点标志
（1）聚焦播报
由于div标签会自动播报，所以就算焦点聚焦到外层，但是内层还是会自动播报。
"content" tabindex="1"> <div class="amount"> <div class="num">100
<div class="unit">元 <div class="desc">话费充值播报内容：100元话费充值。
（2）自定义播报
但是会存在div里写的内容和需求播报的内容不分歧，则可在外层tabindex="1"聚焦后，经过aria-label写上自定义内容
"content" tabindex="1" aria-label="取得100元的话费充值券"> <div class="amount"> <div class="num">100
<div class="unit">元 <div class="desc">话费充值播报内容：取得100元话费充值券
3.聚焦款式
聚焦可经过tabindex完成，但是聚焦后款式会有黄色的边框，可经过outline: none去除，但是页面中的焦点太多，可经过全局去除。
在公共css文件里设置：
*[tabindex] { outline: none; }
4.图片播报
（1）图片的alt属性设置
图片经过img标签完成，假如图片不可聚焦，则设置**alt=""**即可。假如可聚焦并需求播报内容，倡议经过aria-label设置。假如运用alt，一旦图片加载不出来，就会把alt的内容显现出来，而且alt内容没有款式，在H5页面上会显得很突兀。
"close.png" aria-label="关闭" alt=""/> <img src="dog.png" alt=""/>
（2）去除图片默许属性（图形）播报
可在img标签里，将role属性改为row
"title.png" tabindex="1" aria-label="超级会员送您1个红包" role="row"/>
5.按钮播报
通常ui上的按钮在选中后，需求播报按钮内容+按钮+引导操作（如：点按两次即可激活）
首先需求聚焦（tabindex="1"）到节点，然后需求在按钮上的节点上写上role="button"，加上这个属性后，后面会自动播报“按钮，点按两次即可激活”
案例：div中的按钮
"1" role="button" class="btn">立刻运用
播报内容：立刻运用，按钮，点按两次即可激活
案例：img中的按钮
"btn" tabindex="1" role="button" aria-label="开" src="open.png"/>
播报内容：开，按钮，点按两次即可激活
6.数字播报
如：手机号：181**8805中的星号不能正确播报，而是播报成乘，数字播报成整数。
错误播报：一百八十一乘乘乘乘八八零五
需正确播报：幺八幺星号星号星号星号八八零五
可写一个公共办法映射数字、*号和X号播报文案，在需求的转换办法里调用该办法构成手机号播报文案。
公共办法如下：
function $broadcastNumber(number) { if (number === 0) return '零' if (!number) return '' const numberMap = ['零', '幺', '二', '三', '四', '五', '六', '七', '八', '九'] const specialMap = { '*': '星号', 'X': '叉号', 'x': '叉号' } return number.toString().split('').map(item => numberMap[item] || specialMap[item] || item).join('') }
7.自定义事情播报
目前带有点击事情的节点，聚焦后会默许播报点按两次即可激活（系统标准），但是这个引导不够明白，需求就详细交互场景制定播报内容，如：点按两次即可选中，点按两次即可翻开红包等。
计划：在click事情节点里层包裹div，并将焦点tabindex写在这一层的div上，再自定义播报的内容即可。
"content" tabindex="1" ="select"> <div class="amount"> <div class="num">100
<div class="unit">元 <div class="desc">话费充值播报：100元话费充值，点按两次即可激活
"content" ="select"> <div class="container" tabindex="1" aria-label="取得100元的话费充值券，点按两次即可选中"> <div class="amount"> <div class="num">100
<div class="unit">元 <div class="desc">话费充值播报：取得100元话费充值券，点按两次即可选中
8.额外内容播报
如：第几项，共几项，点按两次即可选中
计划：可用空div加aria-label完成
"content" ="select"> <div class="container" :class="{ 'z-active' : code === item.code }" tabindex="1"> <div v-if="code === item.code" aria-label="已选中">
<div class="amount"> <div class="num">{{ item.num }} <div class="unit">元 <div class="desc">{{ item.desc }} <div :aria-label="`第${index+1}项，共${list.length}项，${code === item.code? '' : '点按两次即可选中'}`">9.整体播报
通常整体播报的内容较多，且播报次第非代码书写次第，这个时分就需求在外层焦点里，控制播报的内容，主要可经过两种办法完成，aria-label拼接参数和aria-labelledby设置id。
需求播报的内容：话费充值券，50元满减券，满199元可运用，立刻运用。
（1）aria-label拼接参数
可经过在外层节点设置tabindex=1后，再添加aria-label属性依照需求的次第添加参数
案例：
"content" tabindex="1" :aria-label="`${title}${num}元${type}${rule}${btn}`"> <div class="left"> <div class="amount"> <span class="num">{{ num }} <span class="unit">元
<div class="type">{{ type }} <div class="right"> <div class="desc"> <div class="title">{{ title }} <div class="rule">{{ rule }} <div role="button" class="btn">{{ btn }}（2）aria-labelledby设置id
在外层节点设置tabindex=1后，在需求播报的内容节点里添加id值，并将id值依照需求的次第写在外层节点aria-labelledby属性里
案例：
"content" tabindex="1" aria-labelledby="title amount type rule btn"> <div class="left"> <div id="amount" class="amount"> <span class="num">{{ num }} <span class="unit">元
<div id="type" class="type">{{ type }} <div class="right"> <div class="desc"> <div id="title" class="title">{{ title }} <div id="rule" class="rule">{{ rule }} <div id="btn" role="button" class="btn">{{ btn }}10.部分特殊播报
如优惠券模块，可整体选中播报全部优惠券内容，但内部立刻运用按钮又可聚焦播报跳转。
计划：外层聚焦-设置tabindex=1，播报整块内容设置aria-label拼接参数或aria-labelledby设置id，内层局部内容聚焦，聚焦内容设置tabindex=1，不聚焦的局部设置aria-hidden="true"（不然在选中外层焦点时分，内层非聚焦局部会反复播报）。
"content" tabindex="1" aria-labelledby="title amount type rule btn"> <div class="left" aria-hidden="true"> <div id="amount" class="amount"> <span class="num">{{ num }} <span class="unit">元
<div id="type" class="type">{{ type }} <div class="right"> <div class="desc" aria-hidden="true"> <div id="title" class="title">{{ title }} <div id="rule" class="rule">{{ rule }} <div id="btn" tabindex="1" role="button" class="btn">{{ btn }}11. 处理组件设置aria-labelledby="[id]”后只反复播报第一条数据的内容
因组件被Vue中的模板for循环调用，每个内容不一样，用同一个id会招致播报同一个内容，且没有key值的辨别，需求处理设置aria-labelledby="[id]”后只反复播报第一条数据的内容
此时需求依据独一标识辨别id：可在id后拼接独一标识号，如："amount-${[item.id](http://item.id)}"
案例：
"content" tabindex="1" :aria-labelledby="`amount-${item.id} desc-${item.id}`"> <div id="amount" class="amount">{{ item.amount }}
<div id="desc" class="desc">{{ item.desc }}4.2 组件适配案例
除了详细业务的适配，还有一些共性的组件问题需求组件库统一适配，这样能减少各业务单独适配的工作量。
任何一个无障碍组件的适配，都包含播报内容管理、焦点管理两局部。关于播报内容管理，简直一切的组件适配都会触及到。无障碍aria role、states普通系统都有本人默许的播报行为，尽量坚持系统默许的播报。当然，也能够经过aria-label定制播报内容。焦点管理主要针对元素会发作变化的组件，如弹窗、轮播图、各类选择器等。
焦点管理的根本办法有3种：
tabindex属性；
aria-hidden属性；
el.focus()办法。
tabindex="undefined"即意味着元素不可聚焦，为其他值意味着元素可聚焦。aria-hidden为true，意味着不可聚焦且不播报。关于可聚焦的元素，能够经过el.focus()办法直接聚焦在该元素上。
下面经过典型案例来阐明各个组件是如何处置焦点和播报内容的。另外，由于一个html中可能屡次运用同一个组件，所以下面的案例都是在不运用id属性的根底上完成适配的。假如一定要在某个组件运用id属性，记得经过随机函数对id属性做随机命名。
1. switch、checkbox、radio组件
这几个组件相对简单，运用系统默许的role即可。完成播报内容的适配即可，不需求做焦点管理。
以switch为例：首先是role=switch，然后经过aria-check播报开关状态，最后经过aria-disabled来播报能否禁用。
"nx-switch" tabindex="-1" :aria-checked="!!value" :aria-disabled="disabled" ="onClick" role="switch"> <div :style="barStyle">
<div :style="ringStyle">2.弹窗、对话框组件
弹窗组件是一个相对复杂的组件，既触及到焦点管理，也触及到播报内容管理。经过弹窗组件主要引见焦点管理的小技巧。
该组件正在业务中的运用状况：
我们的弹窗组件相比照较通用，主要包括标题、内容、按钮三个局部。其中，标题、内容既能够经过属性传入，也能够经过slot传入。关于slot传入的局部，组件不太好控制。在业务运用过程中，还普遍存在只要内容的弹窗。
适配目的：弹窗弹出时需求自动聚焦在标题上并播报。
弹窗焦点次第：弹窗弹出时需求自动聚焦在标题上并朗诵标题，然后手动挪动下个焦点聚焦到阐明文本，最后聚焦到操作按钮。
（1）焦点管理
首先，需求处理弹窗弹出时的焦点聚焦问题。由于弹窗组件十分灵敏，所以运用场景也十分多样。关于属性传入的标题，组件内部能够获取到该元素，并完成聚焦播报；关于slot插入的就显得无能为力。
关于slot这种状况，组件和业务商定了一个属性，假如业务想聚焦在这个dom元素上，就给该元素添加这个属性。组件会经过el.querySelector查询弹窗的后代元素，在弹窗弹出时自动添加tabindex并完成聚焦播报。
<nx-popup v-model="isPopupShow.center"> <div nx-popup-aria-auto-focus="true" aria-label="无障碍播报测试" class="nx-popup-center" > Popup Center
另外，思索到有业务请求弹出时不自动聚焦在弹窗上，所以还提供了属性，用于关闭焦点管理功用。
然后，需求处理弹窗关闭时的焦点复原问题。在弹窗弹出前保管当前聚焦的元素document.activeElement，关闭弹窗以后，经过el.focus()手动聚焦在该元素上。
还剩一个焦点穿透问题。很多安卓系统aria-modal属性不起作用，所以焦点还可以穿透弹窗，选中页面上的元素。
目前组件没有特别好的方法处置这点。开发过程中，能够对需求屏蔽的元素添加aria-hidden=true属性
（2）播报内容管理
这局部就显得比拟简单。关于slot的状况，播报内容能够交给业务开发控制；关于属性传入的状况，能够添加组件属性，为业务提供定制化播报的才能。
3.地址选择器组件
地址选择器是一个滚动式交互的组件。在这个组件的开发过程中运用到了一种小技巧，即不聚焦在某元素上，也能自动播报该元素变化的内容。
该组件在业务中的运用状况：业务开发没有对该组件定制化，所以只用思索组件内部的适配即可。
适配目的：在弹窗弹出时自动聚焦到标题上并播报。下图是焦点的排布。
以该图为例，焦点聚焦在第一列的时分，播报“河北省，滑动滚轮控件，可上下滚动切换”；另外，在每一列滚动完毕时，播报当前选中的地址，如“河北省，石家庄市，桥西区”
（1）焦点管理
同弹窗组件。
（2）播报内容管理
这里的难点就在于每一列滚动完毕的时分，需求播报变化后的地址，但是此时焦点还在选中的这列上。
这里添加了一个躲藏的元素（不在页面上显现），并添加属性aria-live="polite"，滚动完毕的时分修正ariaPickerContent的值。假如不想播报则将ariaPickerContent置为空字符串，弹窗关闭的时分记得置为空。
"nx-picker-scroll-aria" aria-live="polite"> {{ ariaPickerContent }}
五、总结
本文是在vivo体系下的无障碍适配理论，主要提炼总结了一些适配办法，对内外部的无障碍适配工作都有一定的参考和自创价值。下一步方案丰厚和完善组件库的适配，沉淀一套高效的适配计划，尽量减少开发人员的适配本钱，进步开发效率。
