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

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.

Always give constructive accessibility feedback

It’s very often all too easy to point out other people accessibility problems without doing anything constructive. If you spot an problem on somebody’s website don’t just bitch on Twitter, help them to fix it.

Here is the feedback I sent to the Electoral Commision’s About my vote website today. With hindsight, I could maybe have used simpler language but this is at least a step in the right direction.

Hello,

I noticed today that the labels on your forms are not properly associated with the corresponding inputs in the HTML. This can make it much harder for people with a range of disabilities to interact with the forms.

You can associate the form elements and labels using the “for” attribute. This should be added to the “label” element and should be have the same value as the “id” attribute on the corresponding “input” or “select” element.

If you would like to discuss this problem and it’s solution please get in touch, although your usual web team should be able to easily fix this.

Best Regards
David Owens