Playing with modern CSS (sibling-index(), sibling-count(), @​stating-style, @​property, mask, math, etc) 🤩

ANDI (Accessible Name & Description Inspector) is a free accessibility testing tool used by people testing for Section 508 compliance. ANDI can't detect everything, but can find some issues and give some suggestions to improve the issues it detects.

www.ssa.gov/accessibilit...

"Code generation tools which pretend to abstract out something, like all abstractions, leak, and the only way to deal with the leaks competently is to learn about how the abstractions work and what they are abstracting. So the abstractions save us time working, but they don’t save us time learning."

amazing what a few lines of #css can do

https://codepen.io/argyleink/pen/LEYOgxy

One of my faves out of the @codepen.io demos I've made lately: gradual selective saturation on hover codepen.io/thebabydino/...

Single img with a .jpg source in a figure, no duplicating the image on a background or anything, just some #CSS + #SVG #filter magic.

Inspired by x.com/snorklTV/sta...

Mit dem Barrierefreiheitsstärkungsgesetz (#BFSG) am Horizont haben viele Leute, die Websites betreiben, Accessibility verstärkt auf dem Schirm. Leider gibt es immer noch viele falsche Annahmen rund um barrierefeie Websites. Hier werden einige widerlegt: a11ymyths.com

Mozilla will sich wieder mehr auf Firefox konzentrieren! Wenn sie es richtig machen, könnte das die Adaption neuer CSS-Features deutlich beschleunigen. www.heise.de/news/Mozilla...

The same photo could appear on three different pages and require different alt text for each instance. The alt text for an image can vary, depending on the context of the image, its role on the page, and the intended message.

If you have an election results chart, the alt text needs to communicate the results. "Election results" is not enough. The same rules apply for alt text for images of weather charts. "Weather chart" doesn't cut it and doesn't convey what the chart is actually saying to users.

Alt text is not the same as a photo caption. Captions are typically written to support a photo, and usually depend on users being able to see the photo. But alt text is meant to be the stand-in for the photo. The alt text is what a screen reader user gets in place of the photo.

Steamboat Willie in 4k, digitized from 16mm film: archive.org/details/stea...

Seid ihr gut ins Jahr 2024 gekommen? Wir sind aus der Winterpause zurück und bereit, das Jahr zu rocken!

Avoid using emoji as bullet points in social media posts. An emoji has a coded description that gets read by screen readers, and thus could confuse users who think that's part of the content. If you can't use standard lists, use dashes for bullet points or add line breaks.

Don't use headings to arbitrarily style text. If you apply “Heading 4” style, you add a <h4> heading tag to the item. When screen reader users navigate from heading to heading, the item will be treated as a heading. This will be confusing. Only treat actual headings as headings.

Consistent layout makes websites easier to navigate and understand as it helps users learn what elements to expect and in what order. This is especially helpful to low vision users or blind users using a screen reader. It also helps those with cognitive and learning disabilities.

#tinyCSStip
An absolutely positioned child/ pseudo with
`inset: 0`
covers its parent's `padding-box`.

See twitter.com/anatudor/sta...

If the parent has a `border` and you want the entire `border-box` covered, then you need to set `inset` to the value of the `border-width` *with minus*.

Hallo Welt 👋