- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端博客
Web内容的无障碍性(2):实现WAI-ARIA无障碍网页及注意
上篇《Web内容的无障碍性(1):概述为什么Accessibility无障碍如此重要》概述了Web无障碍设计，先来复习一下概念：Web无障碍设计（Accessibility in Web design， 其全称是’Accessible Rich Internet Applications’，是WAI-ARIA的一部分（它是W3C的Web无障碍推进组织(Web Accessibility Initiative WAI-ARIA是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。主要针对的是视觉缺陷，失聪，行动不便的残疾人以及假装残疾的测试人员。 有人会说，我使用HTML5, 恩，确实，HTML5的出现大大增强了网页的可访问性和无障碍阅读，但是，其不是万能的，例如无法让盲人知道模拟控件的类型等。 (2):实现WAI-ARIA无障碍网页及注意实现》,请注明出处：https://www.zhoulujun.cn/html/webfront/SGML/web/2016_0328_8342.html
1.6K21编辑于 2023-05-07 - 来自专栏前端小菜鸡yym
React 无障碍
---- 这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战」 无障碍 JSX 支持所有 aria-* HTML 属性。 语义化的 HTML 语义化的 HTML 是无障碍辅助功能网络应用的基础。 利用多种 HTML 元素来强化您网站中的信息通常可以使您直接获得无障碍辅助功能。 有时，语义化的 HTML 会被破坏。 render(){ return(
1 2< render(){ return( <Fragment> - 1
- 2< React.Component{ render(){ return( <>
- 1
- 2<
50030编辑于 2023-01-12来自专栏韩曙亮的移动开发专栏【Android 应用开发】Android 无障碍开发简介 ( Android 无障碍开发辅助技术 | 启用 TalkBack 无障碍功能 | TalkBack 无障碍开发 示例 )
文章目录 一、Android 无障碍开发辅助技术 二、启用 TalkBack 无障碍功能 三、TalkBack 无障碍功能代码示例 官方文档 : Android 无障碍功能概览 一、Android 无障碍开发辅助技术 ---- Android 无障碍开发 的作用是 为 残障人士 提供 更好的移动设备使用体验 ; 借助 无障碍开发 可以 降低 访问设备应用程序 的难度 ; Android 为 无障碍开发 提供了 多种辅助技术 , 使用键盘 , 鼠标 等外设控制焦点 , 正确地管理焦点 是关键 ; 二、启用 TalkBack 无障碍功能 ---- 进入 Android 设备系统设置 , 选择 " 无障碍 " 选项 ; 在 无障碍 界面中 , 选择 " 音量快捷键方式 TalkBack " 选项 ; 开启 TalkBack , 使用时 , 同时按下两个音量键 , 即可启用 TalkBack 无障碍功能 ; 三、 无障碍功能后 , 浏览该布局页面时 , 会读取 组件中配置的 android:contentDescription 属性 ; TalkBack 无障碍功能代码示例 : <Button android
2.5K20编辑于 2023-04-02来自专栏脑洞前端无障碍设计
下面这个界面中，有 2 个 input field， 如果我想 「 tell your story」，我该点哪？ ? 但标题是限定在2条水平线内的，并且用户可以点击下面的任意处开始输入笔记内容。 ? how, but if anything… I am here to help as well. 2 听觉无障碍设计 「听觉障碍」包括：听不清/听不到到界面发出的声音。 左边错误做法：用户没法与弹窗交互； 右边正确做法：焦点落在2个按钮上，用户可选择相应操作，或者关闭弹窗。 右边正确做法：删除「1」后，焦点显示在「2」上。 3.6 保持使用的一致性 这是「无障碍设计」中一个很重要的问题。
1.9K60发布于 2019-10-24来自专栏教你做小游戏什么是无障碍适配？
今天，本文会给大家介绍一下：什么是无障碍适配。后续我将继续给大家介绍，如何实现无障碍适配。什么是无障碍要给网页做无障碍适配，我们需要明白：什么是无障碍。 百度百科定义：无障碍，在发展过程中没有阻碍，活动能够顺利进行。 我们要做的核心工作就是：开发 无障碍软件 可识别的 Web页面，让障碍群体借助操作系统的 无障碍软件，可以正常访问、使用我们的 Web页面。 ，而iOS对无障碍适配就非常优秀。 推荐阅读MDN对无障碍的介绍Apple对无障碍的支持Android对无障碍的支持写在最后我是HullQin，公众号线下聚会游戏的作者（欢迎关注我，交个朋友）。转发本文前需获得作者HullQin授权。
3.9K73编辑于 2023-05-29来自专栏教你做小游戏Web如何适配无障碍？
上篇文章介绍了《什么是无障碍适配？》，推荐大家先读一下。今天我给大家介绍，前端开发者如何实现无障碍适配。1. 认识ARIA你需要了解一下ARIA。 常见的属性这里列举了2个最常用的属性。更多属性，建议你去阅读官方文档，浏览一遍，看看都有什么属性，到时候有需要了，再去详查用法：ARIA相关属性。 2. 这是不对的，无障碍软件可能无法识别到它是有点击事件的，就不会播报出来。建议点击事件尽量只绑定在或<button>这种原生clickable的元素上，而不是
上。3. 这对视障群体并不友好，因为焦点多、密集，明明是同一块内容，却分散到2个焦点上，这不方便他们摸索整个页面。4.5K63编辑于 2023-05-29来自专栏网页杂谈无障碍安装Windows11
距离2021年10月5日微软宣布Windows11全面上市快半年了，家里一台台机和10年老本由于TPM2.0等问题而没有升级安装，虽然网上有如改注册表等方法可以绕开，但听说后面升级容易出问题，因此一直没动手安排。
1.1K10编辑于 2022-11-11来自专栏FunTester可访问性测试（无障碍测试）
误解4:无障碍测试是针对盲人和残疾人的。 事实:软件对所有人都是有用的，因此这个测试是针对所有用户的。 无障碍测试的挑战 以下是无障碍指南试图解决的一些常见挑战或困难: 伤残类型 伤残描述 视觉障碍 完全失明或色盲或视力差视觉问题，如视觉频闪和闪烁效果问题 身体残疾 难以使用键盘或鼠标 认知障碍 学习困难或记忆力差 很少有其他部门也制定了自己的指南，但这些指南也遵循了Web无障碍倡议(WAI)指南。 # 2)执行: 作为一个负责任的组织，你应该对创建一个可访问的网站负责。我们应该这样做，而不是让用户自己对一个可访问的网站负责。 #2)不访问图像: 暂时，你可以关闭访问，看看文本是否合理的内容，因为有些人可能没有访问权限，或者有时它需要很长时间来加载图像。
1.5K51编辑于 2023-08-04来自专栏ThoughtWorks前端无障碍开发指南
2. 96.8% 的首页检测到了 WCAG 2 错误，未能达到 WCAG 2的标准，尽管现在最新的标准是WCAG 2.1 3. 2. 未定义
标签的alt属性，影响辅助技术（Assistive technologies, ATs) 如屏幕阅读器等设备获取图片信息。 3. 2. 正确使用 label，为 <input /> 标签设置对应的 label 在实现表单时，我们往往会通过 placeholder 来提示当前表单项的填写内容。 提升前端框架的无障碍支持性 规则 1：使用语义化 HTML 标签，完善 HTML 标签的属性 规则 2：在设计组件时考虑整体的 HTML 结构 维护层级明晰的 HTML 结构，对于 Web 应用的无障碍功能十分重要 比如当一个组件包含 <h2> 标签时，可能在一些位置该组件会破坏原有 HTML 文档结构。
2.3K20编辑于 2023-05-22来自专栏wOw的Android小站无障碍快捷方式相关代码
问题：无障碍快捷方式（Accessibility Shortcut）打开不生效。 ? 如图，打开功能后，长按power键会出现振动，震动后双指放在屏幕上会打开无障碍。 无障碍的功能从来没有接触过，也不清楚在哪个模块修改，所以下面记录一下如何快速定位这种问题的思路： 在Opengrok检索"Accessibility Shortcut"找到字串accessibility_global_gesture_preference_title
2.2K10发布于 2018-09-18来自专栏姓王者的博客通过创建小测验学习无障碍
无障碍环境正在使你的网页便于所有人使用——甚至是残疾人。 在这个课程中，你将建立一个测验网页。你将学习诸如键盘快捷键、ARIA 属性和设计最佳实践等无障碍工具。 a1"> <input type="radio" id="q<em>2</em>-a1" name="q<em>2</em>" value="true" /> a2"> <input type="radio" id="q<em>2</em>-a<em>2</em>" name="q<em>2</em>" value="false" /> a1"> <input type="radio" id="q<em>2</em>-a1" name="q<em>2</em>" value="true" /> a2"> <input type="radio" id="q<em>2</em>-a<em>2</em>" name="q<em>2</em>" value="false" />
31110编辑于 2024-10-31来自专栏JetPack山川湖海 - Android无障碍功能优化实践
所以无障碍功能是应用开发中的重要组成部分，通过集成无障碍功能和服务，可以提高应用的易用性尤其是对于残障用户而言。 - 对于无障碍的支持 GoogleIO-2021-无障碍分场 那无障碍适配是不是很困难啊？ --禁止在无障碍模式下访问--> <enum name="no" value="<em>2</em>" /> <! 测试你的无障碍适配 相应的，Google 也提供了一些工具用于查看你的适配是否合理。 比如无障碍功能扫描仪，官方使用文档如下。 参考 随手记Android无障碍实践 Android无障碍适配准则 让自定义的视图使用起来没有障碍 Android无障碍功能帮助
1.3K20编辑于 2022-02-09来自专栏Web行业观察简单了解下无障碍设计模式
无障碍 无障碍设计使任何人（无论什么能力）都能成功地浏览、理解和使用您的应用。 原则 一款设计良好的产品可供所有能力的用户使用，包括视力低下、失明、听力障碍、认知障碍或运动障碍的用户。 有关设计和开发完全无障碍的产品的详情，请访问Google 无障碍网站。 明确的 通过使用清晰的布局设计、功能明确的操作，来帮助用户浏览你的应用。 实施 通过使用标准的平台控件，你的应用将自动包含与平台无障碍技术协同工作所需的标记和代码。调整你的应用，以兼容每个平台的无障碍功能标准和无障碍技术（包括快捷方式和结构），为用户提供更高效的体验。 标记搜索图标 2. 标记麦克风图标 1. 标记编辑图标 2. 标记聊天图标 帮助文档 任何具有特殊无障碍功能的功能都应包含在帮助文档中。确保帮助文档的相关性、可访问性和可发现性。 使用屏幕阅读器测试你的应用，以确定那些缺失无障碍文本、或需要更好的无障碍文本的区域。 保持简洁 保持内容和无障碍文本简短、并切中主题。屏幕阅读器用户会听到每个 UI 元素的朗读。
6.7K40发布于 2018-10-31来自专栏Web大前端Web Accessibility基础：构建无障碍的前端应用
Web Accessibility（网络无障碍）是确保所有人都能平等访问和使用网站和应用程序的关键。这包括视觉、听觉、运动和认知能力有限的用户。以下是一些构建无障碍前端应用的基础原则和代码示例：1.
2.
57010编辑于 2024-08-19来自专栏JetPack山川湖海 - Android无障碍功能优化实践
所以无障碍功能是应用开发中的重要组成部分，通过集成无障碍功能和服务，可以提高应用的易用性尤其是对于残障用户而言。 - 对于无障碍的支持 GoogleIO-2021-无障碍分场 那无障碍适配是不是很困难啊？ --禁止在无障碍模式下访问--> <enum name="no" value="<em>2</em>" /> <! 测试你的无障碍适配 相应的，Google 也提供了一些工具用于查看你的适配是否合理。 比如无障碍功能扫描仪，官方使用文档如下。 是谁来自山川湖海，却囿于昼夜、厨房与爱 《万能青年旅店乐队》 参考 随手记Android无障碍实践 Android无障碍适配准则 让自定义的视图使用起来没有障碍 Android无障碍功能帮助 我是Petterp
1.2K21编辑于 2022-01-24来自专栏ThoughtWorks关于信息无障碍我们能做些什么
中国有2亿多的障碍群体，其中包括 1700 万视障者，2000 万听力障碍者，7000 万读写障碍者，1.5 亿 65 岁以上的老年人等等，加上其他各种类型障碍人群，这些障碍人士加起来占中国人口总数 20% ，据我所知它设计的初衷是为了方便轮椅上下台阶，但是实际上大家应该都有发现，它也方便了自行车和婴儿推车；你可能见过很多电梯的按钮都刻有盲文，很多地铁站都设有无障碍通道，无障碍卫生间等等，这些都与无障碍有关 信息无障碍，英文来自Accessibility，但是这篇文章我们主要聊一聊Web的无障碍问题，相比于W3C的定义，其实我更喜欢维基百科给出的解释。 W3C也提供了各个国家的相关无障碍法，有若干国家在其网络无障碍功能法律要求中明令，必须使用国际标准指南，了解过国内的一些资料，虽然到现在已经有一些 App 优化了很多的无障碍功能，但是大部分的网站无障碍访问依然不是很乐观 2. 尽可能地使用语义化标签 正确地使用各个语义化的标签，不仅是代码质量的提高，对阅读代码的人也会有极大的帮助，同样对于开发成本、网站的SEO来说都是有好处的。
1.1K20发布于 2019-10-28来自专栏京程一灯使用 AI 为 Web 网页增加无障碍功能
对那时的我来说，无障碍永远是“考虑考虑”的事，直到有一天我收到了来自我的一个项目的用户的邮件。 ? 我是盲人，用了很长一段时间才弄清楚它们的内容 :/来自某人” 在收到邮件的时候，无障碍功能的开发是放在我开发队列的最后面的，基本上它就是个“事后有空再添加”的想法而已。但是，这封邮件唤醒了我。 在互联网中，有许多的人需要无障碍阅读功能来理解网站、应用、项目等事物的用途。 im2txt 的实例来自 im2txt Github Repository im2txt 的技术细节： 这个模型的机制相当的精致，但是它基本上是一个“编码器 - 解码器”的方案。 图为此神经网络的概况（图片来自 im2txt Github repository） 根据 Github 库中的说明，这个模型在 Tesla k20m GPU 上的训练时间大约为 1-2 周（在我笔记本的标准
1.1K10发布于 2019-03-28来自专栏JetPack山川湖海 | Android无障碍代理的那些事
本篇是无障碍系列第二篇 - Android无障碍代理的那些事 本篇将聊一聊什么是无障碍代理，及结合实际场景，分享一下我们对于无障碍代理的使用,并且如何让其更加易用。 什么是无障碍代理？ 当用户在无障碍模式下时，用户在界面上与View的所有操作，都会触发相应的无障碍事件，这些事件最终由 无障碍服务处理 ，其会利用这些事件中的信息生成反馈和提示。 响应无障碍事件，完善自定义的无障碍提示,以及做出一些更改 捕获在用户无障碍下的行为信息,比如做数据统计或分析 前者这也是无障碍代理诞生的主因，而后者是我们近期在排查时，发现某个厂商sdk其内部的一个操作 通过此步骤，父视图可以使用其他信息修改无障碍事件。仅当您的自定义视图具有子视图且父视图可以向无障碍事件提供有助于无障碍服务的上下文信息时，才应实现此方法。 优化2 -> 前段时间同事在review代码时提到，你的无障碍这块能不能再简化一点?
1K00编辑于 2022-04-20来自专栏walterlv - 吕毅的博客UI 设计中的视觉无障碍设计
UI 设计中的视觉无障碍设计 作为三色视觉的程序员和设计师，刚刚我们想象了一把双色视觉的色盲世界，又被四色视觉的异人逼着看叶子的形状找草体验了一把当色盲的感觉。 但是我们可以尽量照顾到红绿色盲人群，因为这在色盲人种的比例是最高的，剩余的人群占比非常低，我们将考虑用非颜色元素来实现无障碍设计。 那么，如何挑选呢？ ▲ 色盲模拟器模拟的输入框验证 2 也就是说，找到错误的公式会像我们前面从草丛种分辨出狗尾草一样困难。 ▲ 色盲模拟器模拟的输入框验证 2 另外，前面我标注人类、鸟类和异人的波长点用的是符号而不是颜色。在制作图表的时候，通常也应该考虑使用符号代替颜色。 推荐一些工具用来手工检查界面是否做到了无障碍设计 本文开头我们说到色盲模拟器并不能模拟色盲眼中的世界，但是我们却可以用这些模拟器来评估我们的 UI 设计是否能让色盲者无障碍地使用。
1.8K20发布于 2018-09-18来自专栏京程一灯增强网站无障碍功能的十条准则
我们推荐Sketch的插件Stark plugin，来检查你的设计是否能满足无障碍的需求。 2.不要禁止缩放行为（约五分钟） 在这个自适应设计遍布的时代，我们总会犯一些违反自适应性的错误。 2 2 6.48 2 12s4.47 10 9.99 0h24v24H0z" /> </symbol> 4.给视频加副标题和说明 这可能是WCAG最难实现的标准之一，不是说技术实现很难，而是说这件事很耗时 如果你想，也可以改个名字，比如.pottersCloak，FYI. 9.遵循网站无障碍功能标准（大约每周花30分钟） 网络无障碍是很难达到，所以就有了标准和一些规范作为指导。 hl=en) 另一个你可以每天都来测试无障碍功能的浏览器插件。 虽然还没有100% 的达到2、7 的要求，不过我们一直在朝这个方向努力 结语 网络无障碍并不那么简单，但如果你把它当成日常工作的一部分（而不是最后一分钟的检查清单），那么实现和测试工作都会容易很多。
1.2K41发布于 2019-03-27腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059
粤公网安备44030502008569号腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号