The aim of this presentation is to introduce the concept of accessibility, and will cover what is meant by being accessible, why it’s important, who is affected, and how you can incorporate accessibility into your design, development and planning. There will be particular focus on the practical aspects of testing for accessibility.
2. Whistle stop tour covering
What we mean by accessibility
Why accessibility is important
How disabled people use
computers
Incorporating accessibility into
your work
Designers
Developers
Planning
Testing for accessibility
7. Ethical – it's the right thing to do
1 in 8 people have a disability in the UK – around 8 million people
Disability prevalence increases with age:
6% children
16% adults of working age
45% of adults over state pension age
8. Legal - case study: Target
May 2005: NFB notified Target of accessibility issues on
their site
Lack of alt text
Missing headings
Customer unable to purchase without using a mouse
9. Legal - case study: Target outcome
$10,000,000
Cost to Target USA from an inaccessible website
12. An accessible website…
Demonstrates corporate social responsibility
Is usable by more people, on more devices
Garners loyalty, particularly from disabled people
Is more easily found via search engines
Is easier to use for all users
13. Good SEO = Good accessibility
Search engines cannot understand the content of an image, but they do
benefit from alt text
Search engines cannot understand audio content, but they do benefit from
transcripts
Search engines need content to be marked up semantically to infer
relationships and relevance
All of this not only benefits both disabled users and makes your site easier to
find, it also makes the site easier to use for everyone.
15. Disability is an analogue spectrum, but
useful to consider categories
Vision – no useful vision, colour blindness, tunnel vision
Hearing – both deaf and hard of hearing
Mobility – affect keyboard/mouse use, also touchscreen
interaction
Cognitive – Dyslexia, learning difficulties, attention
disorders
16. Vision
Colour blindness – difficulty distinguishing
redgreen. 1 in 14 adult males affected
Low vision – problems reading small
text, making out fine detail or low contrast
No useful vision – cannot rely on vision for
access to content
21. Low vision
Typically can use built in browser zoom and OS colour features to make
content more readable
Rely on sites being able to be scaled properly
23. No useful vision
Rely on pages being well structured
Non-text content needs text-alternatives provided
Visual cues, such as a colour, need text counterpart
Keyboard access to all functionality
25. Hearing
BSL users may have English (or their locale) as a
secondary language
Multimedia e.g. videos, typical cause of difficulties –
require captions
Do not use audio as the only means of conveying
information e.g. error beep
Ensure sufficient ‘contrast’ between foreground and
background audio (dialog over background noises)
26. Mobility
Potential difficulty using the mouse and clicking on small targets e.g.
checkboxes
Likely to use keyboard to navigate
Can have difficulties interacting with sensitive fly out menus
May use voice recognition – say what they see
27. Cognitive
Includes dyslexia, memory impairments and attention deficit disorders
Often difficulties with literacyreading, especially with jargon heavy content
"wall of text" content can be difficult to read for any users, particularly those
with a cognitive difficulty
Benefits from simple language, icons as navigational aids, consistent & clear
structure
Simple, clear instructions – form examples
30. Planning - stages
Initial accessibility work can begin in design stage
As designs progressed to functional pages, conduct disableduser testing
Expert AT testing can be done throughout project
Final review once project is delivered
31. Planning
Allocate one key member of staff to be goto person for accessibility of a
project – simplifies communication with 3rd parties inhouse staff
Consider training designersdevelopers in basic accessibility
testingrequirements
If commissioning 3rd party products, invest in BS8878; this standards document
details how to ensure suppliers have accessibility in mind
33. Good coding practise
Using semantic, valid markup
Be aware of, and use, the Web Content Accessibility Guidelines (WCAG)
For rich and dynamic content, look into ARIA (Accessible Rich Internet
Applications)
http://w3.org/wai For all your guideline needs
Build using a progressive enhancement methodology
34. Standards
Governed by the W3C
Content covered by WCAG: Web Content
Accessibility Standards
Standards exist for user agents and
authoring tools too (UAAG and ATAG)
Mobile content covered by MWBP: Mobile
Web Best Practises
w3.org/wai
38. Design
Colour palette – ensuring sufficient contrast for text
Consistency of appearance throughout site. A visual theme helps users with
cognitive difficulties
Clear layout and structure – use white space to delineate sections
39. Contrast: checking
Specific guidance exists for websites; can also be used for applications
Contrast ratio between text and background:
4.5:1 for standard text
3:1 for large text
Tools exist to check contrast:
Contrast analyser application
Web based tools; input colour hex values
43. NVDA
If confident, try out the free and
open source NVDA screenreader
Are controls announced as the
correct type, and labelled
correctly?
What about images?
44. VoiceOver
Free – built into iOS devices
Use Explore By Touch - trace your
finger around the screen to hear
content and components read out
45. Summary – what and why
Accessibility
The practise of making content so that disabled users can
perceive, operate, understand, and above all, contribute
Reasons
Ethical – right thing to do
Legal – monetaryreputation cost
CommercialFinancial – increased target audience, loyalty
46. Summary - incorporating
Planners
Accessibility from the outset
Named individual
Designers
Do not rely on users being able to
perceive colour
Visible structure – white space,
headings
Developers
Be aware of guidelines
Progressive enhancement
Keyboard accessibility!
Screenreader testing (mobile and
desktop)
47. Summary - testing
Keyboard
Visible focus highlighter
Skip links
All content keyboard accessible
(menus, flash players)
Visual
Colour – good contrast and not only
method
Animations
Zooming in, ensure page is still
usable
Automated tools – quick checks
WebAIM WAVE
Cynthia Says
Disabled user testing
Source from employees for initial
testing
Encourage feedback via an
accessibility page
Perhaps you don't know accessibility means, so we'll start with that!Why accessibility is important!
From the W3C WAI resource: http://www.w3.org/WAI/intro/accessibilityThese underlined words emphasise the web content accessibility guidelines, and also the importance of contributing for disabled users. The web is not a one way tool for consumption of Note that accessibility enables this two way interaction – it's not just about letting users read and consume content, but giving users the ability to contribute and participate in the online community. Web accessibility is the concept enshrining this believe.
Here's a more visual description of what accessibility is. This might be given alternative text of "A man, sat at a desk, is speaking to a group of assembled animals including a monkey, a penguin, an elephant, a goldfish in a bowl, a seal and a dog. He says "For a fair selection, everybody has to take the same exam: please climb to the top of that tree". The monkey is smiling, clearly pleased with this task. The rest of the animals are looking apprehensive. "The image on this slide is often accompanied by the quote: ““Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid.” This quote is usually, but incorrectly, assigned to Albert Einstein. Regardless of who actually said it though, it does usefully highlight the importance of accessibility: it creates a level playing field and is an enabler.
Really, creating websites, you should be wanting to make them available to as many people has possible!
What happens when companies do not provide an accessible services? NFB is the National Federation of the BlindThis cautionary tale is taken some years ago from the US. Source: http://www.w3.org/WAI/bcase/target-case-study
Source:
When search engines index your site, they typically have the same issues as disabled users. Source: http://webaim.org/blog/web-accessibility-and-seo/
If you want to create an accessible website, you need to understand how people might access it.
The disability spectrum is analog. Users may well have more than one disability. Users with similar disabilities might have different needs and solutions.Whilst spectrum is analog, breaking disabilities down into these categories makes it easier to focus on the difficulties, and solutions, used by users.
The 3 broad areas of vision impairment. Again, there exist many more stages than this, but these are a good cross section. Other issues include macular degeneration, tunnel vision etc.
Illustrates the common issue of red-green colour blindness
In this linked page, a simulator shows the view a colour blind user may have of the trivial pursuit board. This can cause several difficulties. The various colours are all visually similar in terms of contrast when the simulator is applied. This means that users will not easily be able to associate a colour with a category as a non-colour blind user can.A colour blind user will similarly have difficulty distinguishing pieces on the board as they are again quite similar. Further, a colour blind user will not be easily able to look at their piece and know which categories they have answered as the colours are very similar. This can led to users landing on the same category multiple times. Whilst pictures\icons are used on this board, these are numerous and not intuitive enough to provide any help for colour blind users.
Bakerloo line and central line, going through Oxford Circus, are now indistinguishable
Example from the NFL website shows some text as blurry – this is images of text and they do not scale. From: http://www.nfl.com/
e.g. an error beep signifying an inactive button or similar. If a contact page\link, ensure if phone number mentioned, also list email\chat or other text based method.
Key difficulties experienced by users with physical or motor difficulties include: -Difficulty tapping on small controls\links-Using appropriate input controls; the next slide shows an example, and explains why it is important-Proximity of controls; don’t make them too close together! Good spacing! E.g. for consecutive checkboxes-Radio buttons\checkboxes need to be labelled properlyDo not discount keyboard Other considerations include: Activities that require manual dexterity e.g. drag and drop
W3C is the World Wide Web ConsortiumBest address to remember is w3.org/waiWeb Accessibility Initiative; it has MANY resources on accessibility for you!
An escalator can never break; it can only become stairs.
This tool from the WebAIM website allows colour values to be put in and then checked against the guidelines. Failing combinations can be fixed via suggestions based on those colours.
Three pages from the excellent BBC mobile site; the page title in each case is unique, descriptive, and consistent.
BBC news screenshot showing good layout, against db.no with poor layoutBBC-Sections clearly delineated by white space and rules-Headings mark beginning of each section-Page is not crowded, making good use of page length to spread content outayoutDb.no-Cramped layout-What headlines are associated with which images?
Is tab order sequential and intuitive? Can you skip past main navigation with skip links? Otherwise you will need to manually tab through all the keyboard links?Flyout menus are often keyboard in-accessible. Try tabbing onto them – do they expand? If not, try pressing enter or the down arrow key – does this help? Flash content and media players are often problematic for keyboard users – sometimes you cannot tab into them, other times, frustratingly, you cannot tab out of them!
Example taken from the Independent website; note that a mouse user gets much nicer, and more visible , looking feedback over selected links than a keyboard user.
Fixing the example shown on the previous slide is as simple as this. Note that the independent website is now even less accessible: they’ve removed the outline altogether!
Example Flyout menu from Microsoft.com; tabbing steps through the menu links until enter is used to expand the list at which point tab focus can then enter the menu. In actual fact, this is an ideal place where ARIA could be employed (but hasn’t been); these menu items (shop, products, support) etc, are described as links “Shop: link”; using ARIA, a screenreader user could be made aware that these are non-standard links, and instead open a sub menu. Simply done through use of the aria-haspopup attribute.
Key things to check with Flash content: can you tab around the Flash content, start\stop media, adjust volume, tab out of Flash content (important!)Well watching this clip too: http://www.youtube.com/watch?v=bEM9Fn9aOG8
This is an example of a typical issue I come across
Resizing text is an easy task for many users, but do websites still work well?
In addition to these two manual checks, you can use some of the tools available. So automated services can scan thousands of pages for a few issuesManual checks can catch everything, but take far more time
See W3 page on using the WAT toolbar: http://www.w3.org/WAI/eval/preliminary
Does the page still make sense with CSS disabled? You should be able to see the uunderlying structure – are lists and headings well used? This is usually a good sign.
Have a look at the page heading structure: does this reflect the visual sections of the page? Do the headings follow a sensible order e.g. h1 to h2 to h3, not h1 to h6 to h3
The WebAIM WAVE (Web Accessibility Evaluation Tool) can give you a good idea of the health status of a web page