Developing for Everyone

Developing for Everyone

Sergei Kriger @_sergeikriger

About me

AA

Questions

Wheel evolution

Progress

What if ...?

Todo List

Adding Labels

        <input id="item" type="checkbox" />
        <label for="item">speak at oredev</label>
         
        <button aria-label="Delete speak at oredev">
          <img src="./trash-bin.svg" />
        </button>
      

JavaScript and Common Sense

JavaScript

CommonSense

Tabbable Chart

        <svg class="chart">
        	<rect tabindex="0" aria-label="Apples, 3 kg sold on July 1"></rect>
        	<rect tabindex="0" aria-label="Apples, 4 kg sold on July 2"></rect>
        	<rect tabindex="0" aria-label="Apples, 3 kg sold on July 3"></rect>
        </svg>
      

Common Sense

Radio buttons: initial state

Clickable Area

Red

Green

Blue

Red

Green

Blue

Red

Green

Blue

Red

Green

Blue

Enhancing The Clickable Area Size

subscription form: bad

Form Validation

• Color
• Descriptive text
• Icons

subscription form: good

Bad Connection

• Havy bundle
• Timeout
• "not-that-smart-phone"

Non-tech Users

And much more...

Lighthouse

axe-core

Accessibility Insights

a11y casts

a11y casts

Deque

We build accessible web
because we can.

Thanks!.. Questions?

@_sergeikriger

Credits