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.

Derek Featherstone/Twitter

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?

Narrative Industries/Twitter

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?“

Accessible Design Principles

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