Upload
greecejs
View
83
Download
1
Embed Size (px)
Citation preview
“Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to, websites by people with disabilities.”
2
3
Key issues
• how users with disabilities access electronic information
• how designers and developers enable web pages to function with assistive devices used by individuals with disabilities
4
Disabilities
• Visual• Auditory• Physical• Speech• Cognitive• Neurological• Aging-related conditions
5
Facts and figures
• Disability affects 15-20% of every country's population.
• There are at least 650 million people with disabilities worldwide.
• 285 million people worldwide are estimated to be visually impaired.
6
Assistive technologies
• Screen readers (JAWS, VoiceOver, NVDA, etc)
• Screen magnifiers (ZoomText, MAGic, etc)
• Speech to Text• Text to Speech• Braille
8
How screen readers are used
• All textual content is auto-played
• Navigation using keys
• Utilizing screen reader’s reserved keystrokes
• Rich configuration possibilities
9
Keyboard navigation
“Users that can not or do not use a mouse to navigate need the same level of access as those who use a mouse.”
10
WCAG: Web Content Accessibility Guidelines
WCAG 2.0 Principles•Perceivable - content can be detected
•Operable - content can be manipulated
•Understandable - content can be understood
•Robust - content adheres to standards
A AA AAA
11
WAI-ARIA
• WAI: Web Accessibility Initiative
• ARIA: Accessible Rich Internet Applications suiteIt defines a way to make Web content and Web applications more
accessible to people with disabilities. It especially helps with dynamic
content and advanced user interface controls developed with Ajax,
HTML, JavaScript, and related technologies
13
The “button” example
• Non accessible<div on-click="click()"></div>
• Accessible<button type="button" on-click="click()"></button> OR<div role="button" on-click="click()"></div>
14
The “tabs” example
• Non accessiblebootstrap tabs example
• WCAG guidelines for tabs • Accessible
e.g.: Circuit enhancement on ui-bootstrap tabs
15
ARIA attributes
• Role attribute: button, link, checkbox, radio, tab, tabpanel, tooltip, dialog, etc
• Attributes for states: aria-hidden, aria-disabled, aria-checked, aria-readonly, aria-expanded, aria-label ...
• Other attributes: aria-live, aria-describedby, aria-labelledby, ...
16
How to start making accessible projects
Utilize properly• semantic elements:
<header>, <footer>, <section>, <aside>, <nav>, ...• headings: <h1>, <h2>, ...• html elements: <button>, <input>, <a>, …
Why do so?
17
Quick tips
• Provide meaningful alt text in <img><img src="athens.png" alt="City of Athens">
• Include <label> for each form element<label for="search">Search</label><input type="text" id="search" value="Search">
18
Quick tips
• Appropriate link labels
<a href="http://www.thisisathens.org/">Click here</a>
<a href="http://www.thisisathens.org/">Visit Athens</a>
19
tabindex
Relates to keyboard navigation
• tabindex="0"element is placed in the default tab order
• tabindex="-1"element can receive focus,but not placed in tab order
• tabindex=">0"element is placed in specific order
20
Bypass block
The "skip navigation" idea was invented to give screen reader and keyboard users the same capability of going directly to the main content that sighted mouse users take for granted.
https://www.canada.ca/en.html
21
Visually hidden elements
<label for="search" class="visually-hidden">Search</label><input type="text" id="search" value="Search"/>
.visually-hidden { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;}
23
Focus
“The use of outline:none has a major effect upon all keyboard only users regardless of visual impairment.”
24
Pixelation
Problem: When magnified, some images lose definition and become illegible. This is most often true with images of text.
Solution: Scalable images. SVG support
500% its normal size
25
Color contrast
• Text to be readable or other elements to be distinguishable they need to have sufficient contrast with the background
• Anything indicated by color needs to have a secondary way for it to be distinguishedfor example it is no good saying “use the green button if you agree or the red button if you don’t” by itself
26
Tone of Voice for Screen readers
• Brief, descriptive, unique, meaningful• Utilize aria-label attribute• Localization• FAQ
27
Tools
• Chrome extensions ChromeVox, Chrome Accessibility Tools
• Bookmarkletshttp://pauljadam.com/bookmarklets/https://accessibility-bookmarklets.org/install.html http://ffoodd.github.io/a11y.css/
28
Our challenges
• Adapt a product for accessibility• Make bootstrap components accessible• Resolve navigation traps• Design impacts (visualize focus, color contrast, etc)• Automation testing for accessibility
29
Things to consider
• If the frameworks/technologies you use provide build-in accessibility support
• Design thinking with accessibility in mind• Usability tests with people with disabilities
→ And remember that it’s not a one time job ;)
30
References
https://www.w3.org/TR/WCAG20/https://www.w3.org/TR/wai-aria/http://tink.uk/ https://accessibility.blog.gov.uk/ http://webaim.org/techniques/keyboard/
Christina Papadimitriouhttps://www.linkedin.com/in/christinapapadimitriou/ @christinapap
Nadia Markadonihttps://www.linkedin.com/in/nmarkadoni/ @nanmark