CSS Lists, Markers, And Counters

There is more to styling lists in CSS than you might think. In this article, Rachel starts by looking at lists in CSS, and moving onto some interesting features defined in the CSS Lists specification — markers and counters.   Lists in CSS have particular properties which give us the standard list styling we expect.

Functions to Add ARIA to Tables and Lists

… Generally when I write and present things, I provide techniques, ideas, examples, and experience to address issues. When I write copy-paste-ready code, with a few older exceptions, I write generic code not tied to a framework nor library. … I have, however, written a couple vanilla JavaScript functions that you can drop into your

VoiceOver and list-style-type: none – Unfettered Thoughts

A bug that keeps hitting me at work is VoiceOver not announcing unordered lists properly when either the list-style-type is set to none or display is set to inline. The expected behavior is that the unordered list is announced with a role of list along with the number of items, for example “list 4 items.”

WICG/focus-visible: Polyfill for `:focus-visible`

Based on the proposed CSS :focus-visible pseudo-selector, this prototype adds a focus-visible class to the focused element, in situations in which the :focus-visible pseudo-selector should match. … Curated by (Lifekludger) Read full article at Source: GitHub – WICG/focus-visible: Polyfill for `:focus-visible`

Focusing on Focus Styles

Not everyone uses a mouse to browse the internet. If you’re reading this post on a smartphone, this is obvious! What’s also worth pointing out is that there are other forms of input that people use to get things done. With these forms of input comes the need for focus styles. #People People are complicated.

How to create a simple CSS loading spinner & make it accessible

Since CSS animations are now so well supported using an animated .gif for a loading spinner is now no longer necessary. The mighty Developer Jon Pearse, showed me how to make a CSS loading spinner so I thought I’d share his technique using a flexible SCSS mixin step by step. This spinner will work in

Short note on what CSS display properties do to table semantics

The CSS display properties are powerful. You can change the visual display of elements to match your desired styling, but sometimes doing this can have an unintended effect of nuking the semantics of the elements, as conveyed to screen reading software, in the browser accessibility tree. Screen readers and other assistive tech, in general, do not have direct

Advocating for Accessible UI Design | CSS-Tricks

Accessibility is a hot topic these days, and the older we web-makers get, the hotter it’s going to become! That might be a snarky outlook, but what I’m trying to say is that it’s about time we start designing the web for everyone because the web was meant to be for everyone, and less and less are

The math of CSS locks

A CSS lock is a Responsive Web Design technique that lets you transition smoothly between two values, depending on the current viewport size, rather than jump straight from one value to the other. … I found this technique in Tim’s article and, when I tried wrapping my head around it, and creating variants of it,

Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility | CSS-Tricks

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