When to use describedby:

For example you have a close button:

<button aria-describedby="closeReadable">X</button>
<p>Some kind of content</p>
<p id="closeReadable" class="visuallyHidden">Close this window</p>

When to use labelledby:

For example you have Billing section, inside you have address field. Just memtion address to the user, they won't understand, it is better to say "Billing address":

<h4 id="bukkubg_header">Billing </h4>

<label for ="form_address" id ="form_address">
<input type="text" name="form_address" aria-labelledby="billing_header form_address" />
</label>

[ARIA] aria-describedby & aria-labelledby的更多相关文章

  1. web语义化之SEO和ARIA

    在快速理解web语义化的时候,只知道web语义化有利于SEO和便于屏幕阅读器阅读,但并不知道它是如何有利于SEO和便于阅读器阅读的,带着这个疑问,进行了一番探索总结. SEO 什么是SEO? SEO( ...

  2. [翻译]如何在HTML5中有效使用ARIA

    ARIA是Accessible Rich Internet Application的简称,指无障碍富互联网应用.可以使一些有功能障碍(如听力,视力)的人群,使用你的网站.下面看一下做为开发人员的我们, ...

  3. WebComponent魔法堂:深究Custom Element 之 标准构建

    前言  通过<WebComponent魔法堂:深究Custom Element 之 面向痛点编程>,我们明白到其实Custom Element并不是什么新东西,我们甚至可以在IE5.5上定 ...

  4. datatables中的Options总结(2)

    datatables中的Options总结(2) 五.datatable,列 columnDefs.targets 分配一个或多个列的列定义. columnDefs 设置列定义初始化属性. colum ...

  5. 无障碍网页设计(WCAG2.0)

    无障碍化是指无论健全人还是残疾人,年轻人还是老年人都可以平等地获取互联网上的信息和服务.无障碍化网站建设不单可以增加网站的受益群体,更是一个有情怀.有担当的互联网企业的责任,也是一个互联网从业人员应该 ...

  6. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.5.Accordion控件

    accordion是另一个UI控件,能允许你将一组content加入相互分隔的.能够被浏览者的交互打开或关闭的panels中.因此,它大多数的content在初始化的时候是隐藏的,很像tabs控件.每 ...

  7. (转)TCP注册端口号大全

    分类: 网络与安全 cisco-sccp 2000/tcp Cisco SCCPcisco-sccp 2000/udp Cisco SCCp# Dan Wing <dwing&cisco ...

  8. 使用 HTML5 设计辅助功能

    使用 HTML5 设计辅助功能 Rajesh Lal 下载代码示例 如果您真的对面向广大受众感兴趣,将需要为网站设计辅助功能. 辅助功能使网页更易于访问.更易于使用,可供每个人浏览. 通常,使用最新的 ...

  9. 雅虎UED--无障碍网页设计

    转自:http://www.sharetk.com/html/ued/Interactive-Design/1394.html 随着web使用量的增加和人们网络意识的增强,一些特殊用户开始被我们所关注 ...

  10. 如何通过fpmmm和zabbix来监控客户机上MariaDB数据库运行情况

    首先在客户机安装MariaDB和zabbix,参考上一篇 安装fpmmm的过程主要参考[1]. 安装fpmmm的依赖 shell> yum install php-cli php-process ...

随机推荐

  1. Python进阶:并发编程之Asyncio

    什么是Asyncio 多线程有诸多优点且应用广泛,但也存在一定的局限性: 比如,多线程运行过程容易被打断,因此有可能出现 race condition 的情况:再如,线程切换本身存在一定的损耗,线程数 ...

  2. 怎样使用U盘安装系统

    准备工作 一个8G及以上的U盘: 软碟通UltraISO,下载地址,非免费,但试用就够了: 系统镜像,推荐去MSDN下载: 安装过程 利用U盘制作启动盘,准备好上述的东西,然后开始制作启动盘: 注意: ...

  3. count_if 功能模板

    count_if 功能模板 template <class InputIterator, class UnaryPredicate> typename iterator_traits< ...

  4. 从损失函数优化角度:讨论“线性回归(linear regression)”与”线性分类(linear classification)“的联系与区别

    1. 主要观点 线性模型是线性回归和线性分类的基础 线性回归和线性分类模型的差异主要在于损失函数形式上,我们可以将其看做是线性模型在多维空间中“不同方向”和“不同位置”的两种表现形式 损失函数是一种优 ...

  5. Spring Boot 优雅的配置拦截器方式

    https://my.oschina.net/bianxin/blog/2876640 https://cs.xieyonghui.com/java/55.html 其实spring boot拦截器的 ...

  6. 相似文档查找算法之 simHash及其 java 实现

    传统的 hash 算法只负责将原始内容尽量均匀随机地映射为一个签名值,原理上相当于伪随机数产生算法.产生的两个签名,如果相等,说明原始内容在一定概 率 下是相等的:如果不相等,除了说明原始内容不相等外 ...

  7. python中通过selenium简单操作及xpath元素定位&轴定位

    浏览器的简单操作 # 导入webdriver模块 # 创建driver对象,指定Chrome浏览器 driver = webdriver.Chrome() # 窗口最大化 driver.maximiz ...

  8. MVC中常用的返回值方法

    我们上边所看到的Action都是return View();我们可以看作这个返回值用于解析一个aspx文件.而它的返回类型是ActionResult如 public ActionResult Inde ...

  9. LRU(Least Recently Used)算法的理解

    https://blog.csdn.net/wydyd110/article/details/84023688 感谢 ,自己学习记笔记 内存里建立一个哈希表,后来数据多了,爆了.咋整呢? 一个算法,就 ...

  10. Java8stream表达式

    // 输出:hello System.out.println(Optional.ofNullable(hello).orElse("hei")); // 输出:hei System ...