Introduction to Accessibility Best Practices


Published on

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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
  • Introduction to Accessibility Best Practices

    1. 1. Introduction toAccessibilityBest PracticesJames TownsendShaw Trust Accessibility Services Financial Open Day 2012
    2. 2. Who is this guy?James TownsendWeb Developer, Shaw Trust Accessibility ServicesBackground• Front-end Development• Web Design• UI/UX• Accessibility
    3. 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. 4. What I will talk about1. Digital Accessibility2. Principles3. Content4. Design5. Development6. Putting it all together 4
    5. 5. 1. Digital Accessibility
    6. 6. Digital Devices Desktop Games Console Smart Phone Portable Tablet Games Console Television 6
    7. 7. Digital = Connected
    8. 8. The Web
    9. 9. Web Core Technologies HTML CSS JavaScript Browser Operating System 9
    10. 10. Accessibility Implementation Device Form FactorHardware Input Methods Assistive Technology Operating System APIsSoftware Assistive Technology Browser 10
    11. 11. The website: final piece of the puzzle
    12. 12. 2. Principles
    13. 13. Inclusive Design
    14. 14. What is Inclusive Design?
    15. 15. “Inclusive design is where innovationand imagination flourish. Meeting theneeds of the widest variety of peopledoes not inhibit creativity. It opens ourminds and inspires excellence.”Sandi Wassmer
    16. 16. Inclusive Design Principles1. Equitable 6. Preventative2. Flexible 7. Tolerant3. Straightforward 8. Effortless4. Perceptible 9. Accommodating5. Informative 10.Consistent 16
    17. 17. How does this improve accessibility?
    18. 18. User-focused
    19. 19. Usability = Accessibility
    20. 20. Progressive Enhancement
    21. 21. What is Progressive Enhancement?
    22. 22. “Progressive enhancement is a strategy for web designthat emphasizes accessibility, semantic HTML markup,and external stylesheet and scripting technologies.Progressive enhancement uses web technologies in alayered fashion that allows everyone to access the basiccontent and functionality of a web page, using anybrowser or Internet connection, while also providing anenhanced version of the page to those with moreadvanced browser software or greater bandwidth.”Wikipedia
    23. 23. Progressive Enhancement vs Graceful Degradation
    24. 24. Graceful Degradation Progressive EnhancementBuild for modern browsers but Provide a basic level of userprovide a lower level of user experience for all browsersexperience to older browsers but build in advanced functionality that newer browsers can utilise 24
    25. 25. Progressive Enhancement & Layers of Accessibility
    26. 26. Layers of Accessibility HTML 26
    27. 27. Layers of Accessibility CSS HTML 27
    28. 28. Layers of Accessibility JavaScript CSS HTML 28
    29. 29. Layers of Accessibility CSS for JavaScript JavaScript CSS HTML 29
    30. 30. Layers of Accessibility WAI-ARIA CSS for JavaScript JavaScript CSS HTML 30
    31. 31. POUR
    32. 32. W3C WCAG 2.0• Perceivable• Operable• Understandable• Robust 32
    33. 33. POURDifficulty Problem SolutionHearing Cannot hear media Make it Perceivable Difficulty with mouse,Mobility Make it Operable keyboard Difficulty with textCognitive Make it Understandable content Cannot see the contentVisual Make it Robust or colour 33
    34. 34. Knowing principles helps you learn techniques
    35. 35. Putting principles into action
    36. 36. 3. Content
    37. 37. Content is King
    38. 38. What we talk aboutwhen we talk about content
    39. 39. TextCredit: 39
    40. 40. Text - CommentsCredit: 40
    41. 41. Text – Error MessagesCredit: 41
    42. 42. ImagesCredit: 42
    43. 43. Data VisualisationCredit: 43
    44. 44. AudioCredit: 44
    45. 45. VideoCredit: 45
    46. 46. Content & AccessibilityType of Content RestrictionText Cognitive Hearing (Sign first language)Images VisualData Visualisation Visual CognitiveAudio & Video Hearing Impaired 46
    47. 47. How can we make content more accessible?
    48. 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. 49. 4. Design
    50. 50. What is Design?
    51. 51. “Design is the process of conceptualisingand creating something tangible, in orderto serve a specific purpose.”
    52. 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. 53. 4. Development
    54. 54. Web Technologies• HTML• CSS• JavaScript• WAI-ARIA 54
    55. 55. Development Best Practices• Use standards• Semantics• Validate• Progressive enhancement• Don’t rely on mouse events• Provide alternatives 55
    56. 56. 5. Putting it all together
    57. 57. Accessibility at every stage of the digital project
    58. 58. The one web approach
    59. 59. Questions?
    60. 60. Thank you!