Studium Generale: Inclusivity: how to design (online) places, spaces and events that are accessible for everyone

YOUR WEBSITES & APPS (A11Y) ACCESSIBLE

YOUR WEBSITES & APPS (A11Y) ACCESSIBLE

MARLIES KLOOSTER

I am a Project lead & advisor on accessibility (digitale toegankelijkheid) • Advisor for Program DigiToegankelijk • Independent trainer on accessibility • Blogs & more @ www.IfYouManagement.nl

INACCESSIBLE PUBLIC SPACES

The story of stations and public transport 3

LIKE LIBRARIES

Newly built public buildings 4

TWO MAYORS IN ONE YEAR

But then: 2 visually impaired mayor in 2 yrs time: Tjarda Struik ( Leiderdorp) and Marcel Oosterveer (Waalre) 5

FRAGMENT ON THE EFFECT OF INACCESSIBLE WEBSITE

Uitzending Kassa 24 mei 2022 Met: Actrice Aysegul Karaca en radiomaker Sander Smale ‘Internettoegankelijkheid voor gehandicapten’ 6

ASK YOURSELF

Have you ever used speech software? If not you, do you know people who do? Did you ever need to help a person with a digital service? Do you know any apps or websites you find hard to use? 7

IMPLICATIONS FOR THE CUSTOMER JOURNEY

What do we want to do? Where are we going? What is there to do? How do we go there? Can I park? How far is the stop? Can my assistance dog enter? Etc… 8

EXAMPLE: RIJKSMUSEUM

EXAMPLE: RIJKSMUSEUM 9

EXAMPLE: EFTELING

EXAMPLE: EFTELING 10

INCLUSION: UNDERSTANDING BARRIERS

• Access to devices • Learning to use the internet • Use plain language • Make websites & apps accessible 11

SOLUTION: USE THE WCAG

WCAG = Web Content Accessibility Guideslines with 4 principles: • Perceivable • Operable • Understandable • Robust

ADVANTAGES INCLUSIVE DESIGN

Avoid reparations: FTR Saving costs Easier to use for everybody Better image Trust & goodwill 13

REPRESENTATION BEYOND THE STANDARD

MAKING INCLUSION VISIBLE: REPRESENTATION BEYOND THE STANDARD 14

THE LAW: IN EU & NL

THE LAW: IN EU & NL 15

DUTCH LAW (GOVERNMENT) 2016 - NOW

DUTCH LAW (GOVERNMENT) 2016 - NOW 22 december 2016 1 juli 2018 23 september 2019 23 september 2020 23 juni 2021 1 april 2023 EU guidelines Dutch law comes into effect All new websites (after 23 sept 2018) must comply Alle websites must comply All mobile applications must comply New law on digital government: supervision will be set up

GOVERNMENT DASHBOARD

GOVERNMENT DASHBOARD 17

TREND: MANAGING CHAOS… CASE: GOV.UK

• Idea by business woman Martha Lane • Minister Francis Maude says yes! • Padman Gillen & team at work. • In 15 months from 300 down to 1 government website (Note: Managing Chaos is a book worth reading by Lisa Welchman!)

EUROPEAN ACCESSIBILITY ACT

• Other organizations, not being government, must also comply • Because of the Wet gelijke behandeling inzake handicap en/of chronische ziekte (Wgbh/cz). This law refers to WCAG… • Soon: EU Accessibility Act: • Webshops • Online banking • Websites and platforms for streaming • E-books • ATM 19

HOW TO MAKE YOUR CONTENT WCAG-PROOF

Headers & language Images Color contrast Subtitling & audiodescription 20

STRUCTURE YOUR CONTENT: HEADERS & LANGUAGE

Create a logical reading and navigation order. • With H1, H2, H3 etc • Indicate the main language of your text/file • Use consistent formatting: Use the same styles, fonts, font sizes, and colors throughout the document. • Make headings, hyperlinks and button texts unique and descriptive. 21

IMAGES NEED AN ALT-TEKST

• Provide an alt text, which means ‘alternative text’, of a maximum of 125 characters. • Check images that do not convey useful information as “decorative” as follows alt=“”. Do this in moderation. • Use as few images with text as possible. In any case, also write out the text. • For SEO, use at least two keywords in the alt text. 22

USE CONTRASTING COLORS

• Contrast is measurable. At least a ratio of 3:1 to the background color. • Don’t use color as the only means of conveying information. Add textual information or shading. • There are various tools available with which you can test the contrast, e.g. Color Contrast Analyzer. • Tip: it starts with a corporate identity with the right colors and contrast options 23

SUBTITLES & AUDIO DESCRIPTION

• Create subtitles with closed captions (the CC on YouTube, for example). • Easy: use socalled SRT files, can be turned on and off, searchable! • If subtitles are ‘ingrained’, they are not searchable • Use audio description for sounds with information value • Transcript useful and good for SEO! Only mandatory for ‘pure audio’ (podcast without images). 24

QUICK CHECK

• Keyboard: are you able to use the (shift) TAB key, space bar, enter and arrow keys?
• Color contrast: (text, but also lines, frames, input fields, icons and buttons)?
• Reading Order: does the TAB test follow a logical visual order?
• Mobile/tablet: is the website readable and operable on small screens?
• Color: use of color to convey information?
• Enlarge text: is the content still readable?
• Hyperlinks: clear when a link is a hyperlink? 25

IN BRIEF

• Focus on the user. It has to work for him/her/them. Not the other way around • Huge consequences if you don’t, because every ‘customer journey’ is at least partly digital these days • So understand what the barriers are and remove them. • Do this with WCAG. • And representation. • And clarity. • And it’s not just me saying that, the law says so too ;)

THANK YOU

Marlies Klooster +31-6-11207421 marlies@ifyoumanagement.nl www.ifyoumanagement.nl