Recomendados
Recomendados
Mais conteúdo relacionado
Destaque
Semelhante a Introduction to Accessibility Best Practices
Semelhante a Introduction to Accessibility Best Practices (20)
Último
Último (20)
Introduction to Accessibility Best Practices
- 1. Introduction to Accessibility Best Practices James Townsend Shaw Trust Accessibility Services Financial Open Day 2012
- 2. Who is this guy? James Townsend Web Developer, Shaw Trust Accessibility Services Background • Front-end Development • Web Design • UI/UX • Accessibility
- 3. What I will talk about • Ideas & techniques that you can use to improve accessibility of your digital projects • Not every technique can apply to every project • Implementing these techniques can help improve accessibility • Start small; a little can go a long way 3
- 4. What I will talk about 1. Digital Accessibility 2. Principles 3. Content 4. Design 5. Development 6. Putting it all together 4
- 6. Digital Devices Desktop Games Console Smart Phone Portable Tablet Games Console Television 6
- 8. The Web
- 9. Web Core Technologies HTML CSS JavaScript Browser Operating System 9
- 10. Accessibility Implementation Device Form Factor Hardware Input Methods Assistive Technology Operating System APIs Software Assistive Technology Browser 10
- 11. The website: final piece of the puzzle
- 12. 2. Principles
- 13. Inclusive Design
- 14. What is Inclusive Design?
- 15. “Inclusive design is where innovation and imagination flourish. Meeting the needs of the widest variety of people does not inhibit creativity. It opens our minds and inspires excellence.” Sandi Wassmer
- 16. Inclusive Design Principles 1. Equitable 6. Preventative 2. Flexible 7. Tolerant 3. Straightforward 8. Effortless 4. Perceptible 9. Accommodating 5. Informative 10.Consistent 16
- 17. How does this improve accessibility?
- 18. User-focused
- 21. What is Progressive Enhancement?
- 22. “Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing an enhanced version of the page to those with more advanced browser software or greater bandwidth.” Wikipedia
- 23. Progressive Enhancement vs Graceful Degradation
- 24. Graceful Degradation Progressive Enhancement Build for modern browsers but Provide a basic level of user provide a lower level of user experience for all browsers experience to older browsers but build in advanced functionality that newer browsers can utilise 24
- 25. Progressive Enhancement & Layers of Accessibility
- 26. Layers of Accessibility HTML 26
- 27. Layers of Accessibility CSS HTML 27
- 28. Layers of Accessibility JavaScript CSS HTML 28
- 29. Layers of Accessibility CSS for JavaScript JavaScript CSS HTML 29
- 30. Layers of Accessibility WAI-ARIA CSS for JavaScript JavaScript CSS HTML 30
- 31. POUR
- 32. W3C WCAG 2.0 • Perceivable • Operable • Understandable • Robust 32
- 33. POUR Difficulty Problem Solution Hearing Cannot hear media Make it Perceivable Difficulty with mouse, Mobility Make it Operable keyboard Difficulty with text Cognitive Make it Understandable content Cannot see the content Visual Make it Robust or colour 33
- 34. Knowing principles helps you learn techniques
- 35. Putting principles into action
- 36. 3. Content
- 37. Content is King
- 38. What we talk about when we talk about content
- 39. Text Credit: microsoft.com 39
- 40. Text - Comments Credit: reuters.com 40
- 41. Text – Error Messages Credit: linkedin.com 41
- 42. Images Credit: apple.com 42
- 44. Audio Credit: bbc.co.uk 44
- 45. Video Credit: starbucks.com 45
- 46. Content & Accessibility Type of Content Restriction Text Cognitive Hearing (Sign first language) Images Visual Data Visualisation Visual Cognitive Audio & Video Hearing Impaired 46
- 47. How can we make content more accessible?
- 48. Content Best Practices • Make it easy to understand • Use a logical structure • Break up long content into sections • Place important information at the top • Provide alternative text for non-text elements 48
- 49. 4. Design
- 50. What is Design?
- 51. “Design is the process of conceptualising and creating something tangible, in order to serve a specific purpose.”
- 52. Design Best Practices • Keep it simple • Make it responsive • Place important information at the top • Use highly contrasting colours • Don’t rely on colour alone • Use large font sizes 52
- 53. 4. Development
- 54. Web Technologies • HTML • CSS • JavaScript • WAI-ARIA 54
- 55. Development Best Practices • Use standards • Semantics • Validate • Progressive enhancement • Don’t rely on mouse events • Provide alternatives 55
- 56. 5. Putting it all together
- 57. Accessibility at every stage of the digital project
- 58. The one web approach
- 59. Questions?
- 60. Thank you!
Notas do Editor
- We use more and more digital devicesNo more just desktop PCs – now mobile phones, tables, consoles, tvs
- More digital devices are connected to the Internet
- Devices are now all accessing the web
- Core technologies of the webDevices using these across the board
- Accessibility is implemented at the hardware and software level
- Even with accessibility implemented in hardware and software, the website has to be accessible
- 1. EquitableBe welcoming, don't discriminate and engage with people. Create different user experiences and make certain they have equally valuable outcomes. Aesthetics matter.2. FlexibleProvide options. Think who, how, why, what, where and when people will be using your website. Make sure there is choice for diverse users and maintain device independence.3. StraightforwardBe obvious and not ambiguous. Make sure your website's features add value, not complexity. Remember, good design is as little design as possible.4. PerceptibleDon't assume anything. Make sure your website's purpose is clear, its content, structure and sequence are meaningful and convey information to all of the senses.5. InformativeMake sure people know where they are on your website and provide ways for them to find what they're looking for. Be timely, predictable, uncomplicated and precise.6. PreventativeProvide easy to follow instructions and gently guide users in interacting with your website. Help them to minimise errors when submitting data, through well considered form design.7. TolerantHandle errors respectfully and indicate precisely what the error is, where it is and how to fix it. Remember to let people know the outcome.8. EffortlessDon't make demands or place restrictions on your users. People should not have to work or think hard to find what they want on your website. Ensure it can be used efficiently and effectively.9. AccommodatingBe approachable, uncluttered and give people room to manoeuvre. Make sure that your website is unobtrusive and can be accessed by different devices of all shapes and sizes.10. ConsistentFollow standards, guidelines, conventions and best practices. Provide a familiar environment with memorable functionality.
- HTML layer most importantSource order = tab orderUse the best matching HTML elementIs the page understandable without CSSInteraction using links, forms and reloads
- CSS can be inaccessibledisplay:none, visibility:hidden (hide from everyone):hover only works for mouse:focus to rescueAlways use :hover and :focus combinedCSS is for design not interaction
- Javascript is icing on the cakeDoes anything you need the user to do work without javascript?Hijack existing elementsCreate buttons for JS only interactionsScreen readers know JavaScript, they often just don’t know what happensFocus() to the rescueMind the tab orderTabindex=0 makes even divs keyboard accessibleTabindex=-1 js only tab accessAjax = delays = tricky to communicateInform about what happens
- Different CSS if JavaScript is availableChange the interface for the JS versionCSS much faster than JavaScript
- WAI-ARIA maps existing and well known OS concepts to custom elements in the browserAdd semantics to non-semantic markupProvides instant updates and notificationsRolesLandmarksStates and PropertiesLive regions (informing about changes)Don’t rely on it
- Percievable – text alternatives, subtitles, transcriptsOperable – keyboard only, allow navigation with headings, anchors, voice recognitionUnderstandable – high colour contrast, san serif fonts, avoid flashy graphics, multiple visual cuesVisual – Valid HTML, standards