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. Java开发笔记(一百四十六)JDBC的应用原理

    关系数据库使得海量信息的管理成为现实,但各家数据库提供的编程接口不尽相同,就连SQL语法也有所差异,像Oracle.MySQL.SQL Server都拥有自己的开发规则,倘若Java针对每个数据库单独 ...

  2. Shell的展开

    Shell的展开 2018-5-30   Writen By Stephen.Yu  一.路径名展开 shell执行echo命令前,在命令行上自动展开任何符合条件的字符,例如这里,* 被展开成当前的路 ...

  3. 4. Spark Streaming解析

    4.1 初始化StreamingContext import org.apache.spark._ import org.apache.spark.streaming._ val conf = new ...

  4. 【EBS】菜单的复制脚本

    DECLARE l_error_flag ); l_menu_rowid ); l_menu_entity_rowid ); l_menu_id NUMBER; l_cnt ; c_new_menu_ ...

  5. JMeter安装及简单应用示例

    一.Jmeter下载 官网地址:http://jmeter.apache.org/ 1.进入官网 2.选中一个版本下载 3.解压安装即可 二.Jmeter环境变量配置 1.   电脑桌面----> ...

  6. .NET Core随笔把数据库数据查出来转JSON并输出

    直接创建WEB项目即可: public class Startup { //startup.cs是站点启动时具体做了哪些事情,主要是开启了一个mvc服务. public Startup(IConfig ...

  7. Python进阶----粘包,解决粘包(旗舰版)

    Python进阶----粘包,解决粘包(旗舰版) 一丶粘包 只有TCP有粘包现象,UDP永远不会粘包 什么是粘包     存在于客户端接收数据时,不能一次性收取全部缓冲区中的数据.当下一次再有数据来时 ...

  8. 学习笔记之编程珠玑 Programming Pearls

    Programming Pearls (2nd Edition): Jon Bentley: 0785342657883: Amazon.com: Books https://www.amazon.c ...

  9. 79.mobile/js---手机端分享调用功能的实现(只能在真机上测试有效)

    html:<a href="javascript:void(0);" class="all-share" onclick="call('defa ...

  10. Windows上安装ElasticSearch7的IK分词器

    首先IK分词器和ES版本一定要严格对应,下面是版本对照表 IK分词器下载地址 https://github.com/medcl/elasticsearch-analysis-ik/releases 我 ...