Tags: inclusive

20

sparkline

Designing for Inclusion with Media Queries

The slides and notes from a great presentation by Eric Bailey that takes a really thoughtful deep dive into media types, media queries, and inclusive design.

Useful accessibility resources

A whoooole bunch of links about inclusive design, gathered together from a presentation.

Notifications

Heydon keeps on delivering the goods. This time, he looks at making on-screen notification messages accessible using ARIA’s live regions.

As ever, structuring content is paramount, even where it pertains to dynamic events inside realtime web applications.

Be Kind, Design – Nat Dudley – Medium

The transcript of Nat’s superb Webstock talk.

We need to start thinking about inclusivity the same way as we think about mobile design. We realised with mobile, that we have to put that experience at the centre of what we do, otherwise it won’t be successful and we’ll fail mobile users. We realised we have to design mobile-first.

The same is true for inclusivity. Instead of it being an afterthought if it’s thought about at all, it needs to be our first thought. It needs to be central to our strategy, embedded in how we analyse and solve the problems we encounter. Designing inclusive-first is the only way we’ll manage to serve and protect all of the people who use what we build.

Fair Is Not the Default - Library - Google Design

Why building inclusive tech takes more than good intentions.

When we run focus groups, we joke that it’s only a matter of seconds before someone mentions Skynet or The Terminator in the context of artificial intelligence. As if we’ll go to sleep one day and wake up the next with robots marching to take over. Few things could be further from the truth. Instead, it’ll be human decisions that we made yesterday, or make today and tomorrow that will shape the future. So let’s make them together, with other people in mind.

On Weaponised Design - Our Data Our Selves

A catalogue of design decisions that have had harmful effects on users. This is a call for more inclusive design, but also a warning on the fetishisation of seamlessness:

The focus on details and delight can be traced to manifestos like Steve Krug’s Don’t Make Me Think, which propose a dogmatic adherence to cognitive obviousness and celebrates frictionless interaction as the ultimate design accomplishment.

A Content Slider

Brad always said that carousels were way to stop people beating each other up in meetings. I like the way Heydon puts it:

Carousels (or ‘content sliders’) are like men. They are not literally all bad — some are even helpful and considerate. But I don’t trust anyone unwilling to acknowledge a glaring pattern of awfulness. Also like men, I appreciate that many of you would rather just avoid dealing with carousels, but often don’t have the choice. Hence this article.

Collapsible Sections

The latest edition of Heydon’s Inclusive Components is absolutely fantastic! The pattern itself—toggling sections of content—is quite straightforward, but then there’s a masterclass in how to create a web component that still allows the content to be accessible in older browsers. The key, as ever, is progressive enhancement:

Whether implemented through web components or not, progressive enhancement not only ensures the interface is well-structured and robust. As we’ve seen here, it can also simplify the editorial process. This makes developing the application and its content more inclusive.

Exclusive Design Principles ⚒ Nerd

This is a fascinating exercise—take a good set of design principles and test them for reversibility. The results are entirely plausible.

I’ve taken this exercise to the extreme. The philosophy behind inclusive design is that the thing you create works for everybody, no matter the context. The idea behind this experiment in Exclusive Design is that you design something for one specific person, in a controlled environment, in a specific context. Tailor made.

Maybe I should add these to my collection.

  1. Provide a unique experience
  2. Ignore situation
  3. Be inconsistent/innovative
  4. Take control
  5. Offer the best possible solution
  6. Prioritise identity
  7. Add nonsense

Infusion: An Inclusive Documentation Builder

Two of my favourite things together at last: pattern libraries and service workers. Infusion is a tool for generating pattern libraries that also work offline.

Thinking about it, it makes total sense that a pattern library should be a progressive web app.

What I’ve learned about motor impairment

James gives—if you’ll pardon the pun— hands-on advice on making sites that consider motor impairment:

  • Don’t assume keyboard access is all you need
    • Auto complete/Autofill
    • Show me my password
  • Allow for fine motor control issues
    • Don’t autoplay videos
    • Avoid hover-only controls
    • Infinite scrolling considerations
  • Be mindful of touch
    • Avoid small hit targets
    • Provide alternate controls for touch gestures

Far from being a niche concern, visitors with some form of motor impairment likely make up a significant percentage of your users. I would encourage you to test your website or application with your less dominant hand. Is it still easy to use?

Empathy Prompts

A series of small suggestions that anyone can try so that they can better empathise with people who experience digital products differently.

These prompts are intended to help build empathy, not describe any one person’s experience. These prompts are not intended to tokenize the experience of the individuals experiencing these conditions.

Inclusive Design Principles

I’ve added these to my collection of design principles:

  • Provide comparable experience
  • Consider situation
  • Be consistent
  • Give control
  • Offer choice
  • Prioritise content
  • Add value

Responsive Design for Motion | WebKit

A really great overview of using prefers-reduced-motion to tone down CSS animations.

This post was written by James Craig, and I’m going to take this opportunity to say a big “thank you!” to James for all the amazing accessibility work he has been doing at Apple through the years. The guy’s a goddamn hero!

Inclusive Components

A great new site from Heydon:

A blog trying to be a pattern library. Each post explores the design of a robust, accessible interface component.

The first component is a deep dive into toggle buttons.

An Introduction to the Reduced Motion Media Query | CSS-Tricks

A new media query that will help prevent you making your users hurl.

What the Heck Is Inclusive Design? ◆ 24 ways

I really, really like Heydon’s framing of inclusive design: yes, it covers accessibility, but it’s more than that, and it’s subtly different to universal design.

He also includes some tips which read like design principles to me:

  • Involve code early
  • Respect conventions
  • Don’t be exact
  • Enforce simplicity

Come to think of it, they’re really good design principles in that they are all reversible i.e. you could imagine the polar opposites being design principles elsewhere.

Building Web Apps for Everyone - O’Reilly Media

Here’s a fantastic and free little book by Adam Scott. It’s nice and short, covering progressive enhancement, universal JavaScript, accessibility, and inclusive forms.

Download it now and watch this space for more titles around building inclusive web apps, collaboration, and maintaining privacy and security.

Did I mention that it’s free?

Microsoft’s Radical Bet On A New Type Of Design Thinking

On universal design: “We’re reframing disability as an opportunity.”

One day someone will write a history of the Internet, in which that great series of tubes will emerge as one long chain of inventions not just geared to helping people connect in more ways, but rather, to help more and more types of people communicate just as nimbly as anyone else.