Here's One Solution

Letter to Startup Britain website

The UK Government are sponsoring a website to encourage Startup Britain.

As with 90% of UK Government websites, there are basic accessibility issues that would take somebody 5 minutes to put right. Here’s the email I sent explaining a couple of quick and easy fixes.

Hi there,

Your website looks like it could be a useful tool, but I spotted a couple of problems that could make it difficult for those with disabilities to use.

Firstly, there is no way to know where you are on the page if you’re using a keyboard and not a mouse. You have the following line in your CSS.

/resource/css/site/base/site.css line 91

a {
    text-decoration: none;
    outline: none;
}

If you remove it, then links that people have focused on by using the tab key will have an outline and they will know where they are on the page.

The next big issue is to do with the email signup form.

<fieldset>
	<input class="clear-input textbox" id="register-email" name="entry.0.single" value="Your email address">
	<a class="submit button" href="/"><span>GO</span></a>
</fieldset>

There are a number of problems here that make the form difficult for people using a screenreader to use.

1) No <form/> element. This makes it hard for people to know where on the page the form is.
2) No <label/> associated with the <input/> element.
3) An <a/> element with ambiguous text instead of a <input type="submit"/> element.
4) Form won’t work without JavaScript.

Much better would be to use something like this:

<form action="/register" method="post">
<fieldset>
	<label for="register-email">Your email address</label>
	<input class="clear-input textbox" id="register-email" name="entry.0.single" value="Your email address">
	<span class="button"><input type="submit" value="Go" class="submit" /></span>
</fieldset>
</form>

With this code the JavaScript enhanced form would still work, but it would fall back to a regular form if JavaScript is not available for any reason.

Hopefully your web design team can implement these changes quickly and make the site easier to use for people with disabilities. It may be worth asking them to check the rest of the site as there may well be other problems that I didn’t immediately notice.

If you have any questions then drop me a line.
Best regards
David

Animations on iPad using Zepto.js

Since leaving TMG, I’ve been working on a couple of iPad projects. I’m finding the Zepto.js library to be a huge help. It is essentially a stripped down version of jQuery. It gives you chaining, selectors and a nice API, but because it is only aimed at Webkit loses all the cross-browser stuff you get in jQuery Mobile.

One of the main jobs in building things for the iPad is adding nice smooth transitions and animations. I thought that the best way to do this would be to toggle a CSS class using JavaScript,

$('div.animate').toggleClass('newposition');

and then use CSS transitions to animate the change.

div.animate {
    position: relative;
    left: 0;
    -webkit-transition: left 1s linear;
}
 
div.newposition {
    left: 500px;
}

This was horrid though. The animation worked, but it was jerky at best, with lots of the intermediate steps not being rendered. I found that I got a much better result by using the anim() function provided by Zepto.

$('div.animate').anim({translate3d: '500px,0,0'}, 1, 'linear');

This works by adding the animation as inline CSS, but that means any further changes and CSS rules get increasingly complicated. The method I’m using to solve this problem is to setup a clean up function and call that once the animation has completed.

var cleanup = function() {
    $('div.animate').toggleClass('newposition').attr('style','');
}
$('div.animate').anim({translate3d: '500px,0,0'}, 1, 'linear',cleanup);

This seems to work pretty well, but am I overcomplicating things? Have you found a better way to handle animations?

HTML5 elements inside block level links cause styling issues in FF 3.6

I was fixing a couple of bugs in the new design or fineartdavid.com, the site I use for my artwork, and was reminded about something I found a while back, made a test suite for and then forgot about.

If you have one of the new HTML5 elements inside a block level link bad things happen in Firefox 3.6. I’ve tried explicitly setting the element to display: block in the CSS, but this hasn’t worked.

HTML5 elements in links test suite

It seems to me a fairly common use case. The exact code I wanted was a figure with a figcaption, all wrapped in an a, but right now this bug means we can’t have nice things.

Do you know a way to fix this? Am I missing something stupid?

Update

Remy Sharp is calling it a vomit bug which seems an appropriate name. zcorpan suggests in the comments that nesting a div could help so I’ve added that to the test suite.