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. Floyd算法应用-医院选址问题

    1)问题描述 n个村庄之间的交通图可以用有向网图来表示,图中边<vi, vj>上的权值表示从村庄i到村庄j的道路长度.现在要从这n个村庄中选择一个村庄新建一所医院,问这所医院应建在哪个村庄 ...

  2. xshell + xmanger连接centos gnome+ kde桌面 for需要X window的App

  3. fuel iso光盘刻录机usb Driver 烧录

    ISO image to a DVD or burn the IMG file to a USB drive For a bare-metal installation ipmitool, HP iL ...

  4. 基于本地iso 搭建的本地yum源 安装部署openldap

    1,yum openldap-servers,openldap-clients 基于iso-cd1搭建的本地yum源(具体搭建参看ruige的repo本地快速搭建,在右边 找找看中输入repo key ...

  5. makefile编写差异

    由于zlib动态库在linux下引用的问题引出了对于简练的makefile的学习.之前通过看网络上的一些文章自己也算简单了解如何编写一个makefile,可总是不那么美观,今天经过辉哥的指点,对于ma ...

  6. 全国计算机等级考试二级教程-C语言程序设计_第15章_位运算

    位运算,不适用于实数,仅仅适用于整数.字符. C语言的位运算只能操作整数.字符,实数是指数方式表示的,不适用于位运算. #define _CRT_SECURE_NO_WARNINGS #include ...

  7. [置顶] 编辑框Editext光标最后显示

    [MainActivity] package com.example.testeditext; import android.os.Bundle; import android.app.Activit ...

  8. Java NIO——2 缓冲区

    一.缓冲区基础 1.缓冲区并不是多线程安全的. 2.属性(容量.上界.位置.标记) capacity limit  第一个不能被读或写的元素 position  下一个要被读或写的元素索引 mark ...

  9. wamp 虚拟目录的设置(转载)

    现在先来配置虚拟主机:1.先打开apache的配置文件httpd.conf,并去掉#Include conf/extra/httpd-vhosts.conf前面的#!!2.打开apache的apach ...

  10. scrapy爬虫初体验

    scrapy是一个python的爬虫框架,用于提取结构性数据.在这次宝贝计划1的项目中要用到一些数据.但四处联系后各方可能因为一些隐私问题不愿提供数据信息.这样我们只能自己爬取,存入数据库,再进行调用 ...