![Hyperlinks!
• You are not Google:
• Users know Google’s layout,
• Users probably don’t visit your site daily.
• Relying on color alone will not suffice (WCAG 1.4.1
[A], 1.4.3 [AA]),
• Necessary contrast values:
• 4.5:1 between text and its background for copy,
• 3:1 between text and its background for larger text,
• 3:1 between surrounding text and a hyperlink, plus an
additional visual cue (G183).
http://adrianroselli.com/2014/03/i-dont-care-what-google-did-just-keep.html](https://image.slidesharecdn.com/selfish-accessibilityyglf-190516155226/85/Selfish-Accessibility-YGLF-Vilnius-50-320.jpg)
![Be Keyboard Friendly
• Do you have scrolling content boxes?
• Keyboard users cannot access it.
• Do you have content that displays on hover?
• Keyboard users probably cannot access it.
• A technique:
• <div role="region" aria-label="[if appropriate]"
tabindex="0">
http://adrianroselli.com/2016/02/keyboard-and-overflow.html](https://image.slidesharecdn.com/selfish-accessibilityyglf-190516155226/85/Selfish-Accessibility-YGLF-Vilnius-64-320.jpg)
Uploaded byAdrian Roselli
Selfish Accessibility — YGLF Vilnius
The document outlines the importance of web accessibility (a11y) and provides statistics on various disabilities affecting people, emphasizing that accessibility is not merely a checklist but a continuous process. It discusses user experience models, technical best practices for accessibility, and the need for inclusive design considering people's diverse needs across all stages of life. Resources and examples are provided to support the development of accessible web content and to encourage a broader understanding of the implications of accessibility in web development.
More Related Content
Similar to Selfish Accessibility — YGLF Vilnius
Selfish Accessibility — YGLF Vilnius
- 2.
- 3. • I’ve writtensome stuff, • Member of W3C, • Building for the web since 1993, • Learn more at AdrianRoselli.com, • Avoid on Twitter @aardrian. About Adrian Roselli
- 4.
- 5. What is a11y? •A numeronym for “accessibility”: • The first and last letter (accessibility), • The number of characters omitted (a11y). • Prominent on Twitter (character restrictions): • #a11y • Examples: • l10n → localization • i18n → internationalization
- 6. Disability is notjust a health problem. It is a complex phenomenon, reflecting the interaction between features of a person’s body and features of the society in which he or she lives. — World Health Organization
- 7. Accessibility Gets NoRespect
- 8.
- 9. Any Disability • Inthe United States: • 10.4% aged 21-64 years old, • 25% aged 65-74 years old, • 50% aged 75+. • Includes: • Visual • Hearing • Mobility • Cognitive
- 10. Vision Impairments • 285million worldwide: • 39 million are blind, • 246 million have low vision, • 82% of people living with blindness are aged 50 and above. • 1.8% of Americans aged 21-64. • 4.0% of Americans aged 65-74. • 9.8% of Americans aged 75+.
- 11. Hearing Impairments • 360million people worldwide have disabling hearing loss. • 17% (36 million) of American adults report some degree of hearing loss: • 18% aged 45-64 years old, • 30% aged 65-74 years old, • 47% aged 75+ years old.
- 12. Mobility Impairments • Inthe United States: • 5.5% aged 21-64 years old. • 15.6% aged 65-74 years old. • 32.9% aged 75+.
- 13. Cognitive Impairments • Dyslexia, •Dyscalculia, • Memory issues, • Distractions (ADD, ADHD), • In the United States: • 4.3% aged 21-64 years old. • 5.4% aged 65-74 years old. • 14.4% aged 75+.
- 14.
- 15. WebAIM’s Hierarchy forMotivating Accessibility Change
- 16. My Hierarchy forMotivating Accessibility Change
- 17. Getting Older • Affects(nearly) everyone, • Carries risks and side effects, • Is not for the young. I’m still experimenting with it.
- 18. Rising Damp onFlickr.
- 19. Darren Baldwin onFlickr.
- 20. Accidents • Broken limbs, •Eye injuries, • Hearing injuries, • Head trauma. All of these have happened to me, multiple times.
- 21. Rev Stan onFlickr.
- 22. Let Ideas Competeon Flickr.
- 24. Paul Townsend onFlickr.
- 25. But I’m Invincible! •Multi-tasking, • Sunlight, • Eating at your desk, • No headphones handy, • Content is not in your native language. The sun is trying to kill me.
- 26.
- 27.
- 28.
- 29. Steve Rhodes onFlickr.
- 30.
- 31. Lars Kristian Flemon Flickr.
- 32. Tech Support • Thinkof your family! • Think of your time spent helping them! • Think of the wasted holidays! This is why we hate the holidays.
- 33. Robert Simmons onFlickr.
- 34. Who Else? • Everyoneelse Look around.
- 35.
- 36. H. Michael Karshison Flickr.
- 37.
- 38. Personas Book Excerpt: AWeb for Everyone, by Sarah Horton, Whitney Quesenbery
- 39. Selfish Persona • Reflectthe client / stakeholder: • Travels on a train, • Keeps office very bright, • Inept with smart phone, • Asks you to speak up, • Keeps losing mouse, • Etc.
- 40. User Stories • Components: •User, • Outcome, • Value. • Writing: • As user, I want outcome. • As user, I want outcome so that value. • In order to get value as user, I want outcome. How to Write User Stories for Web Accessibility
- 41. Selfish User Stories •As a user on a sun-lit patio, I want to be able to read the content and see the controls. Add beer and as a user I may have trouble focusing.
- 42. Selfish User Stories •As a user in bed with a sleeping spouse, I want to watch a training video in silence so that I can get caught up at work. As a user who doesn’t want to get punched for having slacked off at work.
- 43. Selfish User Stories •In order to click links as a user with no elbow room in coach class with a tiny trackpad, I want click areas to be large enough and adequately spaced. As a user in coach class who also paid too much for the drink he’s spilling on his keyboard.
- 44. Selfish User Stories •As a user distracted by the TV, I want clear headings and labels so that I don’t lose my place. As a user who really should be finishing his work in the office.
- 45.
- 46. Text Alternatives forImages • Can you still make sense of the page? • Is content missing? • Can you still use the site? • Is your alt text useful? • Do you account for CSS background images? • What about SVGs? • Or CSS-generated symbols / icons? http://www.4syllables.com.au/2010/12/text-alternatives-decision-tree/ http://dev.w3.org/html5/alt-techniques/#tree
- 47. Text Alternatives forImages
- 48. Text Alternatives forImages
- 49. Hyperlinks! • Is thereany “click here,” “more,” “link to…”? • Are you using all-caps, URLs, emoticons? • Do you warn before opening new windows? • Do links to downloads provide helpful info? • Are you using pagination links? • Are your links underlined (or otherwise obvious)? • Is there alt text for image links? • Is the link text consistent? http://adrianroselli.com/2014/03/i-dont-care-what-google-did-just-keep.html
- 50. Hyperlinks! • You arenot Google: • Users know Google’s layout, • Users probably don’t visit your site daily. • Relying on color alone will not suffice (WCAG 1.4.1 [A], 1.4.3 [AA]), • Necessary contrast values: • 4.5:1 between text and its background for copy, • 3:1 between text and its background for larger text, • 3:1 between surrounding text and a hyperlink, plus an additional visual cue (G183). http://adrianroselli.com/2014/03/i-dont-care-what-google-did-just-keep.html
- 51.
- 52. Color Contrast • Isthere enough contrast? • Are hyperlinks, menus, etc. still visible? • WCAG 2.0: • 4.5:1 for normal text • 3:1 for large text (14+pt & bold, or 18+pt) • WCAG 2.1: • 3:1 for UI components, graphical objects
- 53. Color Contrast • WCAG2.1 has broadened it, • Typography, • Icons and glyphs, • Form elements, error messages, placeholders, • Hover, focus, selected states.
- 54. Label Your Fields •Provide instructions for the entire form, • Provide a programmatic indication of required fields, • Provide formatting advice, • Use ARIA to associate formatting advice, • Avoid placeholder text, • Associate error messages with fields.
- 55. Label Your Fields •Match the for attribute to the corresponding field’s id attribute. • Label text provides a larger hit area for mouse / touch, • Label text should appear above or the left of text inputs or menus (for LTR languages), • Label text should appear after checkboxes / radio buttons (for LTR languages). • Label grouped fields (<fieldset> / <legend>)
- 56.
- 57. Structure Your Document •Sectioning elements already have accessibility built in. Use them. • <header> • <nav> • <main> (one per page) • <aside> • <footer> • <form> (a search form) This stuff is baked in!
- 58.
- 59. Structure Your Document <headerrole="banner"> <nav role="navigation"> <aside role="complementary"> <form role="search"> <footer role="contentinfo"> <main role="main">
- 60. Structure Your Document “Mobile” oftenmeans narrow screen in RWD, as well as this context.
- 61. <header role="banner"> <nav role="navigation"> <asiderole="complementary"> <form role="search"> <footer role="contentinfo"> <main role="main"> “Mobile” often means narrow screen in RWD, as well as this context. Structure Your Document
- 62. Structure Your Document •Use only one <h1> per page, • Don’t skip heading levels, • Use appropriate nesting, • There is no Document Outline Algorithm: • Don’t use <h1> within every new <section> nor <article>, • This will not affect your SEO. http://adrianroselli.com/2013/12/the-truth-about-truth-about-multiple-h1.html
- 63.
- 64. Be Keyboard Friendly •Do you have scrolling content boxes? • Keyboard users cannot access it. • Do you have content that displays on hover? • Keyboard users probably cannot access it. • A technique: • <div role="region" aria-label="[if appropriate]" tabindex="0"> http://adrianroselli.com/2016/02/keyboard-and-overflow.html
- 65.
- 66. Be Keyboard Friendly •Do not use a <div> nor <span> as a control. • Does the control take me to another URL? • Use an <a href>. • Note: does not fire on space-bar. • Does the control change something on the current page? • Use a <button type="button">. • Does the control submit form fields? • Use <input type="submit"> or <button type="submit">. http://adrianroselli.com/2016/01/links-buttons-submits-and-divs-oh-hell.html
- 67.
- 68. Be Keyboard Friendly •Define :focus styles, • Particularly if you removed link underlines, • Everywhere you have :hover, add :focus, • Look for :focus{outline:none;} in libraries: • If you find it, remove it. • Do not rely on browser defaults, • Easy to test with the tab key. http://adrianroselli.com/2014/06/keep-focus-outline.html
- 69.
- 70.
- 71.
- 72. The Message • Supportingaccessibility now helps to serve future you. Do or do not.
- 73. The Message • Supportingaccessibility now helps to serve future you. • Supporting accessibility now helps injured you, encumbered you. There is no try.
- 74. The Message • Supportingaccessibility now helps to serve future you. • Supporting accessibility now helps injured you, encumbered you. • Getting younger developers to buy in helps future you – if you teach them well. Always pass on what you have learned.
- 75. Stairamp Dean Bouchard onFlickrhttp://accessibility.net.nz/blog/the-problems-with-ramps-blended-into-stairs/
- 76. ≠ Checklist • Accessibilityis not a checklist.
- 77. Maintenance Nicolas Steenhouthttps://twitter.com/vavroom/status/571092086365261824 “Wheelchair rampat pharmacy not only hasn’t been cleared of snow but has 2 potted trees to ensure nobody can pass.”
- 78. = Process • Accessibilityis not a checklist. • Accessibility is an ongoing process.
- 79.
- 80. Resources • Web Accessibilityand Older People: Meeting the Needs of Ageing Web Users http://www.w3.org/WAI/older-users/Overview.php • Easy Checks - A First Review of Web Accessibility http://www.w3.org/WAI/eval/preliminary • How People with Disabilities Use the Web: Overview http://www.w3.org/WAI/intro/people-use- web/Overview.html
- 81. Resources • 2.11 ARIARole, State, and Property Quick Reference http://www.w3.org/TR/aria-in-html/#aria-role-state-and- property-quick-reference • 2.12 Definitions of States and Properties (all aria-* attributes) http://www.w3.org/TR/aria-in-html/#definitions-of- states-and-properties-all-aria--attributes
- 82. Resources • Designing ForThe Elderly: Ways Older People Use Digital Technology Differently http://www.smashingmagazine.com/2015/02/05/designing- digital-technology-for-the-elderly/ • How to Write User Stories for Web Accessibility http://www.interactiveaccessibility.com/blog/how-write- user-stories-accessibility-requirements • Book Excerpt: A Web for Everyone http://uxmag.com/articles/book-excerpt-a-web-for- everyone
- 83.
Editor's Notes
- #7 1980 definition: “In the context of health experience, a disability is any restriction or lack of ability (resulting from an impairment) to perform an activity in the manner or within the range considered normal for a human being.”
- #18 As evidenced by how few young people are old
- #21 As evidenced by how few young people are old
- #24 If you need a wheelchair from a broken leg, you may not know which one to get.
- #25 Cooper's Hill Cheese-Rolling and Wake
- #33 You probably have some comfort level with technology
- #36 Our inclusive design principles Recognize exclusion Exclusion happens when we solve problems using our own biases. As Microsoft designers, we seek out those exclusions, and use them as opportunities to create new ideas and inclusive designs. Learn from diversity Human beings are the real experts in adapting to diversity. Inclusive design puts people in the center from the very start of the process, and those fresh, diverse perspectives are the key to true insight. Solve for one, extend to many Everyone has abilities, and limits to those abilities. Designing for people with permanent disabilities actually results in designs that benefit people universally. Constraints are a beautiful thing.
- #37 Aeron Chair: The symbol of the 1990s dot-com riches was designed for the elderly. Mesh instead of foam because bed sores Dissipated heat Two-part reclining to support different positions
- #40 Create a persona that resonates with the stakeholder; where they see themselves. (Museum of Illusion)
- #43 HALFWAY THROUGH
- #46 Fly through this section.
- #49 The missing images either do not matter to understand the page or have alt text.
- #52 At a glance, users should know what can be clicked. What here? Image? Title? Abstract? Ellipsis? All of them?
- #54 A good style guide can tell you what not to pair.
- #63 Using the right heading structure helps screen reader users in particular
- #64 Your heading structure should look like a nested table of contents.
- #65 LAST TECHNICAL BIT, wrap-up is after this Power users, blind, mobility impaired
- #66 Content areas that are hidden need to allow keyboard-only users to get to the text.
- #68 One is a link, one is a button, one an input type submit. They can each look how you want but have different keyboard interactions. Space bar, Enter key, mousedown, mouseup, keypress.
- #69 Focus styles!
- #70 Screen shot of a link with the blue Chrome focus ring on the blue background of the Chrome help page.
- #71 LAST TECH SLIDE An award-winning site, now thankfully gone because it was impossible to use with a keyboard.