zoukankan      html  css  js  c++  java
  • Bootstrap 中的 aria-label 和 aria-labelledby

    正常情况下,form表单的input组件都有对应的label.当input组件获取到焦点时,屏幕阅读器会读出相应的label里的文本。

    <form>
        <div class="form-group col-md-2">
          <label for="name">姓名</label>
          <input type="text" id="name" class="form-control">
        </div
      </form>

    但是如果我们没有给输入框设置label时,当其获得焦点时,屏幕阅读器会读出aria-label属性的值,aria-label不会在视觉上呈现效果。

    aria-label

    经测试,aria-label 只有加在可被 tab 到的元素上,读屏才会读出其中的内容。

      <form action="">
        <div class="form-group">
            <input type="text" class="form-control" aria-label="姓名">
        </div>
      </form>

    aria-labelledby

    当想要的标签文本已在其他元素中存在时,可以使用aria-labelledby,并将其值为所有读取的元素的id。如下:
    当ul获取到焦点时,屏幕阅读器是会读:“更多城市”

    <div class="dropdown">
            <button class="btn btn-default "  id="dropdownMenu1" data-toggle="dropdown" >
              更多城市<span class="caret "></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
              <li><a href="">广州</a></li>
              <li><a href="">深圳</a></li>
              <li><a href="">东莞</a></li>
            </ul>   
         </div>

    如果一个元素同时有 aria-labelledby 和 aria-label ,读屏软件会优先读出 aria-labelledby 的内容。

    简而言之:
    这两个属性是为特殊网页阅读器设置的属性,在一些特殊设备上,当浏览到这样的内容设备会将内容读出来。是为了一些有视力障碍的人能够同样”浏览”网页而准备的

  • 相关阅读:
    数据库迁移至ASM
    获取数据库或SHEME的DDL语句
    membership配置数据库(SQL2000)
    DIV+CSS到底是什么?
    如何更改表的所有者权限
    windows server 2003 上“您要访问的网页有问题,无法显示。HTTP 500 内部服务器错误。”的问题解决方案!
    瞎忙
    瞎忙
    如何更改表的所有者权限
    DIV+CSS到底是什么?
  • 原文地址:https://www.cnblogs.com/wood2012/p/7896561.html
Copyright © 2011-2022 走看看