Accessibility For Everyone

A presentation at Loupe 2019 in August 2019 in Amsterdam, Netherlands by Laura Kalbag

Slide 1

Slide 1

Accessibility For Everyone

Laura Kalbag ind.ielaurakalbag.com@laurakalbag

Slide 2

Slide 2

I go to visit the website of a car dealership and I can’t see it. The website loaded just fine. But I use a screen reader (a type of assistive technology that reads the content of the screen aloud) to help me access the site. This is what I hear…

Slide 3

Slide 3

web content banner banner link image logo-underscore-ford link image link-underscore-VT-underscore-K-underscore-R03 link image logo-underscore-honda link image logo-underscore-car visited link image logo-underscore-header-underscore-2-JPG link models-equals-opal link image jeep-logo-PNG link models-equals-opal link models-equals-volvo

That’s the navigation.

You might not be used to screen readers reading content to you, but even if you were, that’s still not easy to understand. It’s mostly reading the file names from a list of images that make up the site’s navigation…

Slide 4

Slide 4

Maybe you can see the page, but you can’t hear it. This is a video playing without audio. Can you tell what’s going on? No… for this video, it’s pretty much impossible to understand.

Slide 5

Slide 5

Now you’re reading a page, and you’ve decided you want to contact the people who run the website. So you go to click on the contact link in the navigation… but the button area is so small that it’s really difficult to click the link. Maybe you find using a mouse or touchscreen with accuracy pretty difficult, so it’s even harder to click or tap such a tiny link area.

Slide 6

Slide 6

You get to the contact page, and there’s a form with three fields. You’ve filled out forms on paper before, but this is your first time with a form online Next to each form field is this little asterisk symbol, but what does it mean? Is it some kind of magical sign? Without an explanation, it’s hard to understand what the asterisk means.

Slide 7

Slide 7

First we couldn’t see the page, then we couldn’t hear it, then we found the page hard to interact with, and then we found it hard to understand. These are all ways in which technology can be inaccessible to people.

Slide 8

Slide 8

Accessibility is making technology available to everyone.

Accessibility is making technology available to everyone, regardless of their needs.

Slide 9

Slide 9

We build the new everyday things.

As people making technology, we are building the new everyday things. We build the things people use to find information, the things they use to socialise, and the things they use to shop.

Slide 10

Slide 10

We all know our industry isn’t so diverse

But we have a problem because our industry isn’t so diverse. Our industry lacks diverse races, genders, ages, backgrounds, educational and financial statuses, and abilities.

Slide 11

Slide 11

Inclusion

Which means we’re bad at inclusion.

When we talk about inclusivity in technology, we are usually talking about how to better include people from a variety of marginalised groups, the people who are not the users usually centred in technology.

Slide 12

Slide 12

We don’t all have the same needs.

Because we don’t all have the same needs. And when we build technology, we end up creating products for people just like us—whoever we are and whatever our needs are—forgetting that other people may have requirements that differ from our own, or even conflict with our own.

Slide 13

Slide 13

We need to understand and care about differing needs.

To create more useful, usable products, we need to understand and care about those differing needs.

Slide 14

Slide 14

Understanding problems = Better at solving problems

Spending meaningful time with people whose experiences differ from our own can help us develop a greater understanding of each other’s needs. That’s why we benefit from diverse teams: the greater capacity a team has for understanding their audience, the more likely they are to solve that audience’s problems.

Slide 15

Slide 15

Inclusive or accessible?

At this point it’s good to look at the differences between inclusivity and accessibility

Slide 16

Slide 16

Accessible design

Accessibility is like adding an ugly ramp as an afterthought to the back of your newly-built shop building.

Slide 17

Slide 17

Inclusive design

Inclusive design is like building your shop building with a ramp and stairs from the very beginning, trying to accommodate as many needs as possible. It’s remembering to add railings for people who need support, and bright lines on the steps so people who find it difficult to see them can use the steps safely.

Slide 18

Slide 18

Which means you can have accessibility without inclusivity. But it’s short-term and somewhat superficial. We need inclusivity to make better technology.

Slide 19

Slide 19

We need to build meaningful products that serve people’s needs and value their time.

Slide 20

Slide 20

Do we know what’s best?

We must also be cautious in assuming we know what’s best for others just because we’re designers…

Slide 21

Slide 21

Don’t be colonial.

If we believe what’s best for others despite our differing needs, it can result in a patronising and incorrect solution. This can be referred to as “colonial design.”

Slide 22

Slide 22

What makes inclusive design?

So what makes for more inclusive design?

Slide 23

Slide 23

There are four broad parameters we must consider when making our technology accessible:

  1. Make it easy to see, accommodate visual needs.
  2. Make it easy to hear, accommodate auditory needs.
  3. Make it easy to interact, accommodate motor needs.
  4. Make it easy to understand, accommodate cognitive needs.

Slide 24

Slide 24

Usually accessible design starts with content itself. Unless the content itself is accessible, nothing is accessible.

Slide 25

Slide 25

Provide alternatives.

When creating inclusive content, the aim is to make all of our content accessible to as many people as possible. Sometimes this is not possible with one format of content because people have specific needs that mean they cannot access that particular format. Providing alternatives is the easiest way to be flexible to your user’s needs.

Slide 26

Slide 26

Here’s an example from my book. At the top of this page, there’s a five images showing how a photo of a kingfisher might be perceived by people with different types of colour blindness. It looks great in colour on the page, but I didn’t take ebook readers into consideration. In an ebook that displays in greyscale, the images look identical! And there’s no descriptive text to help the reader understand what the images represent.

Slide 27

Slide 27

Your content may already be inclusive.

You may already be planning, writing, and creating inclusive content, because many of the considerations you use to make your content readable and usable benefit inclusivity. Still, here’s some some starting points to start thinking about content in a more inclusive way:

Slide 28

Slide 28

Use plain language.

Plain language benefits everybody from people with dyslexia to non-native speakers.

Slide 29

Slide 29

Here’s an example from gov.uk, where the language is plain and easy to read. Writing sentences that are short and easy to read makes text less intimidating and easier to skim. Avoiding jargon and complex metaphors will make content more welcoming to people, especially those who might be new to an area or industry.

Slide 30

Slide 30

Provide text alternatives.

One of the simplest ways to meet a range of accessibility needs is to provide a text alternative to image, video, and audio content.

Slide 31

Slide 31

Inclusive social media

A good place to hone your craft of alternative text, while also making your tweets more accessible, is on Twitter.

Slide 32

Slide 32

In your Twitter account’s Accessibility settings, you can turn on the ‘Compose image descriptions’ option. Once enabled, every time you upload an image, you will be given the option to compose a description which will be used as alternative text for people who can’t see the image.

Slide 33

Slide 33

Twitter also enables you to see the image while describing it.

Slide 34

Slide 34

Mastodon, the friendly Twitter alternative, includes the option to compose an image description by default. You don’t need to switch anything on.

Slide 35

Slide 35

Write meaningful alternative text.

Writing meaningful alternative text is important. Just because not everybody will read it, it doesn’t mean you shouldn’t pay attention to this microcopy. As a bonus, alternative text is also beneficial for search engine indexing, as search engines are far better at understanding text than they are images.

Slide 36

Slide 36

Here’s an example of alternative text:

If all you could see is “photo of my dog”, there may not be much point to the image—you don’t know what makes that photo of my dog notable.

Slide 37

Slide 37

But if you saw the text “my dog pressed up against the dog barrier in the car, his tongue hanging out the side of his mouth.” then you’d understand why that image might be worth sharing.

Slide 38

Slide 38

Because he looks daft…

Slide 39

Slide 39

Create transcripts for video and audio content.

Transcripts are long-form text representations of video and audio content.

Slide 40

Slide 40

Here’s an example of a transcript from the great Shoptalk Show podcast. Their transcript provides additional value over audio too, as it includes the names of speakers (handy if your speakers sound similar too!) Transcripts can also include links, so you can reference context for the discussions, or even help with marketing. And again, like alternative text for images, transcripts are much easier for search engines to index compared with audio.

Slide 41

Slide 41

Use captions for video content.

Use captions or subtitles for video content

Slide 42

Slide 42

Captions not only help people who cannot hear the audio… even on a muted video, captions can intrigue a viewer and give them an idea of what the video is about without needing to enable the sound. (Whether it’s Queer Eye previews or News interviews!)

Slide 43

Slide 43

Good accessibility is good usability.

So I hope I’m convincing you that good accessibility is good usability

Slide 44

Slide 44

Accessible technology can’t be beautiful?

When we look at accessible design today, we are often faced with the myth of “accessible technology cannot be beautiful.” People cite examples of accessible websites that look dated or are ugly.

Slide 45

Slide 45

Aesthetics are part of usability.

The thing is, aesthetics are part of usability.

Slide 46

Slide 46

Aesthetics as design, not decoration

And by this, I mean aesthetics as design. Not aesthetics as decoration, stuck on to distract people.

Slide 47

Slide 47

We are not making art.

We must remember we are not making art with our interfaces, we don’t need to make things quirky for the sake of being different.

Slide 48

Slide 48

Beauty is a thoughtfully-designed interface.

What is your definition of beauty? Are our interfaces supposed to be works of art? Or does the beauty come from simplicity and thoughtful aesthetic decisions that help our interfaces do the job they’re designed to do?

Slide 49

Slide 49

Aesthetic principles

So let’s look at some aesthetic principles from the perspective of creating accessible and functional interfaces that also look good.

Slide 50

Slide 50

Careful aesthetic decisions benefit people with cognitive differences.

People with cognitive differences will particularly benefit from careful aesthetic decisions focused around making your interfaces easy to understand and use. Functional aesthetics are also valuable to people who are newer to technology and its conventions, who haven’t much experience with our existing shared visual languages.

Slide 51

Slide 51

We need interfaces where you can understand:

  • what is the purpose?
  • what can I do with it?
  • how do I use it?
  • what happens when I use it?

Slide 52

Slide 52

Affordances

We need to use affordances to convey this information. (Affordances are those visual cues that help you understand how something is supposed to be used.)

Slide 53

Slide 53

Here are some examples of things we know we can press on pages. Some items have underlines, some have borders, some have rounded edges, some are in bold text. How do we know which of these are items we can interact with, and what do we expect to happen when we press them?

Slide 54

Slide 54

Interfaces shouldn’t be surprising.

Surprising interfaces are particularly difficult to use for people with cognitive difficulties, or who even people who just think differently from you. Interfaces should be predictable, and explain what’s going to happen next.

Slide 55

Slide 55

Convention

Conventions in design are there for a reason, they’re easy to understand and thus easy to use. It is unlikely you are going to invent the next convention in your interface, so stick with those that already exist.

Slide 56

Slide 56

For example, navigation along the top of a web page is a convention. You don’t need to reinvent navigation!

Slide 57

Slide 57

Don’t be different for the sake of being different.

Design to suit your audience’s needs. Leave your ego and show-off-edness behind.

Slide 58

Slide 58

But don’t just do it because everybody else does it.

But also don’t do it just because everybody else does it. That example I showed earlier with the asterisk? Loads of people use that to signify a required field. But why? Just because everybody does it, doesn’t mean it’s a good idea.

Slide 59

Slide 59

Relationships

Relationships are key to explaining context in aesthetics design.

Slide 60

Slide 60

Going back to my earlier example of interactive elements… How we know we can press one item is often because of the difference in its appearance from another item. The similarity and contrast in the relationship provides information. We need to consider every element in a design as it stands alone, but also as it appears alongside the others.

Slide 61

Slide 61

Small isn’t tidy. It’s just small.

Font sizes are everything. Designers are often tempted to use tiny text because it looks neat and tidy in their layout.

Slide 62

Slide 62

But layouts aren’t there to be neat and tidy, they’re there to be used. If your text is too small to read, there’s no point in it being there.

Slide 63

Slide 63

Colour

Colour is valuable but should only be used in a supporting role.

Slide 64

Slide 64

Don’t use colour as a sole means to convey information.

People with different vision, particularly colour blind people, could miss your design cues.

Slide 65

Slide 65

This slide shows how the previous slide looks in greyscale, the colour highlighting doesn’t work nearly as well. You can’t see what that the text is red, and so may convey an error.

Slide 66

Slide 66

You can recognise this text style without colour. Why? Because there’s a dashed line, which is most commonly used to convey a spelling error. This is different from a solid line, which usually conveys a link. Both work regardless of the colour of the text.

Slide 67

Slide 67

Use contrast.

Use high contrast colour differences between background and foreground text. This ensures it is readable by people with differing visual needs. Whether you are colour blind, have a lack of clarity in your vision, are long sighted or short sighted, high contrast text will make it easier to read.

Slide 68

Slide 68

Contrast also has an impact depending on the screen you have, and the environment you’re using it in. For example on a bright computer screen, this may be more readable than on a mobile device in the brilliant sunshine.

Slide 69

Slide 69

Test your designs in greyscale.

Test your designs in greyscale to find the weaknesses in your reliance on colour. This is a top tip I picked up from Geri Coady, author of Color Accessibility Workflows.

Slide 70

Slide 70

Here’s an example of a beautiful website that works equally well in greyscale as it does in colour. It’s the Simply Accessible website, designed by Geri and the team at Simply Accessible.

Slide 71

Slide 71

Don’t rely on icons to convey meaning.

Much like with colour, don’t rely on icons to convey meaning. You know what an icon might mean, but you can’t expect others to share your understanding.

Slide 72

Slide 72

Three horizontal lines arranged vertically might mean something to you…

Slide 73

Slide 73

But to be sure, give it a label. It’s a Menu icon. The icon can be quickly identified, but the label supplements its meaning. Make that meaning clear.

Slide 74

Slide 74

You still have room for creativity.

These are simple principles that give you space for a lot of creativity

Slide 75

Slide 75

You can still build beautiful interfaces that are accessible. This is Tatiana Mac’s website, which is fresh, colourful and creative. And takes care in being accessible.

Slide 76

Slide 76

Distinguish ourselves on caring.

We are entering an era where we can distinguish our products, our services, and ourselves based on the fact that we care about each other.

Slide 77

Slide 77

Intimidating

It can be a little intimidating learning how our work can let people down, when many of us joined the industry because of its potential.

Slide 78

Slide 78

We wanted new shiny technologies to play with, the democratisation of information and technology, we wanted to reach a huge number of people across the internet.

Slide 79

Slide 79

We didn’t necessarily sign up to be the people who build everyday things. But we are those people.

Slide 80

Slide 80

We need ethics.

And so ethics are necessary.

Slide 81

Slide 81

Ethical Design Manifesto

ind.ie/ethical-design

So at Ind.ie, we’ve been thinking a lot about how to build ethical technologies. We decided we need an ethical design manifesto for the things we use every day…

Slide 82

Slide 82

If we start off thinking of the products we build as an apple…

Slide 83

Slide 83

At its core, we need to respects human rights, by making products that are:

  • Decentralised
  • Inclusive
  • Sustainable
  • Private
  • Secure
  • Free and open
  • Interoperable

Slide 84

Slide 84

Once we’re respecting human rights, then we can move on to the flesh of our product, the substance that makes people want to use it.

Slide 85

Slide 85

Building products that are…

  • Functional
  • Convenient
  • Reliable
  • Accessible

…respects human effort.

Slide 86

Slide 86

And then we can focus on the shiny exterior…

Slide 87

Slide 87

Building products that are…

  • Empowering
  • Beautiful
  • Inspiring
  • Delightful

These are the fun parts that respect human experience.

Slide 88

Slide 88

Ethical Design

  • Respect human rights
  • Respect human effort
  • Respect human experience

Once we have achieved all of these goals, only then can we have truly ethical design.

Slide 89

Slide 89

When we don’t respect human rights, and build an unethical core, we are building superficial products. A rotten core is a sign of a misleading product. You might make it fun and attractive, but that’s decoration not design. It’s hiding the products’ unethical purpose.

Slide 90

Slide 90

Build for our future

The point of the products we build is important. We need to build these ethical products for our future—for us as individuals, and to benefit society as a whole.

Slide 91

Slide 91

It’s not always *illegal* to be unethical.

It’s not necessarily illegal to build unethical technology. It’s not illegal, or considered discriminatory to build inaccessible products in many parts of the world. That doesn’t mean we should build unethical products.

Slide 92

Slide 92

It’s early days but we’ve already gone too far…

We are still in the early days of building internet technologies. There’s a little regulation, but not many laws and precedents dictating how you should not build technology. Even less dictating how we should build technology.

Slide 93

Slide 93

Build it for your own sake.

We need to build technology well for our own sake. Build it for your future self who may have different needs, build it for your friends, your family, your children.

Slide 94

Slide 94

So let’s get going, and let’s make a better technology.

Slide 95