Accessibility
A Web Designer’s Accessibility Advocacy Toolkit
A Web Designer’s Accessibility Advocacy Toolkit A Web Designer’s Accessibility Advocacy Toolkit Yichan Wang 2024-02-26T18:00:00+00:00 2024-02-28T15:46:43+00:00 Web accessibility can be challenging, particularly for clients unfamiliar with tech or compliance with The Americans With Disabilities Act (ADA). My role as a digital designer often involves guiding clients toward ADA-compliant web designs. I’ve acquired many strategies over the years for encouraging clients to adopt accessible web practices and invest in accessible user interfaces. It’s something that comes up with nearly every new project, and I decided to develop a personal toolkit to help me make the case. Now, I am opening up my toolkit for you to have and use. While some…
A Practical Guide To Designing For Colorblind People
A Practical Guide To Designing For Colorblind People A Practical Guide To Designing For Colorblind People Vitaly Friedman 2024-02-20T12:00:00+00:00 2024-02-21T16:05:27+00:00 Too often, accessibility is seen as a checklist, but it’s much more complex than that. We might be using a good contrast for our colors, but then, if these colors are perceived very differently by people, it can make interfaces extremely difficult to use. Depending on our color combinations, people with color weakness or who are colorblind won’t be able to tell them apart. Here are key points for designing with colorbliness — for better and more reliable color choices. .course-intro{–shadow-color:206deg 31% 60%;background-color:#eaf6ff;border:1px solid #ecf4ff;box-shadow:0 .5px .6px hsl(var(–shadow-color) / .36),0…
Mobile Accessibility Barriers For Assistive Technology Users
Mobile Accessibility Barriers For Assistive Technology Users Mobile Accessibility Barriers For Assistive Technology Users Kate Kalcevich 2024-02-19T10:00:00+00:00 2024-02-21T16:05:27+00:00 I often hear that native mobile app accessibility is more challenging than web accessibility. Teams don’t know where to start, where to find guidance on mobile accessibility, or how to prevent mobile-specific accessibility barriers. As someone who works for a company with an active community of mobile assistive technology users, I get to learn about the challenges from the user’s perspective. In fact, I recently ran a survey with our community about their experiences with mobile accessibility, and I’d like to share what I learned with you. If you only remember one…
How Accessibility Standards Can Empower Better Chart Visual Design
How Accessibility Standards Can Empower Better Chart Visual Design How Accessibility Standards Can Empower Better Chart Visual Design Kent Eisenhuth 2024-02-14T15:00:00+00:00 2024-02-21T16:05:27+00:00 Data visualizations are graphics that leverage our visual system and innate capabilities to gather, accumulate, and process information in our environment, as shown in the animation in Figure 1.0. Figure 1.0. An animation demonstrating our preattentive processing capability. Based on a lecture by Dr. Stephen Franconeri. (Large preview) As a result, we’re able to quickly spot trends, patterns, and outliers in all the images we see. Can you spot the visual patterns in Figure 1.1? Figure 1.1. Pattern groups defined by size, borders, fills, and shape types. (Large…
You May Also Like
Creating Accessible UI Animations
A Practical Guide To Designing For Children
A Practical Guide To Designing For Children A Practical Guide To Designing For Children Vitaly Friedman 2024-02-13T12:00:00+00:00 2024-02-21T16:05:27+00:00 Children start interacting with the web when they are 3–5 years old. How do we design for children? What do we need to keep in mind while doing so? And how do we meet the expectations of the most demanding users you can possibly find: parents? Well, let’s find out. .course-intro{–shadow-color:206deg 31% 60%;background-color:#eaf6ff;border:1px solid #ecf4ff;box-shadow:0 .5px .6px hsl(var(–shadow-color) / .36),0 1.7px 1.9px -.8px hsl(var(–shadow-color) / .36),0 4.2px 4.7px -1.7px hsl(var(–shadow-color) / .36),.1px 10.3px 11.6px -2.5px hsl(var(–shadow-color) / .36);border-radius:11px;padding:1.35rem 1.65rem}@media (prefers-color-scheme:dark){.course-intro{–shadow-color:199deg 63% 6%;border-color:var(–block-separator-color,#244654);background-color:var(–accent-box-color,#19313c)}} This article is part of our ongoing series on design…
A Guide To Designing For Older Adults
A Guide To Designing For Older Adults A Guide To Designing For Older Adults Vitaly Friedman 2024-02-06T08:00:00+00:00 2024-02-21T16:05:27+00:00 Today, one billion people are 60 years or older. That’s 12% of the entire world population, and the age group is growing faster than any other group. Yet, online, the needs of older adults are often overlooked or omitted. So what do we need to consider to make our designs more inclusive for older adults? Well, let’s take a closer look. .course-intro{–shadow-color:206deg 31% 60%;background-color:#eaf6ff;border:1px solid #ecf4ff;box-shadow:0 .5px .6px hsl(var(–shadow-color) / .36),0 1.7px 1.9px -.8px hsl(var(–shadow-color) / .36),0 4.2px 4.7px -1.7px hsl(var(–shadow-color) / .36),.1px 10.3px 11.6px -2.5px hsl(var(–shadow-color) / .36);border-radius:11px;padding:1.35rem 1.65rem}@media (prefers-color-scheme:dark){.course-intro{–shadow-color:199deg 63%…
Creating Accessible UI Animations
Creating Accessible UI Animations Creating Accessible UI Animations Oriana García 2023-11-10T10:00:00+00:00 2024-02-21T16:05:27+00:00 Ever since I started practicing user interface design, I’ve always believed that animations are an added bonus for enhancing user experiences. After all, who hasn’t been captivated by interfaces created for state-of-the-art devices with their impressive effects, flips, parallax, glitter, and the like? It truly creates an enjoyable and immersive experience, don’t you think? Mercado Libre is the leading e-commerce and fintech platform in Latin America, and we leverage animations to guide users through our products and provide real-time feedback. Plus, the animations add a touch of fun by creating an engaging interface that invites users to interact…
You May Also Like
How Accessibility Standards Can Empower Better Chart Visual Design
Addressing Accessibility Concerns With Using Fluid Type
Addressing Accessibility Concerns With Using Fluid Type Addressing Accessibility Concerns With Using Fluid Type Maxwell Barvian 2023-11-07T18:00:00+00:00 2024-02-21T16:05:27+00:00 You may already be familiar with the CSS clamp() function. You may even be using it to fluidly scale a font size based on the browser viewport. Adrian Bece demonstrated the concept in another Smashing Magazine article just last year. It’s a clever CSS “trick” that has been floating around for a while. But if you’ve used the clamp()-based fluid type technique yourself, then you may have also run into articles that offer a warning about it. For example, Adrian mentions this in his article: “It’s important to reiterate that using rem…
A Roundup Of WCAG 2.2 Explainers
A Roundup Of WCAG 2.2 Explainers A Roundup Of WCAG 2.2 Explainers Geoff Graham 2023-10-20T13:00:00+00:00 2024-02-21T16:05:27+00:00 WCAG 2.2 is officially the latest version of the Web Content Accessibility Guidelines now that it has become a “W3C Recommended” web standard as of October 5. The changes between WCAG 2.1 and 2.2 are nicely summed up in “What’s New in WCAG 2.2”: “WCAG 2.2 provides 9 additional success criteria since WCAG 2.1. […] The 2.0 and 2.1 success criteria are essentially the same in 2.2, with one exception: 4.1.1 Parsing is obsolete and removed from WCAG 2.2.” This article is not a deep look at the changes, what they mean, and how…
WaterBear: Building A Free Platform For Impactful Documentaries (Part 2)
WaterBear: Building A Free Platform For Impactful Documentaries (Part 2) WaterBear: Building A Free Platform For Impactful Documentaries (Part 2) Adrian Bece 2023-10-02T18:00:00+00:00 2024-02-21T16:05:27+00:00 In my previous article, I talked about Waterbear, a significant project I worked on as a newly-appointed lead developer, and the lessons I learned leading a team for the first time. In this second article, I’ll go over some key technical highlights from the project. Before we start, let’s quickly remind ourselves what WaterBear is all about and what makes it so interesting. WaterBear is a free platform bringing together inspiration and action with award-winning high-production environmental documentaries covering various topics, from animals and climate change…
