Accessibility Primer: A Guide to Designing Inclusive Digital Experiences
•Descargar como PPTX, PDF•
1 recomendación•526 vistas
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.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (13)
Similar a Accessibility Primer: A Guide to Designing Inclusive Digital Experiences
Similar a Accessibility Primer: A Guide to Designing Inclusive Digital Experiences (20)
Más de City University London
Más de City University London (17)
Último
Último (20)
Accessibility Primer: A Guide to Designing Inclusive Digital Experiences
- 1. Accessibility Primer Joe Chidzik, AbilityNet
- 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
- 3. What do we mean by accessibility?
- 4. “Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to, the web.“
- 6. Why accessibility is important
- 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
- 10. Financial $4 trillion $4,000,000,000 Global disposable income of disabled people
- 11. More reasons?
- 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.
- 14. How disabilities can affect computer use
- 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
- 18. Colour blindness
- 19. Tube map
- 20. Tube map: simulated colour blindness
- 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
- 22. Low vision – text zoom
- 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
- 24. Screenshot of JAWS headings
- 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
- 28. Incorporating accessibility into your workflow Designing, Developing and Planning Projects
- 29. Planning How to incorporate accessibility into projects from the outset
- 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
- 32. For developers
- 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
- 36. For designers
- 37. Accessibility needn't mean compromise
- 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
- 40. Consistent theme
- 41. Clearly defined structure: layout
- 42. Practical examples Simple checks you can make
- 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
Notas del editor
- 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/
- NFL Predict pickerhttp://predictpick.nfl.com/?icampaign=hp_hottopic_predictpick_picknow
- 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
- Examples from: http://www.w3.org/WAI/demos/bad/before/news.html
- You can use the NVDA screenreader just by moving the mouse over controls; they will be announced automatically