Skip to content

Commit

Permalink
Welcome the checklist!
Browse files Browse the repository at this point in the history
  • Loading branch information
@grayghostvisuals
grayghostvisuals committed Jan 13, 2013
1 parent d765a10 commit ccb11bd
Show file tree
Hide file tree
Showing 5 changed files with 122 additions and 58 deletions.
1 change: 1 addition & 0 deletions _layouts/default.html
View file
Expand Up @@ -133,6 +133,7 @@ <h5>Colophon</h5>
================================================== -->
<!-- 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>
<!--
Expand Down
77 changes: 52 additions & 25 deletions checklist.html
View file
Expand Up @@ -12,58 +12,85 @@ <h2>The Checklist</h2>
</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>
Expand All @@ -78,4 +105,4 @@ <h3>Audio</h3>


</div><!--/row-->
</div>
</div>
56 changes: 28 additions & 28 deletions css/bootstrap.css
View file
Expand Up @@ -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;
}
Expand Down Expand Up @@ -143,7 +143,7 @@ textarea {
@media print {
* {
text-shadow: none !important;
color: #000 !important;
color: black !important;
background: transparent !important;
box-shadow: none !important;
}
Expand All @@ -169,7 +169,7 @@ textarea {

pre,
blockquote {
border: 1px solid #999;
border: 1px solid #999999;
page-break-inside: avoid;
}

Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -2092,7 +2092,7 @@ table th[class*="span"],
}

.icon-glass {
background-position: 0 0;
background-position: 0 0;
}

.icon-music {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand All @@ -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,
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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;
}

Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
9 changes: 4 additions & 5 deletions css/responsive.css
View file
Expand Up @@ -938,7 +938,7 @@

input[type="checkbox"],
input[type="radio"] {
border: 1px solid #ccc;
border: 1px solid #cccccc;
}

.form-horizontal .control-label {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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 {
Expand Down

0 comments on commit ccb11bd

Please sign in to comment.