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. xorm-删除和软删除实例

    删除数据Delete方法,参数为struct的指针并且成为查询条件.注意:当删除时,如果user中包含有bool,float64或者float32类型,有可能会使删除失败 package main i ...

  2. 【题解】Luogu P5324 [BJOI2019]删数

    原题传送门 易知这个数列的顺序是不用考虑的 我们看两个数列 \(1,2,3\)和\(3,3,3\)都能删完,再看两个数列\(1,2,3,4\)和\(2,2,4,4\),也都能删完 不难发现,我们珂以把 ...

  3. docker容器的使用整理

    2019/10/24, docker 19.03.4 摘要:docker容器常用命令整理 gitbooks文档 docker脚本安装 使用官方脚本安装docker,从阿里云下载: curl -fsSL ...

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

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

  5. 2019三六零 java面试笔试题 (含面试题解析)

    本人3年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.360等公司offer,岗位是Java后端开发,最终选择去了三六零. 面试了很多家公司,感觉大部分公司考察的点都差 ...

  6. Python进阶(十五)----面向对象之~继承(单继承,多继承MRO算法)

    Python进阶(十五)----面向对象之~继承 一丶面向对象的三大特性:封装,继承,多态 二丶什么是继承 # 什么是继承 # b 继承 a ,b是a的子类 派生类 , a是b的超类 基类 父类 # ...

  7. fulltext全文索引的使用

    Fulltext全文索引 Fulltext相关属性 查看数据库关于fulltext的配置 SHOW VARIABLES LIKE 'ft%'; -- ft就是FullText的简写 ft_boolea ...

  8. 2019-07-23 php魔术方法

    本文对一些php中的魔术方法进行总结,魔术方法顾名思义就是具备神奇功能的方法(function).魔术方法通常在某些特定情况下自动触发,不能用实例化变量名->方法名()来主动触发.不同的魔术方法 ...

  9. Java知识回顾 (12) package

    本资料来自于runoob,略有修改. 为了更好地组织类,Java 提供了包机制,用于区别类名的命名空间. Java 使用包(package)这种机制是为了防止命名冲突,访问控制,提供搜索和定位类(cl ...

  10. nodeJS从入门到进阶二(网络部分)

    一.网络服务器 1.http状态码 1xx: 表示普通请求,没有特殊含义 2xx:请求成功 200:请求成功 3xx:表示重定向 301 永久重定向 302 临时重定向 303 使用缓存(服务器没有更 ...