Accessible form patterns – Sunderland Digital

@tempertemper Accessible form patterns

@tempertemper I’m Martin Underhill

@tempertemper 1/3 of Frontend NE

@tempertemper Interaction designer

@tempertemper 1. What is accessibility? 2. Why is it important?
3. Tips and tricks

@tempertemper A11y

@tempertemper A11y Accessibility https://css-tricks.com/the-ironic-inaccessibility-of-a11y/

@tempertemper Disability

@tempertemper Traditional way of viewing disability https://www.sciencedirect.com/topics/medicine-and-dentistry/social-model-of-disability

@tempertemper Medical model https://www.sciencedirect.com/topics/medicine-and-dentistry/social-model-of-disability

@tempertemper Impairment ≠ medical disability https://www.microsoft.com/design/inclusive/

@tempertemper 1. Permanent

@tempertemper 1. Permanent 2. Temporary

@tempertemper 1. Permanent 2. Temporary 3. Situational

@tempertemper https://www.microsoft.com/design/inclusive/

@tempertemper Any user can be disabled!

@tempertemper The social model of disability

@tempertemper A social model of disability moves the location of
the disability out of the person and into social structures https://www.sciencedirect.com/topics/medicine-and-dentistry/social-model-of-disability

@tempertemper Social perceptions, attitudes, institutions, and policies all contribute to
the creation of disability https://www.sciencedirect.com/topics/medicine-and-dentistry/social-model-of-disability

@tempertemper Individuals with an impairment are disabled by society’s failure
to build an inclusive environment

@tempertemper Who’s responsible?

@tempertemper Brand & graphic designers

@tempertemper UX designers

@tempertemper Front-end developers

@tempertemper Back-end developers

@tempertemper Why should we care?

@tempertemper Legal obligation

@tempertemper Legal obligation Money

@tempertemper Legal obligation Money Decent human beings

@tempertemper “It’s expensive”

@tempertemper “It’s expensive” “It looks good”

@tempertemper “It’s expensive” “It looks good” “We didn’t know”

@tempertemper Common mistakes and how to ﬁx them

@tempertemper Placeholders for labels

@tempertemper

@tempertemper <input type="text" placeholder="Phone, email or username" /> <input type="password"
placeholder="Password" />

@tempertemper

@tempertemper <label for="username">Phone, email or username </label> <input id="username" type="text"
/> <label for="password">Password<label /> <input id="password" type="password" />

@tempertemper Labels that look like placeholders

@tempertemper https://www.bbc.co.uk/gel/

@tempertemper Hint text as placeholder https://admin.typeform.com/login/

@tempertemper

@tempertemper Source order

@tempertemper Hint text after input

@tempertemper

@tempertemper Parts of the form after the submit button

@tempertemper

@tempertemper <button type="submit">Log In </button> <label> <input type="checkbox" value="1" name="remember_me"
/> Remember me <a href="forgot-password">Forgotten your password? </a> </label>

@tempertemper

@tempertemper <label> <input type="checkbox" value="1" name="remember_me" /> Remember me <a
href="forgot-password">Forgotten your password? </a> </label> <button type="submit">Log In </button>

@tempertemper .log-in-form button { float: left; }

@tempertemper Match a label’s for attribute to its input id

@tempertemper <label for="username">Phone, email or username </label> <input id="username" type="text"
/>

@tempertemper Use proper type attributes

@tempertemper type="email"

@tempertemper type="url"

@tempertemper type="tel"

@tempertemper type="password"

@tempertemper Try to avoid <select>

@tempertemper Place labels above inputs to aid readability

@tempertemper

@tempertemper https://www.lukew.com/ff/entry.asp?504

@tempertemper Split up large forms

@tempertemper Reduces cognitive load

@tempertemper

@tempertemper Indicate optional ﬁelds rather than required ﬁelds

@tempertemper

@tempertemper Label (optional)

@tempertemper Only ask for information you need

@tempertemper Don’t override default browser behaviour

@tempertemper If auto-tabbing stops just a few people from using
a service successfully, their needs take priority over the many people who might prefer but don’t need the feature https://userresearch.blog.gov.uk/2017/04/18/why-we-care-more-about-effectiveness-than-efﬁciency-or-satisfaction/

@tempertemper General

@tempertemper Avoid animation wherever possible

@tempertemper Makes sure colour contrast is good

@tempertemper Avoid using colour to communicate meaning

@tempertemper Summing up

@tempertemper Think about accessibility from the very start

@tempertemper A lot of your design decisions make themselves

@tempertemper Think of all those happy users

tempertemper.net/youtube

Accessible form patterns – Sunderland Digital

Accessible form patterns – Sunderland Digital

More Decks by tempertemper

Other Decks in Design

Featured

Transcript