[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>