Practical ARIA Examples
I have written a book about web application accessibility using WAI-ARIA for Smashing Magazine — the first of its kind. This popular page hosts all of the examples from the book and more.
People and blogs involved with and about the IndieWeb community, the fediverse, and/or the open web in general.
Revenge.css
REVENGE.CSS
Revenge.css is a CSS bookmarklet that reports bad html using pseudo content. If the page you use it with has malformed links, deprecated attributes,<div>s inside inline elements, inaccessible buttons, badly nested sections or other errors, you'll see some ugly, pink errors written in nobody's favourite font: Comic Sans.
Paragrabbr
Paragrabbr
I use Paragrabbr a lot. It's a lorem ipsum generator I wrote in AngularJS which includes special punctuation — like em dashes — and phrasing elements like <a>, <strong> and even <kbd>. Helps you get your type design detail right.
Auticons
Auticons Icon Font
Auticons is an icon font and CSS set that harnesses the awesome power of attribute selectors. It places resolution independent icons before or after any hyperlink with an href that matches a certain, expected pattern. In other words, it's an automatic icon font.
Squib Font
Squib Font
The name Squib comes from "Square" and "Slab". Squib supports a total of 165 characters, including all the basic punctuation characters and common Western European accents. It also has an eszett!
Reinventing The Hyperlink
Hi everybody! I've just done a lot of cocaine on the company expense account and I want to talk to you about navigational action controls called "hyperlinks" and how to design them into your enterprise-level web application portfolio. YEEEHAWWW.
What is a hyperlink?
Back in ...
Apps For All: Praise And Errata
In case you weren't already aware, I wrote a book. This is an unusual book since it is a whole technical book dedicated to making web applications accessible. Want to understand how to make dynamic, interactive applications that don't alienate and annoy folks? Using WAI-ARIA...
Confessions Of A CSS Expert
"I guess it all started pretty innocently enough. The UX guys would be asking for a new module or something. You know the sort of thing: a search box or paginator. Whatever. So I'd give that block a class like 'search-widget' or 'paginator'; something to make my stylesheet m...
The Accessible Current Page Link Conundrum
When I’m done staring with fear-induced catalepsy at the vast array of complex and overlapping app building, testing, integration and deployment tools that are quickly amassing around me, I like to take a little break and try to solve a simple problem. The “current page” lin...
Shrinking Button Outlines
.test-button, .test-button-2 {
cursor: pointer;
border: 0;
font-family: inherit;
display: inline-block;
margin: 1.5em auto;
font-size: 1.5em;
border-radius: 0;
background-color: #802626;
padding: 0.25em 1em;
color: #fff;
outline: 2px solid transparent;
outline-offset: 50p...
Tetris And The Power Of CSS
To be really good at CSS, you have to learn CSS. I know this sounds like a tautology but I've become aware of a peculiar attitude that preprocessors such as SASS are somehow successors to CSS. Some SASS and LESS nerds are fond of proliferating the following aphorism. It shou...
Design Clients On Famous Logotypes
For this article, I took a sample of corporate and small business design clients, erased their memories (with a "mind rubber"), then asked them to critique a small selection of highly prolific and famous commercial logotypes.
To them, this would be the first time they had s...
Accessible Buttons Jquery Plugin
Please note: The following should be considered an experiment. There is rarely a good reason not to use a <button> element for button-like controls, especially if it means loading a javascript resource just to polfill the behaviors that <button> already offers.
...
Font Hacking
What if I told you there was a way to radically alter your web pages without using images, javascript, proprietary CSS3 or any extra markup? What if I told you you didn't have to be an experienced typographer, you could do it for little more than 6Kb and that it would work i...
Pingomatic For Perch
I love the Perch CMS. It isn't crammed with features and plugins to placate each and every type of developer; it just does the Content Management task really well. Nonetheless, every so often I look for a little tool that Wordpress-derived muscle memory tells me should be pr...
CSS Is Not Simple
In CSS, there are four ways to visually position HTML elements within your web page. These are static, relative, absolute and fixed. There can be a great deal of confusion when it comes to discerning between these values, so I'd like to help clear things up.
Or perhaps no...
An App Icon Font
My 'Heydings Icons' font has been doing the rounds for some time now, and I am proud to have been one of the early innovators to release a completely free, embeddable icon font for web UI designers. However, until now I have singularly failed to promote the availability of H...
Types Of Web Developer
To say one is a Web Developer is similar to saying one is an engineer. Without further clarification, the label means very little. To help with apprehending the various specialisms within the field, I have created this transparently cynical piece of link bait. My list is by ...
A Perch XML Sitemap
One of the best things about the Perch CMS is its lack of boilerplate. In fact, Perch creator Rachel Andrew is quite opposed to such bloated, polyfill-ridden framework code. Why include a mass of default code you've yet to decide you even need? The performance hit is just no...
Vintage Tobacco Advertising
Rock and roll has always been a contrary form of music. At once 'the devil's music' and the soundtrack to the American Dream, it has leant itself to as much commercial dogma as rebellious transgression. Rock and roll is both savage and servile. It's sexual awakenings and aut...