Just the other day, I went to code a submit button for a form. Should be pretty straightforward. Well how come this is what I wrote, then?

<table>
  <td>
    <a class="submit">
      <img src="submit-image.bmp">
    </a>
  </td>
</table>

I’ve had complaints from users saying they “can’t use this shit” and mean developer “friends” have pointed and laughed at me, like it’s some sort of failing on my part.

But let’s look at the facts:

1. I have a degree in computer science
2. I literally probably have a really high IQ. That stands to reason.
3. I live in San Francisco
4. That’s where Silicon Valley is. Ever heard of it??

I may have majored in computer science, but I minored in rationalist scientific enquiry. I say minored; it was more of a hobby. Anyway, given the FACTS provided above, if I see myself writing shit code I can only draw one logical conclusion:

It’s not me who’s stupid, it’s you. You stupidly designed the stupid thing I’m trying to use stupidly and it’s all your fault. Stupid HTML standardista stupid bum faces.

I rest my case.

But if that isn’t enough to convince you that HTML is trying to make me look bad, wait until you see just how poorly HTML deals with basic arithmetic! Consider the following code example:

<p> + <i>

Which of the following do you think the above code evaluates as? The answer may surprise you.

1. <p><i>
2. <pi>
3. π
4. IT JUST WRITES IT OUT THE SAME THEN COMPLAINS AT ME ABOUT MISSING CLOSING TAGS WHATEVER THEY ARE??1!!?1!

I can do basic arithmetic, HTML. Why can’t you? Oh, you’re a “markup language” are you? Well bully for you. I didn’t learn about HTML in my Ivy League university of choice, so how could I know that?

Fine, whatever. When there’s an international standard for formatting and transmitting digital information available, I’LL USE IT TO FUCKING WELL LOOK UP WHAT HTML IS, HOW ABOUT THAT?

Idea for this article from @petervangrieken.

If you’re struggling with the finer points of writing accessible markup, I have a new blog called Inclusive Components which explores the inclusive design of web interfaces.

Victims included those with Down syndrome, cerebral palsy, and various localized deformities. A district judge, Lothar Kreyssig, wrote to protest against the programme. The minister of justice, Franz Gürtner, replied: “If you cannot recognize the will of the Führer as a source of law, then you cannot remain a judge.”

Kreyssig was deposed. In towns hosting killing centers, residents reported the persistent smell of burnt human hair.

The Nazis believed disabled people were better off dead. I’ll leave you to decide whether they felt it was better for the ‘patients’, better for the Nazi vision of society from which they were being expunged, or better for both. In any case, the Nazis saw no value in these people.

So it was under German fascism. Since the 40s, fascists operating within ostensible democracies have had to find ways to obfuscate their intentions, including their disableist ones. And I don’t just mean the ability to hide behind digitally transmitted pictures of cartoon frogs.

Of course there are obvious displays of ignorance, like Donald Trump referring to deaf actress Marlee Matlin as “retarded”, or Betsy DeVos having seemingly no understanding of The Individuals With Disabilities Education Act. But it runs much deeper than this.

Attorney General appointee, Jeff Sessions is on record saying he believes protections helping to integrate disabled children have accelerated the decline of “civility and discipline” in mainstream classrooms. The notion that groups which include disabled people are less civilized as a result is particularly striking for its fascistic overtones.

That’s not to say Sessions outright proposes the eradication of the disabled from society, Nazi-style. But, then again, he wouldn’t have to. There’s a more passive way of killing off those deemed surplus, and that’s by letting them die neoliberalism-style. That’s precisely what the slashing of Medicaid, the trashing of the ACA, the segregation and disenfranchisement of the disabled in education, and the diminishing of workplace rights would mean.

Of course, to get away with this you need an alibi. And that alibi comes in the form of a particular brand of freedom. According to the Milton Friedman school of free market economics, true deregulation will lead to the eradication of discrimination. Why? Because there’s money to be made by and from all types of people. Pure market forces, we’re told, are “color blind”. Ergo, cutting state support for the vulnerable is actually good for them!

There’s just one problem with this ideology: It’s a trap. The rich establishment don’t need intervention and support from the state. At the point that it is removed, they are placed at an increased advantage, happily able to exploit the market and those now placed at its mercy.

The market has no mercy. That’s the point. But like the Christofascist God for which it makes a telling analogue, it cannot be questioned. To tamper with market forces means to defy its will. Accordingly, when the Americans With Disabilities Act (ADA) was first discussed at the start of the 1990s, it was met with opposition. Business leaders argued it represented a reregulation of the labor market, which ultimately would lead to greater opportunities for discrimination.

This was all completely disingenuous, of course. These people don’t really believe in God or the free market. They want to be free to discriminate as they please, for greater personal gain, and for everyone else to believe they are entitled to do so guilt free. They are interested in being Gods.

One way this is achieved is by erasing the meaning of being disabled. It is for good reason that many object to the term “differently abled”: Differently abled implies equally abled, and equally abled means you can weather the “mysterious ways” of the market just as well as me. You don’t need support or special treatment.

This works as well for mental health as for physical: As a depressive, I’m told it is my choice to feel that way; I’m just wallowing. There’s a gleeful orgy of futility happening down at the marketplace, and I don’t want to get on the bus. It’s my own fault I’m missing out.

Another way of leveraging the concept of the market to defer guilt is through the notion of niche. Friedman’s model imagines greater prosperity for all, but that’s not to say the market would become homogenous. There would still be sectors and segments; varieties of business and product.

By characterizing disability as a discrete ‘target’ group, the aim is to excuse the creation of products and services which do not cater for disability. “Oh I’m not making things for disabled people. But I’m sure someone else is, don’t worry. Such-and-such law of economics states it must be so.”

Disability does not work that way, though. It isn’t a discrete community or field of interest. It is complex, multifaceted and pervades all kinds of cultural identity through race, socio-economic level, gender identity, and faith. If you create an inaccessible product or service, you are almost guaranteed to be disenfranchising someone, including your future self.

It is because disability is such a broad category of human experience that it’s so easy to neglect. Even some of those trying to combat discrimination and bigotry have trouble grappling with disability rights as civil rights. It was, after all, amid concerns that the Women’s Marches did not originally include a clear statement on accessibility that the virtual march was conceived.

A few things to remember

Firstly, try not to snort at “armchair activists”. Some don’t have the choice. They’d like to march, but they simply can’t.

Secondly, be wary of people who insist on removing politics from conversation or company policy. The official position is that we live in a meritocracy, benevolently guided by market forces, so positive discrimination is not necessary. You’ll find that it is only the ones who are already well represented and paid that take this stance (remember the ‘trap’ I described previously).

It’s more passive and less transparent to discourage political discourse than it is to outright tell someone that their politics is not welcome. If someone tells you to “take the politics” out of what you’re doing, or to “stop making things political”, it’s not because anything benefits from being less political as such. It’s because they don’t want to make room for your politics in that space. That would mean taking some of theirs out. Well screw that; resist.

Thirdly, be aware that making accessible products and interfaces under a regime that regresses on disability rights is resistance. It goes against the prevailing ideology. Do it loudly and help others get up to speed. This is especially important when devising protests and related resources. When you’re inclusive, you reach more allies.

Finally, whether or not you believe it is right or sensible to punch a neo-nazi, remember that not everyone who might like to punch a neo-nazi has the physical strength, the dexterity, or even the appendage to do so. And some of these people would be first in line if they did, because they know fascists are the kind of cowards that pick on them first. Accordingly, whether you aim to do it literally or figuratively, punch a neo-nazi for someone who can’t.

I’m not convinced the far right will develop a sudden fondness for anyone with a better tan than them, doctors and scientists will be respected and revered for actually knowing a thing or two, or Mike Pence’s head will spontaneously fall off, exploding in a cloud of rainbow-colored sherbet.

What I’m doing

In the new year, I want to offer my services — at reduced rates * — to organizations who are doing good for society in the wake of neoliberalism and under the spectre of fascism; organizations who are trying to make things a bit better for ordinary and vulnerable people.

I’m only one person who can only make the tiniest difference and, hey, maybe I’m only doing this to quell my own guilt for having the privilege of being a white, male, english speaker. But anyway.

What I can offer

• Branding (styleguides — including typography, iconography etc. and associated documentation)
• Pattern libraries (catalogues of attractive and accessible interface components written in HTML, JS, and CSS)
• Prototyping
• Accessibility remediation (diagnosis and advice on fixing accessibility and usability issues in your existing interfaces)
• Copywriting and help with readability
• Fast, responsive websites
• Other stuff; just ask

I’m a web designer/developer with 10+ years experience. I have two books published on interface design with Smashing Magazine. The latest, Inclusive Design Patterns, was released just a month ago and is set to sell out before Christmas. I worked as a front-end developer for several years with Neontribe, helping to design and create applications for folks with disabilities and mental health concerns, as well as for educational projects. I currently work with The Paciello Group who offer expert accessibility guidance to large organizations, mostly in the US. I have spoken (including keynotes) at large conferences in The Netherlands, Sweden, Germany, Romania, and the UK on interface design and web accessibility.

Who I’m offering work to

• Charities and non-profits supporting the vulnerable, disabled, and ethnic minorities
• Campaign and legal organizations working to protect civil liberties and rights
• Organizations fighting racism
• Organizations representing and advocating for the LGBTQ community / communities
• Advocate organizations for the autistic community where autistic folks actually have an influence in the organization
• Feminist organizations and organizations supporting women’s reproductive rights
• Organizations offering free education services, especially in politics and critical thinking

One type of organization I will not work for is any organization that uses resources to promote religion. So, for example, I’d be delighted to support the Muslim community but not the spread of Islamic doctrine. Another example would be a Christian organization which includes proselytising in its activities. I am a humanist and want to work with people, including religious individuals, if the cause and focus is to help other human beings in need.

I work remotely and I tend to restrict long haul travel for the sake of mental wellbeing and productivity.

Is this you?

Are you someone working for any such described organization? Or do you know someone who is? I’m available by email: heydon@heydonworks.com.

* Negotiable. My standard corporate rate is not exorbitant already and I am prepared to offer between 33% and 50% reductions. Under some circumstances, free work may be applicable.

Is this you? Then you are not a coder. You are a designer who is skilled in coding.

But it is not a discrete profession or occupation.

We are not divided into designers and people who are not designers.

If someone says you don’t have the right background, you haven’t spoken to or listened to the right people, or you don’t have the appropriate skills or experience to be a designer? They are wrong.

If someone says particular skills — creative, discursive, technical — preclude you from being a designer and put you in a category outside of design? They are wrong.

Design is not in the mastery of any particular medium, skill, piece of software, style, or philosophy.

Websites, boats, guns, hats, buildings, events, fonts, and data schemas can all be designed or not designed. But it isn’t in hiring a designer that the crucial difference is made.

All design consultants can do is encourage you to design. And you should know enough to be doing it already.

Designing is deliberating; reasoning; justifying. It is joining up the dots.

Designing is what we’re doing when we’re not doing. It’s deciding what’s right to do, what the best way to do it is, for who, by who, for how long, and with what. Context, relationships, implications.

If you don’t do any of this, your work will be horrendous. If you hire someone else to do it for you, it will not be saved. You cannot add design.

If you care to think about your work as you work, then you are a designer.

Everything else — Javascript, Microsoft Excel, a pencil, Adobe Illustrator, a soldering iron, a coffee machine, MySQL, a pair of knitting needles — is a tool.

Designers cannot be identified by their tools because anything can be a designer’s tool.

That is, so long as it’s the right tool for the job.

What it is

The aria-controls attribute is a ‘relationship attribute’ which denotes which elements in a page an interactive element or set of elements has control over and affects. It’s commonly used to describe a relationship between a button and the expandable region revealed by that button.

<button aria-expanded="false" aria-controls="expandable">open / close</button>
<div id="expandable" hidden>content of the expandable region</div>

What we think it does

Wishfully thinking, we assume that marking up relationships with aria-controls means screen reader users can effortlessly flit between the moving parts of a web application, like a mechanic tinkering in a ship’s engine room.

Because we’ve used aria-controls, we don’t have to worry about source order, right? We’ve connected up the dots explicitly, with our magic attribute! And it doesn’t matter about all the elements between a controller and its subject because we’ve tunneled between them, right?

<button aria-expanded="false" aria-controls="expandable">open / close</button>
<div>
  <!-- a load of other markup, including interactive elements in focus order -->
</div>
<div id="expandable" hidden>content of the expandable region</div>

Good luck with that

First of all, only the JAWS screen reader supports aria-controls. If a user is operating NVDA or VoiceOver (or others), they would have no idea it’s even there. That’s reason enough not to use it.

But, just for giggles, let’s talk about how JAWS supports aria-controls. When you focus an element with the attribute included, JAWS will announce, “press the JAWS key plus Alt and M to move to the controlled element.” Verbose and clumsy. Then again, I’m not sure how else you’d go about supporting it.

But, that’s not the only problem. How in the hell do I move back? And, even if I could, how would that be communicated and how long should the option to move back remain active? No wonder the other screen reader vendors are giving this a wide berth.

Multiple controlled elements

You can create a one-to-many relationship by supplying a space separated list of ids, representing different, simultaneously controlled elements.

<button aria-controls="elem1 elem2 elem3 elem4">open / close</button>

Cute! And good luck with implementing a half-decent UX there, everybody. In case you’re interested, JAWS just says “press the JAWS key plus Alt and M to move to the controlled element” as normal. Genius.

Conclusion

The aria-controls attribute is a prime example of something we’d love to ‘just work’. Trouble is, there’s no clear way how it should work. JAWS makes a perfunctory attempt at implementation, but it’s incomplete and I suspect it creates much more confusion than it provides clarity for real users.

In the absence of a good purpose-built solution for letting folks using an interface aurally move between and around tools and their outputs, try a combination of the following:

• Same-page links to move users from one part of the interface to another
• Landmark roles to encapsulate major areas of the interface’s functionality
• Expandable areas that come immediately after their aria-expanded controllers in the source (and in focus order)

There’s also the question of ‘focus management’. In keyboard and screen reader accessibility terms, focus management usually means using the focus() method in JavaScript to move focus between elements. Be aware that, in almost all cases, users do not want to be moved from one place to another without their explicit say-so. Even when they do want to, providing a link is probably your best bet.

I think I’ll give the focus management wasps’ nest a proper poke on another occasion.

I’m also lazy, so it’s all gravy. (ed: maybe run with a food analogy?)

But it turns out the only surefire way to make performant Web Stuff is also to just write less. Minify? Okay. Compress? Well, yeah. Cache? Sounds technical. Flat out refuse to code something or include someone else’s code in the first place? Now you’re talking. What goes in one end has to come out the other in some form, whether it’s broken down and liquified in the gastric juices of your task runner or not. (ed: I’ve changed my mind about the food analogy)

And that’s not all. Unlike aiming for ‘perceived’ performance gains — where you still send the same quantity of code but you chew it up first (ed: seriously) — you can actually make your Web Stuff cheaper to use. My data contract doesn’t care whether you send small chunks or one large chunk; it all adds up the same.

My favorite thing about aiming to have less stuff is this: you finish up with only the stuff you really need — only the stuff your user actually wants. Massive hero image of some dude drinking a latte? Lose it. Social media buttons which pull in a bunch of third-party code while simultaneously wrecking your page design? Give them the boot. That JavaScript thingy that hijacks the user’s right mouse button to reveal a custom modal? Ice moon prison.

It’s not just about what you pull in to destroy your UX or not, though. The way you write your (own) code is also a big part of having less of it. Here are a few tips and ideas that might help. I’ve written about some of them before, but in terms of accessibility and responsive design. It just happens that a flexible, accessible Web is one we try to exert little of our own control over; one we do less to break.

WAI-ARIA

First off, WAI-ARIA != web accessibility. It’s just a tool to enhance compatibility with certain assistive technologies, like screen readers, where it’s needed. Hence, the first rule of ARIA use is to not use WAI-ARIA if you don’t have to.

LOL, no:

<div role="heading" aria-level="2">Subheading</div>

Yes:

<h2>Subheading</h2>

The benefit of using native elements is that you often don’t have to script your own behaviors either. Not only is the following checkbox implementation verbose HTML, but it needs a JavaScript dependency to control state changes and to follyfill standard, basic behavior regarding the name attribute and GET method. It’s more code, and it’s less robust. Joy!

<div role="checkbox" aria-checked="false" tabindex="0" id="checkbox1" aria-labelledby="label-for-checkbox1"></div>
<div class="label" id="label-for-checkbox1">My checkbox label</div>

Styling? Don’t worry, you’re covered. That’s if you really need custom styles, anyway.

<input type="checkbox" id="checkbox1" name="checkbox1">
<label for="checkbox1">My checkbox label</label>

Grids

Do you remember ever enjoying using/reading a website with more than two columns? I don’t. Too much stuff all at once, begging for my attention. “I wonder which thing that looks like navigation is the navigation I want?” It’s a rhetorical question: my executive functioning has seized up and I’ve left the site.

Sometimes we want to put things next to things, sure. Like search results or whatever. But why pull in a whole tonne of grid framework boilerplate just for that? Flexbox can do it with no more than a couple of declaration blocks.

.grid {
  display: flex;
  flex-flow: row wrap;
}

.grid > * {
  flex-basis: 10em;
  flex-grow: 1;
}

Now everything ‘flexes’ to be approximately 10em wide. The number of columns depends on how many approx’ 10em cells you can fit into the viewport. Job done. Move on.

Oh and, while we’re here, we need to talk about this kind of thing:

width: 57.98363527356473782736464546373337373737%;

Did you know that precise measurement is calculated according to a mystical ratio? A ratio which purports to induce a state of calm and awe? No, I wasn’t aware and I’m not interested. Just make the porn button big enough that I can find it.

Margins

We’ve done this. Share your margin definition across elements using the universal selector. Add overrides only where you need them. You won’t need many.

body * + * {
  margin-top: 1.5rem;
}

No, the universal selector will not kill your performance. That’s bunkum.

Views

You don’t need the whole of Angular or Meteor or whatever to divide a simple web page into ‘views’. Views are just bits of the page you see while other bits are unseen. CSS can do this:

.view {
  display: none;
}

.view:target {
  display: block;
}

“But single-page apps run stuff when they load views!” I hear you say. That’s what the onhashchange event is for. No library needed, and you’re using links in a standard, bookmark-able way. Which is nice. There’s more on this technique, if you’re interested.

Font sizes

Tweaking font sizes can really bloat out your @media blocks. That’s why you should let CSS take care of it for you. With a single line of code.

font-size: calc(1em + 1vw);

Err… that’s it. You even have a minimum font size in place, so no tiny fonts on handsets. Thanks to Vasilis for showing me this.

10k Apart

Like I said, I’m not the best coder. I just know some tricks. But it is possible to do a hell of a lot, with only a little. That’s the premise of the 10k Apart competition — to find out what can be made with just 10k or less. There are big prizes to be won and, as a judge, I look forward to kicking myself looking at all the amazing entries; ideas and implementations I wish I’d come up with myself. What will you make?

The set is very sterile. Reassuringly tidy though. No dashboard dross or the like.

I like how the first baddies introduced (the Ferenghi) are described as “capitalists” and therefore evil. They act a bit like the crappier orcs out of LOTR.

It’s nice how everyone gets on so well with Worf. I expected a little bit more anti-Klingon racial tension, though. Be interesting if it came from Geordie. I like to imagine Worf’s sash is from winning a beauty pageant.

It occurs to me the Klingons are a bit like the English. Wedded to the past and needlessly combative.

Doctor Crusher: Name of a hip-hop producer, face of someone who’s very much not a hip-hop producer.

The Captain’s role is bitter sweet. He’s a sort of childless father. Comforting BBC Radio 4 voice.

I think Deanna Troi should have a smaller part. Way too much mission-critical stuff depends on her telepathic ‘insights’. Doesn’t seem like a good protocol. I imagine she was called Diana Troy, then changed her name when she found out she was a telepath. Pretentious.

The computer interfaces look to me like they could benefit from some clearer labeling and better differentiated colors.

All alien races like shiny clothes. Space is camp AF.

Yar is my second favorite after the Captain. I like that the security officer is a woman. Lovely, wispy hair.

There’s something unseemly about Riker. He constantly looks like he’s trying to brave his way through a sex scandal.

Wesley gets an inordinate amount of romantic attention. It’s a mystery to me how.

Data scares the shit out of me. I know he’s an android, but I just see a psychopath. I keep expecting him to suddenly and indiscriminately strangle one of the other crew members then tilt his head and say “most curious” when they stop struggling.

There are a lot of alien forces which all seem to exist for the sole purpose of creating existential crises.

Following are the raw, unedited responses (minus the occasional typo). I don’t want to editorialize, but let’s just say I learned a lot.

(It should be noted that two respondents wanted it to be known that they believed their high level of screen reader expertise was not typical and their ‘strategies’ unlikely to be representative.)

Survey responses

When you arrive on a new, unfamiliar web page, for which you have no prior knowledge or expectations, what actions do you perform first?

“I try to get a general layout of the page by searching for headings and landmarks. If the site is busy and inundated with breadcrumb links and other random cruft not related to the desired content, I use NVDA’s skip links command which sometimes helps. I’ve also seen separators used to break up sections of a page. In short, I use element navigation heavily and scope out a mental visualization of the website’s layout.”

“The first thing I am most likely to do is use H to navigate by headings or use the tab key to see what links are available or a combination of the two.”

“I start by using my down-arrow, if it’s a new site to me. If not, I’d start by navigating by headings. And if I were super familiar with it, and I knew an ARIA landmark would get me right where I wanted to be, I’d use that.”

“When I first go to a page, my screen reader starts an auto read and I usually stop that and check the headings. However, I never go to a page and have no expectations. I have always landed on a page for a reason, I know what subject it’s likely to be about etc. One doesn’t just open a browser and say take me to some random page when I haven’t searched for something or tried to open something. There is always expectation if that makes sense. As I say, headings are my go to thing for most situations, but on some pages I will know I am looking for something other than just information, so I might know I need to look for form fields etc.”

“For general exploration, I’ll use landmark navigation or heading navigation to look around. If I’m looking for a search facility, I’ll use the screen reader shortcut for moving to the first form field on the page. If I think the thing I’m looking for will be in the header area, I’ll use the cursor keys to explore in more detail. If I’m looking for a link I’ll call up the links dialogue, possibly taking a guess at first letter navigation to find the one I’m after.I might also search for a particular string on the page if I’m looking for something particular in the content.”

“I usually try to find a heading and then go from there. Usually, I do this by pressing the #1 or #2 on the keyboard, since the hope is that a competent web developer coded the site and that headings are where and at the level they should be. If I can’t quickly find a heading, I press H to navigate to any heading. If none exists, I’ll start at the top of the page, press the page-down key to get past all the navigation links, and up/down arrow to find my way to the main information.”

“If I’m on the Mac, as I normally am, and the page is an article of some kind, I go into ‘reader mode’ if I can. If that fails, and sometimes even if it works, headings are my go-to navigation. If the page has no headings, and if Reader didn’t work, I’m usually on a page for a specific purpose so I’ll use my screen reader’s ‘find’ feature to look for keywords I know have to be there. If that fails, or if I’m somehow on a page for no specific reason, I’ll just skim through it line by line or element by element. By that point, especially if I don’t find something of interest relatively quickly, I’ll abandon the page and seek out my information elsewhere.”

“I almost always use heading navigation unless it’s a page I’m very familiar with (for instance a forum thread, where I’ll jump to the table of topics). Failing that, I’ll use the key to jump to non-link text, which often finds the part of the page I’m looking for. Other strategies I regularly employ is finding text on the page or using the reader view in Safari or Firefox.”

“I first read the page title, then look for an h1, then a main region.”

“First I would look for regions such as nav and main and if no joy then hit the H key to look for headings and then start arrowing down to explore when it looks like I am at a place of interest. If there are no regions or Headings I normally commence swearing.”

“That would vary a little depending on the type of site (retail, news, information etc). Generally though, I would hit “h” to jump to the first heading and hopefully get some indication as to whether the site will give me what I want. Depending on how that goes, may continue down the page or go back to the main nav. If there are no formal headings, after muttering darkly I would try going to the top of the page and using “n” to find the first normal (not a link) text. That is the same in Window-Eyes and NVDA.”

“Why would users arrive on a page for which they have no prior knowledge or expectations? Unless it’s spam/a popup, they have come there with a purpose, generally from Google. Anyway, users use (1) iterating through the page element by element (whatever their screenreader allows) (2) Ctrl+F find (3) Going back because they can’t find what they want quickly. In WebbIE they can hit Ctrl+K or Control+Down to skip past non-content/to the first meaningful heading. Control+Down was probably better understood by people: down takes me through the page one line at a time, but Control+Down jumps past links and stuff.”

If, while using a web page, you suddenly find yourself lost (or in a place you didn’t expect to be) what do you do to get back on track?

“I search for phrases with NVDA’s find function (Firefox’s find is not as reliable at shifting NVDA’s virtual cursor to the expected point on the page). If the site has a heading I can jump to in order to start interacting with the page again, I will do that and continue my work.”

“I will tend to either attempt to go back a page, or I will find a link that should take me to the Home page of the website I am on.”

“Start arrowing up and down. Go in/out of forms/browse mode (if I’ve been put in there without my doing it myself) . The idea is to get out of it to be able to “look around” to figure out what triggered it.”

“I check the headings. Headings, having 6 levels, are the best way to structure information, especially as most screen readers let you navigate by any heading or by headings at a specific level.”

“Check the page title to determine whether I’m on the page I thought I was. If not, I’ll hit the back button since logic suggests I’ve been taken to a new page. Force a refresh of the virtual buffer (on Windows machines) to check
whether content had materialized without my screen reader being aware of it and/or letting me know. Use the cursor keys to quickly explore around my current location, and if that turns up nothing useful I’ll use landmark/heading navigation to try and find some familiar point on the page.”

“I honestly never really thought about it. Sometimes, if I lose my place, I use the JAWS find feature and type in a word or phrase I remember hearing to try and get myself back there…though this is something I mostly have to use in eBooks.”

“I usually remember what I was just reading, so will search for a couple words I remember. Failing that, I’m back to heading navigation, or link navigation if I know there was a specific link around where I’d been.”

“I generally repaint the screen and use a screen-reader find function for a word I recently heard to zip straight to the part of the page I want. I lose my place on a page very infrequently, it sometimes happens if I’ve started reading a page on a slow connection so the page reloads when I’m partway through it.”

“Usually go to the top of the page and do a screenreader search for the last content I remember.”

“Hit Q to navigate to the main region if there is one or use Heading navigation to find where I need to be.”

“More dark muttering. Then perhaps try Back or looking for the Home link.”

“Hit back, try the next Google result.”

When it becomes clear that a web page is complex, what do you do to help break down the information?

“First, I click my tongue in vexation. Then, I begin scoping the site line by line using the arrow keys. Sometimes all it takes is slowing my TTS rate down and taking in the information slower. I search for patterns, and take notes on whatever I’m researching. (and also on the site layout to reference later).”

“I will attempt to navigate by headings to find the relative information on the page that I am looking for.”

“Same as for the first question. There’s no help for it; it takes time, and people have to read, even if they *think* they can just use links lists and headings. I never use links lists, by the way — too much info out of context. But less experienced people do. One of the key issues that folks seem unaware of is that good screen reader training is very much lacking. Those who are *doing* the training sometimes (often?) don’t know very much, so it’s no wonder.”

“Again, I check through the headings to see where it is most likely to be. I find searches don’t often help and other tactics would be used so rarely and dependent upon situation and task.”

“Nothing in particular. Possibly a product of being familiar with how web things work, I don’t often find pages more/less complex than others. Where the accessibility (rather than the complexity) is atrocious, I’ve been
known to resort to Firebug to figure out what’s going on.”

“I really use headings a lot. Beyond that, I use the arrow keys almost exclusively. My issue with regions and the like is that they aren’t universally used, so it’s just faster and simpler for me to use what I know will work a majority of the time rather than to try and guess at how accessibly-minded the web developer is.”

“Reader mode is, again, my friend here. If the meat of the page is all I want, Reader is perfect. If it doesn’t work, or if I need to look at the full page (such as a forum topic), I’ll see if portions are separated by headings. If not, I’ll see if I can find a pattern, such as each forum reply having the same set of information above it, or each Amazon review containing the same linked text at its start. If I can find something like that, I’ll do a text search for some words to jump from section to section, or very quickly arrow along, listening for the repeated information to tell me when I’ve gotten to a new section. If there are no repeats, and no headings,I’m back to moving through the page item by item, which I’ll usually do rather quickly. I don’t need all the words, just an idea of what’s where.”

“That really depends on the structure. If there’s tabular data I use table navigation, otherwise I use end-of-element or move to non-link text keys to maximize my time in the text flow of the page.”

“Try to get a sort of outline view using headings and regions.”

“‘Complex’ is a rather broad term. A page may be complex and structurally sound or may include lashings of poorly structured code, image links without alt attributes etc. In general though, I would use various combinations of provided navigation, headings, landmarks and intuition. Sometimes I will change browser and/or screen reader. That can be especially helpful when a site is poorly coded.”

“Give up, hit back, try the next Google result.”

If you know there’s some information on a website but you don’t know where, what helps you to find it?

“Most sites have a search function. That combined with find commands, I find things relatively quickly. If those methods don’t work, I will Google domain search with specific strings. If I’m really getting annoyed and the website has a site map, I’ll sift through it and drink coffee until I find the items I’m looking for. Overall though, finding and search box solves most issues for me.”

“I would use the search feature of the website or what I commonly do is Google for the information on the website. Usually, that will bring the information up.”

“Using the find feature of the browser to search for words, along with arrowing, using headings, etc., as above.”

“This is not a reasonable question. It really depends on the page. I could say non-standard controls, like the menu buttons on Facebook, I could say working out what has changed dynamically if it is not where the focus is, I could say lack of clarity in the design of the page, it not being clear which of two buttons or links to follow as they appear to be similar. You probably need a survey monkey to cover all the possible answers and work out what bugs people rather than this freeform making us try to think lol!”

“I usually use Google. The “site:xyz.com keyword” function is almost always more effective than site specific search, wading through the site navigation, or other methods.”

“If it’s on the same actual page as I’m on, the JAWS “Find” feature is a wonderful thing. If not, I’ll either use the navigation links at the top of the page and manually search, or I’ll even just pull up Google, type in the website name, and include the keyword. Google seems to be better at finding the relevant info I want rather than using sites’ built-in search features.”

“Again, text searching or headings, or both. If I know the information, I’ll guess at keywords that are probably in the text I want and do some searches for those. Once that fails, heading navigation is next, followed by the afore mentioned skimming.”

“Find on page is useful, for example if reading a news story a keyword in the title often indicates the start of the article body. For navigation on a site rather than a page I look for site maps often (because of that find on page feature) or for very large websites I prefer their search (or using a search engine with a site restrictor).”

“The website search, or in desperation the sitemap.”

“Bring up the list of links or headings or I use the search function.”

“Start off with nav links which, if well named, will often provide clues. If not making any progress, will then try site search. This yields remarkably varying results from one site to another. On some occasions I have more luck searching from Google than from within the site itself. One feature I use extensively is the screen reader’s search facility, which is more effective in finding something specific on a web page than using the browser’s search. I am amazed at how many screen reader users I have met who are unaware of the facility.”

“Try a different Google search. Ask a blind mailing list or sighted friend.”

What’s the most difficult part of navigating a web page?

“Unlabeled elements and sluggishness, navigation being hampered by busy flashy websites. (see below for more)

1. If the website is heavy, that is, lagging NVDA and the browser, that’s very deterring. Developers need to understand usability and information access before painting their sites with weighty animations
   and banners. There is an elegant balance between efficiency and glitter.
2. Poor presentation of form controls. Example: One line of text is “Please enter your name”. Then the fields themselves have “first name” and “last name” in the boxes respectively. Never, ever ever put text inside a field that is expected to be filled out. Mistakes and scrambled text occurs a lot because of this.

Another example is a table with a ton of fields. Edit edit edit checkbox checkbox combo… doesn’t help me. Unlabeled controls in general will only discourage me from using your site. And for the sake of sanity, label clickable elements!”

“The worst is when there are no headings. Say I am looking at a page containing products of some sort. More often than not, the titles of the products are not headings, and therefore, quickly being able to go through the products is time consuming.”

“Web pages aren’t nearly the problems they used to be. As I see it, the problems today are with Web app.s and ARIA “gone wild,” (credit the title of one of Jared Smith’s presentations) And also, there are often problems with forms, and those can be real showstoppers. I’d say poor forms and web apps are really causing trouble. Think of the kinds of project management/issue trackers you use and how inaccessible they are. Also note that I suspect most normal consumers think of something like the Twitter web site as a page when, of course, it’s not really.”

“Not design it well. There is no one thing I could pinpoint above other things apart from just poor design. Captchas can be show stoppers, as can unlabelled buttons, no headings or navigation etc. Again, this is a survey monkey job for me.”

“Too much clutter. Badly placed content (advertising iframes in the middle of a blog post for example), or just too much extraneous content that has to be navigated around/through in order to get to the proper content of the page — and the more proper semantic markup is missing, the worse this gets.”

“Besides content that just isn’t accessible at all no matter what, having no headings is frustrating, and poorly-labeled links also present challenges.”

“That can vary, based on the page. Generally, lack of structure, specifically headings, is a huge problem.”

“Inconsistency. Sometimes, pages are well structured in terms of headings, paragraphs, lists etc and that’s brilliant, but until all pages are you can’t rely on them for every page. It’s a similar story with landmarks, web-based applications, audio/video players and so on, they’re not used consistently enough around the web to make the access to them uniform.”

“Things that happen unexpectedly, such as change of focus.”

“Lack of semantic code and uneducated devs.”

“That depends very much on the site. Very often, sites that I have trouble with also challenge sighted friends and family. Airline sites, with their convoluted processes for booking and finding relevant information are prime examples. Some web developers labour under the misapprehension that visitors admire their ‘sophisticated’ presentations when what we really want is to find information and/or complete a transaction quickly and efficiently.”

“Finding the content of interest, traditionally. Having the page change as you go along, or in response to changes you make that you then can’t find. Not putting LABEL elements in forms. Missing ALT. Frames.”

What one thing do web designers do in the design of their web pages that makes your life most difficult?

“Improper use of elements or overuse of them. Example: a site that has thirty headings that are a paragraph long, or
a blog site that has tables just for articles. They may decorate the page, but couldn’t they use a boarder or margin things to get a similar feel? Also, flash. Please terminate every and any use of Flash. It’s buggy and slow, and generally unlabeled or invisible. Videos auto-playing is a nightmare to deal with as well.”

“Inaccessible CAPTCHAs or audio CAPTCHAs that are hard or almost impossible to understand are the biggest issue.”

“I think that it’s not just developers. I think it’s developers, designers, and folks at higher levels, who over-complicate for *everyone*, not just for blind folks. The purpose(s) of the site/application get lost in the branding requirements, along with other items that simply *must* be present (in the minds of corporates). Sometimes, the functionality (reason I came to the site) gets buried, and that’s not a dev’s fault.”

“Forget about keyboard accessibility.”

“Web apps are probably the most frustrating, so much so that I just don’t use them because I have no interest in working with half-accessible solutions. My time is valuable, and unless it were for a job (where I would be paid), I have no interest in Google Docs/iCloud etc.”

“Again, that depends on the page/site. Lack of structure is one, unlabeled links or text fields is another, and, when looking at pages with code on them, images/screenshots of code instead of text are incredibly annoying.”

“Use inappropriate markup. Tables for navigation, lists of items that aren’t in list tags, miss image descriptions or use “image” or “description” in the image description, name iframes or dialogues poorly because they don’t see the name in use or provide plugins (flash, audio, video, menus etc) that aren’t accessible. It all comes back to poorly coded structures on the pages.”

“Try to squash a link to everything on the homepage, usually resulting in a badly marked-up carousel.”

“Divs and spans with no ARIA for custom elements with no ARIA or incorrect use of ARIA.”

“There isn’t one thing. As mentioned above, having to hunt for information which should be readily at hand can be very tedious. If one thing does stand out, it is that most sites to which it applies do not have correctly marked up forms. This can turn what should be a straight forward process into a tedium or, in some cases, an impossibility.”

“Change it. Users develop strategies. When pages change they must be relearned. When tesco.com got rid of their layout tables – to improve accessibility! – everyone complained: they knew how to find things in the tables (and used table mode in JAWS to navigate them…)”

Which features or aspects of web pages do you consistently find the most difficult to use and why?

“Unsure on this one. Perhaps a page that auto-updates frequently whilst in an edit field? Google Instant, etc. It makes NVDA jump around sometimes.”

“The two features I run into often are first, editable fields that try to force me to use the drop down to select the information. Why not just make those true drop downs is beyond me. The Better Business Bureau is doing that quite a bit, and it needs to end. The second thing I run into is Submit buttons that do not work with screen readers turned on when I am trying to send an e-mail through the contact us page on a website.”

“Most ARIA-related “features” are difficult to use because they’re not coded correctly. And it’s long been my contention that even when they are coded correctly, most blind folks have never seen how they’re supposed to work correctly, so haven’t been taught about how to use them.”

“Wow, the breadth of this question just makes my mind go blank. I use so many pages with so much success, but it is generally something different that stops me. Captchas, and asking me why is an insult, try using them blindfold lol, menu buttons that expand or collapse but don’t seem to reveal options, who knows what they are actually called, because we get no feedback and have to mess about with different screen reader modes to interact with them, unlabelled buttons as we have to guess what to press, all sorts.”

“Often the most simple. Pseudo links and buttons that cannot be focused on or used with a keyboard. Also infographics. Don’t get me started! Missing text descriptions in general (short or long).”

“Unlabeled or poorly labeled forms, badly designed tables, clickable items that don’t appear in link or button navigation, and frames containing ads stuck in the middle of articles all contribute to making sites more difficult to use.”

“Elements primarily designed with a mouse in mind. Multi-select lists, roll-over menus and submenus, expandable textboxes, drag and drop items and, of course, flash-based widgets.”

“Inaccessible widgets, or select boxes with onchange events.”

“Anything with Drag and Drop for obvious reasons. Places where an action causes an update elsewhere that either does not have a live region or does not shift focus and take you there.”

• “Poorly structured forms because I have to guess what goes in which field;
• Image links without alt attributes because I either have to deduce the destination from the garbled text, guess or go elsewhere;
• almost paradoxically over-use of ARIA roles because this can add to verbosity and even be misleading;
• Scripting that introduces information that is not reported by the screen reader because it can seem like a link etc has done nothing and this is where ARIA CAN BE USEFUL.”

“Change again.”

I welcome these arguments because I’m magnanimous.

But there are grave concerns regarding the adoption of progressive rendering and/or isomorphism which I feel should be addressed and apparently I’m the only one brave enough to go against the grain and address them. No need to thank me.

1. It’s hard :(

Making applications which either render static content then enhance it with javascript or which run as applications on both the server and client in tandem is really, really difficult. Like really.

Sure, it means that more users will be able to access content more quickly and reliably—I’m not disputing that. But who’s to say there’s going to be any users? Or any content, for that matter? Half the projects I work on get shelved because of company reorgs. What use is spending all that extra time on progressive enhancement complexity, then? Wise up.

But that’s not even the main problem. The main problem is that my identity is built around intellectual competency. This means that, when I find something intellectually challenging, I kind of lose it pretty badly.

So, before you consider embarking on a universal app architecture, ask yourself: “Do I really need someone to experience maddening cognitive dissonance and go postal on me?”

Probably not.*

(*This sounds kind of like a threat LOL! Soz LOL!)

2. There are no benefits to me

It’s true that progressive enhancement makes life easier for users in certain circumstances, like ones on high latency networks or low powered devices etc. Don’t get me wrong—I’m all for writing applications for users, but aren’t we forgetting someone? Since I have to build the damned app, shouldn’t I get a say on how it’s built?

End users are an unknown quantity and there’s not much we can do about that. On the other hand, I already know a lot about me because I am me. It’s a no-brainer to be taking advantage of this insider knowledge.

So, what do I know about me? Well, I’ve got a pretty good setup for starters: Fibre, 16GB RAM. Also, I can’t stand implementing progressive enhancement—gross! (see 1)

Most of all, though, I like making new features. The less time I spend on creating a robust architecture (boring) the more time I have for creating features. And you know what they say: More features equals better UX. Everyone wins.

3. It encourages bad behaviour

If we’re going out of our way (and it really is going out of our way) to make sure content can be delivered to low power devices with tiny data contracts on shitty networks, we’re just giving our audience an excuse not to upgrade.

I want you to be the best that you can be!

Then there’s trains. Urgh. So you’re having trouble downloading a client-rendered, blocking-javascript-dependent web page over 2G because you’re on a train? The solution’s staring you in the face: Stop travelling by train. Either get a pad in the city center near your place of work or sleep under your desk. That’s what I did, why can’t you?

Honestly, take some responsibility.

4. It’s all web apps now

The Web was originally conceived to publish and share writing for the purposes of acquiring and corroborating knowledge. Thankfully, those dark and primitive days are behind us and we’ve moved onto better things, like building apps that look at photos of dogs and try to guess what age they are.

There’s no “document” version of an app that guesses what age your dog is. I mean, what would that even look like? A picture of someone else’s dog with the text “I don’t know how old I am, sorry” written underneath it? That’s pathetic. I’d sooner just see nothing, to be perfectly frank.

Sure, if you don’t want to know how old your browser thinks your dog is, be my guest and turn off javascript or go on a train ride (see 3). You don’t deserve to know how old your dog is anyway.

Just don’t come crying to me when someone close to you asks how old your dog is and you have to say, “I don’t know, somewhere between 5 and 8, I think” instead of, “I don’t know, but someone shared this web app on Facebook that’s quite fun. Let me show you. Hold on. Here it is. Hold on. Sorry. Hold on. Oh, never mind.”

In this post, I’m going to lay out a few of the fallacies I see frequently and I invite you to submit your own. Some of my examples are hypothetical for brevity, so feel free to shout “STRAW MAN” at me now, if it turns you on.

• The gospel fallacy
• The Luddite fallacy
• The scale fallacy
• The chocolate fireguard fallacy
• The pull request fallacy
• The ‘made at Facebook’ fallacy
• The Bob The Builder fallacy
• The real world fallacy
• The Daphne & Celeste fallacy

The gospel fallacy

I’m going to start on one you’ve probably heard of already, perhaps under a different name. This is the “we’ve always done it this way” fallacy. Something — some so-called best practice or rule or process — is honoured, unquestioningly, simply because it was honoured in the past. This is a type of circular reasoning.

Now, this “thing” may or may not be a good idea or practice, but just saying it’s good because it has been agreed upon is not, well, good enough. This fallacy is named in honour of The Holy Bible, which is treated as unquestionable by some fundamentalist Christians despite some seriously sketchy advice.

“Slaves, in reverent fear of God submit yourselves to your masters, not only to those who are good and considerate, but also to those who are harsh.” — 1 PETER 2:18

It’s impractical to question or otherwise deconstruct everything, but be wary of accepting anything as gospel. Your software development ancestors, just like the writers of The Bible, may claim to be God-like or channeling some higher power, but this is never evident.

Being wary of the gospel fallacy is especially prudent regarding assumptions about users, their behaviours and preferences.

The Luddite fallacy

The Luddite fallacy is essentially the opposite of the gospel fallacy. They are two sides of the same coin, if you like. Named for the textile workers, the Luddites, who resisted the new technologies that threatened their livelihood, it takes two forms:

• A false claim that the only reason the subject is not adopting a new technology must be because they are arbitrarily resistant to (or scared of) change
• The false claim that just because something is new, it must be better

For example, you might be accused of “not liking change” because you resist moving a project from one technology to a new one, when really your reasoning is that the new technology is wank, for which you can provide justification. The fallacy will be trotted out to mask any valid arguments, making it a form of ad hominem attack.

Developers have a tendency to be self-serving in their choice of technology. There is a strong urge to adopt a new technology just because it’s a fun new toy to play with. Of course, they’ll never admit to that openly, but they might rely on some form of the Luddite fallacy with which to bargain. Be aware.

Here are some examples of some things that have been recently conceived which are fucking terrible.

The scale fallacy

This is one I get a lot because I tend to favour simple solutions to things, in my writing about web development. The accusation takes a form akin to, “that’s fine for the simple thing you’re doing, but it won’t scale.” Exactly what is meant by “scaling” is never made clear, nor can it be — it’s too vague of a concept. In any case, the scale fallacy covers two illogical assumptions, depending on the context:

• That projects serving larger numbers of people are necessarily more complex intrinsically
• That projects serving larger quantities of content can only do so by being more complex

Is the popularity of an application proportional to how much code it is written with? No, of course it isn’t. In fact, there are any number of examples where quite the opposite is true. To claim that a convoluted codebase is the inevitable result of expanding the reach of a product is fallacious. Don’t be George Lucas. Sit on your fucking hands and stop adding bullshit features.

Equally, there’s no reason why serving 10 pages of content versus serving 10000 should be any different in terms of mechanism. They often are different, but there’s no reason, in isolation, why they should be. The number of records in a database has no relationship to the complexity of that database’s overall structure.

The clunkiness of publishing systems cannot be justified by the number of their consumers.

The chocolate fireguard fallacy

Some things are just not fit for purpose. Some things are just better not existing or being replaced by other things. You should never accept this without investigation (see the gospel fallacy) but not everything can be excused with the apologistic, “so long as you use it responsibly, it’s perfectly fine.” A cot made out of barbed wire? Sure, so long as you’re careful!

It stands to reason that the eponymous chocolate fireguard is never likely to make a worthy substitute for a wrought iron one. Sure, you can still use a chocolate fireguard if that’s how you win a bet, but you’re going to make your life difficult. It would take little effort to demonstrate this. For example, you could light a fire.

I may — and I did — assert that nesting is a poor language feature of Sass. My argument was that it arbitrarily increases syntactic complexity, inevitably diminishing the readability of the Sass source code for no benefit. You’re perfectly welcome to dispute this, providing examples of nesting increasing the readability of your code where possible or by demonstrating other benefits.

However, just saying, “like anything else, it really depends on how you use it” doesn’t answer my claim that nesting cannot improve Sass code. It’s just a dubious assertion that literally everything has the same value and utility.

The pull request fallacy

The pull request fallacy is a kind of rhetorical diversion tactic. It claims that your grievances about the nature of a certain piece of Open Source Software are invalid because you could just send a pull request to fix it; that all OSS is, therefore, beyond reproach. Recently, I posted this tweet quoting an observation about the arguably confused state of contemporary javascript syntax. This was met with the suggestion that, because it’s open source software, I could just go and “fix it”.

I really wouldn’t know where I would start with this pull request, since it would have to address a huge body of decentralised standards work and proprietary API code, culminating in the provided snippet. But that’s not the point. Just because Github exists doesn’t mean I don’t have the right to pass comment on development culture or the dubious fruits it sometimes bears.

It is also naïve to think that fixing some code via a pull request will inevitably fix the culture that begat it. Not everything is a discrete bug that can be reduced to a ticket/issue, anyway. Some things are fundamentally flawed in their design. See the Bob The Builder fallacy.

The ‘made at Facebook’ fallacy

This fallacy is reminiscent of the generic “appeal to authority” fallacy, wherein you point to an authority figure such as a scientist or published author stating that what they say must be true.

In web development we often look to famous, successful organisations for inspiration; Google, Facebook, Microsoft. We make the mistake of attributing their success to their development practices and look to cargo cult success by adopting the same behaviours. There’s no reason why a successful organisation is necessarily a functional, efficient or technically capable one. Just look at the Tory party in the UK.

Organisations like Facebook have huge development teams where communication and knowledge sharing is necessarily more problematic than in small, closely knit teams. Should development practices evolve to overcome this problem, then they are only valid where the problem actually exists. Aping them isn’t going to help you.

Did you know OOCSS (Object Oriented CSS) was developed to help Facebook with their woefully organised and redundant CSS? Do you know who came up with it? An independent consultant.

The Bob The Builder fallacy

The Bob The Builder fallacy is symptomatic of the piecemeal way we tend to approach web development. It can be summarised in one phrase: “A problem with the design has been verified, therefore it must be fixed”.

When using ticketing systems, which describe tasks independently, it’s tempting to just soldier through, tackling anything we know how to tackle. It’s important to first ask whether a given task should be tackled, what its wider implications are for users, and what sacrifices would have to be made in terms of systemic simplicity or robustness.

I provided a fictional dialog illustrating the myopic way we approach problems in my article, Things To Avoid When Writing CSS (part 2):

“Hey, I’ve got these three adjacent ‘calls to action’. They each have a picture, some text and a button (well, a link). The trouble is, the text is different for each, so the buttons don’t quite line up horizontally.”
“Okay.”
“Well, I mean it doesn’t look right. Is there a way you could fix it?”
“Well, technically I could set the same height for each call-to-action (leaving enough room for the tallest), then position each button absolutely along the bottom line of their container. But I wouldn’t — “
“That sounds great, do that!”
“Well, have you actually finalized the copy, because — “
“THAT SOUNDS GREAT, DO THAT!”
“But, when you reduce the viewport, the text will wrap and — “
“THAT. SOUNDS. GREAT. DO. THAT.”

When it comes to communication design, nothing is black or white; broken or fixed. Not everything is a bug. Some things are limitations, and some limitations benefit many more users than the few that a “fix” would address. This fallacy is named for the children’s television show, Bob The Builder, for which the theme tune goes, “Bob The Builder / Can he fix it? / Bob The Builder / YES HE CAN!”

Yes, he can, but should he?

The real world fallacy

The real world fallacy comes about when you express an idea for a new development practice and a member of the community disputes its veracity on the basis (for whatever reason) that their company/organisation would not want or be able to adopt it. The truly fallacious part derives from applying their specific assumption generally, making the mistake that because it wouldn’t work for them, it necessarily wouldn’t work anywhere else, for anyone else.

That is, by assuming their experience is universal, they cannot imagine anyone “in the real world” would ever take the notion seriously.

As an addendum, it’s probably worth pointing out that “the real world” — the one we live in — is our responsibility. The real world is what we make it. Since your agency is undeniable, using “this would only work in an ideal world” as an excuse tells everyone you’re reluctant to help change the world for the better.

Ask yourself: Am I The Establishment?

The Daphne & Celeste Fallacy

The Daphne and Celeste fallacy erroneously puts that ugly looking code must be poor code. It is typically the domain of coddled and self-regarding developers who prioritise the readability of code by themselves over its utility to users.

One example is the addition of WAI-ARIA attribution. Yes, it makes the code “uglier”, but it is there for an important reason (providing semantics to AT users). To suggest that its ugliness is, by extension, “hacky” or low in quality would therefore be incorrect.

Here’s an example of some CSS:

:nth-last-child(-n+6):first-child,
:nth-last-child(-n+6):first-child ~ * {
	/* properties here */
}

This CSS does something useful: It styles sibling elements if there are six or more of them in quantity. It is quite difficult to read if you are not familiar with advanced CSS and it should probably follow a comment that explains what it does. It also covers a relatively obscure use case. None of this means that the code is badly written or lacking in utility.

This developer fallacy is named after the erstwhile pop duo, Daphne & Celeste, who sang “U G L Y / you ain’t got no alibi”, which is equivalent to “U G L Y / you have got an alibi”.

Flexbox—not to be confused with Sex Box, the British TV show wherein Mariella Frostrup interviews people who’ve just had sex in a box—is the CSS layout toolkit de rigueur. Of all the celebrated features of Flexbox, it is the light work it makes of producing wrappable grids, tolerant of dynamic content, that I think’s integral.

In this article, I’ll cover a few techniques to exploit Flexbox’s internal algorithms and design finessed grids intended for changing quantities and dimensions of content.

Basic wrapping

.parent {
    display: flex;
    flex-flow: row wrap;
}

.child {
    flex: 1 0 25%;
}

I’ve made the .parent a flex container and used the flex-flow shorthand to set the flex-direction to row (i.e. following the horizontal axis) and enabled wrapping. Wrapping operates according to the flex-basis set on children; in this case 25%.

100 divided by 25 is 4, meaning what we have here is a 4 column grid. Simple stuff, I know. With wrapping on, a new row is begun every time you exceed 4 additional children. The last row is always complete, either because the total is exactly divisible by 4, or because the left over children are “grown” to share a row’s width. The “1” in flex: 1 0 25% essentially means the ability for children to grow is set to on.

The upshot is that you can employ a grid which “tidies” itself, distributing children automatically. This is powerful stuff. I can be assured that no matter the number of children currently included, my layout will be acceptable.

Element queries

I’m not the first (I think Zoe Gillenwater pointed it out) to notice that Flexbox can be made to employ something akin to “element queries”; changes in an element’s layout based on that element’s own dimensions. By incorporating a min-width into the last example, I can trigger elements to grow at this “breakpoint”.

.parent {
    display: flex;
    flex-flow: row wrap;
}

.child {
    flex: 1 0 25%;
    min-width: 5em;
}

I have made my grid entirely responsive with just one additional declaration. The number of columns is predicated on the simple axiom that no one column (element) can be fewer than 5em in width. Flexbox’s grow takes care of expanding children that hit this minimum width, making sure they never get any narrower than this setting. Wrapping takes care of everything else.

Dealing with remainders of 1

If I have a 4 column grid with 8 children present then I add a child element, that element will constitute the whole of the bottom row. Ideally, I’d like to move things around so that this is not the case. By harnessing the ability of my elements to grow and incorporating nome nth-child magic, I can essentially borrow elements from the penultimate row to distribute the elements towards the end of the grid more reasonably. I can also do this without negatively affecting other quantities of elements producing more than a single remainder or no remainder at all.

In the following example, I’ve adapted the first example in this article.

.parent {
    display: flex;
    flex-flow: row wrap;
}

.child {
    flex: 1 0 25%;
}

.child:nth-last-child(2):nth-child(4n) {
  min-width: 33%;
}

This selector expression in the last block targets any element that falls in the fourth and final column (4n) which is simultaneously the penultimate element ”“ that is, the element before the long, single remainder. By bumping this element’s width to 33%, it’s forced down into the final line, leaving the penultimate line with just three elements.

The result is the elimination of the single element and a dynamic grid that resolves into a line of 4, then 3, then 2 children when there is a single remainder. No matter how many child elements are present, the grid never ends with a single element row.

Try adding and removing items in this codePen demo and experimenting with different numbers of columns. The basic formula for the selector is .child:nth-last-child(2):nth-child([number of columns]n). The width you set has to be somewhere between the base width and the base width for the grid if it had one less column. So, if there are five columns, the width set in this override should be between 20% and 25%.

Controlled chaos

In the last example, I singled out a child element based on its index using the algebraic :nth-child and nth-last-child. Because of my Flexbox configuration’s insistence of filling the available space according to its element growth and wrapping features, I could do this safe in the knowledge that I would not produce an incomplete, gap-ridden grid.

Based on this principle, I can arbitrarily change the widths of any grid children I like. I can get quite expressive with this and build in some algorithmic asymmetry.

.child:nth-child(3n) {
  width: 33.333%;
}

.child:nth-child(5n) {
  width: 50%;
}

.child:nth-child(7n) {
  width: 66.666%;
}

By using prime numbers (3, 5 and 7) to augment the child elements’ width at intervals, any perceived regularity in the layout can be easily diminished. However, the layout never breaks as such thanks to our go-to wrapping and growth settings. Be sure to try out the codePen demo for this one and experiment with different, superimposed nth-child intervals.

Gutter tactics

(This is an edit to the original article after Stu Cox started a discussion about how one might deal with gutters.)

Gutters are, put simply, the gaps between grid children to space them. I’m not absolutely certain what the “flexy” way to add gutters to any of my described grids would be, but I am aware of one technique which would create gutters that do not break when wrapping produces remainders.

.parent {
  display: flex;
  flex-flow: row wrap;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.child {
  flex: 1 0 25%;
  box-sizing: border-box;
  padding: 0 0.5rem 1rem;
}

It is important that I treat each item equally, rather than trying to anticipate things with nth children, because any of my items can potentially grow or wrap. Hence the padding: 0.5rem 1rem on all .child elements. This produces a 1rem gutter around each child, no matter how they wrap or grow.

All that’s left is to compensate for the redundant 0.5rem space for left-most and right-most children, facilitated by the left and right negative margins on the parent (Stu arrived at this notion). Depending on the vertical rhythm of your page, you may want to remove the redundant bottom margin of the last child row too, with margin-bottom: -1rem on the parent too. There is a codePen to play with.

Conclusion

I hope that this short article has given you something to think about regarding the way Flexbox handles and tolerates dynamic content, allowing you to tersely code robust yet expressive layouts. With Flexbox, for the first time, we’re afforded something akin to true grid systems; grids which govern themselves, freeing us to focus on content creation and aesthetics.

What we learn in user research is that people are unpredictable, resistant, hesitant, contrary, determined, inventive and most of all disparate. Yet we spend large amounts of our time as assistive technology testers worrying about the technicalities of which screen reader supports what with which browser on which operating system. We focus on discrete instances of what’s broken or unbroken, without considering the people using these technologies regularly and what strategies they employ to solve problems and complete tasks. In short, we don’t tend to treat screen reader users like users.

Despite having some knowledge of the conventions and controls of NVDA, JAWS et al, my sporadic test usage of screen readers is mere fumbling — fumbling around pages I’ve built looking for information I already know is there, usually while I’m looking at said pages. This really doesn’t tell me a great deal. So, I want to ask any screen reader users reading this to help me and others to fill in some gaps.

To follow is a short list of questions that you can fill in at your convenience, leaving out any that aren’t applicable or you’re not happy answering. I’m not expecting any kind of feedback that can be converted to numbers and metrics, so there’ll be no dreaded visualisations; I just want to hear how you go about things. You can send your answers to heydon@heydonworks.com and I aim to publish them, respecting your anonymity unless you wish to be cited.

Thank you.

Edit: Here are the responses!.

• When you arrive on a new, unfamiliar web page, for which you have no prior knowledge or expectations, what actions do you perform first?
• If, while using a web page, you suddenly find yourself lost (or in a place you didn’t expect to be) what do you do to get back on track?
• When it becomes clear that a web page is complex, what do you do to help break down the information?
• If you know there’s some information on a website but you don’t know where, what helps you to find it?
• What’s the most difficult part of navigating a web page?
• What one thing do web designers do in the design of their web pages that makes your life most difficult?
• Which features or aspects of web pages do you consistently find the most difficult to use and why?

Have you ever considered the notion that Heydon Pickering might be dead? Probably not — there’s no reason why it should occur to you. But now I’ve brought it up, don’t you feel compelled to examine the idea further, if only just to revel in its absurdity? Yes you do. I’ll be the first to admit it’s a controversial argument to make. In fact, it has very little utility other than in creating controversy, driving traffic to its locus of pointless speculation.

If you open up your mind and really think about it, this puts a question mark over my use of the word “admit”: It makes it sound like this patently manufactured controversy was an accidental happenstance, which is disingenuous. But it’s important to ask questions, and it’s a good thing that people like me are brave enough to do so. Try to ignore the fact that I started by making statements and now I’m talking about questions for some reason.

Let’s have a list. Do me a favor and pretend that each item in the list is, somehow, supporting evidence that Heydon Pickering is dead, rather than merely a discrete morsel of conjectural drivel.

• Heydon hasn’t changed his Twitter avatar in over three days
• I’ve never met Heydon
• Heydon hasn’t replied to that long, rambling email I sent the other day — the one filled with vague and nonsensical questions
• Heydon staggered into the office of my tech startup on Tuesday morning with a pallid complexion and empty eyes, then proceeded to bite 372 grammes of flesh out of my left arse cheek. (This isn’t technically true but you can’t argue that it couldn’t happen, because everything is possible no matter how unlikely. Also, that “372″ figure is oddly specific, which must mean something.)

Stuff moves fast

It was never really about evidence. Well, it was twenty minutes ago when I was making the list you just read, but I’ve lost confidence in that and I’ve decided to change tack. Now it’s all about getting you on side with sweeping statements and making you feel there’s a vague threat of disenfranchisement on the horizon.

I mean, what if Heydon Pickering is dead and you’re the last person to publicly acknowledge it? Do you really want to be the only person sending Heydon tweets and birthday cards in five or even two year’s time? Can you afford the professional and personal embarrassment of being seen to fixate on the deceased? Of course not, and I think we can agree that the question of whether Heydon Pickering has demonstrably popped his clogs isn’t even a factor here.

Don’t worry, I can help. Your career is safe in my hands. All you have to do is compose a simple tweet. Just write the word “this” and link to this article. That’s it. Look, I’ve even mocked it up for you:

If you’re lucky and you’re one of the first to do so, you might even be credited as an early adopter: one of the first people to consider Heydon Pickering no longer a living, breathing mammalian organism. Then when he really dies, you can say you were ahead of the curve.

Now an interview

In this final section, I’m going to call upon the experience of a person you’ve never heard of who you suspect is either my colleague or lover.

So, Kenneth, is Heydon dead?

“That’s an important question — a question we all need to ask. And I think the answer is ‘it depends’. It depends on whether Heydon is up and about, breathing and talking and generally doing things as a living person might or if he’s laying down very still, secreting the scent of necrosis.”

Okay, but do you think he will die, if he hasn’t already?

“I think the writing’s on the wall. Heydon Pickering’s mortality means he just isn’t going to live forever. It might be time to bite the bullet and start working and conversing with younger and fitter people. People who were born after Heydon.”

What do you think the future holds?

“I think we need to radically rethink the landscape. In fact, I think we need to start thinking in terms of seascapes instead. We’ve started to invest in lobsters, since they do not show signs of senescence at all; they just keep on growing and getting stronger throughout their lives. They’re also much more willing to reproduce than Heydon.”

I had this brainwave while nursing a hangover in Brighton after Responsive Day Out: There are a load of folks working in the overlapping fields of web standards and accessibility who are musicians. Some really quite accomplished. So, why not ask around and have some tracks donated to a “charity” album which generates funds to support web accessibility. Simple(s).

Tracks flying in

The response has been promising, so it’s likely to go ahead. The tracks submitted so far (in no particular order yet) are:

• Luck — @gorkamolero
• Imprecise and Infrared — @brucel
• The WCAG 2.0 Theme Song — @davidmacd
• The Git Rap — @marak
• Eatin’ Dust (Fu Manchu cover) — me
• Tour De Force — @brothercake
• Swallows — @thatemil
• Man With Small F (The Inaccessible PDF song) — @terrillthompson
• Girl In The Room — @brucel

Are you a musician? Do you work in/on/under the Web? Do you have a piece of music laying around? Please contact me using heydon@heydonworks.com or via Twitter.

You’ll notice there’s two submissions by Bruce Lawson. This means I can legitimately use the expression “Brucey bonus”, so that’s nice. I think it’s a good balance between web development-themed novelty tracks and just good tunes. In addition, I’m trying to pen a track about <div>s called “Divs”.

Artwork

Artwork-wise, I have done a bit of creative lettering. I’ve taken the #a11y hashtag and supplanted the 11 for two fingers forming the Ronnie James Dio-originated “devil horns” hand gesture. Here’s how it’s looking:

The beneficiary

There has been some discussion about the beneficiary of the proceeds. Ideally, I want it to support an international web accessibility org’, but I’ve had trouble finding one of them. So the shortlist is NVaccess (creators of the NVDA screen reader), The Web Accessibility Initiative (WAI) and The British Computer Association Of The Blind. Let me know which you prefer in the comments and I’ll take it on board.

E-commerce

I’m currently considering selz.com for actually selling the record. I was impressed with the inclusion of focus styles and a “skip to content” link on their homepage. Gumroad was lacking in these areas. Other suggestions welcome.

\m/

It’s not that I don’t relish some experiences in life. It’s not that I don’t enjoy, well, enjoyment per se. It’s just that if I got my jollies from using a website to book train tickets, I’d have to ask myself some serious fucking questions. “Wow, adding that purchase to my shopping basket was just so darn delightful! Fuck it, I’ll buy more, for the same day, going to the same place, just for the experience of it all! Hnnnnnnnn.”

Sorry, I’ll calm down.

The other week I attended a user testing session as the lead designer and developer for an app intended to help people find out if they’re entitled to disability benefits. Predictably, and tragically, only a small proportion of the testers who’d signed up would make it to the session. Due to ill health. When the first tester finally arrived (Ian, let’s call him), we waited a full 5 minutes while he sat, head in hands, catching his breath after climbing just one flight of stairs.

Ian told me, in conversation during the session, that he had spent a decade of his life living as, essentially, a hermit; not interested in the trappings of modern, technologically mediated and socialized existence. He came equipped with a smart phone he’d acquired that week. It was a Windows phone, though he wasn’t aware of that.

Now.

Do you think for a moment that Ian expected or wanted to experience our product? For it to impress and delight him as it enveloped his consciousness? Do you think he was looking to be carried away on a flying carpet of pixel perfection and shit that swooshes around arbitrarily? Do you think he watches Apple keynotes? Do you think he’s the sort who’d lean over to you and go, “hey, check out this new Honda advert! IT’S SO WELL DONE.” No, of course not, because he doesn’t care about interfaces, or design, or technology. He wanted using the app to be straightforward and painless and to get it all over with as quickly as possible.

That’s how I feel too, most of the time. I’m terrible at using interfaces, and I hate interfaces which try to draw me in, making me use them more than I should have to. That’s why I’m a User Experience Designer.

So, this is probably as good a time as any to tell you that I’ve been nominated for Designer Of The Year in the Net Awards and you can vote for me, haha.

Frame Based Animation with Sass

I wanted an easy way to create traditional animations, wherein each frame is a different drawing. I created this Sass @mixin which generates keyframe animation blocks for nth children, placing each of these “frames” in an animated sequence. Note the use of the steps(1) timing function…

Darren was a liar — a compulsive one — and boy did he tell some whoppers. Not “the world was created in one week” whoppers, but big ones nonetheless.

One lie Darren would tell, at the age of 12, was that he had lost his virginity. Now, nobody had any primary evidence (eww) that this was not the case. But his diminutive age, the fact that he went to an all boys school, his reputation for demonstrably lying in other cases and his resemblance to a tug boat all contributed to the incredibility of his claim. Not one of us could prove he was a virgin, but it stood to reason that he was.

The part I find interesting is that none of the other 12-year-old boys would question his claim. Not one. Not because they didn’t know how, or were afraid to confront him, but because it would not be politic. The unwritten law stated that one unbelievable lie was worth another and, so long as we didn’t skewer his fantasy, he would have to accept that he couldn’t skewer ours.

Within weeks, every gawky, unattractive and socially inept 12-year-old boy who had come into contact with Darren was a virgin no longer. An agreement had formed, quite organically; an unspoken one to believe the unbelievable.

So what do you suppose would happen to any boy who questioned the ludicrous sexual voracity of our barely pubescent cohort? What do you suppose would happen to the boys who, when asked, “have you lost your virginity too?” would reply, “of course not, I’m twelve years old.” Naturally, they were set upon; teased and taunted and ridiculed. The defenders were so fierce because the lie was so fragile.

I’m ashamed to say I sometimes tended to be a “defender” as a child, but I try my best to be the kid who says “nope” as an adult. For others, reaching maturity does not appear to be a case of growing the confidence to be truthful. Others choose to weaponize their unbeliefs, trading taunts for decapitations. Why? Because the shame of lying to oneself is cumulative over time, and because the starkness of violent acts make the lies that beget them feel ever so true.

This week is Geek Mental Help Week. I admit to having mixed feelings about this. On one hand, I salute the effort. We need more awareness of these very disabling conditions. On the other hand, these kind of awareness campaigns hit me hard and I end up just wanting to crawl under a rock until they are over.

I am a geek. Nowhere as geeky as some, but certainly geeky enough to wear that hat with pride.

I also have been dealing with chronic (often severe) depression for the last 30 or so years. This is not something I discuss in public as there is still much stigma attached to it. There are very real risks to me and my loved ones if the fact I deal with depression, and its extent, became known. This is why I asked this post be anonymous.

And in part it is why awareness campaigns such as the Geek Mental Help Week are so important. The public needs to be educated about the existence and the reality of mental illnesses, including in the IT world. And our geeky brothers and sisters who battle mental illness need to know they aren’t alone. Mental illness exists. 4.6% of adult Americans experienced a serious mental illness in 2012. 20% of Canadians will personally experience a mental illness in their lifetime. In the UK, suicide is the leading cause of death for folks under the age of 35. I’m glad these issues are being discussed. I’m glad these stories are coming out.

That said, I find it incredibly difficult to have stories of depression thrown in my face, over and over, and over again. I want to scream "ENOUGH ALREADY!" I’m still healing from the furor that hit the web after Robin Williams committed suicide. A lot of well intentioned individuals were talking about it. They were discussing the importance of reaching out to people and making sure every suicidal individual out there had access to help. I’m not sure how many of these people realized the negative impact they were having on a lot of people in situations like mine. There’s rarely a day that goes by without me thinking about suicide.

I’m reminded of the R U Ok? campaign that came out of Australia, "encouraging all Australians to regularly and meaningfully ask anyone struggling with life, ‘are you ok?’" It looked like people were randomly asking people "Are you ok?" They asked you that, and seemed to think it discharged them of responsibility. I’ve wanted to answer back "No, I’m not ***king ok," just to see what they would say, what they would do. But I knew full well there was nothing they could do or say for me.

In some respect, it’s a bit like the media campaigns about "speed kills" or "don’t drink and drive," you know, the graphic ads showing the effect of a high speed car crash? It doesn’t seem to have a real effect on people who speed or drink. But it sure as hell has a direct and negative impact on people who have lost loved ones in car crashes caused by people who were speeding or drinking.

I have a favor to ask of you. If you are new to this, if you have no experience of dealing with mental illness (personally or through loved ones), please, do take a moment to consider the impact of your enthusiasm about the issue. Because awareness campaigns are double-edged swords. We need to build awareness without forgetting there are real people, suffering real pain, that sometimes get caught in the cross-fire.

In the meantime, I know that the thing for me to do is withdraw when these things happen. I need to take my distance from the onslaught. And so once more, I shall disconnect for a few days, until the enthusiasm fades a bit, until I can hang out without being confronted with so much talk about mental illness.