Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Inclusive Design 101

Inclusive Design 101

As design practitioners, it's increasingly common for guidelines around accessibility to be mandated in our digital work. This shouldn't be viewed as a way of conforming creative work, but instead viewed as an opportunity to make inclusivity a guiding principle in the experiences we craft.

As design practitioners, it's increasingly common for guidelines around accessibility to be mandated in our digital work. This shouldn't be viewed as a way of conforming creative work, but instead viewed as an opportunity to make inclusivity a guiding principle in the experiences we craft.

Plus De Contenu Connexe

Inclusive Design 101

  1. 1. Inclusive Design 101
  2. 2. Designing for human diversity. 2
  3. 3. > Inclusive Design 101 Reframing accessibility 3 It’s becoming more common for our clients to ask for accessibility guidelines to be incorporated into digital work. And there are well-documented criteria and tools available to ensure we’re meeting these standards. However, this practice shouldn’t be about conforming our creative work or checking items off a list. Thinking about design as being inclusive gives us a framework to create experiences that are usable and open to everyone.
  4. 4. > Inclusive Design 1014 Accessibility guidelines ensure that users can access content & functionality regardless of physical or developmental impairments Usability principles ensure that interacting with content & functionality is as intuitive, efficient and enjoyable as possible Inclusivity a methodology that ensures that content & functionality are designed for all people to have the ability to engage
  5. 5. > Inclusive Design 101 Kat Holmes, Author Mismatch: How Inclusion Shapes Design “An important distinction is that accessibility is an attribute, while inclusive design is a method.” SOURCE: https://www.fastcompany.com/90243282/the-no-1-thing-youre-getting-wrong-about-inclusive-design5
  6. 6. > Inclusive Design 101 Our mindset 6 As designers, we have the power and responsibility to make sure that everyone has access to what we create regardless of… SOURCE: https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94 A B I L I T Y C O N T E X T S I T U A T I O N disability: visual, auditory, physical, speech, neurological, or cognitive; literacy level cultural perceptions, bright or low light, muted audio, slow internet connection in transit or driving, multitasking, broken arm or finger, limited data, older device or software
  7. 7. > Inclusive Design 1017 SOURCE: https://www.microsoft.com/design/inclusive/ T O U C H one arm arm injury new parent S E E blind cataract distracted driver H E A R deaf ear infection bartender S P E A K non-verbal laryngitis heavy accent Human limitations can be permanent, temporary or situational
  8. 8. > Inclusive Design 101 What this is not 8 Barrier to Innovation Monotonous Repressive Compromised Design
  9. 9. Digital Standards 9
  10. 10. > Inclusive Design 101 Foundational guidelines 10 While inclusivity is the ideal, we need to first understand what accessibility is all about. The Web Content Accessibility Guidelines (WCAG 2.1), authored by the World Wide Web Consortium, is the most comprehensive benchmark for accessibility standards. https://www.w3.org/WAI/standards-guidelines/wcag/
  11. 11. > Inclusive Design 101 How this impacts digital process 11 1 Affects how we use type, craft page layouts and employ animations and transitions. DESIGN GUIDELINES CONTENT GUIDELINES CODE GUIDELINES Affects what’s captured in copy decks and input into a content management system. Affects HTML markup, supporting alternate navigation and how forms are developed. 2 3
  12. 12. > Inclusive Design 101 Aim to satisfy AA standards 12 WCAG 2.1 outlines success criteria for each accessibility guideline. These are stepped out into several levels: A, AA and AAA. L O W E S T H I G H E S T A AA AAA minimum requirements to be somewhat accessible to audiences with impairments acceptable level for desktop and mobile that is usable and supports assistive technology highest level criteria that has potential to incur additional cost/scope to fully implement
  13. 13. Focus on Design 13
  14. 14. > Inclusive Design 10114 Our digital experiences should be intuitive, efficient and enjoyable for all users. Intelligently applying guidelines around text size and contrast, making calls to action differentiated, and identifying errors and resolutions clearly help make sure that we’re designing for the widest user audience.
  15. 15. > Inclusive Design 10115 1 2 3 4 Maintain appropriate contrast between text and the background it sits on Make touch targets large enough and create adequate space between them Ensure the minimum font size in text blocks or paragraphs is readable across devices Be straightforward and consistent with language used in calls to action 5 6 7 8 Use more than one design factor to make primary actions apparent Make navigation and progress cues clear and consistent to aid task completion Clearly communicate when an error occurs and tell the user how to resolve it Write concise and useful alternative text for images and other non-text assets
  16. 16. > Inclusive Design 10116 1 Maintain appropriate contrast between text and the background it sits on Adequate contrast is important not just for visually impaired audiences, but also improves readability within a range of lighting conditions. Many design system languages like Apple’s Human Interface Guidelines and Google’s Material Design System align with WCAG 2.1 guidelines. Level AA Contrast Success Criteria (SC 1.4.3): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 STANDARD TEXT Large-scale text (over 18pt) and images of large-scale text have a contrast ratio of at least 3:1 LARGE TEXT SOURCE: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
  17. 17. > Inclusive Design 10117 SOURCE: https://material.io/design/usability/accessibility.html#color-contrast Example: Material Design Guidelines Example: Marshalls Brand Vis ID While logos and “incidental” design elements are not required to meet contrast standards, it’s smart to apply contrast guidelines to these items.
  18. 18. > Inclusive Design 10118 Tools https://contrastchecker.com/ With a quick search of “contrast checker” online, tons of online tools are available to validate your color usage. The most bulletproof method is to enter hex values for your foreground and background colors, though some tools allow you to upload an image to test contrast. In Photoshop, you can change your proof setup (under the “View” menu) to see what your layouts look like for users with different types of color blindness. http://accessible-colors.com/ https://material.io/tools/color/ http://www.brandwood.com/a11y/
  19. 19. > Inclusive Design 10119 Make touch targets large enough and create adequate space between them2 Mobile design has made 44 pixels the common standard for buttons. Our layouts usually include many more active elements than just buttons. Touch targets refer to parts of a screen that respond to user input. In addition to your designed element, a target can include padding outside the visual bounds of that item. 44px MINIMUM TARGET IDEAL TARGET MINIMUM SPACING 48px 8px
  20. 20. > Inclusive Design 10120 Example: Material Design Guidelines avatar: 40 px
 icon: 24 px
 touch target area: 48 px various touch target styles touch targets spacing SOURCE: https://material.io/design/usability/accessibility.html#layout-typography
  21. 21. > Inclusive Design 10121 Ensure the minimum font size in text blocks or paragraphs is readable across devices3 All fonts inherently read differently due to characteristics like proportion and weight, so it’s critical to test layouts across a range of screens. There are no hard and fast standards around type size, though it’s a solid practice to not skew any smaller than 11pt — and this should be reserved for items like legal copy. 14pt MINIMUM BODY FONT IDEAL BODY FONT MINIMUM LINE HEIGHT 16-18pt 1.5
  22. 22. > Inclusive Design 10122 Using live text is preferable to embedding copy in graphic assets for major pieces of communication in your digital layouts. This not only improves accessibility, but is also beneficial for SEO practices. There are situations when embedding text can make sense. When your copy isn’t critical to understanding context or taking a specific action, embedding is acceptable. Live v. Embedded Type Ideal Line Length Line length can also be a consideration to aid in readability, especially at larger screen sizes. Wider lines can make it more difficult to focus on text, while narrow lines require the reader’s eye to move back and forth more often. Setting the width of text blocks at around 60-75 characters is considered ideal — and should not exceed 80 characters.
  23. 23. > Inclusive Design 10123 Be straightforward and consistent with language used in calls to action4 Clearly communicating the actions that you’re allowing a user to take not only promotes usability — this can also help with conversion goals. In addition to concise and accurate button copy, also use other copy in proximity to offer context and strengthen messaging. Prioritize essential details and use short, scannable phrases. Use active language to tell the user what happens when they interact. Avoid general phrases like “submit” and “click here.” Use words that are direct and can be understood across reading levels. Avoid brand-speak and jargon. BE CONCISE BE SPECIFIC BE SIMPLE
  24. 24. > Inclusive Design 10124 Examples Material Design Guidelines SOURCE: https://material.io/design/communication/writing.html#principles
  25. 25. > Inclusive Design 10125 Write concise and useful alternative text for images and other non-text assets5 Level A Text Alternatives Success Criteria (SC 1.1.1): • All images should have appropriate and equivalent alternative text, particularly when these images function as links. • Images that are decorative or don’t convey content may be given empty alt text (alt=“”) or coded as CSS backgrounds. • Embedded multimedia should be identifiable via accessible text. SOURCE: https://webaim.org/standards/wcag/checklist For audio and video content to be accessible, it can require text transcripts or synchronized captions. This is not required if these assets are considered “decorative,” but should be considered when information is essential to task completion.
  26. 26. > Inclusive Design 10126 Use more than one design factor to make actions apparent6 SOURCE: https://material.io/design/usability/accessibility.html#color-contrast A design can sometimes looker cleaner with only characteristic calling out an action, like a color change to indicate a link, but isn’t the most usable approach. It’s smart to use at least one additional indicator to convey that a user can interact with something or highlight how to recover from an error. Create variation using: ColorText Weight Text Styling Shape Size Iconography
  27. 27. > Inclusive Design 10127 Make navigation and progress cues clear and consistent to aid task completion7 Digital design has a lot in common with wayfinding practices for physical environments. Users should always have a sense of where they are in a digital experience. They should understand how they can move through this virtual space — and complete the tasks they’re seeking to complete. • Keep primary navigation consistent • Avoid using brand-speak as navigation labels • Mark the current location visually in the nav • Also convey location through page titles, breadcrumbs or in-page copy LANDMARKS PATHWAYS • Show progress through linear flows by visualizing steps completed, current status and remaining steps for completion. • Prior to starting a task flow, you may want to inform your user about the steps required or how long this flow may take to complete.
  28. 28. > Inclusive Design 10128 Example: Progress Steppers SOURCE: https://material.io/archive/guidelines/components/steppers.html# editable steps allow users to return to other items in the flow feedback can be displayed upon completion of a step mobile display of progress vertical orientation on mobile
  29. 29. > Inclusive Design 10129 Clearly communicate when an error occurs and tell the user how to resolve it8 Form design can be a unique UX challenge with its own set of best practices, though it builds on other principles we’ve discussed. Our goal is to help users understand what information we’re asking them to input before errors happen. But when errors do occurs, it’s imperative to help correct them as easily as possible. 1. helper text 2. error message 3. icons 4. character counter
  30. 30. > Inclusive Design 10130 Example: Form Design SOURCE: https://material.io/design/components/text-fields.html# • Labels stay present when entering a form field • Helper text can provide additional instructions • Fields can format text like phone numbers and dates on entry • An error is identified by icon and color change • Copy explains the requirement to correct the error in clear language • Small animation guide attention to the error
  31. 31. > Inclusive Design 10131 Accessibility standards can help guide many other interactive elements towards being inclusive+ SOURCE: https://webaim.org/standards/wcag/checklist WCAG 2.1 offers a viewpoint on many other digital features. And while the strictest level of compliance takes a conservative view on interaction and motion are integrated, these guidelines offer an opportunity to be reflective of our design decisions. Additional considerations here include perspectives on use of automated carousels, ability to engage of audio controls, how forms are designed, as well as integrating animation and transitions.
  32. 32. Making Email Inclusive 32
  33. 33. > Inclusive Design 101 Everything we’ve discussed applies 33 1 Contrast is important, as is ensuring type sizes are large enough to be legible. Line height can help give breathing room, as can padding between elements. READABILITY WRITING INTERACTION Email generally acts as a driver prompting your user to take an action, so be concise in your messaging. Write in a human tone with a balance between brand and utility. Ensure tap targets are adequately sized and appropriately placed. While animations can grab attention, make sure that emails will still load quickly. 2 3
  34. 34. > Inclusive Design 10134 Example While the brand messaging remains with the graphic area, the supporting content is pulled out and set as live text. Not only will this text display if images are not loaded, it can also scale easily between different devices. Setting buttons as with a color fill and live copy also tends to improve email performance. SOURCE: https://content.myemma.com/blog/why-does-email-accessibility-matter 1 2 1 2 1 Both the color contrast and size of this headline are more legible on the revised design. 2
  35. 35. > Inclusive Design 10135 Example SOURCE: https://content.myemma.com/blog/why-does-email-accessibility-matter 3 4 3 4 The text size of the product information has been increased to improve readability. The size also helps make this info more scannable. 3 In addition to text sizes being increased here, the brand mark contrast is improved to give this proper visual priority. Overall, the revised version is a slight bit longer than the original email, but the edits improve the ability to comprehend the message and desired actions. 4
  36. 36. > Inclusive Design 101 The bottom line is mobile first 36 We usually design emails at their largest breakpoint (somewhere around 600px wide), and we should be building with their appearance and behavior on mobile devices at the top of our minds. Content might scale, or it might break and stack responsively — or you might swap content at different viewports. No matter how we decide to code an email, some level of prototyping is key. You’re not done designing until you’ve checked it out on a phone.
  37. 37. > Inclusive Design 101 Is image-only bulletproof? 37 SOURCE: https://litmus.com/blog/why-you-shouldnt-send-image-only-emails Designing emails that are composed only of images will maintain visual integrity, but this approach comes with some considerations: If your subscriber has images turned off, they won’t see your email. The size of the email can cause it to load slowly. Or not at all, particularly when using retina display images. Not including text hurts accessibility. And voice assistants like Alexa and Siri won’t read your content. Your emails won’t be searchable in an email client.
  38. 38. > Inclusive Design 101 Design & code approaches 38 M O B I L E A W A R E R E S P O N S I V E O R H Y B R I D uses basic coding techniques to create a single email rendering that’s suitable for a range of screen sizes, but is deferential to smartphones uses media queries or progressive enhancement to control formatting, layout and display of email content based on the subscriber’s screen size SOURCE: https://litmus.com/blog/responsive-aware-and-mobile-aware-design-see-gains-as-marketers-focus-on-production-cost
  39. 39. > Inclusive Design 10139 Example: Oui Homme All images are designed to scale between breakpoints. Styled type is embedded and designed to be highly telegraphic on a mobile phone. 1 Section headers are live copy on a solid-colored background. This text scales down in size on mobile slightly. 2 2 3 2 3 DESKTOP MOBILE Body copy stays consistently sized between breakpoints and wraps as the screen size changes. 3 1 1
  40. 40. > Inclusive Design 10140 Example: Net-a-Porter The desktop menu exposes site categories, while this is tucked into a functional menu on mobile screens. 1 Feature blocks incorporate image and copy into the asset. A different asset is displayed at large and small breakpoints best take advantage of screen aspect ratios. 2 1 2 3 1 2 3 The product grid breaks responsively on smaller screens. The brand names and “Shop Now” button are all live text. 3 DESKTOP MOBILE
  41. 41. > Inclusive Design 10141 Example: Space NK The product image is a unique asset, and both headlines below this are cut as image assets. The body copy that follows is live text set on a colored background that wraps as the screen size changes. 1 While the desktop view of this email staggers the display of product images and descriptions, all this information stacks responsively on mobile. The brand, product name and price and cut as image assets, and the description and link that follow are live text. Note that some of the text contrast ratios used in this email don’t meet the guidelines we’ve discussed. 2 1 2 1 2 DESKTOP MOBILE
  42. 42. > Inclusive Design 10142 Example: Goop 1 2 3 1 2 3 DESKTOP MOBILE Multiple modules throughout this email follow the behavior of this wellness asset by flattening all info into the asset, while making sure that type and buttons are large enough to be readable across devices. 1 Content blocks behave responsively, using live copy under images and stacking atop one another on mobile. 2 While the 3-column grid setup stays consistent across viewports for product highlights, the copy and links are live, adjusting their orientation as the screen size changes. The “What We’re Wearing” headline atop this section is cut as an image asset. 3
  43. 43. > Inclusive Design 10143 Example: Apple 1 2 1 2 DESKTOP MOBILE This email uses the responsive stacking we’ve seen in other examples. The headline is an image asset, while the description and link are live copy. 1 The type in this block is consistent with the behavior above. While the supporting illustration looks similar on desktop and mobile, the smaller viewport actually swaps in a different version of this image. Note that the “Find a session” link in the blue module doesn’t follow the guideline of using more than one visual factor to distinguish that it’s a link. 2
  44. 44. > Inclusive Design 101 #nofailmail 44 SOURCE: https://litmus.com/blog/nofailmail-the-5-most-common-email-design-fails-and-how-to-avoid-them Use a larger font size — a minimum of 14pt for body body and 22pt for headlines. Make your call to action touch-friendly and give your messaging breathing room. Slim down to one column to make your emails readable across more screen sizes. Streamline your content. Use alt text for images. Use HTML and CSS to style buttons instead of image assets.
  45. 45. Making Social Inclusive 45
  46. 46. > Inclusive Design 10146 SOURCE: https://instagram-press.com/blog/2018/11/28/creating-a-more-accessible-instagram/ Instagram launched enhancements for visually impaired users in late 2018. While the platform is using image recognition to generate alternative text for uploaded images, it also allows for custom alt text to be added when a photo post is uploaded or edited. Video captions must be added before uploading.
  47. 47. > Inclusive Design 10147 SOURCE: https://help.twitter.com/en/using-twitter/picture-descriptions Twitter also allows for image descriptions to be added to posts. This option can be enabled in the Accessibility settings under “Settings and Privacy.” Video captions must be added before uploading.
  48. 48. > Inclusive Design 10148 SOURCE: https://www.facebook.com/help/accessibility Facebook uses automatic object recognition by default for alt text. When editing a photo, the auto alt text can be overridden. It can also be helpful to add descriptive copy within a photo’s caption. For video content, Facebook can auto-generate subtitles or allow them to be custom uploaded.
  49. 49. > Inclusive Design 10149 SOURCE: https://www.google.com/accessibility/products-features/ YouTube uses speech recognition technology to automatically caption videos, which can be edited within the Creator Studio — or closed captions files can be uploaded to support a video. A transcript can also be made available for video content.
  50. 50. > Inclusive Design 10150 SOURCE: https://newsroom.pinterest.com/en/post/making-pinterest-inclusive-for-all-levels-of-vision Pinterest made a number of enhancements to their platform in 2018 to support inclusive design, like screen reader support, contrast improvements to their color scheme and bolder typography. Pinterest does not have any specific accessibility settings for posting content, so it’s smart to include descriptive copy to any pinned images. Before After
  51. 51. > Inclusive Design 10151 Snapchat does not natively support accessibility features, so any accessible enhancements should be made to assets that are shared on the platform. Pay attention to font size and text contrast, especially when placed on top of photographic images. If using video captions, these need to be added prior to upload.
  52. 52. > Inclusive Design 101 Across social platforms… 52 SOURCE: https://blog.hootsuite.com/inclusive-design-social-media/ Don’t overuse text in all caps. Punctuation is read aloud by screen readers, so put hashtags and mentions at the end of your caption. Emojis are also read by screen readers and voice assistants, so use them judiciously. Make alt text meaningful by providing context and an adequate description, while being concise. Use camel case to make hashtags more legible.
  53. 53. Additional Resources 53
  54. 54. > Inclusive Design 10154 Reference Sites: Accessibility https://webaim.org/standards/wcag/checklistWCAG 2.0 Checklist https://material.io/design/usability/accessibility.html#Material Design: Accessibility http://accessibility.voxmedia.com/Vox Media Guidelines https://developer.apple.com/design/human-interface-guidelines/Apple Human Interface Guidelines https://www.microsoft.com/design/inclusive/Microsoft Inclusive Design
  55. 55. > Inclusive Design 10155 Reference Sites: Email https://emailmonks.com/new-age-email-design-bestpractices/infographic.htmlEmail Design Best Practices https://www.campaignmonitor.com/blog/email-marketing/2019/02/...The Really Good Guide to Email Design https://reallygoodemails.com/Really Good Emails
  56. 56. > Presentation Title XX.XX.2017 One size fits all. One size fits one.

×