Chris DeMars | @saltnburnem
Time | Covering |
---|---|
1:00 – 1:15 | Introductions, Overview, and Schedule, Setup |
1:15 – 1:40 | Why Accessibilty Matters |
1:40 – 1:55 | Conformance Levels (A, AA, AAA) |
1:55 – 2:00 | Testing Tools (hands on) |
2:00 – 2:15 | Semantic Markup |
2:15 – 2:30 | Images & Alt Attributes |
2:45 – 3:00 | Forms |
3:15 – 3:30 | ARIA (Accessible Rich Internet Applications) |
3:30 – 3:45 | Color (hands on) |
3:45 – 4:00 | Screen Readers (hands on) |
4:00 – 4:45 | Workshop examples & page fix (optional) | 4:45 – 5:00 | Hang out and chat! |
A, AA, AAA
For Level A conformance (the minimum level of conformance), the Web page satisfies all the Level A Success Criteria, or a conforming alternate version is provided.
For Level AA conformance, the Web page satisfies all the Level A and Level AA Success Criteria, or a Level AA conforming alternate version is provided.
For Level AAA conformance, the Web page satisfies all the Level A, Level AA and Level AAA Success Criteria, or a Level AAA conforming alternate version is provided.
or
By default HTML is accessible. As developers, our job is to not fuck it up.
- Smelly (@last8years)
<img src="..." alt="MOST_IMPORTANT">
<img src="tfts.png" alt="Tales from the script podcast logo.">
<label for="name">Name:</label>
<input id="name" type="text" name="textfield">
<label for="address">Enter your address:</label><br>
<textarea id="address" name="addresstext"></textarea>
<fieldset>
<legend>Choose a shipping method:</legend>
<input id="overnight" type="radio" name="shipping" value="overnight">
<label for="overnight">Overnight</label><br>
<input id="twoday" type="radio" name="shipping" value="twoday">
<label for="twoday">Two day</label><br>
<input id="ground" type="radio" name="shipping" value="ground">
<label for="ground">Ground</label>
</fieldset>
<fieldset>
<legend>Select your pizza toppings:</legend>
<input id="ham" type="checkbox" name="toppings" value="ham">
<label for="ham">Ham</label><br>
<input id="pepperoni" type="checkbox" name="toppings" value="pepperoni">
<label for="pepperoni">Pepperoni</label><br>
<input id="mushrooms" type="checkbox" name="toppings" value="mushrooms">
<label for="mushrooms">Mushrooms</label><br>
<input id="olives" type="checkbox" name="toppings" value="olives">
<label for="olives">Olives</label>
</fieldset>
<input type="submit" name="submit" value="Submit Search">
<input type="reset" name="reset" value="Reset">
<button>Activate</button>
Focus is the visual representation that something is being interacted with on the page.
This is why!
:focus {
// Styles go here!
}
.js-focus-visible :focus:not(.focus-visible) {
outline: 0;
}
form:focus-within {
background: #f7b731;
color: black;
}
Accessible Rich Internet Applications
Don't use ARIA!
ARIA controls the rendering of their (the users) non-visual experience.
- W3.org
<div class="..." aria-label = "TYPE_OF_SOCIAL_MEDIA"></div>
<div class="..." aria-label = "Close"></div>
CMD + F5
OR
FN + CMD + F5
https://bit.ly/2lKmVnX