An updated and expanded version of this presentation that looks at how design decisions can affect the accessibility of a website.
Subjects covered:
- Use of colour, and colour contrast
- Catering for keyboard users
- Text and Content
- Placeholders and forms
2. What I’m going to cover
Accessibility of websites and apps is primarily
down to markup – HTML or native app
languages.
But…
Design decisions can also influence
accessibility too.
@coolfields
3. What I’m going to cover
• Colour
• Catering for keyboard users
• Text and content
• Forms
@coolfields
13. 13
Colour blindness
affects approx 8% of
the male population,
but only 1 in 200 females.
So that's about
2.7 million people
in the UK alone.
14. Using colour to convey meaning
14
Project Name Status Fully
Resourced?
Easy peasy project a
Quite a tricky project a
So glad I'm not on that project r
Going OK a
@coolfields
Red-green colour blindness is the most common type of colour blindness.
20. Links, Buttons – define focus states
as well as hover states
For sighted keyboard users…
Keyboard focus should be at least as obvious as hover state.
20
Keyboard
Focus
Hover
21. Sometimes the default browser
focus indication just isn't enough
21
No Focus Got Focus
(In Firefox)
My day job is mainly training developers in accessibility, and helping them solve accessibility issues.
But some aspects of the design can affect accessibility – both positively and not so positively
I'm going to have a look at a few of those.
Who are we building websites for?
If a website is selling products or services, it's easy to miss out on sales if the site is inaccessible to some.
If we're building websites for clients, the we are hampering their business.
It's important to remember who we're designing and building websites for – not everyone is the same.
What we want to avoid is the situation where people abandon a site because they can't use it easily.
Many people have poor vision, and the population is getting older as people live longer.
A site I was involved in creating some years ago. Requirement was for an accessible website for a children's nursery. The initial design was very attractive, but very little of the reached the necessary colour contrast guidelines.
In some places it's obvious where colour contrast is low.
Even the main content text lack sufficient contrast.
The borders on form elements are vital for some people
A 'real-life' business example from a previous employer
A more leisure orientated example
Using colour is fine – just make sure it's not the only way
Another way that colour alone is used to convey meaning
Some thoughts on catering for keyboard only users
Sadly this seems to be becoming more popular – removing all keyboard focus indication.
Similar in a way to designing for mobile.
Similar in a way to designing for mobile.
Cause difficulty for many people – in many different ways.