可读键
这是你需要的最后一只(可以使用的)木马
一个完全无障碍的,WCAG 2.0 / 2.1 兼容的,Slick Sliver (1.8.1)的即时接班替换,旨在为需要通过无障碍审计的真人大队提供生活便利.
此软件包执行 无障碍和易用性改进 由本地屏幕阅读器用户、低视力用户和专家无障碍咨询员设计并测试 无障碍360 基于他们的经验 帮助使数百个旋转木马 可供世界各地的客户使用。 读取更多关于 此软件包为何存在页:1 特性, (中文(简体) ), 怎样使用它,以及 你怎么参与进来的!
演示
https://accessibil360.github.io/accessbility-slick (中文(简体) )
看这个 收集 CodePen 上的现成演示 对于常见的情景,如英雄旗帜,滚动产品卡,PDP缩略图图像,以及更多!
光盘N
使用 jsDelivr 示例
在您的 CSS 文件中添加链接 <head>数字 :
<!-- Add the core slick.min.css -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/@accessible360/[email protected]/slick/slick.min.css">
<!-- Add ONE of the theme files (accessible version or original) -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/@accessible360/[email protected]/slick/accessible-slick-theme.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/@accessible360/[email protected]/slick/slick-theme.min.css">
那么 在你关门之前 <body> 标签添加 :
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/@accessible360/[email protected]/slick/slick.min.js"></script>
软件包管理器
npm install accessible-slick
为什么需要这个?
几乎从设计上看,木马对屏幕阅读器使用者(尤其是新人)来说是相当难以理解并成功与互动的,更不用说享受了. 它很难知道从哪里开始和结束幻灯片,幻灯片导航点是如何工作的,或者各种控件在哪里. 卡卢塞尔在网站之间甚至页面之间也有很大的差异,因此屏幕阅读器用户可能难以建立适用于所有卡卢塞尔的可靠的心理模型. 让我们甚至不要开始 自动播放功能(2.2.2有人吗!
作为最广泛使用的木马套装之一,斯利克滑行者拥有许多相同的无障碍问题,这使得Dev团队在通过无障碍审计时始终感到沮丧. 在Slick滑行者回放中已作出努力来改善这些问题(特别是在1.8.1版),但这些努力也带来了新的无障碍问题!
从长远来看,对Slick滑行器核心回波做一些改进是件好事,但考虑到这一点,这或许是不可能的 已废弃 (但并未被贬)由自2016年起为原作者. 一个或两个维护者最近加强 恢复开发,但是 1 000个未决问题 差不多了 差不多了 200 张公开公关 (有些有冲突的方法),它不太可能所需的大修会很快到达主分支.
短期内,我们将发布一个无障碍的 Slick滑行器 执行作为叉子 尽可能尊重原始功能和API 特性 这样你就可以改善你的旋转木马的无障碍性 现在我们会通过所有相同的渠道(如国家预防机制和jsDelivr)提供,所以升级和改变你的URL一样容易 <link> 财务报告和审定财务报表 <script> 标记无需平移 触摸 您现有的 JavaScript 代码 !
是什么使这个无障碍?
这个软件包执行以下修改,这些修改都经过了彻底的测试,并与Accessable360的本土屏幕阅读器用户团队,低视力用户,以及有经验的可访问性工程师进行了讨论:
新特性 QQ
| 特性 | 为什么 |
|---|---|
包装 现在有了 role="region" 和可配置的 aria-label。 。 。 . |
告诉屏幕阅读器用户在DOM中旋转木马的始末的确切位置,并给他们一个可以跳到或容易跳过的地标. 使用 regionLabel 设置 更改 aria-label 文本( 默认为 'carousel') (中文(简体) ). |
每张幻灯片 现在有了 role="group" 带有通用编号 aria-label。 。 。 . |
告诉屏幕阅读器用户DOM中每张幻灯片的起始和结尾的确切位置. 它应该适合绝大多数 使用案例,但如果你 痷 想要禁用它, 您可以使用新程序这样做 useGroupRole 设置。 。 。 . |
| 启用自动播放现在自动添加一个 暂停/ 播放切换按钮 作为第一个可聚焦要素(与 可自定义的图标{\fn华文仿宋\fs16\1cHD1D1D1}. | 2.2.2 要求所有自动更新的内容都带有暂停、停止或隐藏的方式。 对于旋转木马来说,暂停/游戏图标按钮是最熟悉的选项. 由于自动播放对于键盘和屏幕阅读器用户以及具有一定认知条件的人来说是那么的干扰,所以按钮是滑行器中最先的内容,所以可以立刻到达. |
| 现在可以提供说明 屏幕阅读器用户 | 如果你的滑动器使用了复杂的逻辑或者非常规的交互行为,那么屏幕阅读器的用户很有可能会有特别困难的时间去想出来. 如果你正在使用这个 asNavFor 设置或任何 API 方法/事件,您也许应该解释您的旋转木马如何对读者用户进行筛选. |
| 这个 上个和下个箭头现在可以放置 在DOM中,在前,后,或者在幻灯片的两侧与外观设计相匹配. | 设计者有时会用滑动器获得真正的创造力,因此很难确保所有的控制和滑动内容在页面的DOM中按照逻辑顺序排列(1.3.2 世界保护理事会)和标签序列(2.4.3 世界保护理事会) (中文(简体) ). 使用新的 arrowsPlacement 设置,您现在可以控制上下个按钮的注入位置,以更好地匹配外观设计! |
| A 类 比较方便的 CSS 主题 现在已有更好的焦点样式和更大的图标. | 最初的 CSS 主题 (slick-theme.min.css)的图标很小,重点指标差. 现在有另一个主题(accessible-slick-theme.min.css),带有更大的图标和浏览器-默认焦点指标. 为了尽量减少可能打破样式变化的风险,这一主题是: 选入只要更新您的 <link> 参考使用它! 看看这个 演示页面 让它行动起来. |
当中心模式启用时 aria-label 会 议 日 程 和 议 程 现在将用“( 以中) ” 文本来附加居中幻灯片。 。 。 . |
如所示 原始实例,可以将自定义样式应用到中央幻灯片上以强调它。 由于无法确定何时完成,最安全的选项就是总是告诉屏幕阅读器用户哪个是中心幻灯片. |
特性变化
| 特性 | 为什么 |
|---|---|
| 上下个按钮标记 改进后可以使用较少的ARIA并安全地从屏幕阅读器中隐藏图标. | 个人 ARIA的第一条规则, (中文(简体) ), aria-label 已删除, 支持只读取内屏幕文本。 此外, HTML5 语言 disabled 现在使用属性代替 aria-disabled 使所有输入方式更加一致。 最后,自定义图标附在内部 span正确隐藏在屏幕阅读器中的 s aria-hidden。 。 。 . |
| 标签标记不再用于 幻灯片点 或者说 幻灯片。 。 。 . | 木马 不要像标签,因此真实的用户不会期望他们像分页一样工作,特别是当一次有多个可以看到的幻灯片时. |
键盘导航 Left 财务报告和审定财务报表 Right 箭头键 已删除。 。 。 . |
这个 Left 财务报告和审定财务报表 Right 键已经被屏幕阅读器用于虚拟光标导航,其他用户没有理由期望这个功能在没有可见指令或线索的情况下存在. |
当幻灯片是 初始化后动态添加现在他们自动得到 role="group" 编号 aria-label。 。 。 . |
API 期望您提供您添加的每张幻灯片的完整标记, 包括其包装 。 然而,开发者可能没有意识到他们需要添加这些属性以方便访问,所以会自动地添加这些属性来保证他们在那里. 这也确保了与任何现有执行的后向兼容. |
使用量
所有原始事件和方法,以及大多数原始设置,仍然可用,并按预期工作,所以你现有的配置完全不需要更新! 参考原始 Slick Sliver 文档查看如何使用 :
新设置 QQ
除原有功能外,还新增了以下设置: 1
| 设置 | 类型 | 默认 | 说明 |
|---|---|---|---|
| 箭头 | 字符串( “ 在 Slides 之前” ) | 无效 | 确定在滑动 DOM 中放置上个和下个箭头的位置,DOM 将决定其打动顺序。 箭头可以放在幻灯片之前或幻灯片之后,也可以拆分,使上个箭头放在幻灯片之前,下个箭头放在后面(这是默认的). 使用此设置可确保以您的外观设计为基础的打字顺序符合逻辑 1.3.2 世界保护理事会 财务报告和审定财务报表 2.4.3 国家。 。 。 . |
| 指令文本 | 字符串 | null | 对屏幕阅读器用户的指令放置在滑动标记的起端. 使用时 asNavFor 或者用 API 方法/活动添加自定义功能, 您可能需要提供指令 ! |
| 暂停 | 字符串 (html QQ j查询选择器) QQ对象 (DOM节点 QQ j查询对象) | <span class="slick-pause-icon" aria-hidden="true"></span> | 自定义元素用作自动播放暂停/ 播放切换按钮中的“ 暂停” 图标, 当 autoplay 已启用. |
| 播放图标 | 字符串 (html QQ j查询选择器) QQ对象 (DOM节点 QQ j查询对象) | <span class="slick-play-icon" aria-hidden="true"></span> | 自定义元素, 用于自动播放暂停/ 播放切换按钮中的“ 播放” 图标, 当 autoplay 已启用. |
| 区域标签 | 字符串 | "木卫一" | 用于 aria-label 放在包装上. |
| 使用分组移动 | 布尔 | 真实 | 是否控制 role="group" 还有一个 aria-label 用于每个幻灯片. |
| 使用自动播放切换按钮 | 布尔 | 真实 | 控制启用自动播放时是否添加了暂停/播放图标按钮 。 设为 false 不提供替代控制可能违反 2.2.2小心点! |
折旧设置 QQ
以下设置已经从 API 中删除, 但如果您通过初始化功能或数据属性传递这些设置, 就不会发生什么坏事 ! 如果任何这样的设置被传入,你只会得到一个软控制台警告,让你知道设置不再相关.
| 设置 | 理由 |
|---|---|
| 无障碍 | 平等机会不应成为可以关闭的特征。 此设置实际上使幻灯片 减 可以通过引入不直观的制表符标记,键盘导航等与屏幕阅读器相冲突的方式访问,等等. 参见第12期。 。 。 . |
| 焦点变化 | 人数 WCAG 3.2.2 和用户研究,键盘焦点绝不应被移动,除非提前告知用户. 即使在解释时,像这样移动焦点对键盘用户来说也是不好的,所以这个设置必须去. 见第11期。 。 。 . |
| 焦点选择 | 由于键盘导航已被删除,所以没有必要 。 即使有了键盘导航,对于键盘用户来说,对不可操作元素的制表站也非常奇怪,实际上只是为他们添加了工作. 见第11期。 。 。 . |
发展
如果您想为自己的用途贡献改动或仅作修改,请使用以下过程: 1
- 安装国家预防机制的所有依赖性:
npm install
-
更改源文件 。 你会想专注于:
slick/slick.jsslick/slick.scssslick/slick-theme.scss
-
建起来! 多种建设系统可供使用来帮助未来防守. 使用您喜欢的任意一种 - 输出是相同的!
# Build with Gulp (see gulpfile.js)
gulp
# OR build with Grunt (see gruntfile.js)
grunt
- 通过加载检查您的更改
docs/index.html在您的浏览器中.
捐款
贷项
大规模库多到 肯・惠勒 一、导 言 滑块社区 用于创建原始软件包.
这个叉子是由 杰森·韦伯b,开发者 无障碍360。 。 。 .
