zoukankan      html  css  js  c++  java
  • [HTML5] How Visible vs. Hidden Elements Affect Keyboard/Screen Reader Users (ARIA)

    There are many techniques for hiding content in user interfaces, and not all are created equal! Learn how different hiding techniques in HTML, CSS and ARIA impact keyboard and screen reader users in addition to visual display. As a bonus, we'll also take a look using a screen reader on a mobile device.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Visible vs. Hidden</title>
        <meta name="viewport" content="initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css/demo.css">
    </head>
    <body>
         <!-- no space reserved, hidden from aria-->
        <div style="display: none;">
            <h1>Heading</h1>
            <a href="#link1">Link 1</a>
        </div>
        <!-- no space reservced, hidden from aria-->
        <div hidden>
            <h1>Heading</h1>
            <a href="#link2">Link 2</a>
        </div>
        <!-- reserve the space, not hidden from aria-->
        <div style="opacity: 0;">
            <h1>Heading</h1>
            <a href="#link3">Link 3</a><!-- can add tabindex="-1" to hide from tab focus -->
        </div>
        <!-- reserve the space, link is not reachable, similar to display:none; -->
        <div style="visibility: hidden;">
            <h1>Heading</h1>
            <a href="#link4">Link 4</a>
        </div>
       <!-- content is still be renderered to the screen, and link is also reachable -->
        <div class="visuallyhidden">
            <h1>Heading</h1>
            <a href="#link5">Link 5</a>
        </div>
       <!-- render to screen and hidden from aria-->
        <div aria-hidden="true">
            <h1>Heading</h1>
            <a href="#link6">Link 6</a>
        </div>
    </body>
    </html>

  • 相关阅读:
    我不喜欢的 Rust 特性 (之一) eager drop
    为 Windows Phone 8.1 app 解决“The type does not support direct content.”的问题
    输入10个互不相同的数字并分成5对,问有多少种分法。
    code wars quiz: toInteger
    my first emacs custom key binding
    http协议消息报头学习笔记
    移动端经常遇到的小bug
    js小技巧
    ajax
    js正则表达
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8871391.html
Copyright © 2011-2022 走看看