Articles Tagged accessibility

It’s true, web animation can be accessible! Sometimes it just takes a little extra effort to make sure that it is. There are strategic things we can do to make sure our animations have a positive impact on accessibility, like planning how they contribute to the overall UX and ease of use of our site. There are also more tactical considerations for making sure the animations on our site are accessible, and that’s where the Web Content Accessibility Guidelines (WCAG)… Read article “Accessible Web Animation: The WCAG on Animation Explained”

Have you ever come across a site where light text is sitting on a light background image? If you have, you’ll know how difficult that is to read. A popular way to avoid that is to use a transparent overlay. But this leads to an important question: Just how transparent should that overlay be? It’s not like we’re always dealing with the same font sizes, weights, and colors, and, of course, different images will result in different contrasts.

Trying … Read article “Nailing the Perfect Contrast Between Light Text and a Background Image”

Let’s say you have a double heading situation going on. A little one on top of a big one. It comes up, I dunno, a billion times a day, I’d say. What HTML do you go for? Dare I say, it depends? But have you considered all the options? And how those options play out semantically and accessibility-y?

As we do around here sometimes, let’s take a stroll through the options.… Read article “HTML for Subheadings and Headings”

You know the title attribute? I can do this:

<div title="The Title"I'm a div with a `title`
</div

And now if I’m on a device with a mouse pointer and hover the cursor over that element, I get…… Read article “SVG Title vs. HTML Title Attribute”

Ethan:

I’ve been working with Aquent Gymnasium to produce a series of five short tutorial videos, which have been launching over the course of this past week. Since the last video just went live, I’m thrilled to share the whole list with you:

• Introduction to using VoiceOver on macOS
• Designing beautiful focus states
• Flexible and accessible typesetting
• Responsively designing with viewport units
• Designing beautiful and accessible drop caps

Five minutes is a real sweet … Read article “Five 5-minute Videos from Ethan on Design & Accessibility”

Here’s the plan! We’re going to build a styled select element. Not just the outside, but the inside too. Total styling control. Plus we’re going to make it accessible. We’re not going to try to replicate everything that the browser does by default with a native <select> element. We’re going to literally use a <select> element when any assistive tech is used. But when a mouse is being used, we’ll show the styled version and make it function as … Read article “Striking a Balance Between Native and Custom Select Elements”

I was reading this article by Chris where he talks about block links — you know, like wrapping an entire card element inside an anchor — being a bad idea. It’s bad accessibility because of how it affects screen readers. And it’s bad UX because it prevents simple user tasks, like selecting text.

But maybe there’s something else at play. Maybe it’s less an issue with the pattern than the implementation of it. That led me to believe that this … Read article “Block Links: The Search for a Perfect Solution”

The accessibility trick is using <input type="range"> and wrestling it into shape with CSS rather than giving up and re-building it with divs or whatever and later forget about accessibility.

The most clever example uses an angled linear-gradient background making the input look like a volume slider where left = low and right = high.… Read article “Creating an Accessible Range Slider with CSS”