Recomendados
Recomendados
Más contenido relacionado
Destacado
Destacado (20)
Inclusive Design UXPA 2022 Shared deck.pptx
- 1. How to Start Designing Accessible User Experiences Introduction to Inclusive Design UXPA June 22, 2022 Arin Clement, UX Designer, CIO Design, IBM and Dabby Phipps, User Researcher & Designer Introduction to Inclusive Design:
- 2. Building your product with inclusive design in mind. Focusing initially on what will make the most impact. What is inclusive design? - How to expand your view of the typical user to consider more inclusive design decisions How do we engage with our users to create empathy? - Understanding the experiences of all kinds of users, and their pain points, when using your products What’s our path to inclusive design for designers? - How we’ve broken it all down and re-assembling everything in a language for designers Introduction to Inclusive Design UXPA 2022 Resources going forward - We’ll show you what’s next and where to go to keep learning Agenda for today
- 3. Inclusive Design is “about designing for the needs of people with permanent, temporary, situational, or changing disabilities — all of us really.” inclusivedesignprinciples.org
- 4. “Accessibility is like a blueberry muffin – you can’t push the berries in there afterward.” Cordelia Mcgee-Tubb Introduction to Inclusive Design UXPA 2022 Why is accessibility important for designers?
- 5. 1. Accessible websites are ugly and boring 2. Web accessibility is expensive, time-consuming & hard to implement 3. Accessible sites only benefit small percentages of people 4. Web accessibility is optional 5. Web accessibility is the sole responsibility of developers 6. Automated evaluation tools are enough 7. Making websites accessible doesn’t have any additional benefits www.adhttps://www.nomensa.com/blog/2012/7-web-accessibility-myths-2atitleiii.com/ Introduction to Inclusive Design UXPA 2022 Accessibility myths
- 6. Introduction to Inclusive Design UXPA 2022 How do we inspire design professionals to integrate inclusive design as part of their everyday design process? Challenge
- 7. Introduction to Inclusive Design UXPA 2022 Who accessibility affects Fifteen percent of the world’s population (1 billion people) is estimated to have a permanent impairment
- 8. Who accessibility affects Introduction to Inclusive Design UXPA 2022 Let’s say another 10% have a temporary impairment at some point during a year
- 9. Introduction to Inclusive Design UXPA 2022 Who accessibility affects And all of us experience situational impairments, perhaps more frequently than we realize
- 10. Source: Microsoft Inclusive Design Toolkit Introduction to Inclusive Design UXPA 2022 When we design with inclusion in mind, we’re really designing for the needs of all people under a variety of conditions. Solve for one, extend to many. Who accessibility affects
- 11. “If you do not intentionally, deliberately and proactively include, you will unintentionally exclude.” Joe Gerstandt, Diversity and Inclusion Champion
- 12. How do we recognize exclusion? Adobe XD Ideas Introduction to Inclusive Design UXPA 2022 Identify ability-based exclusion - Test for accessibility - Follow WCAG guidelines when designing digital products Identify situational challenges - Consider the interactions between individuals and their environments, situations and society as a whole Avoid personal biases - Involve people from different communities throughout the process - Include users across the research and testing phase
- 13. ADA prohibits discrimination based on disability in: www.adatitleiii.com/ • Employment • Government • Transportation • Accommodations and facilities • Telecommunications Introduction to Inclusive Design UXPA 2022 Inclusive design prevents discrimination and lawsuits
- 14. Voice control Siri, Google Assistant, and Alexa were intended to allow visually impaired people to easily navigate their devices through their voices. Everyone now uses voice control to get info on things like the weather, time zones, and the infinite knowledge these devices hold. Introduction to Inclusive Design UXPA 2022 Canvs Editorial Examples where inclusive design benefits everyone
- 15. You can now text 911 The United States has recently made texting to 911 available.This makes it easier for people who are deaf or hard of hearing to get help. For situations where being quiet results in safety, texting 911 has allowed people to seek help in difficult and scary times. Introduction to Inclusive Design UXPA 2022 Canvs Editorial Know when to TEXT 911 If you are deaf, hard of hearing or have a speech disability If you cannot speak due to an injury or medical condition If you are in a threatening situation and a voice call could increase the threat If you cannot make a call because your mobile phone reception is poor Examples where inclusive design benefits everyone
- 16. What should apps be doing to be more accessible? “People who are makingTikTok videos are able to add closed captioning. I sign, but I don’t sign without closed captioning because I know that would leave out a lot of people in the hearing community. So, I add closed captioning to my videos so that hearing people have access to my videos.” @scarlett_may.1 Introduction to Inclusive Design UXPA 2022 Nylon Magazine Closed captioning or subtitles Examples where inclusive design benefits everyone
- 17. “Empathy is not connecting to an experience. Empathy is connecting to the emotions that underpin an experience.” Brene Brown, Author, Dare to Lead
- 18. User experience with a Hearing impairment Introduction to Inclusive Design UXPA 2022
- 19. Nothing about us without us: IBMers who identify as Neurodivergent Introduction to Inclusive Design UXPA 2022 Survey question: 10.What is at least one suggestion you have that would improve your Mural experience? - 120 responses
- 20. Introduction to Inclusive Design UXPA 2022 “Not sure if Mural has a snap to grid option, but it would help me immensely when trying to line up boxes/objects vertically and horizontally…It takes a lot of motor skills to get things looking neat..” “Reading boxes with different size fonts (based upon the amount of text) and shapes and colors is nearly impossible. It also does not work well with screen readers nor download to XLS well.” “It is very important to me to be able to see the cursor of the person that is presenting, or you are following. If someone refers to a post-it I need to see it highlighted when they hover over it...” “…have restrictions/UX in place that only allows specific colours of shapes and fonts that aren’t going to be a problem for colour blind persons or the visual processing impaired and set default templates as IBM standards.” “I find the web UI quite confusing. For example, the way in which the mouse interacts with the canvas, sometimes selecting objects and sometimes moving the canvas, is confusing.” “I need it or something like it to do my job, but I cannot watch others present from a Mural on a shared screen - the motion makes me nauseous and can give me headaches.” “ ” Survey question: 10.What is at least one suggestion you have that would improve your Mural experience? - 120 responses Nothing about us without us: IBMers who identify as neurodivergent
- 21. Introduction to Inclusive Design UXPA 2022 Interview question: If you had a way to automatically fix some of these problems, what would be the top 3 things you would want the power to fix? Nothing about us without us: IBMers who are blind or with limited vision Top 3 all fell in page navigation: 1. Headings 2. Tab key navigations 3. Landmarks/ regions
- 22. Introduction to Inclusive Design UXPA 2022 Interview question: If you had a way to automatically fix some of these problems, what would be the top 3 things you would want the power to fix? Nothing about us without us: IBMers who are blind or with limited vision Showing regions and headers
- 23. Inclusive design survey sent to CIO Designers Introduction to Inclusive Design UXPA 2022 Survey question: 5. What are the two biggest obstacles to making inclusive design or accessibility principles part of your regular design practice? - 51 responses
- 24. Isn’t accessibility a development thing? Technical sounding jargon… No idea how to get started… It’s overwhelming how much there is to learn and do… Didn’t realize this was such a big issue The checklist looks intimidating!
- 25. “We (designers) own the user experience, so why would we assume that accessibility is only the dev team’s responsibility?” Dabby Phipps, CIO Design Accessibility Focal
- 26. Introduction to Inclusive Design UXPA 2022 Design is where it starts. If we do our part, we can advocate as it continues throughout the process. Accessibility is created in an ecosystem
- 27. What’s our path to inclusive design? Introduction to Inclusive Design UXPA 2022
- 28. Introduction to Inclusive Design UXPA 2022 WCAG w3.org Analyze WCAG and organize in a way that makes sense to designers
- 29. Introduction to Inclusive Design UXPA 2022 Equal Access Toolkit Incorporate Equal Access Toolkit levels
- 30. An accessibility evaluation of the home pages for the top 1,000,000 web sites: WebAIM • 50,829,406 distinct accessibility errors were detected—an average of 50.8 errors per page • 96.5% of all errors detected fall into these six categories Introduction to Inclusive Design UXPA 2022 Consider the top accessibility errors today
- 31. Introduction to Inclusive Design UXPA 2022 Creating the journey
- 32. The first stops: • Color & contrast • Text styling • Visuals Introduction to Inclusive Design UXPA 2022
- 33. Introduction to Inclusive Design UXPA 2022 (Break down each session into relevant sections) Color & contrast Color & contrast session agenda: - Text - Links - Input fields - Components - Visual states - Focus states - Icons - Graphs/charts
- 34. Color & contrast - Text Introduction to Inclusive Design UXPA 2022 (We’ll start with theWCAG regulation to follow and any details or exceptions that are relevant, in plain language) WCAG regulation for text color contrast 1.4.3 Choose text that sufficiently contrasts with its background, including images and gradient backgrounds - Large text: if your text is 18pt regular text or larger, or your text is 14pt bold text or larger, the contrast requires a 3:1 ratio - Body text: if your text is less than 18pt regular or less than 14pt bold text, the contrast requires a 4.5:1 ratio - Good practice for lightweight fonts is to use the 4.5:1 ratio regardless of size - If you are designing responsive products, follow the guidance for the smallest font size throughout all screen sizes - Exceptions: logos or text on a disabled UI element Equal Access Toolkit
- 35. Introduction to Inclusive Design UXPA 2022 (We’ll share at least one example to illustrate the concept) Examples of text colors passing contrast and examples of text colors failing contrast Color & contrast - Text Equal Access Toolkit
- 36. Introduction to Inclusive Design UXPA 2022 (And additional examples to illustrate details of the concept) Example of text colors passing contrast using an overlay on an image and example of text colors failing contrast on a gradient background Color & contrast - Text Equal Access Toolkit
- 37. Introduction to Inclusive Design UXPA 2022 (We’ll share reliable tools - Where to get it - How to use it) Tool to check color contrast Colour contrast Analyser (CCA) Color & contrast - Text
- 38. Minimum contrast of 4.5:1 will always meet accessibility requirements Introduction to Inclusive Design UXPA 2022 (We’ll close each section with a key, easy-to-remember take away) Color & contrast - Text
- 39. WCAG regulations for headings: 2.4.6 Headings & Labels 1.3.1 Info & Relationships Accessibility for w3 Publisher IBM | GAAD 2022 Blind users rely heavily on clear, properly structured headings to understand and navigate content (via a screen reader). The heading structure provides an outline so blind users can quickly understand the organization and contents of the page. - Accurately describe content with succinct headings - Indicate heading levels; avoid skipping a level - Use only one H1 per page - Also helps users with cognitive disabilities to read and understand - Also helps low-vision users focus on relevant content. Equal Access Toolkit Headings & page structure - Headings
- 40. Think of it like an outline to a story structure Accessibility for w3 Publisher IBM | GAAD 2022 (H1)Title (H2) Introduction Some detail to introduce the topic (H2) Body (H3) Subtopic 1 Some details about subtopic 1 (H3) Subtopic 2 Some details about subtopic 2 (H3) Subtopic 3 Some details about subtopic 3 (H2) Conclusion Some closing thoughts Headings & page structure - Headings
- 41. Accessibility for w3 Publisher IBM | GAAD 2022 (H3)Title (H2) Conclusion Some detail to introduce the topic (H2) Body (H1) Subtopic 1 (H3) Some details about subtopic 1 (H1) Subtopic 2 Some details about subtopic 2 (H3) Subtopic 3 (H3) Some details about subtopic 3 (H2) Introduction Some closing thoughts Headings & page structure - Headings What if the elements of the story were all out of order?
- 42. Keep heading sizes in logical order to tell the best story Accessibility for w3 Publisher IBM | GAAD 2022 Equal Access Toolkit Heading & page structure - Headings
- 43. WCAG regulations for alternative (alt) text: 1.1.1 Non-text Content Accessibility for w3 Publisher IBM | GAAD 2022 Providing proper alternative (alt) text for implementation allows blind users to perceive any meaningful visuals on a page (via a screen reader). - Identify and annotate an image as decorative (or alt=“”) if it provides no meaningful info, only for visual formatting, or has a caption providing context. - Provide alternative text for meaningful images, including logos and icons - Ensure the alternative text describes the purpose, not the image - Provide both a short and a more detailed description for complex visuals - Don’t use “image of” in your description. A screen reader will have already identified it as an image, and follow with your alt text description, if the image is meaningful. Equal Access Toolkit Visuals - Alt text
- 44. Introduction to Inclusive Design UXPA 2022 Identify and annotate an image as decorative (or alt=“”) if it provides no meaningful info, only for visual formatting, or has a caption providing context. Visuals - Alt text Equal Access Toolkit
- 45. Introduction to Inclusive Design UXPA 2022 Provide specific and concise alt text that describes the meaning of the image. Visuals - Alt text Equal Access Toolkit
- 46. Introduction to Inclusive Design UXPA 2022 Describe the purpose instead of the images used to represent controls (such as these icons). Visuals - Alt text Equal Access Toolkit
- 47. Introduction to Inclusive Design UXPA 2022 For screenshots, the alternative text should list relevant text on the screen as well as provide critical visual information. Here, a caption adds some context. More details could be provided in the nearby text, including a link to the page. Visuals - Alt text Equal Access Toolkit
- 48. Introduction to Inclusive Design UXPA 2022 For this complex visual, a caption provides the key takeaway, a title provides context, and the alt text provides a summary. Depending on context, more detailed information on the chart could be provided in a spreadsheet. Visuals - Alt text Equal Access Toolkit
- 49. Decorative images don’t need alt text. (If image is removed and content still makes sense, no alt text) Introduction to Inclusive Design UXPA 2022 decorative image Visuals - Alt text: decorative images
- 50. Add alt text for meaningful images, including logos and icons Introduction to Inclusive Design UXPA 2022 alt = “IBM logo” Visuals - Alt text: meaningful images
- 51. The full list - Web Content Accessibility Guidelines (WCAG) 2.1 Inclusive Design Series from Dabby & Arin: - Accessible & Inclusive DesignYouTube Channel: follow us here as we start sharing our series of accessibility education for designers Introduction to Inclusive Design UXPA 2022 Ibm.com/able - A place to start: Equal access toolkit/Design - Upgrade your annotations: IBM Accessibility Design Kit for Sketch/Figma Plug-ins - Silktide disability simulator - Chrome Web disability simulator - Stark: accessibility plug-ins, newsletter and tools Resources
- 52. What is the end goal? To clear the path for everyone Introduction to Inclusive Design UXPA 2022
- 53. Questions? Introduction to Inclusive Design UXPA 2022
- 54. Thank you! Introduction to Inclusive Design UXPA 2022 Arin Clement: www.linkedin.com/in/arinclement Dabby Phipps: www.linkedin.com/in/dabbyphipps YouTube Channel: https://www.youtube.com/channel/UCic6JNUPO3a7fH8YV3SH4Ug
Notas del editor
- Thank you to UXPA for having us today! We will be sharing our full deck after the presentation. You should be able to access it following the close of the conference. Welcome everyone. Unfortunately, Dabby Phipps will not be able to join us in person, but she was a partner right up until final edits on this presentation and I will be referring to our collective work throughout. We will be sharing our full deck after the presentation. You should be able to access it following the close of the conference. Dabby and I have partnered to create a new series “A journey to inclusive design.” The last couple of years has inspired a lot of conversations around inclusion and inclusive design. We’ve all joined slack channels, BRGs and we’re learning to become better allies. The next step is to become better advocates. Today we want to share an approach to take action.
- Our agenda for today covers three big questions: 1. What is inclusive design? 2. How do we engage and build empathy for our users? and 3. What’s our path for designers? At the end we’ll share a couple of examples and resources you can leave here with to use directly in your products today.
- We follow InclusiveDesignPrinciples.org’s definition: “Inclusive design is about designing for the needs of people with permanent, temporary, situational, or changing disabilities – all of us, really.”
- Why is a11y important for designers? We need to think about it at the beginning of the process. Just like ensuring you have all the ingredients you need for a delicious recipe, we need to ensure we have the right elements ready as we start to create a new, hopefully delightful, digital product. As we got started, we asked ourselves, Why isn’t everything we create already accessible? Why isn’t it part of every product team’s conversation already?
- There are some common accessibility myths we have heard that we need to overcome: 1. First, accessible websites are ugly and boring: Accessibility will not force designers to make ugly or boring products; instead, it will make them think critically, and the solutions will most likely surprise and delight customers. We’ll share many examples throughout our series that are beautiful, innovative and accessible. 2. Web accessibility is expensive, time consuming & hard to implement; we’ll show that by beginning the process with inclusive design we can remove some of these assumptions 3. Accessible sites only benefit small percentages of people: we’ll share some examples in the next few slides that may surprise you. We will all use the benefits of accessible design at some point. 4. Web accessibility is optional: it is actually not optional, it’s a legal requirement. There are big, and expensive, consequences if we do not make our products a11y 5. It’s the sole responsibility of developers: while developers often test products once a design is already built, we have an opportunity to get all the ingredients in at the beginning. 6. Automated evaluation tools are enough: this is at the end of the process, and we want to share that by starting with accessible design, we are advocating for inclusive design from the beginning 7. Making websites accessible doesn’t have any additional benefits: that might be part of something you’ve heard teammates share, but we are going to provide examples of how accessible benefits are helpful to all users
- So, “How do we inspire and challenge designers to integrate inclusive design as part of their design process?”
- Our definition of inclusive design says temporary, situational or changing disabilities. Let’s clarify who that refers to so we know who we’re really designing for: It's estimated that about 15% of the world's population, or 1 billion people, have a permanent impairment. Actually, we've seen data suggesting that in certain locations, like the United States or the United Kingdom, that estimate rises to 25% of the population, or 1 in 4 people.
- Let’s estimate that another 10% of a population have a temporary impairment at some point during a year. For example, someone goes skiing and they break their leg, or maybe someone gets carpal tunnel from overuse at work. Suddenly, people don't have the same type of access that they've come to expect. Life happens all the time and most of us at one point or another will experience some type of temporary impairment.
- If you stop and think about it, I'm sure each of us could give an example of when we experience what we call situational impairments. Probably even more than we realize, particularly in a world that has become so connected to technology. As the name implies, situational impairments are the result of something in our environment that changes how we interact with the world around us.
- When we design with inclusion in mind, we're designing for the needs of a variety of people in a variety of conditions. Let's consider a few examples of the different types of impairments our users might encounter... One of your colleagues could have been in an accident and he lost his dominant arm. He's being fitted with a prosthetic but is having to learn to do things one handed and with his non-dominant hand. Your developer teammate becomes the proud father of newborn twins. Like most of us during the pandemic, he works from home and often ends up with only a free hand (or maybe even a few fingers!) to type on his laptop or to use his phone. I was walking across the street last fall and was run over by a car. Fortunately, I’ll make a full recovery, but am currently temporarily disabled. Learning to do everyday things in a new way is eye opening. The first physical therapist I visited was a in a non-accessible building. A receptionist had to come down to the front door and help me through the giant, heavy, non-accessible doors and up a set of stairs, while I was using a walker, to their 4th floor gym. (Needless to say, I found another therapist)
- My experience going to that office was incredibly frustrating. If I couldn’t make it in the building, how was I supposed to trust the therapist was going to help me to learn to do things on my own again? Joe Gerstandt says “If you do not intentionally, deliberately and proactively include, you will unintentionally exclude.” No one wants to feel left out. So how can we recognize when we unintentionally exclude a group of our users?
- Testing for accessibility helps, we can follow the guidelines. We can remember to think about all the environments users will be interacting with our products, and how some situations can affect those. We can also intentionally include a variety of users in our research, testing and development stages to best understand their experiences.
- Being inclusive is not just being nice, it’s required. Lawsuits continue to rise every year against companies with non-inclusive products. The ADA prohibits discrimination based on disability and creating an inclusive product can prevent lawsuits.
- Couple of examples of where creating inclusive digital products benefits everyone. Voice control: initially these devices were created for visually impaired users to easily navigate their devices. Now, all of us find the benefit of “Asking Google” or “Alexa” to give us directions or find a song and artist with only a phrase from the lyric.
- You can now text 911: while this was initially created for the deaf and hard of hearing community, this can just as easily benefit anyone in a scary situation where they don’t have the freedom to talk.
- Scarlet May has 5 million followers on TikTok. She gained that following by creating amazing content for her deaf community. (play video) And by adding captions to her videos, she enabled the hearing population to follow as well. The next time I post a video without a sign language interpreter, I’ll think of her and remember to include captions.
- Brene Brown says that "Empathy is not connecting to an experience. Empathy is connecting to the emotions that underpin an experience." We talk about putting ourselves in our user's shoes. But to really empathize with our users, we need to connect with the feeling of working with an application or site that leaves them feeling excluded. Think about your own experiences using products that are inefficient or won't let you complete your task. What do you feel? Frustration .... anger .... sadness ... maybe a sense of helplessnes .... Inclusive design is a step towards more fully embracing the wide variety of user needs and experiences, considering circumstances and environments that go outside what we think of as the norm.
- (Play with text) For those of you in the back of the room who couldn’t read all the text…did you feel like you were missing out? Maybe a little frustrated? That’s an example of understanding the emotions that underpin an experience.
- For this series, we wanted input from real end users from a variety of user groups to ensure that our focus was on what would help with their biggest pain points. At IBM, we have an amazing Neurodivergent community. We sent a survey out to that group and asked “what is one suggestion you have to improve” a number of different products we use across teams. (Mail, Slack, etc.) We’re sharing here their answers for using Mural. These specific insights have been shared with the Mural team and they have been amazing to help add these suggestions to their roadmap.
- But what Dabby and I gained from this survey are consistent pain points across products, areas to focus on and examples to use in our education series.
- We also have research the IBM Accessibility team conducted with IBMers who identify as blind or with low vision. During their interviews, they found their number one challenge was identified as page navigation.
- As designers, we have ability to identify and annotate navigation structure in our sketches, we just need to know what that looks like and what best practices are to follow.
- We then asked our designers, the users of the series we’re creating, What are the two biggest obstacles to making inclusive design or accessibility principles part of your regular design practice? The number one, by far, was lack of education.
- As Dabby and I are building this series, we are considering a lot of their questions as we go along: After analyzing all the designer comments, Dabby said this, which was very relevant to the reason we’re putting this series together:
- We (designers) own the user experience, so why would we assume that accessibility is only the dev team’s responsibility?
- When we work on projects where an application or site is being built, the process takes place within the ecosystem of a team. Accessibility is no different. Each role has a part to play, from product owners making inclusive design a priority, through testing, to verifying compliance
- We can understand our users’ key issues by looking at research into what makes web sites and applications the most inaccessible to them and where they feel excluded. As we mentioned earlier, we also want to understand the challenges that designers face by getting feedback and incorporating their needs into the design series. We then want to take these two sets of needs and create a bridge. How do we plan to do that? By creating a learning series on inclusive design targeted specifically at designers. We'll start with creating small learning blocks out of the identified user needs. Everyone is busy so these small blocks will be tightly focused so you can walk away understanding the keys to implementing them in your designs. The checklist is long, and every item may be important, but not every requirement has the same user impact. We’ll start by focusing on designing with high priority issues in mind. We'll work to avoid jargon when we can and unpack when it’s necessary. We want to provide examples of how some designs exclude some of our users and also how the designs could be made to be more inclusive. We want designers to walk away not only understanding the problems but also provide solutions. Embracing inclusive design is not only the compassionate thing to do for our users, but it will also broaden how you think about design problems, improve your portfolio, and provide you with skills that you can take forward. The building blocks will feed into a cycle of improvement. If zero focus is currently being given to accessibility on a project, then every technique you implement will improve those designs for everyone. By continuing to add new elements, the impact you make will soon be significant, and it won’t feel like effort, but part of your day-to-day process. And perhaps most importantly, unlike Dabby and I or maybe perhaps some of you, you're not in it by yourself. We're proposing a journey that we undertake together with Dabby and I acting as guides. We'll make sure you have the resources you need and that if we don't know the answers, we have contacts that do.
- Unpacking the jargon: Dabby and I have been re-organizing and looking for easier-to-understand definitions for the Web Content Accessibility Guidelines, also known as WCAG.
- The IBM Accessibility team has built an incredible checklist just for designers. It breaks down the WCAG requirements by discipline and Levels for which ones will make the most impact. For those of you that have a little accessibility knowledge to start with, this is perfect for you. If you’re new to some or all of the concepts, that’s ok. We’re breaking these down even further and plan to walk you through it all step by step.
- In addition to user research, we’ve also been keeping an eye on public accessibility news. This study from WebAIM analyzed over 1,000,000 web sites. The graph here shows the top six most common errors on home pages. 96.5% of all 50,000,000 errors fall into these six categories. So imagine, if you could figure out how to fix just these six errors, you’re likely to make a huge impact towards creating accessible products. We’ve considered this as we’re building our series.
- This is the first draft of our journey. We’re planning 30-minute sessions that we’ll be recording and posting to our new YouTube channel. The idea being that you can join in order, or go back and reference just the one area you need a little help with.
- We are intentionally starting with Color & contrast, text styling, and visuals. These are not only the most straight forward to understand, but they are widely used, and will address all six of the most common issues found by the WebAIM study. We’d like to share 3 quick examples from our series, to empower you to start your journey today. We’ll share a little about the approach we’re taking going forward, and hope you’ll join us down the line.
- For the first full session on Color & contrast, we’ve identified several elements that this affects. Each of these areas have an opportunity to show unique examples, but these all generally follow similar guidelines.
- For today, we’ll focus just on Text. This first slide breaks the WCAG language down into “Choose text that sufficiently contrasts with it’s background, including images and gradient backgrounds.” We’ve shared the rule in plain language, identified a couple of best practices, exceptions to the rules, and a link to the actual WCAG regulation for reference.
- Next we’re sharing examples of text that pass and fail contrast requirements. For those of you in the back of the room, the text on your left side and the purple ”hello” is likely easier to see than the grey text on the right. Just to call it out, those of you in the back of the room are likely experiencing a situational vision disability. Your tool to overcome this might be your phone. You take a zoomed in picture and can then zoom in on the image to see what’s on the screen. If it looked like this on your webpage, what tool would you use to see the content?
- Text is often seen on top of images. It’s not that you can’t use it, but with responsive sites that move image placements in every screen size, it’s important that we plan accordingly, and use a consistent color background if the text is needed over an image.
- It’s really easy to check text colors on different background colors, and this tool allows you to make the color just a little bit lighter or darker until you get a passing ratio.
- Finally, we’ll share the number one, simple take away we want our designer-user to take away. Here, even though there’s two different ratios and exceptions, etc, if you make all of your text follow a minimum 4.5:1 ratio, it will always pass. That’s the number one thing to remember for Text color and contrast.
- The second tip we have to share today is about headings and page structure. Remember, that was the number one pain point from our blind and low vision end users. This specifically is referring to headings. “Blind users rely heavily on clear, properly structured headings to understand and navigate content (via a screen reader). The heading structure provides an outline so blind users can quickly understand the organization and contents of the page. So, kind of word-y, but not too bad. Below, it also points out that you should be descriptive, avoid skipping levels and only use one H1 per page.
- So what does it look like? Well, let’s think of it like telling a story. You want your page content to follow a logical order.
- If everything was out of order, could the user make sense of the content?
- Here our user take away is to keep sizes in logical order to tell the best story.
- Our third tip we want to share with you today is about alt text. Alt is short for “alternative”. Providing proper alternative (alt) text for implementation allows blind users to perceive any meaningful visuals on a page (via a screen reader). There are some best practices listed, but let’s see what they look like with real examples.
- If you could remove the image from the page and the content still makes sense, the image is considered decorative. In this case, there would be no alt text added. We want to ensure we tell our dev teammates that the images are decorative because there is specific code that should be added for the screen reader to skip over the image.
- If the image is a logo, or the image adds value to the page content, the the alternative text should be added to describe it. If it’s a logo, we should add that in the description, so the screen reader will read “image, IBM logo”. For the image in this example, the screen reader would read “image, quantum computer displayed behind glass.” Notice we didn’t include the people in the image as part of the description, because they are not why the image is important to the page. The image shows what a quantum computer looks like, which is the purpose of the image, and how we describe it in alt text.
- If there is a icon that functions on the page, like here where there is a group of them performing navigation functions, then those icons should be described with alt text.
- If you have a more complex image, such as a screenshot of a webpage, the description might be longer. You have to determine the purpose of the image, and focus the description on that, but be sure to include relevant details.
- Another type of complex image we see in digital products are data tables. In this case, the alt text should describe the purpose (or the “why”) of the overall table, and the caption shows it’s primary findings. For this example, the screen reader would read “image, bar chart showing month’s daily sales against historical averages” for the image, and the caption as “Monthly revenue went up 20% year over year”.
- For alt text, we have two user takeaways. First, decorative images don’t need alt text.
- And, if it is a meaningful image, it should have a simple, direct description that shares the purpose of the image, logo or icon.
- We wanted to leave you with some resources to take with you.
- A
- Any questions?
- Thank you!