Skip to content

A11YMTL – 1st edition

These are my notes on the presentation. My take on it is by no means the way it was explained to the audience. All the weird references to ducks or BDSM are my own.

One size does not fit all: designing for some of the largest minorities on the web.

If you’ve designed a website a website for the average user then you’ve designed it to fit no one.  Visual conventions don’t necessarily fit the needs of every user.

Around 1 person out of 7 in the world have a type of handicap. It’s not necessarily always visible. When we talk about handicaps, there are 4 big categories: auditory, visual, cognitive, motor…but there are plenty more.

here are some handicaps that can hinder someone's experience of a website

Current design trends

Our definition of what a great design is depends greatly on our own values. Design doesn’t always mean the same thing.

It feels like this is 1997 all over again

Technology may have evolved these past 20 years, we are no longer using Flash…

except this time, we’re using HTML5, CSS3 and Javascript to screw things up.

The average user isn’t very different for both UX and Accessibility. We’re all people. Disability is just another aspect to consider. If you don’t consider all users, you practice some UX…or SUX for short.

Ghost Buttons:

Buttons that are very subtle, very discreet to allow the visual effect behind it to shine. These buttons are slick and trendy but there’s so hard to see. If you have color blindness or vision focus problems…good luck seeing these buttons.

  • They cause a proximity issue because they are difficult to notice when you use screen magnification
  • They have a real contrast issue as they get lost in the busy background
  • They are plain useless. A button by design is meant to be visible and incite action….so if it doesn’t look like a button, doesn’t feel like a button and doesn’t quack like a button…maybe it shouldn’t be a button?

Design tips to help with ghost buttons:

  • Provide ghost buttons with background color and sufficient contrast, so the text clearly stands out.
  • Choose background images carefully, so the buttons always display in an area that is free of clutter.
  • Be mindful of placement and proximity, so the buttons don’t end up being lost in the page.
  • Run extensive user testing sessions with people who are color blind or have low vision.

Endless scrolling is a drag

Endless scrolling is a bit of a problem because you can’t ever reach the footer, no matter how hard you may try.

  • A discovery issue: there’s no clear “you are here” cue for the user. If you navigate using the TAB key, you are basically lost in space.
  • A functionality issue: endless scrolling is straight up painful when you navigate using TAB. It feels like running a marathon with your keyboard.
  • 50 shades of footer: why torture the user by showing a footer that can’t ever be reached?

Design tips to help with endless scrolling:

  • Focus: make sure objects that get focus with the mouse also receive focus when tabbed to, using the keyboard.
  • Focus again: provide a visible focus indicator that clearly identifies each object that is meant to grab focus.
  • Create a kill button: design a mechanism to turn off endless scrolling, and provide a quick link to bypass the main content.
  • And you guessed it, run extensive user testing sessions with people who navigate using only the keyboard.

Parallax scrolling hell

Parallax helps create movement effects. If the experience you get when scrolling on a website and see the background image move. Personally it gives me motion sickness. I know it’s supposed to create a specific experience and set a mood. Motion sickness isn’t an experience for me; it’s not a big mood setter either. People, this isn’t a car trip, it’s not a cruise, it’s a website. If you can’t provide a barf bag on load, then stop that crap.

  • This thing creates a functionality issue. As in, some of your users can’t function around your website!
  • It’s distracting and doesn’t add much. It’s basically for decoration only. So let me turn it off!

Design tips to help with parallax scrolling

  • Limit the number of animations and movement effects in the page.
  • Provide a warning on page load, to inform users about risks for people with vestibular disorders.
  • Shut that stuff down on demand: Provide a means to disable parallax, so users can quickly switch to a static version, if need be.
  • …And last but not least: run extensive user testing sessions with people who are diagnosed with vestibular disorders.

Issues with complex typefaces

There’s a lot of new fancy typefaces. It’s great for typography nerds but it can be a pain for the uninitiated visitor it can feel like trying to read hieroglyphs.

  • A readability issue: fancy fonts make it difficult to focus on words.
  • A legibility issue:  yes, that font looks nice but if it doesn’t render well on mobile, it’s just not happening buddy.
  • Make content easier to consume, use, digest by using the proper fonts.

Tips to use typefaces when designing with accessibility in mind

  • Try to limit the use of complex typefaces to elements like headings, titles, value propositions, slogans, etc.
  • Make sure your custom typeface renders well, and is legible across various browsers and devices.
  • Refrain from using complex typefaces for blocks of written text or body copy.
  • Still harping on the user testing! Run extensive user testing sessions with people who are diagnosed with various forms of dyslexia.

Issues Cinemagraphs

What is a cinemagraph? It’s that thing you see on AirBnB where there’s a fancy little video that loads in the hero banner of a website. These full-screen background videos are meant to create compelling, visual storytelling experiences….but not for everyone obviously.

  • They generate a findability issue: your content is part of the background. A screen reader can’t access it.
  • With Virtual Reality around the corner…it’s going to raise some ethical issues
  • It leaves behind the benefits of separating presentation, structure and behavior.

Tips to go above and beyond when dealing with cinemagraphs

  • Refrain from embedding informative content (video or image) as part of the background of the page.
  • Non-sighted people want to live the experience, too! Provide text transcripts and audio descriptions.
  • Switch to Windows High Contrast, to see how those elements hold up for people who have low vision.
  • You should know this by now but…Run extensive user testing sessions with people who are blind. Are they missing on any of the fun?

A designer’s responsibility

  1. Ethical: design for everyone regardless of abilities
  2. Legal: Design according to standards & laws
  3. Philanthropic: Design for the common good
  4. Economic: Design to increase market shares
  5. Personal: Design to push your own limits

Design is about more than pretty colors and awesome fonts right? Your work has a big impact, so keep certain things in mind when you create emotions and experiences.

When we design for disability first, we often stumble upon solutions that are not only inclusive, but also are often better than when we design for the norm.

This is a great quote from Elise Roy. Check out her work!

Accessibility for designers: some guidelines

  1. Heading structure
  2. Reading order
  3. Good contrasts
  4. True text
  5. Use of caps
  6. Font size
  7. Line lengths
  8. Recognizable links
  9. Focus indicators
  10. Skip links
  11. Meaningful links
  12. Use of media
  13. Use of color
  14. Form controls

Designing for extremes

Designing for extremes: handicaps, older people, different devices and average users

When you design, you should keep in mind people with disabilities, older people, average users on all types of devices!

Ressources

An extension to test websites

Deque.com is developing a tool for developers wanting to test a website’s accessibility. It covers 30% of the accessibility tests.

You can download this extension for Firefox and for Chrome.

Getting the presentation PDF

You can download the PDF directly if you want to check it out.

Important information for the A11YMTL group

Get in touch

If you want to join the Facebook group, it’s easy to find: A11YMTL.

If you want to join the Twitter, it’s @A11YMTL.

Next meet-ups planned for the group

  • September: Quick tips to get started with web accessibility
  • October: The future of WCAG at the W3C
  • NovemberWAI-ARIA et noms accessibles
  • December SGQRI 008 – what’s up 5 years later