Skip to content

Commit

Permalink
Screen Reader Accessibility
Browse files Browse the repository at this point in the history 
Closes Thinkful-Ed#4

formatting CSS

no-js friendly strikethrough feature
  • Loading branch information
@jpdevries
jpdevries committed Nov 12, 2016
1 parent 56f3b74 commit 746cacc
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 50 deletions.
95 changes: 47 additions & 48 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,58 +13,57 @@
<div class="container">
<h1>Shopping List</h1>

<form id="js-shopping-list-form">
<label for="shopping-list-entry">Add an item</label>
<form id="js-shopping-list-add-item">
<h2><label for="shopping-list-entry">Add an item</label></h2>
<input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
<button type="submit">Add item</button>
</form>

<ul class="shopping-list">
<li>
<span class="shopping-item">apples</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">oranges</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item shopping-item__checked">milk</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">bread</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
</ul>
<form id="js-shopping-list-form">
<ul class="shopping-list">
<li id="apples">
<h3 class="shopping-item">
<input type="checkbox" id="apples__completed" name="apples__completed">
<label for="apples__completed">apples</label>
</h3>
<div class="shopping-item-controls">
<label for="apples__deleted">Delete<span class="visually-hidden"> apples</span></label>
<input type="checkbox" id="apples__deleted" name="apples__deleted">
</div>
</li>
<li id="oranges">
<h3 class="shopping-item">
<input type="checkbox" id="oranges__completed" name="oranges__completed">
<label for="oranges__completed">oranges</label>
</h3>
<div class="shopping-item-controls">
<label for="oranges__deleted">Delete<span class="visually-hidden"> oranges</span></label>
<input type="checkbox" id="oranges__deleted" name="oranges__deleted">
</div>
</li>
<li id="milk">
<h3 class="shopping-item">
<input type="checkbox" id="milk__completed" name="milk__completed">
<label for="milk__completed">milk</label>
</h3>
<div class="shopping-item-controls">
<label for="milk__deleted">Delete<span class="visually-hidden"> milk</span></label>
<input type="checkbox" id="milk__deleted" name="milk__deleted">
</div>
</li>
<li id="bread">
<h3 class="shopping-item">
<input type="checkbox" id="bread__completed" name="bread__completed">
<label for="bread__completed">bread</label>
</h3>
<div class="shopping-item-controls">
<label for="bread__deleted">Delete<span class="visually-hidden"> bread</span></label>
<input type="checkbox" id="bread__deleted" name="bread__deleted">
</div>
</li>
</ul>
<button type="button" name="button">Trash Deleted Items</button>
</form>
</div>

</body>
Expand Down
27 changes: 25 additions & 2 deletions main.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,15 @@
.visually-hidden { /*https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html*/
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
body:hover .visually-hidden a, body:hover .visually-hidden input, body:hover .visually-hidden button { display: none !important; }

* {
box-sizing: border-box;
}
Expand All @@ -18,6 +30,13 @@ button:hover {
width: 250px;
}

#js-shopping-list-add-item h2 {
display: inline-block;
margin: 0;
font-size: 1em;
font-weight: normal;
}

.container {
max-width: 600px;
margin: 0 auto;
Expand All @@ -34,14 +53,18 @@ button:hover {
padding: 20px;
}

.shopping-list > li:target {
background: #f9ec8f;
}

.shopping-item {
display: block;
color: grey;
font-style: italic;
font-size: 20px;
margin-bottom: 15px;
margin: 0 0 15px 0;
}

.shopping-item__checked {
input[type="checkbox"]:checked + label {
text-decoration: line-through;
}

0 comments on commit 746cacc

Please sign in to comment.