Your daily frequent11y newsletter, brought to you by @ChrisBAshton:

Modern CSS Upgrades To Improve Accessibility

• Stephanie Eckles shares some useful CSS tips. I’ve cherry-picked some highlights:
• The use of max() to ensure that a focus outline is always at least 1px wide, whilst allowing it to be relatively sized with em:
  • button:focus { outline: max(1px, 0.1em) solid red }
• Use of focus-visible to only apply focus styles when you’ve tabbed in via a keyboard (not mouse click):
  • button:focus-visible { ... }
• Use of CSS grid to maintain the correct tab list order across multiple columns:
  • This can’t be easily summarised in one line, so worth reading this section of the article.
• Stephanie uses currentColor throughout her examples. I don’t remember coming across it before, but it’s a way in CSS of defining a colour throughout your component, so that you only have to set that colour in one place. That’s not explained in the article, but there’s a good write-up of currentColor on DigitalOcean.
• Finally, I love this quick global rule for disabling animations for users who prefer reduces motion:
  • @media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behaviour: auto !important;
}
}

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.