deathbearbrown/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Bocoup: Screen Reading Visibility</title>
  <style>
    .hidden {
      display: none;
    }
    .invisible {
      visibility: hidden;
    }
    .zero {
      font-size:0px !important;
    }
    .snooka {
      position: absolute !important;
      height: 1px; width: 1px;
      overflow: hidden;
      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
      clip: rect(1px, 1px, 1px, 1px);
    }
    .content {
      padding: 20px;
      border: 1px solid #333;
      margin-bottom: 20px;
      display: block;
    }
    code {
      padding: 20px;
      background-color: #333;
      margin: 10px 0;
      color: #fff;
      display: block;
    }
    p {display:block;}
  </style>
</head>
<body>
  <div>
    <h1>What is readable by the screen reader?</h1>
    <p> Each box has text that is has a class attached to it. Code blocks are unreadable by the screen reader using the attribute aria-hidden="true"</p>
    <p> Press Control+Option+A to start reading the page.</p>
    <div class="content">
      <p>No CSS here</p>
      <p>This text is visible.</p>
      <code aria-hidden="true">
        // there is no css applied
      </code>
    </div>
    <div class="content">
        <p>Visibility hidden</p>
        <p class="invisible">
          This text is hidden and unreadable. You do not see anything or hear the screen reader.
        </p>
        <code aria-hidden="true">
          .invisible {
            visibility: hidden;
          }
        </code>
    </div>

    <div class="content">
        <p>Display none!</p>
        <p class="hidden">
          This text is hidden and unreadable. You do not see anything or hear the screen reader.
        </p>

        <code aria-hidden="true">
          .hidden {
            display: none;
          }
        </code>

    </div>
    <div class="content">
        <p>Positioned, clipped, and (almost) collapsed</p>
        <p class="snooka">
          This text is positioned, clipped, and (almost) collapsed. It's readable by the screen reader but appears on the screen like display:none
        </p>
        <code aria-hidden="true">
          .snooka {
            position: absolute !important;
            height: 1px; width: 1px;
            overflow: hidden;
            clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
            clip: rect(1px, 1px, 1px, 1px);
          }
        </code>
    </div>
    <div class="content">
        <p>Font size zero!</p>
        <p class="zero">
          This text is hidden and readable. It's a wildcard! By setting font-size to 0 pixels, you can't see the text, but whether this text gets read depends on the screen reader. It also may be subjected to search engine penalties and interpreted as malicious. Don't do this!
        </p>

        <code aria-hidden="true">
          .zero {
            font-size: 0px;
          }
        </code>

    </div>
  </div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Bocoup: Screen Reading Visibility</title>
	<style>
	.hidden {
	display: none;
	}
	.invisible {
	visibility: hidden;
	}
	.zero {
	font-size:0px !important;
	}
	.snooka {
	position: absolute !important;
	height: 1px; width: 1px;
	overflow: hidden;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	}
	.content {
	padding: 20px;
	border: 1px solid #333;
	margin-bottom: 20px;
	display: block;
	}
	code {
	padding: 20px;
	background-color: #333;
	margin: 10px 0;
	color: #fff;
	display: block;
	}
	p {display:block;}
	</style>
	</head>
	<body>
	<div>
	<h1>What is readable by the screen reader?</h1>
	<p> Each box has text that is has a class attached to it. Code blocks are unreadable by the screen reader using the attribute aria-hidden="true"</p>
	<p> Press Control+Option+A to start reading the page.</p>
	<div class="content">
	<p>No CSS here</p>
	<p>This text is visible.</p>
	<code aria-hidden="true">
	// there is no css applied
	</code>
	</div>
	<div class="content">
	<p>Visibility hidden</p>
	<p class="invisible">
	This text is hidden and unreadable. You do not see anything or hear the screen reader.
	</p>
	<code aria-hidden="true">
	.invisible {
	visibility: hidden;
	}
	</code>
	</div>

	<div class="content">
	<p>Display none!</p>
	<p class="hidden">
	This text is hidden and unreadable. You do not see anything or hear the screen reader.
	</p>

	<code aria-hidden="true">
	.hidden {
	display: none;
	}
	</code>

	</div>
	<div class="content">
	<p>Positioned, clipped, and (almost) collapsed</p>
	<p class="snooka">
	This text is positioned, clipped, and (almost) collapsed. It's readable by the screen reader but appears on the screen like display:none
	</p>
	<code aria-hidden="true">
	.snooka {
	position: absolute !important;
	height: 1px; width: 1px;
	overflow: hidden;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	}
	</code>
	</div>
	<div class="content">
	<p>Font size zero!</p>
	<p class="zero">
	This text is hidden and readable. It's a wildcard! By setting font-size to 0 pixels, you can't see the text, but whether this text gets read depends on the screen reader. It also may be subjected to search engine penalties and interpreted as malicious. Don't do this!
	</p>

	<code aria-hidden="true">
	.zero {
	font-size: 0px;
	}
	</code>

	</div>
	</div>
	</body>
	</html>