the online home and (not very) alter(ed)-ego of Ann McMeekin, photographer, printmaker, knitter, shoe obsessive, petrolhead and User Experience Architect.
This is a text version (more or less) of the talk I gave at BarCampLondon 7, because I don’t think the slides will be of use to anyone who wasn’t there. It isn’t exactly what I said, because that was then, this is now, the talk wasn’t recorded and I can’t remember exactly what words I used.
There were 34 slides and I did the talk in around 20 minutes (although writing it up has taken exponentially longer, weirdly), so feel free to grab yourself a cup of tea (or other beverage of choice) before you start reading.
I wrote a post the other day sharing a tiny tip that makes testing websites easier (go read, it’s short, I’ll wait), and in that post, called out the first site that I found that had a missing body background colour.
Since then, I’ve spotted a quite surprising number of sites that have the same affliction and have (mostly for my own edification, and with half a mind on a blog post further down the road) been posting each site to twitter using the hash tag#missingbodybackgroundwatch and today, a couple of people asked what it was all about.
So. A bit of explanation.
Working with a changed colour scheme was, for the most part, not a problem… unless the site in question had specified the text colour to be a similar shade grey (or anything else that was quite light) at which point the entire thing became almost entirely unreadable as the colour contrast all but disappeared. Doh!
A better example would be a site that specified black for its text and neglected to set white as the background colour. If anyone visits using a browser set to the default colour scheme (or using Windows or Mac default colour schemes) that’d be fine, but if, for example, someone was using a high contrast reverse colour scheme, the default browser background colour would more than likely wind up being black, combine that with black text, and it just doesn’t work.
Since a picture is worth a thousand words, here are three screenshots that illustrate why it’s a problem.
The site in question is the New Statesman (I can’t remember why I was looking at it – probably followed a link from twitter).
Example 1: New Statesman viewed using the standard Firefox (cos that’s what I use) default colour scheme. Looks fine, right?
Example 2: Viewed using a different background colour (to imitate a different colour scheme). I chose pale green because it illustrates my point better than grey. It doesn’t look too good, but at least it’s still readable.
Example 3: Viewed as it would be if a user had chosen a high contrast reverse colour scheme. Some text is readable, but lots of it isn’t (which is a bit of a problem for a newspaper/magazine site.
It’s such a tiny thing, but the impact can be huge.
So, if you’re going to specify a text colour, make sure you’ve specified an appropriate background colour too. That doesn’t mean that you have to specify a background colour on every element. Provided that somewhere underneath your text you’ve specified a background colour that has sufficient contrast against the text colour, you can let the cascade do its thing.
Obviously, if you decide to change to using light text on a dark background in an area where the rest of the site is dark text on a light background then you’ll need to specify both.
Oh, and make sure that wherever you use background images that you back them up with an appropriate background colour as well. Otherwise, all that lovely contrast disappears if, for any reason, images are not available.
I’m going to keep collecting sites with a missing body background colour, do a bit of research and write a post about it in a wee while, so in the meantime, if you feel like it, change your background to something else (in Firefox, you’ll find it in Preferences, Content, Colours, then click on the box next to Background and just pick something else from the handily provided swatch) and if you spot any, it’d be ace if you’d post them to twitter using the #missingbodybackgroundwatch hash tag.
When I worked at RNIB, I changed my default desktop colour scheme because the default windows scheme gave me headaches and eye strain. The department of unintended consequences then stepped in and handed me a neat way to know whether a site was missing it’s body background colour without having to check any code, because it changed the default browser background from white to muddy grey.
Since moving to using a mac, I’ve grown used to the white default background in the browser, and this morning, had a moment of panic when I realised that I wasn’t sure if I’d specified the background colour in the templates I’d built (and which were delivered to the client) last week.
I had, of course, but I realised in that moment that it’d have been much easier if I went into the settings and changed the background colour away from white (to grey, but you could choose whatever makes you happy), just to avoid that kind of panic in future. So that’s what I did.
Disappointingly, the first site to fall at that particular hurdle was the Firefox default Google search home page.
I don’t know whether it’s just coincidence, but since I’ve been working in Bristol, there seem to have been quite a high proportion of geek events happening locally, which as well as being interesting, have given me the opportunity to meet some local folk.
Last night was the turn of the Bristol Usability Group, which I was completely unaware of until Joe and Laura (separately) told me about it via twitter, correctly thinking that it’d be right up my street.
It was.
Last night’s topic was Designing for Old(er) People and Andrew Arch, Web Accessibility and Ageing Specialist for the Web Accessibility Initiative: Ageing Education and Harmonisation Project (WAI-AGE) was presenting.
I’ve known Andrew for a few years now, since he worked for Vision Australia doing similar stuff to what we did at RNIB, and hadn’t had a chance to speak to him in a long time, so quite apart from hearing his presentation, it was really good to get a chance to catch up with him. Especially since he was at the Standards.Next event I was at on Saturday but I didn’t get a chance to talk to him then.
I took quite a few notes during Andrew’s talk, because he gave a lot of information that I wasn’t aware of, including lots of useful and interesting statistics, and assuming I can read my handwriting (not an absolute certainty, and the longer I get from having written them, the less likely it gets) I thought I’d transcribe (and share) what I wrote down.
It was an information packed presentation (and discussion afterwards) and I couldn’t physically write any faster and so I know I missed some stuff, so any errors or omissions are mine alone.
I spent most of last year using Subversion via command line at the request of the client I was working with at the time.
Because I’m geeky in a different way to those who are comfortable in commandlineville, it was all set up for me, and all I had to cope with were the commands to check out, check in, and occasionally, resolve a conflict.
In time, I got reasonably comfortable with those commands but I had no real idea how to go about setting up Subversion (or any other version control system) for myself, and haven’t had or felt the need to do so until now.
I had hoped that I’d be able to find an easy to follow tutorial online, but either my googlefu has failed me, or it doesn’t exist. What I did find were several tutorials that assume that you’re comfortable with the command line or that you know how subversion works and what to do, and that isn’t me, so I figured I’d set out what I did, in the hope that it might be helpful to a) someone else and b) me, when I come to do this again and realise I’ve completely forgotten what I did.
I was delighted last month to spend a couple of days with Leisa Reichelt and Mark Boulton looking at the work they’re doing for the d7ux project from an accessibility point of view.
During that couple of days, we got to talking about how to make it easier for people who make Drupal themes to make them accessible, and we came up with the idea of writing a kind of hints and tips document that could be viewed online or downloaded and printed.
It’s not an exhaustive guide to everything you should do to make a website accessible, because that would take many, many more words, but I hope it strikes the right balance of information, pragmatism and tone and gives a good overview of the main things to keep in mind if you’re designing a theme for any kind of content management system – not just Drupal.
If you’ve got any feedback on it, I’d love to hear it, and please feel free to pass it on to anyone who you think might find it useful.
Posted on: March 25th, 2009 | Filed under:shares | Tagged:accessibility | Comments Off
There have been several really thought-provoking posts about accessibility made over the last week or so, and while I’m marshalling my thoughts (and the several thousand words I’ve written in response) into something coherent, I thought it’d be worth linking to them.
Here’s my point–if your brother or sister had a disability, you would give a crap. But you don’t have to have a sibling in a wheelchair to genuinely care, even if it’s only in your work.
Empathy is what separates us from the rest of the animal kingdom. We have an ability to imagine things the way that others see them and how it makes them feel. We don’t even have to have a disability ourselves.
And from my perspective, accessibility is about giving a crap.
Accessibility is NOT a checklist.
Accessibility is about usability.
Accessibility is a paradigm shift.
Accessibility is a personal issue.
If you read none of the other links in this post, read this.
Quid pro quo. The loose translation for the Latin expression is “you give me something, I give you something.” We give the world accessibility to our community, our language, and our unique perspective. In return, everybody understands more why accessibility is so important for everybody.
Is it possible to include accessibility support “too early?” I’m not saying it should be an add-on at the end of the process/project/product development cycle, but I’m very seriously wondering what the optimal time for integrating an actual accessibility implementation is? Is it enough to keep accessibility architecture in mind from the beginning, but not implement right away? Should we get the basics right first, and then build in accessibility support based on that previously envisioned architecture after we know we have a viable product? We continue to say that accessibility should happen throughout rather than just at the end, but would it actually be better if we left it out, just for a little while, at the beginning?
It’s important for us to recognize each other’s concerns. On the one hand we have technologists who want to create things to help make the world better–help people communicate more richly and quickly, to create technologies for self-expression and commerce. Rock on. We want you to innovate because you’re changing the world. On the other hand we have people who want to use the technologies and to participate in society. When the technologists say, “Don’t make me think about accessibility, I want to be innovative.” The response from people with disabilities can be hostile because the message from the technologists is, “I do not value you enough to include you in my innovation.”
Some of the things I found interesting between the 19 and 25 March. Sadly, having roughly 100 tabs open between two windows in Firefox tends to quite seriously bork things, and I lost more than half the tabs I had open. Which, if nothing else, is a reminder that I should clean out the tabs more often.
Posted on: March 18th, 2009 | Filed under:shares | Tagged:linklove, tifi | Comments Off
Fifty People, One Question. Great concept, beautifully shot videos and a gorgeous site to boot. Love these. My favourite is probably the London one (above). The answer given by the guy seen in the still is a heartbreaker.
Crush + Lovely. The people who did the Fifty People, One Question website. Stunningly gorgeous site. Very inspirational.
The Big Picture. I love this site and wish I’d been at the SXSW panel. It’s my favourite example of accidental accessibility, and I really should write more about why (note to self).
Authonomy. Books and block printed lettering. Heaven.
Sexy Web Design by Elliot Jay Stocks. From what I’ve read so far, this is a great book. I downloaded the sample chapters, then had to buy the book. It’s gone straight to the top of the reading pile.
Talking about Design on Huffduffer. Great collection of audio files tagged with Design. I would totally Huffduff stuff if I ever found any audio files while browsing around the web.
Unofficial Landmark Trust Search Page. Matthew Somerville does it again. I’ll definitely be using this to book my next Landmark holiday (and there will definitely be a next, and a one after that, and so on – staying in a Landmark is just the most amazing experience).
André Da Loba. I particularly love the shoes in the middle of the maze.
Rediscovering my Sigma 24mm f1.8 macro lens, which, shamefully, I’d entirely forgotten I owned and taking it for a walk which resulted in few flower photos.
