aria-hidden读屏

图标的可访问性
现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden="true" 属性。
如果你使用图标是为了表达某些含义（不仅仅是为了装饰用），请确保你所要表达的意思能够通过被辅助设备识别，例如，包含额外的内容并通过 .sr-only 类让其在视觉上表现出隐藏的效果。
如果你所创建的组件不包含任何文本内容（例如， <button> 内只包含了一个图标），你应当提供其他的内容来表示这个控件的意图，这样就能让使用辅助设备的用户知道其作用了。这种情况下，你可以为控件添加 aria-label 属相。

aria-label及aria-labelledby应用

aria-label属性
正常情况下，会在表单里给input组件指定对应的label，当用户tab到输入框时，读屏软件就会读出相应label里的文本。
如：<label for=”username”>用户名：</label><input type=”text” id=”username”/>
当没有给输入框设计对应的label文本的位置时，aria-label属性为组件指定内置的文本标签。它不在视觉上呈现。
如：<input type=”text” aria-label=”用户名”/>
此时，当焦点落到该输入框时，读屏软件就会读出aria-label里的内容，即“用户名”。
经测试，aria-label只有加在可被tab到的元素上，读屏才会读出其中的内容。
以下情况，也是可以读出的：<span tabindex=”0″ aria-label=”标签提示内容”>可被tab的span标签</span>

aria-labelledby属性
当想要的标签文本已在其他元素中存在时，可以将其值为该元素的id。

<div role=”form” aria-labelledby=”form-title”>
<span id=” form-title”>使用手机号码注册</span>
<form>……</form>
</div>
表单区添加了landmark标识role=”form”，在争渡中使用字母”D“键会在lankmark标识之间跳转。
当跳转到该区域时，不仅会读出”表单区“，也会读出”使用手机号码注册“。
如果一个元素同时有aria-labelledby和aria-label，读屏软件会优先读出aria-labelledby的内容。

转载于:https://www.cnblogs.com/pzx-java/p/7284423.html

aria-hidden读屏相关推荐

张赐荣 | 浅谈 UIAutomation 自动化技术在读屏软件中的应用
读屏软件工作原理 [文 / 张赐荣] Windows UIAutomation 是 Windows 操作系统中的软件自动化技术,能让开发人员通过编程方式访问和操作 Windows 系统中的用户界面元素 ...
安卓Accessibility（Talkback无障碍读屏器）适配笔记
读屏器是安卓上的一种无障碍应用,方便更多人使用安卓手机.它使用的是系统TTS,需下载语音包.如果没有Talkback,也可以自行安装. 具体操作可以看这个视频:盲人怎么用手机?如何打造视障友善的app ...
常见计算机从零开始 E.读屏软件的使用(转)
常见计算机从零开始 E.读屏软件的使用(转)[@more@] E.1 读屏软件使用指南读屏软件的新特色读屏软件是专为盲人或视力有障碍的人设计的屏幕朗读软件.您将通过数字键盘的切换操作,以及大键盘上 ...
争渡读屏，做最好用的读屏软件免费的盲人电脑和手机读屏软件
争渡读屏,做最好用的读屏软件免费的盲人电脑和手机读屏软件下载地址:http://www.zdsr.net 争渡读屏,做最好用的读屏软件 2015(1.4.9.1) 1.新增语音引擎管理,优化语音方 ...
易语言编程: 让读屏软件可获取标签控件的文本
易语言编程: 让读屏软件可获取标签控件的文本将易语言的非标准标签控件修改为标准的标签控件,使屏幕阅读器可获取到标签的内容在使用易语言创建窗口控件时,我们会发现:易语言的编辑框.组合框.列表框等控件 ...
linux读屏软件下载,Orca读屏软件
Orca读屏软件 (2014年4月25日更新) Linux下最主要的读屏软件叫Orca,中文意思是虎鲸,又有另一个更为人熟知的名称叫杀人鲸.读屏软件是盲人使用计算机最重要的软件,本节本来应该放在教程的 ...
读屏时代，我们正在陷入一场悄无声息的自杀！
很遗憾,这并不是一个耸人听闻的标题. 我们来看几组数据. 1.2011年,中日韩三国联合组织的一次住宅照明健康度的调研中,我国的住宅照明达标率极低,达标率最高的客厅也只有11.6%.同年,北京市疾控中 ...
苹果读屏技术--VoiceOver
苹果读屏技术–VoiceOver 一.系统VoiceOver使用简介 iPhone上开启VoiceOver功能后,就可以通过手势来操作当前界面中的所有的AccessibilityElement(被Vo ...
Godot Shader：读屏着色器
原文地址:Docs » Shading » Screen-reading shaders 导论我们经常会渴望能够在shader中读取当前正在绘制的屏幕信息.然而诸如OpenGL DirectX 等3 ...

aria-hidden读屏

aria-hidden读屏相关推荐

最新文章

热门文章