Billy McKee bpmckee
bpmckee
/ index.html
Last active
June 6, 2019 00:14
Accessibility Codelab - Custom Button / Color Contrast - This custom button has many accessibility issues. Start off by fixing it's color contrast.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Custom Button</h1> | |
| <div id="add" class="button"> | |
| Increment | |
| </div> | |
| <div> | |
| <label for="count">Count:</label> | |
| <input id="count" type="text" value="0" disabled> | |
| </div> |
bpmckee
/ index.html
Last active
June 6, 2019 00:59
Accessibility Codelab - Focus - There are still many a11y issues. Make the button focusable in this step
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Custom Button</h1> | |
| <div id="add" class="button"> | |
| Increment | |
| </div> | |
| <div> | |
| <label for="count">Count:</label> | |
| <input id="count" type="text" value="0" disabled> | |
| </div> |
bpmckee
/ index.html
Last active
June 6, 2019 01:52
Accessibility Codelab - Keyboard Events - Handle keyboard events to the custom button
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Custom Button</h1> | |
| <div id="add" class="button" tabindex="0"> | |
| Increment | |
| </div> | |
| <div> | |
| <label for="count">Count:</label> | |
| <input id="count" type="text" value="0" disabled> | |
| </div> |
bpmckee
/ index.html
Last active
June 6, 2019 19:34
Accessibility Codelab - Screen Reader Intro - Basic example showing the role attribute
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Screen Reader Example</h1> | |
| <button type="submit"> | |
| Native | |
| </button> | |
| <div class="button" tabindex="0"> | |
| Custom | |
| </div> |
bpmckee
/ index.html
Last active
August 12, 2019 21:14
Accessibility Codelab - Custom & Native Equivalent - Only windows high contrast mode should be able to tell the difference
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Screen Reader Example</h1> | |
| <div class="button" tabindex="0"> | |
| Increment | |
| </div> | |
| <button type="submit"> | |
| Increment | |
| </button> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Golf Scorecard</h1> | |
| <p class="score"> | |
| You are at par | |
| </p> | |
| <div class="button-container"> | |
| <button data-offset="-1">▼</button> | |
| <span class="tooltip">Lower score</span> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Golf Scorecard</h1> | |
| <p class="score"> | |
| You are at par | |
| </p> | |
| <div class="button-container"> | |
| <button data-offset="-1">▼</button> | |
| <span class="tooltip">Lower score</span> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Golf Scorecard</h1> | |
| <p class="score"> | |
| You are at par | |
| </p> | |
| <div class="button-container"> | |
| <button data-offset="-1">▼</button> | |
| <span class="tooltip">Lower score</span> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Golf Scorecard</h1> | |
| <p class="score"> | |
| You are at par | |
| </p> | |
| <div class="button-container"> | |
| <button data-offset="-1">▼</button> | |
| <span class="tooltip">Lower score</span> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Golf Scorecard</h1> | |
| <p class="score"> | |
| You are at par | |
| </p> | |
| <div class="button-container"> | |
| <button data-offset="-1">▼</button> | |
| <span class="tooltip">Lower score</span> | |
| </div> |
OlderNewer