My favourite a11y things
Or why a11y doesn’t stop with screen readers

By Dominik


A screenshot of a tweet of a photo showing a very steep ramp that would be impossible to be useful to a
					wheelchair user


HTML is hard

"Slow Keys"

An animation of hands typing with unpredictable motions

Please don't disable the zoom

<meta name="viewport" content="

@-ms-viewport { width: device-width; zoom:1.0; }

Parallax can cause vertigo / motion sickness

An animation of a website being scrolled with the background scrolling at different speed resulting in a
					lot of motion


An animation of the website tab order with pretty colored outlines

Color AND shape

A screenshot of a table of features of showing numbers not just different colors but also
					different borders

SVG accessibility

<svg aria-labelledby="title-download">
	<title id="title-download" lang="en">Download symbol</title>
	<path class="icons-background" d="M27.8 etc…"></path>

<svg role="img" title="Download symbol">
	<use xlink:href="sprite.svg#download"/>

Internet is slow

Offline first

Devices are slow

A screenshot of the current fragmentation among Android as of August 2015 showing hundreds of
					differently sized versions in differing quanity

Use CSS for animations and fancy effects (degrade to just show and hide in older devices)

Test your performance
(RAIL, 60fps, #perfmatters)

A photo of a man holding a poster with the hashtag perfmatters printed on it

Data cap

Be mindful of the data you send

No webfonts for mobile
(two font stacks)?

Make use of the browser cache
(don't compile for each page)

Security is important

False positive ➝ no-js


Don't use icon fonts

  • A screenshot of an icon set showing lots of
								different icons
  • A screenshot of an icon set showing lots of missing icons with boxes

HTTPS and letsencrypt


Usable from browser? Why?

Status page for up-times and issue tracking

Test(human - and unit - test) your endpoints, constantly

Scale! Before you need to

Document and publish examples


Communicate to humans (be visual)

Make your docs accessible (duh!)

Provide a search

Give ways out for frustrated stuck users

Show meaningful code examples

More than one way (videos/animations, docs, playgrounds)

Coding Styleguide



Make community guidelines and statements of inclusion straight forward and clear.

Tabs vs spaces

A scene from the HBO TV show 'Sillicon Valley' in which the hero spilt up with the hot girlfriend
						becasue she uses spaces instead of tabs.

Use tabs for indentation,
spaces for alignment.

It’s all the same once it’s gone through the compiler right?!