Grow your CSS skills. Land your dream job.

[W3Conf] Léonie Watson: “Design like you give a damn: Practical accessibility for web professionals”

Published by Chris Coyier

Léonie Watson (@leoniewatson) is a digital accessibility consultant from Bristol, UK. She believes in the importance of accessibility and also that it's not a hinderance to creativity.

These are my notes from his presentation at W3Conf in San Francisco as part of this live blog series.

What sends Léonie's heart racing is the idea of designing like you give a damn. She shares three principals around this idea.

1. Design like you're Banksy

Challenge conventional wisdom.

For example: accessibility kills creativity. She worked at a place in the UK that literally believed this. Then she showed us a very complex web form with all kinds of awesome animations and interactions, but worked perfectly from an accessibility perspective.

Accessibility is not difficult, it's just unfamiliar territory.

What keeps it unfamiliar, is how we think about it. We just need to understand more about the people in our target audiences.

2. Design like you're Da Vinci

Be curious about how we can improve our day to day work.

An important concept is keeping things consistant from page to page (e.g. logo, search navigation). These become important visual landmarks to keep peopled oriented. This applies to any kind of "widget" you use repeatedly, and applies to functionality as well as look.

HTML5 placeholder is no substitute for real descriptive text.

Think about text size. Think about header structures. Think about navigation (how it looks, how it feels, how it behaves).

"You don't want people to have to fight to get at your information."

"Taking the focus outline off links and inputs is a complete disaster."

The web isn't broken. If it is, we broke it. We are to blame when we harm accessibility.

3. Design like you're Chanel

There is an "Accessibility Stack":

  • Top: Screen Readers
  • Middle: Accessibility API (⇅)
  • Bottom: Web Browser
The stack.

"Just because a browser supports a feature, doesn’t mean it’s there in accessibility API."

The browser has to support something first, and then it moves up the stack. This complicates things accessibility-wise.

Getting the HTML right on a page (proper heading, proper lists, etc) means giving screen reader users proper non-linear ways to jump around a page. HTML5 ARIA landmark roles are also a big win for this.

The <main> element has been discussed endlessly. In one keystroke, people can get to the main content of a page. A simple but big win.

Using Ajax doesn't automatically screw up accessibility. It is all in how you use it. Test, test, test! She showed an example of how not changing focus off an "Add to Cart" button but having the shopping cart be logically right after that button makes the screen reader experience acceptable in that case.

Accessibility touches all areas of the building experience. "Agile accessibility" = accessibility in the entire process.

Comments

  1. Permalink to comment#

    “Then she showed us a very complex web form with all kinds of awesome animations and interactions, but worked perfectly from an accessibility perspective.”

    Anyone have a link?

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".