Permalink
Browse files

Welcome the checklist!

  • Loading branch information...
1 parent d765a10 commit ccb11bdbbf9cd4bb5c3530b0431d069fba479a4a @grayghostvisuals grayghostvisuals committed Jan 13, 2013
Showing with 122 additions and 58 deletions.
  1. +1 −0 _layouts/default.html
  2. +52 −25 checklist.html
  3. +28 −28 css/bootstrap.css
  4. +4 −5 css/responsive.css
  5. +37 −0 js/local-storage.js
@@ -133,6 +133,7 @@
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
+ <!-- <script src="/js/local-storage.js"></script> -->
<script src="/js/bootstrap-dropdown.js"></script>
<script src="/js/bootstrap-collapse.js"></script>
<!--
View
@@ -12,58 +12,85 @@
</header>
<div class="row-fluid">
- <form action="" role="form">
+ <form action="" id="simple-a11y-checklist" role="form">
<ul>
<!-- Aria Roles -->
- <li>
+ <li id="aria-roles">
<h3>ARIA Role Attributes</h3>
<!-- banner -->
- <label for=""><h4>&lt;header role="banner"&gt;</h4></label>
- <input name="" type="checkbox">
- <p>Region of the page that is site focused</p>
+ <label for="banner-role">&lt;header role="banner"&gt;</label>
+ <input name="aria-banner-role" id="banner-role" type="checkbox">
+ <p>A region of the page that is site focused</p>
+
<!-- navigation -->
- <label for=""><h4>&lt;nav role="navigation"&gt;</h4></label>
- <input name="" type="checkbox">
+ <label for="navigation-role">&lt;nav role="navigation"&gt;</label>
+ <input name="aria-navigation-role" id="navigation-role" type="checkbox">
<p>Contains navigational links</p>
+
<!-- main -->
- <label for=""><h4>&lt;section role="main"&gt;</h4></label>
- <input name="" type="checkbox">
+ <label for="main-role">&lt;section role="main"&gt;</label>
+ <input name="aria-main-role" id="main-role" type="checkbox">
<p>Focal content of document</p>
+
<!-- complementary -->
- <label for=""><h4>&lt;aside role="complementary"&gt;</h4></label>
- <input name="" type="checkbox">
+ <label for="complementary-role">&lt;aside role="complementary"&gt;</label>
+ <input name="aria-complementary-role" id="complementary-role" type="checkbox">
<p>Supporting section related to the main content even when separated</p>
+
<!-- complementary -->
- <label for=""><h4>&lt;footer role="contentinfo"&gt;</h4></label>
- <input name="" type="checkbox">
- <p>Contains information about the document (meta info,copyright,company info etc.)</p>
+ <label for="contentinfo-role">&lt;footer role="contentinfo"&gt;</label>
+ <input name="aria-contentinfo-role" id="content-info" type="checkbox">
+ <p>Contains information about the document <b>(meta info,copyright,company info etc.)</b></p>
</li>
<!-- Images -->
- <li>
+ <li id="images">
<h3>Images</h3>
<!-- alt -->
- <label for=""><h4>Alt Attribute</h4></label>
- <input name="" type="checkbox">
+ <label for="img-alt"><code class="language-markup">alt</code> Attribute</label>
+ <input name="img-alt-attr" id="img-alt" type="checkbox">
<p>Appropriate <code class="language-markup">alt</code> attribute values for images when they're not displayed while leaving text for decorational images blank (e.g. <code class="language-markup">alt=""</code>). Use <code class="language-markup">alt</code> attribute values that convey meaning to your visitors, rather than meaning to you and your colleagues</p>
</li>
<!-- Javascript -->
- <li>
+ <li id="js">
<h3>Javascript</h3>
- <label for=""><h4>Unobtrusive Javascript</h4></label>
- <input name="" type="checkbox">
+ <!-- unobtrusive js -->
+ <label for="unobtrusive-js">Unobtrusive Javascript</label>
+ <input name="unobtrusive-js-input" id="unobtrusive-js" type="checkbox">
<p>Use unobtrusive Javascript (Never use inline scripting)</p>
- <label for=""><h4>Javascript Alternatives</h4></label>
- <input name="" type="checkbox">
+ <!-- js alts -->
+ <label for="alt-js">Javascript Alternatives</label>
+ <input name="alt-js-fallback" id="alt-js" type="checkbox">
<p>Provide alternatives for users without Javascript enabled.</p>
</li>
+ <!-- Hidden Nodes -->
+ <li id="hidden-nodes">
+ <h3>Hidden Nodes</h3>
+ <p>Anytime something is visually hidden within your markup use this role attribute → aria-hidden="true" or aria-hidden="false"</p>
+ <label for="aria-hidden-true">aria-hidden=true</label>
+ <input name="aria-hidden-true-attr" id="aria-hidden-true" type="checkbox">
+ <p>Content that you wan't hidden but accessible</p>
+ <label for="aria-hidden-false">aria-hidden="false"</label>
+ <input name="aria-hidden-false-attr" id="aria-hidden-false" type="checkbox">
+ <p>Content that you don't want hidden</p>
+ </li>
+
+ <!-- Widgets -->
+ <li id="widgets">
+ <h3>Widgets</h3>
+ <label for="application-role">role="application"</label>
+ <input name="aria-application-role" id="application-role" type="checkbox">
+ <p>Add role="application" to your &lt;body&gt; element to instruct screen readers to recognize your site as an application-style widget and not standard content</p>
+ </li>
+
<!-- Audio -->
- <li>
+ <li id="audio">
<h3>Audio</h3>
<!-- text transcript -->
- <label for=""><h4>Provide a Text Transcript</h4></label><input name="" type="checkbox">
+ <label for="audio">Provide a Text Transcript</label>
+ <input name="audio-input" id="audio" type="checkbox">
<p>Providing a text transcript makes the audio information accessible to people who are deaf or hard of hearing. This also goes for Search Engines who are deaf and hard of hearing as well.</p>
</li>
</ul>
@@ -78,4 +105,4 @@
</div><!--/row-->
-</div>
+</div>
View
@@ -39,7 +39,7 @@ html {
}
a:focus {
- outline: thin dotted #333;
+ outline: thin dotted #333333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
@@ -143,7 +143,7 @@ textarea {
@media print {
* {
text-shadow: none !important;
- color: #000 !important;
+ color: black !important;
background: transparent !important;
box-shadow: none !important;
}
@@ -169,7 +169,7 @@ textarea {
pre,
blockquote {
- border: 1px solid #999;
+ border: 1px solid #999999;
page-break-inside: avoid;
}
@@ -230,7 +230,7 @@ a:hover {
.img-polaroid {
padding: 4px;
background-color: #fff;
- border: 1px solid #ccc;
+ border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -884,7 +884,7 @@ pre {
line-height: 20px;
white-space: pre;
background-color: #f5f5f5;
- border: 1px solid #ccc;
+ border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
@@ -1089,7 +1089,7 @@ select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
- outline: thin dotted #333;
+ outline: thin dotted #333333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
@@ -1570,7 +1570,7 @@ select:focus:invalid:focus {
text-align: center;
text-shadow: 0 1px 0 white;
background-color: #eeeeee;
- border: 1px solid #ccc;
+ border: 1px solid #cccccc;
}
.input-append .add-on,
.input-append .btn,
@@ -2092,7 +2092,7 @@ table th[class*="span"],
}
.icon-glass {
- background-position: 0 0;
+ background-position: 0 0;
}
.icon-music {
@@ -2695,7 +2695,7 @@ table th[class*="span"],
margin: 2px 0 0;
list-style: none;
background-color: white;
- border: 1px solid #ccc;
+ border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
@@ -3011,7 +3011,7 @@ button.close {
transition: background-position 0.1s linear;
}
.btn:focus {
- outline: thin dotted #333;
+ outline: thin dotted #333333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
@@ -3741,7 +3741,7 @@ input[type="submit"].btn.btn-mini {
}
.nav-tabs {
- border-bottom: 1px solid #ddd;
+ border-bottom: 1px solid #dddddd;
}
.nav-tabs > li {
@@ -3765,7 +3765,7 @@ input[type="submit"].btn.btn-mini {
.nav-tabs > .active > a:hover {
color: #555555;
background-color: white;
- border: 1px solid #ddd;
+ border: 1px solid #dddddd;
border-bottom-color: transparent;
cursor: default;
}
@@ -3799,7 +3799,7 @@ input[type="submit"].btn.btn-mini {
}
.nav-tabs.nav-stacked > li > a {
- border: 1px solid #ddd;
+ border: 1px solid #dddddd;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
@@ -3932,7 +3932,7 @@ input[type="submit"].btn.btn-mini {
}
.tabs-below > .nav-tabs {
- border-top: 1px solid #ddd;
+ border-top: 1px solid #dddddd;
}
.tabs-below > .nav-tabs > li {
@@ -3952,7 +3952,7 @@ input[type="submit"].btn.btn-mini {
.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover {
- border-color: transparent #ddd #ddd #ddd;
+ border-color: transparent #dddddd #dddddd #dddddd;
}
.tabs-left > .nav-tabs > li,
@@ -3970,7 +3970,7 @@ input[type="submit"].btn.btn-mini {
.tabs-left > .nav-tabs {
float: left;
margin-right: 19px;
- border-right: 1px solid #ddd;
+ border-right: 1px solid #dddddd;
}
.tabs-left > .nav-tabs > li > a {
@@ -3986,14 +3986,14 @@ input[type="submit"].btn.btn-mini {
.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover {
- border-color: #ddd transparent #ddd #ddd;
+ border-color: #dddddd transparent #dddddd #dddddd;
*border-right-color: white;
}
.tabs-right > .nav-tabs {
float: right;
margin-left: 19px;
- border-left: 1px solid #ddd;
+ border-left: 1px solid #dddddd;
}
.tabs-right > .nav-tabs > li > a {
@@ -4009,7 +4009,7 @@ input[type="submit"].btn.btn-mini {
.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover {
- border-color: #ddd #ddd #ddd transparent;
+ border-color: #dddddd #dddddd #dddddd transparent;
*border-left-color: white;
}
@@ -4343,7 +4343,7 @@ input[type="submit"].btn.btn-mini {
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
- border-bottom: 7px solid #ccc;
+ border-bottom: 7px solid #cccccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
@@ -4361,7 +4361,7 @@ input[type="submit"].btn.btn-mini {
}
.navbar-fixed-bottom .nav > li > .dropdown-menu:before {
- border-top: 7px solid #ccc;
+ border-top: 7px solid #cccccc;
border-top-color: rgba(0, 0, 0, 0.2);
border-bottom: 0;
bottom: -7px;
@@ -4745,7 +4745,7 @@ input[type="submit"].btn.btn-mini {
display: inline-block;
padding: 5px 14px;
background-color: #fff;
- border: 1px solid #ddd;
+ border: 1px solid #dddddd;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
@@ -4801,9 +4801,9 @@ input[type="submit"].btn.btn-mini {
width: 560px;
margin: -250px 0 0 -280px;
background-color: white;
- border: 1px solid #999;
+ border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.3);
- *border: 1px solid #999;
+ *border: 1px solid #999999;
/* IE6-7 */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
@@ -4829,7 +4829,7 @@ input[type="submit"].btn.btn-mini {
.modal-header {
padding: 9px 15px;
- border-bottom: 1px solid #eee;
+ border-bottom: 1px solid #eeeeee;
}
.modal-header .close {
margin-top: 2px;
@@ -4855,7 +4855,7 @@ input[type="submit"].btn.btn-mini {
margin-bottom: 0;
text-align: right;
background-color: #f5f5f5;
- border-top: 1px solid #ddd;
+ border-top: 1px solid #dddddd;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
@@ -4972,7 +4972,7 @@ input[type="submit"].btn.btn-mini {
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
- border: 1px solid #ccc;
+ border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
@@ -5116,7 +5116,7 @@ input[type="submit"].btn.btn-mini {
display: block;
padding: 4px;
line-height: 20px;
- border: 1px solid #ddd;
+ border: 1px solid #dddddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
View
@@ -938,7 +938,7 @@
input[type="checkbox"],
input[type="radio"] {
- border: 1px solid #ccc;
+ border: 1px solid #cccccc;
}
.form-horizontal .control-label {
@@ -1201,7 +1201,6 @@ h3 code {
background-image: -webkit-linear-gradient(bottom left, #1a274e, #397c9c 110%);
background-image: -moz-linear-gradient(bottom left, #1a274e, #397c9c 110%);
background-image: -o-linear-gradient(bottom left, #1a274e, #397c9c 110%);
- background-image: -ms-linear-gradient(bottom left, #1a274e, #397c9c 110%);
background-image: linear-gradient(bottom left, #1a274e, #397c9c 110%);
-webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.2), inset 0 -3px 7px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.2), inset 0 -3px 7px rgba(0, 0, 0, 0.2);
@@ -1235,9 +1234,9 @@ h3 code {
.masthead-links a {
color: #fff;
color: rgba(255, 255, 255, 0.8);
- -webkit-transition: all .2s ease-in-out;
- -moz-transition: all .2s ease-in-out;
- transition: all .2s ease-in-out;
+ -webkit-transition: all 0.2s ease-in-out;
+ -moz-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
}
.masthead-links a:hover {
Oops, something went wrong.

0 comments on commit ccb11bd

Please sign in to comment.