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

HTML is hard

• Blindness
• Colour blindness
• Cognitive impairements
• Motion and hearing impairements
• Vestibular disorders
• Many more …

"Slow Keys"

Please don't disable the zoom

<meta name="viewport" content="
	width=device-width,
	initial-scale=1,
	maximum-scale=1,
	user-scalable=no
">

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

Parallax can cause vertigo / motion sickness

Outlines

Color AND shape

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>

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

Internet is slow

• Remote areas in Australia
  (Almost everywhere in Oz really)
• Train / Bus in tunnel
• Old contract only includes EDGE connection
• Student in a library / Public wifi
• The work internet that you tether to circumvent your work firewall

Offline first

• 
• 
• 
• 
• 
• 

• • W3C Specifications
    (awesome GitHub repo)

    • Offline Web Applications caching, events, localStorage
    • Service Workers
    • IndexedDB
    • WebStorage
  • Offline is not an error
  • Remain functional and store states/data locally
  • Commuicate a possible risk of something being out of sync

Devices are slow

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

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

Data cap

• Old contract
• Data-caped contracts offeres common
• Traveling/roaming
• Too expensive

Be mindful of the data you send

• Optimize images
• Use responsive images (picture element, srcset)
• Minify files (HTML too)
• gzip

No webfonts for mobile
(two font stacks)?

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

Security is important

• Ad blockers
• Ad blockers to save on data

False positive ➝ no-js

• https://easylist.github.io/easylist/easylist.txt

Don't use icon fonts

HTTPS and letsencrypt

API

• Be consistent
• Be stable
• Be secure
• Be flexible
• Work on adoption
  (Make it open source)
• Use it yourself
• Document all the things
  (and make it pretty)

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

Documentation

• If you have a game => Document to draw in
• If you have a service => Document to explain
• If you have an API => Document to teach
• If you have a website => Document to state browser/screanreader support

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

• Consistency
• Maintainable
• Readability
• Less arguments
• Less rogue bus hitting

Community

Communication

• Communicate failures and be open about it (apologise)
• Communicate changes and challenges
• Take critisism on board but don't be afraid to take a stance
• Give reasons why some PR might not be expected and close
• Ask for opinions (make proposals)
• Take pride in your work
  Get excited (it's infectious)

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

Tabs vs spaces

Use tabs for indentation,
spaces for alignment.

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