Part of an ongoing series in which I create art using only CSS and HTML. Inspired by video game character creation screens. Rules I have for myself: All elements must be typed out by hand, and only Atom text editor and Chrome Developer Tools allowed.
What if I told you you could use a single property value to turn multiple different values on and off across multiple different properties and even across multiple CSS rules? What if I told you you could turn this flat button into a glossy skeuomorphic button by just tweaking one custom property –is-raised, and that would set its border, background image, box and text shadows in one fell swoop?
Chrome 86 just shipped with support for :focus-visible, Firefox supports it via the :-moz-focusring pseudo-class since 2011 and Mozilla is currently working on adding support for :focus-visible, too. So you can start using it now. And once more, progressive enhancement is your friend here. You can define regular focus styles for non-supporting browsers and then overwrite them for browsers that support :focus-visible.
Since Chromium 69 (September 3rd 2018), logical properties and values have helped developers maintain control of their international layouts through logical, rather than physical, direction and dimension styles. In Chromium 87, shorthands and offsets have shipped to make these logical properties and values a bit easier to write. This catches Chromium up to Firefox, which has had support for the shorthands since 66. Safari has them ready in their tech preview.
In this episode, I’ll explain the structure to the Web Content Accessibility Guidelines — WCAG — and how you can start following their requirements. The Web Content Accessibility Guidelines are a set of principles, guidelines and success criteria that lead you to accessible web content.
In this episode, I’ll explain why this key, the tab key, is so important for making the web accessible. Keyboard Accessible, Guideline 2.1, is one of the most important Guidelines in WCAG 2: All functionality on a website or in an app must be available from a keyboard. This allows users to use it without using a mouse or another pointer, for example the finger on touch screens.
Making the web accessible is not dependent on one single technology or approach. It depends on layers of different technologies that all need to work together to make a website accessible. Today, I’ll show what the most important technologies are, and how they work together.