Select Page

Category: Accessibility

Unbuttoning Buttons

We dug into overriding default buttons styles not long ago here on CSS-Tricks. With garden-variety fully cross-browser-supported styles, you’re looking at 6-10 CSS rules to tear down anything you need to off a button and then put in place your own styles. Hardly a big deal if you ask me, especially since it’s extremely likely you’ll be styling buttons anyway. Scott O’Hara has taken a look as well. I think the solution offered to use a is a little bizarre since you need bring your own keyboard handling with is non-trivial and requires JavaScript. But there are a couple of interesting other CSS explorations, neither of which stacked up for different reasons: display: contents; – some semantics-based accessibility problems. all: unset; – doesn’t reset display value, not good enough browser support. Direct Link to Article — Permalink The post Unbuttoning Buttons appeared first on CSS-Tricks....

Read More

Nested Links

The other day I posted an image, quite literally as a thought exercise, about how you might accomplish “nested” links. That is, a big container that is linked to one URL that contains a smaller container or text link inside of it that goes to another URL. That’s harder than it might seem at first glance. The main reason being that… Outside Inside Eric Meyer once called for more flexible linking, but even that doesn’t quite handle a situation where one link is nested inside another. Here’s what happens with that HTML, by the way: The nested link gets...

Read More

Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility

For a beginner, accessibility can be daunting. With all of the best intentions in the world, the learning curve to developing compliant, fully accessible websites and apps is huge. It’s also hard to find the right advice, because it’s an ever-changing and increasingly crowded landscape. I’ve written this post to give you some tips on small things that can make a big difference, while hopefully not affecting your development process too much. Let’s dive in! Document Structure and Semantics It probably doesn’t come as much of a surprise that structuring your HTML in an organized, semantic way will make a big difference. Screen readers rely on a well-structured document in order to follow a coherent narrative, so make sure that you’re using the elements that the HTML5 spec provides responsively and effectively. If you’re unsure about how to markup your work correctly, check out resources such as HTML5 Doctor, Code Academy and of course, CSS-Tricks. You can also check out articles like “Writing HTML with accessibility in mind” and “Semantic Structure” to get you going in the right direction. Let’s look at three specific things that can help ensure a well-structured and semantic document. Use a Single Element A good example of building a responsible, semantic document structure is only using one element. This should serve as a signpost for the most important content of the page for your...

Read More

How to Disable Links

The topic of disabling links popped up at my work the other day. Somehow, a “disabled” anchor style was added to our typography styles last year when I wasn’t looking. There is a problem though: there is no real way to disable an link (with a valid href attribute) in HTML. Not to mention, why would you even want to? Links are the basis of the web. At a certain point, it looked like my co-workers were not going to accept this fact, so I started thinking of how this could be accomplished. Knowing that it would take a...

Read More

Stop Designing For Only 85% Of Users: Nailing Accessibility In Design

As designers, we like to think we are solution-based. But whereas we wouldn’t hesitate to call out a museum made inaccessible by a lack of wheelchair ramps, many of us still remain somewhat oblivious to flaws in our user interfaces. Poor visual design, in particular, can be a barrier to a good user experience. Whereas disability advocacy has long focused on ways to help the user adapt to the situation, we have reached a point where users expect products to be optimized for a broad range of needs....

Read More
  • 1
  • 2
000webhost logo