Chris Ashton

dai11y 27/04/2021

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:
  • 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;

Did you know that you can subscribe to dai11y, week11y, fortnight11y or 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.