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. 浅谈css盒模型

    在我们网页上的每一个元素,一个按钮,一段文本,一张图片等等,浏览器都将它们当做一个“盒子”看待,并把这样的盒子称为盒模型(box model).使用Chrome的右键>审查元素对某个网页上的元素 ...

  2. ftp 解决不能上传问题

    有人建议整个关掉SELinux并且重启,于是我去/etc/selinux/config里面把SELinux给disable了.重启之后,发现可以在/home/sam/test这个文件夹上传了!

  3. 批处理就是windows的杰作啊

    今天要为了解决vs不能同时开启调试和编写的问题,我就上网查找了一些批处理的命令,用批处理调用exe,和打开txt,虽然一行代码就解决了但是我没用过啊,很陌生. call  路径\a.exe  就相当于 ...

  4. SQL中的去重操作

    if not object_id('Tempdb..#T') is null drop table #T Go Create table #T([ID] ),[Memo] nvarchar()) In ...

  5. 做ie8css样式时浏览器默认杂项模式遇到的一个小坑

    1 进行ie浏览器的样式兼容的时候,首先要确保打开浏览器浏览网页的时候的文本模式要为当前浏览器的"标准模式",注意<!DOCTYPE html>不缺失不错误,以免浏览器 ...

  6. mysql 基本使用

    SQL分类 -------------------数据库------------ 创建数据库  create database xxx; 查询所有的数据库 show databases; 查询当前数据 ...

  7. [RabbitMQ]Error: unable to connect to node rabbit@compute1: nodedown（CentOS7.0）

    今天在搭建OpenStack的时候需要安装RabbitMQ,可是使用yum install rabbitmq-server安装之后,按照OpenStack官方提供的文档修改guest用户密码的时候却出 ...

  8. 在node.js中使用ejs的demo 第五篇

    先说明一下我的项目的目录解构: 本项目中渲染的时候都是通过在index.js页面里面,来使用index.ejs的,首先引用必须的模块: var express = require('express') ...

  9. JAVA 类加载器 第14节

    JAVA 类加载器 第14节 今天我们将类加载机制5个阶段中的第一个阶段,加载,又叫做装载.为了阅读好区分,以下都叫做装载. 装载的第一步就是要获得二进制的字节流,它可以从读.class文件获得,也可 ...

  10. js对表单设置了readonly和disabled后的区别

    Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: 1)Readonly只针对input(text / pa ...