Transition

Hello, friends! It’s been so long, I thought it was about time I updated you on what I’ve been doing.

Solid ground

Do you remember that roller coaster ride I referred to when I joined OmniTI? Well, it just kept on going! And after a year of doing the transatlantic telecommute, I felt the need for solid ground. I left OmniTI in September.

I worked on some great projects while I was there, with big brands and alongside wonderfully talented people. I learned a lot, made some new friends, and had quite a bit of fun thrown in, too! Thank you to those who shared their knowledge and humour with me.

R and R

To recharge my batteries a bit, I decided to take a little time away from the Web and computer keyboards. I visited a few friends around the UK, spent a relaxing couple of days on Lundy Island, and got myself to Accessibility 2.0 and PHPNW ’09. I may have also made it to a gig or two along the way!

In the background, interesting discussions were afoot, and a fantastic opportunity presented itself. Which brings me to…

Analog

For the last couple of months, I’ve been setting up a new web design and development co-operative with some friends of mine: Alan, Andrei, Chris and Jon. In December, we launched Analog.

They say working with friends or family is a bad idea. The way I see it, I want many of the same things out of my working relationships as I do out of my friendships. I like to be around friends because they’re people I’m happy in the company of. I trust them, and respect their opinions. A healthy work relationship will have many of these same traits: fun, mutual respect, honesty and openness.

When we got together as a group in September, Chris summarised his work aspirations as, “Good people. Good work.” And that was it in a nutshell for me. I have huge respect for the people I work with at Analog. They were work colleagues, and even clients, before they became my friends. I know I can work with them, and build great things. If you don’t know them, let me introduce you quickly:

Alan Colville is a talented experience designer who worked with Jon Tan and I at Grow Collective. When he’s not inspiring me with his insights into user behaviours, he’s amazing me by running up mountains and biking down them!

I’ve known Andrei Zmievski for several years through the PHP community – he’s one of the core developers of PHP. He’s an incredibly clever chap, a gifted photographer, and I look forward to one day sampling the product of his home brewing!

I first got to know Chris Shiflett when I helped Jon with Chris’s blog redesign. He’s an accomplished web developer and an authority on PHP security and HTTP. When we’re not being web geeks, we’re exercising our perfectionist tendencies by being grammar nerds.

I’ve been working with Jon Tan for several years now, at Grow and OmniTI. He’s a fab designer, and passionate about his craft. Not only have we made a good team, we’ve also become good friends. With many a tale of travel and type, you’re never bored around Jon.

I usually write about accessibility on this blog. The analog.coop holding page has a few talking points I could cover, not least the improved semantics of HTML5, and the accessibility features of ARIA. I’ll write more about these soon. For now, I hope that one page shows that accessibility doesn’t have to come at the cost of beautiful design.

Thank you

It’s already been fun at Analog – stalking people, launching Easter eggs, and wrapping up Christmas presents, like #grid… I’m really looking forward to what this year has in store for us. Here’s a thank you to the wonderful people of the Web who helped us get Analog off the ground.

Thank you, Carolyn Wood for being absolutely stellar, and helping us put our vision into words for our web site. Incidentally, the holding page scores pretty well on readability tests, which makes me happy!

Ta very much, HTML5doctor.com, for being a great place to get practical help with HTML5. Special thanks to Bruce Lawson who’s a super chap for helping me out with one particular HTML5 peculiarity.

And thanks to everybody who helped us celebrate our launch, especially Jared Smith, for making my day with his kind comment. We’re so chuffed to have had such a warm welcome from all around the world. It made a great way to end the year, and carry us through into 2010.

We will remember them

In May last year, I took a trip to Dronten in Holland where my father took part in several remembrance services for those who gave their lives in the Second World War. The Dutch really celebrate their freedom, May 5th being their Liberation Day, which marks the day The Netherlands were freed from German occupation in 1945. It was quite emotional to be part of several ceremonies and festivals where people who fell, many nameless, were remembered and celebrated.

Unfortunately, we were unable to go to Holland again this year, but our friends sent us a link to a video of this year’s commemoration day in Dronten (4 May, 2009), which shows a fly past by one of the last two Lancaster bombers still flying.

So today – as we do on November 11th – I remember our heroes, and I’m proud to include my own father among them.

“We will remember them”

They shall not grow old as we who are left grow old.

Age shall not weary them, nor the years condemn.

At the going down of the sun and in the morning,

We will remember them.

Related

  • We Will Remember Them – a UK site dedicated to servicemen and women who have gave their lives in defence of their nation.

Photo: Avro Lancaster – RIAT Fairford 2008 (Danny McL)

Holding up the ⌘+Q

Something that’s been bugging me for a while now is reaching for Command+W to close an open Finder window or a tab in Firefox, and hitting that blasted Q key by accident. Well, no more, I decided!

For the uninitiated, hitting Command+Q on a Mac keyboard quits the current application – as far as I’m aware – without exception. Some applications will give you a warning that you are about to quit and you may lose unsaved data. Since Firefox introduced built-in session management so that it will fire up just as you left it, it no longer seems to warn you when you quit. Looking at about:config in one of my Firefox tabs shows browser.warnOnQuit set to true. Firefox will warn me when I try to close a window with multiple tabs open in it, but it doesn’t warn my when I hit Command+Q.

So, in trying to fix this little problem, I discovered a few ways to create helpful keyboard shortcuts and tame some not-so-useful ones.

Custom keyboard shortcuts in OS X

You can set custom keyboard shortcuts for various aspects of OS X and any of your installed applications in System Preferences – it’s under Keyboard & Mouse, and then the Keyboard Shortcuts tab.

  1. Hit the + (plus) button to begin adding a new shortcut.
  2. Select an application to customise, or let it affect all applications.
  3. Type in the Menu Title, which is the text as it appears in the menu item you’re wanting to customise. You can just switch to the application in question to check it.
  4. Hit the Keyboard Shortcut box and then do the desired key stoke you want to use for that menu item.

Now, I knew about this before and have set a couple of my own shortcuts previously. Here’s a couple of examples from my preferences:

  • In Safari, Shift+Command+S is set to Disable Styles from Safari’s Develop menu.
  • In Thunderbird, Option+Command+V is set to Paste Without Formatting.

So, it was a bit annoying to find the same didn’t work when trying to fix my premature evacuation woes in Firefox. You seem to be able to assign keyboard shortcuts to Firefox menu items, but if you set Command+Q to a menu item other than Quit, it still quits the application. You can also try setting a different shortcut to Quit (I tried Option+Command+Q), but still no joy.

Taming Firefox keyboard shortcuts with Keyconfig

There’s an extension for Firefox called Keyconfig, which remained unusable with Firefox 3 for a while. I read that the latest build now works, so I tried it, and — hey presto! — it installed. Alas, it wouldn’t override Command+Q for me. However, it did help me fix up some keyboard conflicts caused by various add-ons.

Once Keyconfig is installed, you can go to Keyconfig… under the Tools menu to see all the keyboard shortcuts that Firefox uses. Any shortcuts that are assigned to more than one action are highlighted for you. This is great for tracking down and fixing keyboard conflicts caused by some cheeky little add-on hijacking the shortcuts you’ve grown to know and love. (Yay, Shift+Command+F now opens Web Developer‘s Display Element Information tool again, instead of opening up the settings for Foxmarks!)

So, I began to assume that Command+Q is engrained into the application somewhere, possibly at the Cocoa level.

Hacking key bindings with brute force

With the help of this OS X hint and a little poking around (thanks Sean), running this in Terminal has worked for me:

defaults write org.mozilla.firefox NSUserKeyEquivalents '{"Quit Firefox"="@~Q";}'

This tells Firefox (the org.mozilla.firefox package) to use Option+Command+Q as the shortcut (keyboard equivalent) for the Quit Firefox menu item.

As with the System Preferences method above, you need to address the menu item using the text as it appears in the menu, so "Quit Firefox". To my knowledge, this technique will only work with Firefox 3, as that release was built using Cocoa.

You can customise the shortcut where my code has @~Q by using these characters to represent the desired keys:

@
Command
$
Shift
~
Option
^
Control

Apparently, you can set these keyboard equivalents globally, but I decided not to do this. If you want to target a specific application in the way I have, the following may help you find out its package name:

  1. Fire up Terminal and type ps -ax | grep firefox, but replace “firefox” with the application you’re looking for. This should help you to figure out the application’s process name. For example, Firefox’s process name is “firefox-bin”.
  2. Now fire up Script Editor and run the AppleScript tell application "System Events" to get bundle identifier of application process "firefox-bin", replacing “firefox-bin” with your target application’s process name. That code goes in the top pane of Script Editor. Then hit Run.
  3. You should see the package name appear in the output pane below the script, e.g. org.mozilla.firefox.

So, as another example, running ps -ax | grep twhirl in Terminal tells me that the process name I want for Twhirl is in fact “twhirl”. Running the AppleScript tell application "System Events" to get bundle identifier of application process "twhirl" gives me the package name de.makesoft.twhirl.[SOMEHASH].

Save your head, your desk, the world!

That’s all for now. I hope this stops a few people from banging their heads on their desks!

Joining OmniTI

Right, now that the cat’s out of the bag, I’m happy to announce here that I will be joining Jon at OmniTI to form part of their interface design team as an accessibility engineer!

Essentially, I’ll be doing the stuff I love: accessible interface design, consulting and training, and quality assurance (“pedant duties”). And I’ll be doing it from within the loving arms of one of the Web’s cleverest companies. To echo what I said the other day, working with the people at OmniTI over recent months has been great. Even though I’ve been working remotely, I’ve been surrounded by really clever folks, which means it’s always a learning experience, and always fun. Hopefully, some of them feel that they have been learning from me, too.

I’ve always sat somewhere between the back-end development geeks and the front-end creative types. In my new job, I will be concentrating on interface design, but I will be working closely with other teams to help ensure accessibility is built into the applications built by OmniTI. It’s perfect for me, and I’m really looking forward to it.

What a way to round off the year! I have a feeling there’s going to be a lot of cool stuff in store for 2009. I hope you all have a great Christmas, and I’ll see you on the other side of New Year!

End of the year—all change, please!

Wow! These past few weeks have been a bit of a roller coaster ride. Sit with me a while, and try not to throw up on my trousers…

November

In November, I was invited to the Web Developers Conference in Bristol to sit on a panel with Elliot, Elliott, Dan and Dan (spooky, eh?) to talk about Working in the Industry & Loving the Web. It was a great day, organised by Alex Older to give web design students at UWE in Bristol the chance to meet and talk to people in the industry. The panel was great to be part of—it was my first time seeing a conference from the stage and I really enjoyed it. Hopefully, we imparted some valuable words of wisdom to the audience! As always, it was a real pleasure to meet wonderful folk from our community, and to talk with some of the students in the bar after the event. Both the conference and Bristol SkillSwap the night before were great. If you’re a web design student at UWE, go to next year’s conference. It’s really something that other universities should be doing as well.

November was also brought to you by the number 5, the colour blue, and a healthy dose of rock music. Unfortunately, I didn’t get to PHP North West, but I heard it was excellent and lots of fun.

December

This month, I’ve mostly been wearing my editor’s hat, both at work and in play. I have a strange affection for editorial work, especially as I was pretty crap at English at school. My inner stickler for correct grammar seems to prefer the written word as a medium for articulating my thoughts—a little like how just the right amount of alcohol brings moments of clarity. One of this month’s highlights has been working with Chris, Sean and Jon to set up and run this year’s PHP Advent Calendar. If you’re a PHP developer, be sure to head over there for a good read.

But the big, fat news is that my esteemed colleague and friend, Jon Tan, has joined OmniTI as their Creative Director. We’ve been doing work with OmniTI for some time, and I must say that working with them has been edifying and a real pleasure. The offer they extended to Jon is a great testament to his talents and character, and is truly deserved. Congratulations, my friend.

What about Grow Collective? Well, you’ll have to wait and see what the New Year brings. Well, now that the cat’s out of the bag, I can tell you: I will also be joining OmniTI. In the meantime, I’m off to start my Christmas holiday by getting cosy with a glass of mulled wine and a mince pie! Happy Christmas to you and yours, and I’ll see you in 2009.

Linkage

  1. Alex Older: WDC2008, It’s over….for now
  2. Dan Donald: Web Developers Conference
  3. Elliot Jay Stocks: Round-up of 2008 speaking events
  4. Pete Coles: Web Developers Conference Write Up
  5. Rick Hurst: Web Developers Conference 2008

jQuery UI accordion: enabling keyboard navigation

A couple of weeks back, Karl asked a question about jQuery UI’s Accordion interface widget and keyboard accessibility. I’ve got my head in various JavaScript frameworks at the moment, so I took a quick look.

This article is now a little out of date. The jQuery UI team seem to have updated the framework to use tabindex="-1", fixing one of the problems I outline below. The example code may now be obsolete. I hope to review this soon.

So, what’s an accordion when it’s at home?

You’ve got an accordion interface when you have a small collection of vertically-stacked, collapsible layers of content that a user can flip between. It’s a similar concept to tabbed interfaces where you view one chunk of content at a time, but in an accordion each of the interface controls are vertical and span the full width of the content. It’s easiest explained with an example (make sure you have JavaScript enabled).

Problems with keyboard accessibility

Karl was finding that, while you could navigate and control the accordion using the keyboard in Safari 3 and Internet Explorer 7, there were problems when using Firefox 3. I’m not yet sure why, but it didn’t work at all for me in Opera 9.6.

When testing with Firefox 3, I observed the following:

  • If there is a link inside the accordion control, you cannot navigate to it when tabbing forwards through the page. However, you can access the link when tabbing backwards using Shift+Tab.
  • You cannot tab back through the page from the accordion control using Shift+Tab. Keyboard navigation is trapped.

I traced the problem to the tabindex="0" that jQuery dynamically adds to the accordion controls. The idea is to actually improve accessibility; tabindex="0" should tell browsers to make the accordion control part of the tab order, no matter what type of element it is. For example, if you have a heading as a control for your accordion, setting tabindex="0" on it should allow you to tab to it, even though a heading is not normally accessible using a keyboard.

The onclick problem

Despite this seemingly life-saving technique for adding elements to the tab order of a page, it doesn’t necessarily ensure that our interface is now keyboard accessible. I’ll be doing some testing and explain in a follow-up entry. Following Alistair’s comment, I’ll clarify here by adding that the tabindex technique is valid, but I believe it needs to mature before it can be relied upon.

For now, I can only advise that developers use standard HTML control elements (such as <a> and <button>) to ensure accessibility to keyboard users.

Firefox has problems handling tabindex="0"

So, back to the problem at hand…

Unfortunately, it seems that Firefox has problems with tabindex="0", causing the keyboard navigation issue that Karl was experiencing. The technique could be a good solution, but only if it was widely supported by browsers and was sure to work with assistive technology.

It looks like Jörn Zaefferer is on the case at the jQuery end and is removing the tabindex attributes set by jQuery. In the meantime, this move will (hopefully) force developers to use standard HTML control elements for their interface controls. Unfortunately, the majority of developers may see their interfaces working when using a mouse, assume that it’s all okay, and not test keyboard accessibility.

Fixing it in the meantime

You can “undo” the tabindex that jQuery sets by setting up your accordion something like this:

$('#accordion').accordion({
	header: ".ui-accordion-header"
});
$('#accordion .ui-accordion-header').attr('tabindex','');

Here, we’ve told jQuery to blank all the tabindex attributes on the accordion “headers” (i.e. the accordion interface controls).

An even better solution would use standard HTML control elements (<a>, <button>, …) in the first place, as mentioned above. However, this can restrict your markup a little, and may not make much sense, for example, if you’ve marked up each of your accordion layers with a heading. In any case, you can always the accordion controls dynamically, giving you a bit more freedom as to what element you use.

dotjay feeds fixed

I’ve been aware of a problem with my feeds for a little while. The main feed has been working okay, but some of the others I used to offer went a bit screwy. It should all be fixed again now.

You can subscribe to just my blog entries or to entries with a particular tag. So if you only want to be fed my accessibility posts, you can just subscribe to my accessibility feed. I’ve also included a new lab updates feed. Lab updates will also appear in the main feed. I’ve tried to redirect all previous feed URLs so that they will continue to work. My apologies if they break.

Trouble setting up a custom front page in WordPress 2.6?

I don’t know if this is a quirk of WordPress 2.6.2 or if something has changed in recent versions that aren’t reflected by the WordPress documentation, but I’ve had a hell of a time setting up a custom front page and shifting the blog index off to its own directory (like example.org/blog/). If anyone else is having a problem with 2.6.2 and custom front pages, this could help you…

In case it matters, I’ve got WordPress installed in its own directory and the site is using a custom theme.

To create a custom front page, you can use the is_front_page() conditional in the index.php theme file:

<?php
if ( is_front_page() ) :
?>
<h2>My front page</h2>
<?php
else:
?>
<h2>Other templates</h2>
<?php
endif;
?>

To create the blog index at /blog/, you need to create a dummy page called “blog”. You should be able to create a template for that page as the blog.php theme file. For some reason, my WordPress installation is not picking up the blog.php theme file, as it should according to the documentation. Without that file, it wasn’t falling back to index.php as I expected either. The latter observation I realised to be my own stupid fault as I had a page.php theme file that was being picked up by WordPress and used for my blog index. Still, blog.php should override the page.php file and it isn’t.

So, I’m currently using page.php for the blog index, detecting it using if_page('blog'):

<?php
if ( is_page('blog') ) :
?>
<h2>My blog index</h2>
<?php
else:
?>
<h2>Other page templates</h2>
<?php
endif;
?>

If you don’t have page.php in your theme, WordPress should fall back to using index.php. As mentioned above, you can detect the front page in there using is_front_page(), but you should also be able to detect the blog index in that file using is_page('blog').

<?php
if ( is_front_page() ) :
?>
<h2>My front page</h2>
<?php
elseif ( is_page('blog') ) :
?>
<h2>My blog index</h2>
<?php
else:
?>
<h2>Other templates</h2>
<?php
endif;
?>

I hope this helps someone else out there.

PHPNW08 Conference

Just a quickie to say that my friends over at PHPWomen and GeekUp are helping to organise the PHPNW08 conference to be held in Manchester on November 22, 2008. There’s quite a lot of geek activity up north, and the conference aims to bring together the local PHP community for a ronkin’ good conference.

Looking at the schedule, there are going to be some interesting talks from some well-known PHP bods. The tickets are now on sale with early birds getting in for £50. Concession tickets are also available.

I’m not yet sure if I’m going to be able to go, but figured some of you lot might be interested. Let me know if you plan to go.

Scripting Enabled debrief

I spent a great weekend up in London at the Scripting Enabled conference and hack day. It was really great to catch up with people I haven’t seen in a while and to meet new people as well. There were a couple of “click” moments like bumping into Peter Abrahams while scanning through the alphabetically-challenged name tags and then figuring out that the lovely lady from Devon was Laura Whitehead who had recently blogged about my list of accessibility videos!

The Scripting Enabled difference

Hackers

I come away from web conferences and geek meets inspired and chomping at the bit to get working on some of the ideas that have come out of such events. I get back to my cave, start blogging about something that I need to get out there, get distracted by something I wanted to look up (“Right, let’s open that in another tab and deal with it later”), rarely properly finish the entry, get back to doing proper work and not find the time to work on that cool idea or at least put the idea out there. Well, no more, damn it!

What has been the difference at Scripting Enabled this week? The hack day which followed the day of talks and discussion made sure I took the time out to do something with an idea.

Doing the hack day straight after the talks meant things were fresh in our minds and a lot of the clever people who were at the conference were on hand for the day of hacking to work with on an idea and to bounce ideas off of. Having people in the same room with different abilities and disabilities really made the hack day a hive of activity.

On top of that, the event was free to attend. Christian did a fantastic job of pulling together the sponsorship, venues, speakers, hackers… There are lots of people who have given to this event to bring together great people to produce results. I can’t wait for the next one now!

What did I do? I worked in a group of beautiful people to improve accessibility of maps on the Web using the Google Maps API. We were so chuffed to have something to show at the end of the day, but we’re not quite ready to show the world yet. Expect more words from me on that.

In the meantime, check out the photos from the event and keep an eye on the Scripting Enabled site.