Last active
August 13, 2019 06:23
-
-
Save androidfanatic/aa87376d34b6607a22f18781a4a49a1d to your computer and use it in GitHub Desktop.
Accessibility on the Web
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Accessibility and The Web</title> | |
| <meta charset="utf-8"> | |
| <style> | |
| @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic); | |
| * { | |
| font-family: 'Ubuntu Mono'; | |
| font-weight: normal; | |
| } | |
| .remark-code, .remark-inline-code { | |
| background: #eeeeee; | |
| } | |
| #time { | |
| position: absolute; | |
| top: 2px; | |
| right: 2px; | |
| font-size: 14px; | |
| z-index: 999; | |
| color: orangered; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <span id="time"> | |
| 00:00s | |
| </span> | |
| <textarea id="source"> | |
| class: center, middle | |
| # Accessibility and The Web | |
| --- | |
| ### Introduction | |
| - What is accessibility | |
| - Enable people with disabilities to make full use of technology | |
| - Make technology equally accessibility to everyone | |
| - To enrich and empower differently-abled people to live more independently | |
| - Standards: | |
| - WCAG 2.0 - 2008 by W3C | |
| - ISO/IEC 40500:2012: Information technology - W3C Web Content Accessibility Guidelines (WCAG) 2.0 | |
| - Several countries have their own laws and guidelines for accessibility | |
| --- | |
| ### Assistive Technologies: | |
| - Output: | |
| - readers | |
| - magnifiers | |
| - high contrast displays (or display settings) | |
| - Braille terminals | |
| - Input: | |
| - On-screen keyboards: | |
| - Speech input via microphone | |
| - Eye tracking / motion tracking | |
| - Head pointers | |
| - Q: does anyone know any other assistive technologies? | |
| <div style="display: flex"> | |
| <img style="width: 240px; margin-right: 4px;" src="https://www.disability-grants.org/images/442xNxassistive-technology.jpg.pagespeed.ic.uYc2vZINjn.jpg" /> | |
| <img src="https://www.resna.org/sites/default/files/legacy/conference/proceedings/2004/Papers/Practice/OTH/Images/AlianiM/Photo-MVC-011FThumb.jpg" /> | |
| </div> | |
| --- | |
| ### How To: | |
| 1. Write semantic HTML | |
| - `header`, `footer`, `article`, `heading`, `paragraph` | |
| - each HTML tag has it's own semantics, own meaning | |
| - More tags: del, ins, em, strong, blockquote, code, abbr, acronym, cite, kbd, samp, sup, sub, var | |
| - do not use tables for layout or content placement | |
| - alternate text for images | |
| - `<img src="trees_hill.png" alt="Trees on a hill top" />` | |
| - label for form inputs | |
| Good: ```<label><input type="checkbox">Option 3</label>``` | |
| Bad: ```<input type="checkbox"> Option 3``` | |
| - tab based navigation using `tabindex` | |
| ```<a href="/about" tabindex="2">About</a>``` | |
| ```<a href="/" tabindex="1">Home</a>``` | |
| ```<a href="/contacts" tabindex="3">Contacts</a>``` | |
| - colors: pick a color palette with better contrast and better visibility | |
| - avoid auto playing audio/video content | |
| --- | |
| #### ARIA: Accessible Rich Internet Applications | |
| - set of attributes that passes special information to assistive technologies | |
| - should be used only with such UI components where a semantically more suited HTML element isn't available | |
| - example: | |
| - progress bar (progress indicator) | |
| - tabs | |
| - snackbar & notifications | |
| - HTML5 doesn't have built-in HTML tags for such element and hence has no built-in support for assistive technologies | |
| to know what these UI components do | |
| - aria attributes can help indicate meaning of these UI components to assistive tools such as screen readers | |
| - Attributes list: | |
| - aria-checked, aria-disabled | |
| - aria-grabbed, aria-invalid, aria-live | |
| - aria-hidden, aria-autocomplete, aria-placeholder, aria-readonly | |
| - aria-valuemax, aria-valuemin, aria-valuenow | |
| Read more: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques | |
| --- | |
| class: center, middle | |
| # Questions? | |
| ##### Thank you! | |
| </textarea> | |
| <script src="https://remarkjs.com/downloads/remark-latest.min.js"></script> | |
| <script> | |
| var slideshow = remark.create(); | |
| let secondsSpent = 0; | |
| setInterval(() => { | |
| secondsSpent += 1; | |
| let seconds = secondsSpent % 60; | |
| let minutes = Math.floor(secondsSpent / 60); | |
| if (seconds < 10) { | |
| seconds = '0' + seconds; | |
| } | |
| if (minutes < 10) { | |
| minutes = '0' + minutes; | |
| } | |
| const time = minutes + ':' + seconds + 's'; | |
| document.getElementById('time').innerText = time; | |
| }, 1000); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment