Keep It Simple.
Accessible
Design Thinking.
Eric Eggert, Knowbility — AHG 2018
Eric Eggert
Eric Eggert works with Knowbility and the W3C on improving the Web for People with Disabilities, and everyone else.
Design
Observe
Understand
Apply
Everyone’s a Designer*
*But not a graphic designer 😉
Design is
Creation with Intention
Design is
Planning
Observe
Understand
Apply
Do I observe what and who I need?
Do I draw the correct conclusions from my observations?
How do I make sure that my understanding is reflected in my app?
Design Thinking
User centric
Visualization
Simulation
Iterative Approach
Research Approach
Accessibility until now
Talking & Planning
Graphic design (of an image of a website)
HTML/CSS/JavaScript
CMS
Content
Iterations
Hotfixes
Quality Control
Accessibility
Performance
Security
Data protection
Accessibility is a sign of good quality.
Accessibility must be a fundamental value
-
Accessibility
-
Performance
-
Look/Design
-
Security
-
Data protection
-
Usability
What does a good website or app consist of?
„How do I implement this new feature secure, performant, usable, accessible, using less data
and beautiful?“
North Star
Photo by Robson Hatsukami Morgan on Unsplash
Perceivable
Operable
Understandable
Robust
Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
Text Alternatives, Captions, Transcriptions,
Audio Descriptions, Adaptable, Distinguishable
Operable
User interface components and navigation must be operable.
Keyboard, Enough Time, Seizures and Physical Reactions, Navigable, Input Modalities🆕
Understandable
Information and the operation of user interface must be understandable.
Readable, Predictable, Input Assistance
Robust
Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
Compatible
“Kassler Sonderbord”
“Kassel Special Curbs”
Build with Accessibility in Mind!
Minimal Gap
non-slip surface
contrasting color
KISS
Keep it simple, stupid!
By Casablanca Records (Billboard, page 52, 17 Dec 1977) [Public domain], via Wikimedia Commons
Warning!
The following example can make your website less accessible!
<!-- (BAD) -->
<h1 role="button">heading button</h1><!-- (GOOD!) -->
<h1><button>heading button</button></h1><th
tabindex="0"
role="button"
aria-label="Sort column"
>Name</th><th>
Name
<button aria-label=
"Sort column">
🔼🔽
</button>
</th><body aria-hidden="true">
…content…
<div id="modal" aria-hidden="false">
…modal content…
</div>
…content…
</body>Thank You!
Eric Eggert, Knowbility & W3C/WAI
@yatil@micro.yatil.net
@yatil@twitter.com
https://yatil.net
Keep It Simple
By Eric Eggert
Keep It Simple
Accessible Design-Thinking.
