I attended SxSW Interactive last week in Ausin, Texas. Two highlights of the conference were the CSS panels on Monday morning: Hi-Fi Design with CSS and CSS: The Good, the Bad and the Ugly. Several of the slides from these presentations are available online:
- Dan Cederholm: Accessible Tabs with CSS
- Dave Shea: Hi-Fi Design with CSS
- Douglas Bowman: Hi-Fi Design with CSS
- Douglas Bowman: CSS: The Good, the Bad, & the Ugly
There was great information presented in all of the above, but the point that struck home hardest, at least for me, was when Doug Bowman anounced the infamous Fahrner Image Replacement technique deprecated. Image replacement techniques are CSS methods of replacing text with an image, with FIH the first and most famous. Although designed to improve accessibility, the technique actually has the opposite effect thanks to many screen readers ignoring text that has been set to display: none in the CSS. Joe Clark’s article in A List Apart from last year has the full technical details.
Various other image replacement techniques have sprung up to replace FIR, but so far every one of them has the distinct disadvantage of rendering content completely invisible for users with images turned off in their browser. I myself have run in to this while browsing with Opera 7 on a dial-up connection as Opera provides a fantastically useful keyboard shortcut (‘g’) to instantly disable and re-enable images, allowing for dramatically improved browsing performance.
My recommendation is to avoid image replacement techniques unless the usability of the site is not hugely affected by the replaced text not being visible at all. Unfortunately this rules the technique out in most cases. Remember though, from an accessibility point of view an image with a properly chosen alt attribute is just as accessible as plain HTM text!
One of the panels I missed was Accessibility for Everyone. Thankfully, Jeffrey Veen has posted the notes he used for his part of the panel: I don’t care about accessibility. Jeffrey’s point is that properly created sites using modern techniques don’t need to worry about accessibility because it pretty much comes as default if you build the site correctly in the first place. I couldn’t agree more.
Using Redis with Node.js
By Ivaylo Gerchev,
Need fast data interactions in your Node app? Learn how Redis speeds caching, message brokering, sessions, analytics, streaming and more.
Build a Website with React and Tailwind CSS
By Shahed Nasser,
React and Tailwind CSS: a beautiful relationship! Learn how Tailwind frees you from writing CSS so you can focus on your React components.
React Fragments: A Simple Syntax to Improve Performance
By Antonello Zanini,
React fragments provide a simple syntax to group a list of HTML elements without adding unnecessary nodes to the DOM. Here's how.