aria-label:
正常情况下,form表单的input组件都有对应的label,当input组件获取到焦点时,屏幕阅读器会读出相应label里的文本。
但是如果没有给输入框设置label时,当其获得焦点时,屏幕阅读器会读出aria-label属性的值,aria-label不会在视觉上呈现效果。
 
aria-labelledby:
当想要的标签文本已在其他元素中存在时,可以使用aria-labelledby,并将其值设为所读取的元素的id
 
注:如果一个元素同时又aria-labelledby与aria-label,会优先读出aria-labelledby的内容。

Bootstrap的aria-label与aria-labelledby的更多相关文章

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

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

  2. web语义化之SEO和ARIA

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

  3. 4.1HTML和Bootstrap css精华

    1.HTML 2.理解Bootstrap HTML元素告诉浏览器,他要表现的是什么类型的内容,当他们不提供任何关于如何显示内容的信息.如何显示内容的信息,由CSS提供. 本书仅包含足够的信息,让你查看 ...

  4. yii\bootstrap

    yii\bootstrap\ButtonDropdown <?php echo yii\bootstrap\ButtonDropdown::widget([ 'label' => 'Act ...

  5. BootStrap下拉框搜索功能

    <!DOCTYPE html> <html> <head> <title>jQuery bootstrap-select可搜索多选下拉列表插件-www. ...

  6. 智能选择器和语义化的CSS

    本文由白牙根据Heydon Pickering的<Semantic CSS With Intelligent Selectors>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之 ...

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

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

  8. 使用 HTML5 设计辅助功能

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

  9. 网络-05-端口号-F5-负载均衡设-linux端口详解大全--TCP注册端口号大全备

    [root@test1:Standby] config # [root@test1:Standby] config # [root@test1:Standby] config # [root@test ...

  10. CentOS 7 服务端口表

    # Note that it is presently the policy of IANA to assign a single well-known# port number for both T ...

随机推荐

  1. JavaScript实现定点圆周运动

    目是这样的:假设有一定点(400px,300px),通过JavaScript使一个直径20px的圆点以 r=180px 为半径围绕该点做匀速圆周运动. 这个问题的整体实现思想应该是这样的,看到“半径” ...

  2. 大型项目使用Automake/Autoconf完成编译配置

    http://www.cnblogs.com/xf-linux-arm-java-android/p/3590770.htmlhttp://blog.csdn.net/zengraoli/articl ...

  3. Unix/Linux环境C编程入门教程(18) kali-linuxCCPP开发环境搭建

    1. Kali linux是BT5的晋级版本,用于信息安全.基于Debian7内核.新建虚拟机. 2. 选择默认虚拟机 3. 选择稍后安装操作系统 4.选择Linux Debian7 64位,因为Ka ...

  4. 并查集及其简单应用:优化kruskal算法

    并查集是一种可以在较短的时间内进行集合的查找与合并的树形数据结构 每次合并只需将两棵树的根合并即可 通过路径压缩减小每颗树的深度可以使查找祖先的速度加快不少 代码如下: int getfather(i ...

  5. 关于ztree打开关闭所有节点,选中指定id节点

    var isOneByOneExpand=false;//是否递归展开 //展开节点 function expendNode(nodeId){ var node = treeObj.getNodeBy ...

  6. Linux学习笔记3-VI 和 VIM的使用

    vi: Visual Interface vim: VI iMproved 全屏编辑器, Linux系统下最强大的两款编辑器,vi和vim,vi是Linux本身自带的一款编辑器,纯文本编辑不带任何效果 ...

  7. magento中取不同store中的产品数据

    $products = Mage::getResourceModel('catalog/product_collection')                    ->setStoreId( ...

  8. 取得正在运行的Activity

    在main.xml中: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns: ...

  9. 10个Laravel4开发者必用扩展包

    Laravel是一个新的基于最新PHP版本号语法,支持IoC等设计模式的高速开发框架.眼下最新版本号为4.2,推荐安装PHP版本号5.5+. 本文列举10个基本软件包,都是开发人员使用Laravel框 ...

  10. Java开发常用下载的网址

    cygwin国内镜像:http://mirrors.sohu.com/cygwin/ 旧版本的ant下载:http://archive.apache.org/dist/ant/ 旧版本的nutch下载 ...