Archive: 2007

Experiencing accessibility (and a video tour)

I first became interested in accessibility when I was at university. I met several people involved in using music technology to help disabled musicians to explore music. It was inspiring to see innovative forms of human-computer interaction take shape and enable disabled musicians to compose and perform their own music.

The enthusiasm that these people had for making music more accessible got me into accessibility in the first place. And no wonder they were so enthusiastic. Most musicians will be able to tell of the satisfaction they get from music, whether it be in writing their own pieces or playing at a gig. Some people find solving problems with technology very rewarding. Combining a love of music and of technology for something worthwhile is a triple whammy!

I had first hand experience in making music more accessible while working on a software project with the Drake Music Project. During this project, I was able to have the software I worked on tested by musicians who use single switches to interact with computers. Admittedly, the software wasn’t the most wonderful thing since sliced bread, but seeing how disabled users may go about using a piece of software was invaluable.

A video tour

Today, my musical endeavours are few and far between and my work is geared towards the Web. Still, my experience of and enthusiasm for accessible technology continues to steer my thought processes when building websites.

Getting our own experiences of accessibility inspires us to think and validates what we do with accessibility in mind. I was reminded of this a few months back while I was reading Grant Broome’s post in which he linked to a video by Victor Tsaran, an accessibility engineer working for Yahoo! — Introduction to Screen Readers. It can be difficult for us to appreciate the user perspective by getting direct exposure to disabled users, but watching a video can help us to build an appreciation for accessibility.

Since seeing Grant’s post, I’ve been slowly putting together a list of videos that demonstrate accessibility, which I thought I’d share with you. I’ve kicked it off with some interesting videos I found from Yahoo! in their YUI Theater channel and have listed a couple of other interesting resources. I hope that people find the page useful and perhaps I will add to the list over time.

Related reading

Analogies for accessibility

I’ve never been able to pin down my learning style. Although I’ve always thought myself to be hands-on, my learning style tests always seem to suggest that I’m multimodal, varying slightly around level scores.

I like analogies. I find them to be useful tools for learning, particularly ones that have physical value. They make understanding a new topic easier by relating it to and drawing parallels with an already understood topic. Apparently, it’s auditory learners who tend to use stories or verbal analogies to understand things. Hmm, perhaps that somehow links with my love of music.

Making accessibility more… accessible

Okay, before I wander off on any more tangents, I’ll get to the point. In learning about Web accessibility, I’ve come across a few analogies for helping people to understand the topic and I have a couple of my own. I thought I’d air some of them to see what people think and perhaps hear some new ones.

The access ramp analogy

It’s probably safe to say that most people will think of physical access to buildings when you talk to them about accessibility. It’s something that most people know about and can understand without much effort.

Ramp access to buildings makes a good analogy for any kind of access technology — something that reduces the effect of a barrier or bridges a gap. Ramps improve accessibility for wheelchair users, parents with prams, the UPS guy delivering your office’s new photocopier – notice it’s not just about people with disabilitiesfootnote 1.

Jon Dodd from Bunnyfoot uses a library as an analogy for Web accessibility (or see the library analogy in more detail in the Northern Ireland Civil Service’s accessibility primer). It makes good use of the ramp analogy. Personally, I think a ramp is more an example of what I call bolt-on accessibility, designed to overcome existing obstacles rather than prevent them.

The transport analogy: everyday access

Think about the innovation that are curb cuts while reading this quote from someone who obviously knows what he’s talking about, me:

“We all know, the Web is not as real to people as the physical world. Using a computer is still very alien to some people. This, I think, is one of the reasons that people are unaware of Web accessibility. Most people will see accessibility on a daily basis in the physical world. In a way, everyone experiences accessibility on a daily basis — every time a person drives their car, rides their bike or uses their wheelchair. Roads, pavements and buildings are reasonably barrier-free, or getting there. People can understand these kinds of physical considerations easily.

“I think some people have difficulty considering accessibility in computers because it’s fairly intangible and those people almost expect accessibility to just exist because they don’t have any problems.”

Roads are so common that we forget that they facilitate accessibility — to get you from A to B. Pavements (“Sidewalks” for the uninitiated) have curb cuts, an innovation that facilitates accessibility for many of us on a daily basis.

Websites are like mobile phones

This one is more related to user experience rather than directly to accessibility.

You know how annoying it is when you’re trying to send a text message on your mobile phone and you can’t get a signal? You try holding your mobile up in the air to get a better reception. You try a different room to see if there’s a better chance of a signal somewhere else. You try hanging out the window. You wonder if there’s a problem with your phone.

It’s an example of a poor user experience and inaccessibility caused by a barrier or some other problem. Like trying to send a text message when you’ve got poor signal, sometimes things are not as immediate or as obvious as they should be.

People may try to muddle through, but rarely without frustration. We try relentlessly to get better reception with our mobile phones, hoping for success, but sometimes there just isn’t a signal. Likewise, sometimes a website is simply more noise than signal. Don’t fuel user frustration — take time to consider how you might create a positive user experience.

You may not be able to send your text message because there’s too much interference from something — a problem caused by things you cannot see. Sometimes there’s a problem with the phone that you don’t know about. If you cannot see or do not know about a barrier, it doesn’t mean it’s not there. Being able to foresee problems comes with experience, but it’s important to be receptive to problems faced by frustrated users in order to learn. When it comes to accessibility, if you can’t see or don’t understand a disability, it doesn’t mean you’re okay to ignore it.

Bad experiences with your mobile phone will make you think twice about using that service provider in the future or buying that brand of phone again, won’t it? People are impatient, so don’t burn their fuses at both ends by not taking the time to think about accessibility and ensuring a good user experience.

Accessible specsfootnote 2

Okay, this one’s not an analogy for Web accessibility as such, but I think it’s worth mentioning.

Think of how many of your family and friends either wear glasses or contact lenses. Quite a few I’d imagine. Myopia (nearsightedness) is surprisingly common. Something in the order of half of us are affected by it. Much of the world will probably think nothing of it these days, but there was a time when specs were a new technology (eyeglasses were invented in northern Italy some time around the end of the 13th century).

Spectacles are really a crutch — an aid, not a solution. We have solutions for improving Web accessibility, and techniques that help us to avoid causing problems for people, but my guess is that the majority of Web designers don’t use them. I sometimes feel frustrated to think that accessible techniques are not used by every Web professional. Then I remember the specs that are perched on my nose and wonder how quickly they caught on when the technology was new.

Your analogies

A couple of rather straggled analogies there, so I’m sure there are better ones. Do you have a favourite analogy for accessibility you’d like to share with the world? Post a comment and let us know…

Footnotes

  1. Some people would argue that a ramp is an example of universal design rather than being an accessibility feature. That’s not meant to sound like a dig at the “universalists” out there, but while I’m thinking about it: It seems to me that there are more useful things that require our attention than arguing about different interpretations of what accessibility encompasses. Just a thought. Back to footnote 1 source
  2. Nope, not WCAG – I said specs! Back to footnote 2 source

del.icio.us proxy v1

April 2, 2008: version 1.1 released.

A little while back, Ian Lloyd mentioned that he could not save links to del.icio.us because the site is blocked at his workplace. So, I wrote a proxy using PHP.

What does it do?

The proxy allows you to save bookmarks to your del.icio.us account without going to the del.icio.us site itself.

So, why is that useful? Say you’re at work and your friendly IT department have decided that de.icio.us is an evil distraction and must be blocked to save the company from going under. You still want to save bookmarks to your del.icio.us account and this is where the proxy comes in.

Once installed, the proxy sits somewhere on your own website – which is hopefully not blocked as well – and waits patiently for you to send it a bookmark. It will save the bookmark to your del.icio.us account for you using an interface kindly provided by the folks at del.icio.us (their API).

So, the proxy saves your bookmarks to your del.icio.us account by proxy, hence its name. Obviously, the del.icio.us service must be available in order to use the proxy.

Download and install

Download del.icio.us proxy

That link also takes you to the installation instructions. The proxy is fairly easy to install, even for people with little PHP knowledge. You just set a few things and upload it to an area of your site.

Once installed, it’s a cinch to use. It’s not been tested extensively in the wild yet, so consider this version a beta release. Having said that, Ian says he’s been using it for a little while with no problems, so I figured I’d finally release it for others to use.

I hope people find it helpful. Enjoy!

Notes

After some initial theatrics with throttling, writing a proxy was quite straightforward. To begin with it seemed that, despite sticking to the API rules about not querying the server too often, querying del.icio.us from my domain had been permanently blocked.

Having discussed my intent and my code with the friendly del.icio.us support team, I’m assured that this shouldn’t be a problem. However, thanks to a tweet from Shiflett, I coded in some extra protection against being throttled.

If you do get throttled by del.icio.us while using the proxy, I suggest you get in touch with del.icio.us directly to sort it out quickly.

Thanks

The proxy uses the PhpDelicious library written by the lovely Ed Eliot. Thanks Ed.

The idea to check for the del.icio.us account’s last update time before posting to it came from Chris Shiflett. Ta Chris.

The inspiration for the proxy in the first place came from Ian Lloyd. Cheers, m’dear.

Updates

April 2, 2008

Version 1.1 released with important fixes.

December 6, 2007

Version 1.0.1 released with annoyance fixes.

Looking forward to Fullabrook

I’m looking forward to visiting the Fullabrook Down wind farm. It should be ready by 2010, provided the plans don’t get scrapped.

The site in North Devon received the go ahead from the government last Tuesday – 22 wind turbines generating around a third of North Devon’s electricity.

Local views

I think most of us will agree that wind farms are no magic bullet. I’ve always considered them to be just part of a larger solution. But wind farms have caused quite a stir in North Devon, as can be seen by the last time I wrote about wind energy.

North Devon is such a beautiful area. It’s my homeland and I love it. I’d hate to see anything ruin it. However, I just can’t relate to the more vocal locals who write in to the papers to spout on about the devastating, horrific things that will happen due to wind turbines. It’s as if these wind turbines getting the green light means the world is going to end.

The letters in the local papers often seem hyperbolic, even vitriolic. They instil an inherent cynicism in me, so I have grown tired of the debates. Of course, that’s my problem and I expect people will pick me out on that. Anyway, I don’t necessarily think the people who write in are stupid, ignorant or even wrong. But I see figures buzzing about their comments that are never backed up with solid sources. I see letters of opinion quoted as evidence. I don’t question the legitimacy of the feelings such letters express, but their weight as factual evidence. Just as I don’t expect my opinions in this very entry to change anybody else’s view, none of what I read against wind farms sways my opinion.

Something I find odd (and frustrating) about the whole wind debate is how seemingly outnumbered I am by people who are strongly against wind energy. The local anti-wind groups seem far more impassioned and more vocal than those of us that are pro-wind energy.

Local consequences

One of the main concerns of locals is the impact of the wind farm on our primary industry; tourism. Quoting Nick Harvey, our local MP, via the North Devon Journal:

Mr Harvey added that the tourist industry is worth £500 million to North Devon and Torridge and any decrease in income would create a whole [sic] in the local economy.

I wish I had the power of foresight to be able to support or play down those concerns, but I don’t. I don’t propone to have the answers.

I’ve commented before that I stop and watch wind turbines if I get the chance. I can remember a few specific times I’ve stopped or wanted to stop when passing a wind farm: there was one farm we passed in Cumbria (Lambrigg); the lone turbine just off the M25 near junction 20 (the Renewable Energy Systems office at Kings Langley); the one at Green Park off the M4 near Reading; the three turbines at Forest Moor; the new farm at Avonmouth, Bristol. Am I the only person who finds wind farms calming and beautiful to watch?

In a previous entry about Batsworthy Cross, I wrote:

At the EcoTech Centre in Swaffham, they have a turbine that you can go up in and see the view from their viewing platform. [...] I think such a viewing platform would be a fantastic addition to the area, for example, at a good viewpoint such as Batsworthy Cross.

Viewing platforms could be a great feature at Fullabrook too. One or more turbines with viewing platforms. I’m sure that the views across North Devon would be astounding, and even the most ardent NIMBY would begrudgingly have to take a trip up to the top of one.

How about a centre to teach visitors about leading a more sustainable lifestyle? I think an “eco-centre” would fit well into the ethos and essence of the area. (One of the things I love about North Devon is how localised some things are, especially food. You can get fresh produce from local sources daily and many of the restaurants and pubs are locally sourced.)

Perhaps the Fullabrook Community Fund could contribute towards such developments or help boost tourism in the area in other ways?

I can understand that the development period of the turbines will entail problems for the people who live nearby. I can’t understand people getting put off their annual pilgrimages to North Devon because of a wind farm.

Further reading

Your views

Having experienced a barrage of comments about wind energy the last time I blogged about it, I’m tempted to turn comments off for this one – it’s only my opinion after all – but sod it… let the comments flow freely!

CakePHP 1.2: config for the console

I hope readers will forgive yet another fleeting entry from me. My Internet connection has been unusually unreliable for about six weeks and since Monday it has been disconnecting around ten times a day. Eugh.

In other news, I’ve been using CakePHP recently. So far I’m finding it pretty good. It’s all starting to come together, but the somewhat distributed documentation makes Google my best friend for development right now! I’m finding some useful little bits as I go, so I thought I’d share things as I discover them.

Setting up the new console in CakePHP 1.2

I found it easy enough to set up the console. One of the first things I did was watch some of the screencasts, including one on setting up the terminal to run console shells from the command line. No problem. But…

Problems connecting to the datasource

I hit a bit of a problem when I wanted to play with the Access Control List (ACL) component. The console couldn’t access the database when I tried to set up the database tables:

cake acl initdb

It had the correct details from the database config file, but it just wouldn’t connect. Specifically, I was getting this

Can't connect to local MySQL server through socket '/etc/mysql.sock'

Grr. The website connected to the database fine when browsing. Hmmm. MySQL seemed to be behaving. Double hmmm. I began thinking it must be a permissions issue somewhere.

Nope, it turns out that localhost hadn’t been resolving to my local IP address. Putting in the IP (127.0.0.1) as the database host fixed everything. I’m guessing that command line PHP, or at least my installation of it, doesn’t do name lookups.

Huge thanks to the lovely and wonderful lornajane for helping me track down the problem. This saved me for some additional pain on what has already been a painful week! If this little nugget helps you too, feel free to comment and say thanks to Lorna with me!

Quick Tip: speedier PHP/CSS commenting

Continuing in the vein of “the obvious ones are often overlooked,” here’s another quick productivity tip!

When you want to type a comment in a PHP or CSS file, speed things up a little by using the / and * keys on the numeric keypad. On (most) laptops, hold down the Function (Fn) key to access the overlaid numeric keypad.

Back when I used to use a full-size keyboard, I would use the / and * keys on the numeric keypad to quickly insert comments into my PHP or CSS. It was so much quicker than using / and Shift+8 keystrokes.

When problems with RSI last year encouraged me to switch to using a compact keyboard, I missed that shortcut. However, I quickly realised that I could hold down the Function (Fn) key on my new keyboard to quickly access the overlaid numeric keypad.

I recently bought myself a MacBook Pro and have just figured out that I can do the same thing. Holding down Function (Fn) allows me to access the numeric keypad and my quick way of typing comments. Yay!

Geek networking in the South West of England

I went to the Future of Web Apps Road Trip geek-up in Bristol last month and more recently to d.Construct in Brighton. Both events were a great departure from the workload and a chance to socialise with like-minds and discuss Web geekery.

Networking within our industry is difficult in areas of the South West of England, particularly the more sparsely populated areas, the backwaters of Devon being my particular neighbourhood! Hence, the Road Trip meet-up in Bristol was especially welcomed.

Attending these recent events reminded me how important it is, at least to me, to meet up with others in our industry. I’m encouraged and inspired by these events, and I find it difficult to get to them often enough. It was with this in mind that Zach Inglis and I launched South West New Media (SWNM), but with sporadic interest in the site and little time for promoting, it has fallen by the wayside. Time to do something about it.

There’s movement on the creative horizon up in Bristol (or “Brizzel” to the locals) with Bristol Skillswap, BarCampBristol, GeekTogether, etc. Indeed, judging by activity on the
South West Web Designers (SWWD) group, recently set up by Paul Boag, there’s quite a bit going on throughout the South West.

Call to action

I think it’s time to pull my thumb out and keep the South West New Media site updated with events – there certainly seems to be a growing interest for it around here. So, if you run or attend a geek event in your area, tell others about it by adding it to the South West New Media group on Upcoming.org. The event will then show up on the site too. If you have any ideas for making the site useful to you or are interested in helping out, give me a shout as I’ll be freshening up the site before the year is out.

There’s also a mailing list on South West New Media, so feel free to join that or the aforementioned South West Web Designers (SWWD) group.

Grow Blooms

More often than not, there comes a time in a freelance Web designer’s career when you feel the need to branch out. The roles of a Web designer are diverse and it’s easy to feel that you need to be all things to all people. Perhaps you feel you’d like to develop as a specialist in a particular area, but you like your independence and want to remain your own boss.

All this pretty much describes me about six months ago. Over time, I had developed valuable relationships with others in the industry through networking. By incubating those relationships you can bring together a group of people who work well together. It was around this time that I was invited to join a co-operative. Joining would mean that I could specialise and remain independent, but be part of an already well-established brand that provides a full range of services. The whole is greater than the sum of the parts. I accepted.

Co-operative Growth

Grow Collective works to co-operative principles. There’s little point in me regurgitating the principles of co-operative business when the International Co-operative Alliance (ICA) website describes them better than I could.

Having well and truly settled in at Grow, I find it an environment in which I can work well and in which I am encouraged by my peers to develop both personally and professionally.

At the moment, we’re attracting a large number of work prospects that are beyond our current capacity. As a result, we are inviting freelancers designers in the Bristol area into Grow Collective, especially those with a special interest in Web standards, user centred design, information architecture and accessibility.

In the invitation on the Grow website, Jon Tan further explains how Grow operates and what you can expect from working with us.

Assimilation

Alan Colville has recently received a warm welcome as Grow Collective’s latest addition. Alan is a user experience designer and usability consultant, bringing a wealth of experience to the co-op.

If you like the sound of the way we work, have a read through our invitation on the Grow website. If you think you’d like to become a member too, drop Jon Tan a line to introduce yourself.

Quick Tip: hard refresh for Firefox on Mac

Until recently, I ran Firefox on my Mac with the cache disabled because I found it annoying that my tweaks weren’t updated when refreshing a work in progress. My usual Control/Command+F5 wouldn’t work for me. Being used to Firefox on Windows, I’d often forget and find myself powering up VoiceOver.

To clarify, on a Mac, Control+F5 is not a hard refresh as it is on Windows. In the majority of cases, the Command key replaces the Control key when converting Windows shortcuts to Mac ones. For example, Control+T to open a new tab under Windows is Command+T on a Mac.

Logic dictates that a hard refresh should be Command+F5 on my Mac. Indeed, the Firefox documentation on keyboard shortcuts shows that Command+F5 should refresh overriding the cache, but that loads VoiceOver for me (OS X 10.4 or later).

The long and short of it

I now use Command+R for refresh and Command+Shift+R for when I need to do a hard refresh. As you’d expect, you can replace Command with Control for the Windows equivalent. And now I can turn my cache back on and save some time and bandwidth!

Of course, I could have set my own keyboard shortcuts! But then I’d have to set them up on all installations of Firefox I use.

Related reading

abbr datetimes in microformats?

James Craig and Bruce Lawson have raised an issue on the Web Standards Project blog today that I’ve been meaning to blog about for a while: accessibility issues raised by the use of abbr elements in the Datetime Design Pattern to provide machine-readable representations of dates in microformats.

In their blog entry, hAccessibility, James and Bruce explain my thoughts on it very well – it saves me writing it all up! It’s well worth a read if you’re into microformats.

To summarise my thoughts…

Basically, I think the expansion of an abbreviation should be human-readable. Inspired by an e-mail from Jim O’Donnell, testing microformatted date and time with screen readers back in October demonstrated that an ISO date format is hardly nice to hear being read out by a screen reader.

Having said that, it’s worth bearing in mind that, if a screen reader user cannot understand what is being said, they may well go through the text character-by-character in order to understand it. If someone does this with an ISO formatted date, it may still not sound great, but might then be easier to understand.

More recently, after discussing this quite a bit with Jon Tan, I settled (at least, for now) on using span for microformat datetimes instead of abbr, which obviously means my microformatted dates may not get parsed correctly. I think it’s a far better solution than using abbr, at least until something better is decided upon.

Jon and I have discussed a couple of alternatives:

  1. Prepending the title attribute of an abbr element with some human-readable text to give context to users, e.g. “ISO date format: YYYY-MM-DDTHH:MM:SS+ZZ:ZZ”
  2. Although this may be a corruption of Web standards in itself, using the lang attribute to declare the date format being used, either following it by the formatted date or putting the formatted date in the title attribute.

Anyway, check out the discussion on the hAccessibility entry. I’m interested in seeing where it leads and to what solution.

Updates

29 April 2007

Following comments on hAccessibility, it was proposed that the datetime design pattern for microformats be extended to allow the use of the title attribute on a series of permitted elements, e.g. span, em, etc.

There are problems here:

  1. Losing the abbr means that the “semantic tie” between the marked up text and formatted datetime is lost. We are no longer providing context to the datetime information.
  2. The title attribute may be validly used to provide additional information to an element. As such, wherever a title attribute is already in use on an element, that element cannot be used to also provide a formatted datetime. We don’t want the datetime to get in the way of any valid use of the title attribute. It could also make parsing unnecessarily complicated. The span element is meant to be semantically neutral, so the title attribute on a span is unlikely to carry something functional to users since there is no “semantic tie.”

This is just a cursory observation, but it seems we’re trying to use the title attribute to contain what is essentially metadata meant for machines. Other microformats design patterns have used the rel attribute for meta information. The problem is that rel always contains the context for a (usually human-readable) value specified elsewhere, e.g. the name of a person marked up with XFN is given context by the value of the rel.

What we need is a mechanism by which we can specify a “meta value” – a value that is not appropriate within the context of normal page flow – as you might with meta elements in the head. XHTML 2 adds support for this kind of thing, but what can we do now? Unfortunately, there’s no other attribute more appropriate for this use than the title attribute. The datetime attribute is only permitted on ins and del. If only we could do something like <span class="dtstart" rel="datetime:YYYYMMDDTHHMMSS+HHMM">!

The discussion continues on the microformats discuss mailing list.

30 April 2007

I knew I’d read about this before! Accessify Forum: Use of <abbr> in microformats