I have a particular bee in my bonnet when it comes to accessibility, my wife is registered blind and I am constantly frustrated when she is unable see things (like text on a screen) especially when I know that this is avoidable. It was this frustration that prompted me to email Steve Jobs about the iPhone’s SMS functionality last year. True to his word users can now change the font size for those 2 apps.

What I don’t understand is why there is no way to change font size system wide, or why app developers don’t provide that facility.

Yes I know that you can switch on zooming, but honestly – have you tried using zooming on a phone? My wife uses screen magnifying software at work, so she’s used to that – but she can’t get on with the iPhone implementation & I can understand why. It’s awful. There’s also Voiceover. This must be a massive boon for people with incredibly poor eyesight but for most users it’s not appropriate, who wants their texts or other private data read so that others can hear it?

I’m sure many iOS developers have come from a web background & will be familiar with WCAG. As far as I know there’s no similar guideline for developing accessible apps, but a developers are still obliged to ensure that their apps comply with disability discrimination legislation such as the UK’s Disabaility Discrimination Act. The act says that service providers (and as a developer that’s you) must “make reasonable adjustments to ensure blind and partially sighted people can access your service”.

So for a moment, let’s just pretend that WCAG does apply to smartphone apps and look at guideline 1.4.4 1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA) That seems like a reasonable aim to me.

I have spoken to a couple of developers about this, the general consensus seems to be “I’m not sure if that’s possible” or “it would be an awful lot of work for not much benefit”. This makes me sad. Not being an iOS developer myself, I don’t know if it would be possible for someone to write a text resizing library that they could open source? If it is possible, think of all the people that could be helped by including that in apps. After all, it’s not jst cronicly badly sighted people that struggle with small text, many older & long sighted people do to.

I’d be really interested to hear other people’s thoughts on this, especially from the Dev community.

I’ve created a little site to explain how the mark tag can be used, I’ll be adding examples to it very shortly. In the meantime, if the mood takes you why not visit http://mark-element.info

Some time ago I got asked how to produce an “accessible alternative to an image map“.

As long as Image Maps are implemented correctly there’s no reason why the shouldn’t be accessible however they may not always be the most appropriate or semantic way to mark up your content.

In this example I’ve used a simple unordered list to describe some of the features of the young lady on the left, and positioned the list items over the top of her photo using CSS. The list is set to display:block and the height & width are set to match the background image you want to use; position:relative is used to allow you to absolutely position the list items within the list. Each list item is given a unique id and absolutely positioned within the list, their height and width are also set in the CSS. At it’s most basic that’s all there is to it.

In this example I added borders round the list items highlight the active areas, you probably wouldn’t want to display them as they probably detract from the aesthetics of your image. I also used text-indent on the anchors to hide the text until you hover over them and then set the text-indent to 0 using the :hover pseudo class.

Here is the XHTML used to mark this list up:

     <ul id="map">

         <li id="eyes"><a href="#">eyes</a></li>

         <li id="ear"><a href="#">ears</a></li>

         <li id="mouth"><a href="#">mouth</a></li>

         <li id="ilb"><a href="#">oh my!</a></li>

     </ul>

And here is the CSS:

#map {
 display:block;
 height:298px;
 width:200px;
 float:left;
 border:1px solid #FFA200;
 margin:0 10px 10px 0;
 background: url(/images/blog/girl.jpg) no-repeat;
 position: relative;
}

#map li {
position:absolute;
display:block;
list-style:none;
border:1px solid #ffcc00;

 }
#map li a {
 display:block;
 height:100%;
 width:100%;
 text-indent:-2000px;
 color:#ffcc00;
 font-weight:bold;
}

#map li a:hover {
 text-indent:0;
 text-decoration:none;
}

#eyes	{
 top:46px;
 left:71px;
 height:18px;
 width:44px;
}

#ear	{
top:46px;
left:132px;
height:26px;
width:21px;
}

#mouth	{
top:81px;
left:82px;
height:16px;
width:33px;
}

#ilb	{
top:177px;
left:80px;
height:63px;
width:81px;
}

This article is an extended version of the example I originally published here on 30/01/2007

In 2005 Andy Clarke demonstrated his approach to form layout at CSS for designers, He wraps the label around the input field, then put the actual label text in a span.

<label> label text<input type="text" /></label>

In the CSS he then sets the label to “display:block” and puts width on the spans. The list items effectively create rows spans columns.

This approach is fine when you only have two elements you want to appear on a line, however, when you start throwing other things into the mix (like required field markers or “help” links) you need a system that can handle more than two elements. This got me thinking…

In late 2005 I came up with a solution I call Fordie’s Form System (FFS).

FFS is based on the premise that a form is essentially a list of questions to which we need an answer, with label being the question and the input being the place for the user to answer it. That being the case, the obvious way to mark up the form (in my mind) is with lists.

I believe that as well as well as providing the structure to hold the form together, the lists add meaning to the markup – making FFS a POSH way to markup forms.

FFS Structure

Each group of label, input and related controls (for example help and validation) within the form is referred to as a “question”.

1. The Form tag goes around the whole form
2. Related questions are grouped using fieldsets
3. Lists hold the questions within the fieldset (you can use ordered on unordered lists)
4. Each question is contained in a list item (li) containing:
   • A label
   • An input
   • Usually one or more of the following:
     • A required field marker
     • A “help” link
     • Validation Errors indicator

Basic FFS mark-up

Here is an example of a form marked up in FFS

		<form action="/" method="post" name="ffsExample" id="ffsExample">
			<fieldset>
				<legend>Your Details</legend>
				<ul>
					<li class="alt">
						<label for="title">Title</label>
						<select name="title" id="title">
							<option value="1">Mr</option>
							<option value="2">Mrs</option>
							<option value="3">Miss</option>
							<option value="4">Ms</option>
						</select>
					</li>
					<li>
						<label for="firstName">First name</label>
						<input name="firstName" id="firstName" type="text" />
						<a href="/help/" class="help">help</a>
					</li>
					<li>
						<label for="surName">Surname</label>
						<input name="surName" id="surName" type="text" />
					</li>
					<li>
						<label for="contactTel">Contact Telephone Number</label>
						<input name="contactTel" id="contactTel" type="text" />
						<a href="/help/" class="help">help</a>
					</li>
					<li>
						<label for="eMailAddress">Email Address</label>
						<input name="eMailAddress" id="eMailAddress" type="text" />
					</li>
				</ul>
			</fieldset>
		</form>

And here’s the CSS for the layout

I’ve added comments to the CSS the explain what each rule does

		fieldset
		{	/* contains a list of related questions, you can have multiple fieldsets in a form */
			border:0;
			margin:0;
			width:100%;
			padding:0;
			clear:both;
		}
		fieldset ul
		{
			display:block;
			border:0;
			margin:0;
			padding:0;
		}
		fieldset li
		{	/* removes the bullet from & adds vertical space in between list items  */
			display:block;
			list-style-type:none;
			clear:both;
			margin:0.2em 0 0.2em 0;
			line-height:2em;
		}
		fieldset li label
		{	/* Sets the width of the labels */
			display:block;
			width:33%;
			padding:0.2em 0 0.2em 0;
			float:left;
		}
		fieldset li input, fieldset li select
		{	/* floats the inputs left to sit next to the labels */
			float:left;
		}
		fieldset li a.help
		{	/* positions your "help" links, you may also have required field markers or
			   validation messages that you need position within the li*/
			float:right;
		}

Variations on a theme

There are a couple of input types that need special treatment: radio & check boxes tend to have their labels wrapped round them. This means that we need to introduce a new element to contain “question text” and change the width of the labels. By adding a class to the li we can change the attributes off all the elements contained within

		<li class="radio">
			<span>Gender</span>
			<label><input name="gender" type="radio" value="Male" />Male</label>
			<label><input name="gender" type="radio" value="Female" />Female</label>
		</li>

The CSS for the radio class looks like this

		li.radio span
			{
			/* This span is only required if you want to put additional descriptive text in the first column*/
				display:block;
				width:33%;
				float:left;
			}
		li.radio label
		{
			width:auto;
		}

FFS is flexible and can handle many elements with in a list item. It can also display the form in a number of different ways simply by changing the CSS, for example:

• One question per row (using the CSS above will give this result)
• Two questions per row (set the width of the li to 50% and float left)
• One question per row, question above the input (set the label to 100% of the width of the li)

You can see implementations of FFS here*:

• Moreth>n
• Yorkshire Building Society

*These are not particularly clean implementations, they need a lot of extra classes thrown at them to accommodate the asp.net generated html that the application produced.

Just as I was coming to terms with not going to @media d.construct 2007 was announced. This years event is all about designing the user experience which is right up my street. They have some great speakers lined up so I really hope I can go.

It has the added advantages of being in Brighton which is just 12 miles from my house (much closer than London) and a it has a bargain ticket price of £85 + vat! The boss has gotta let me go.

The thinking behind this abbreviation is that it short mnemonic term that captures the essence of the concept of semantic mark up and is easily verbed (to posh, poshify, poshed up).

Those of us who routinely try to ensure that their mark up is valid and semantically correct have often struggled to communicate the importance of the concept, it’s ease of implementation and the benefits it can bring to coleagues and clients.

Hopefully the concept of POSH will help us to get the message accross.

Further reading:

• Tantek
• molly.com
• microformats wiki
• google search

I’ve signed up to the mailing list, it’ll be interesting to see exactly what tasks they have in mind.

Earlier this week Molly announced that she’s signed on with the Internet Explorer team on a contract basis to work on standards and interoperability issues.

I think this is excellent news, anything that sees MS developing with standards in mind and gets us closer a more interoberable web has got to be a good thing. As part of her work with Microsoft Molly has started a new blog “The Daily Molly“. I hope that it lives up to it’s name. Molly doesn’t post nearly as often as I’d like her to on Molly.com, so knowing that there’s another place to tap into her knowledge is a good thing.

Molly’s announcement follows hot on the heels of news that Chris Wilson, Platform Architect of the Internet Explorer Platform team at Microsoft (and ex-Group Program Manager) is going to be the initial chair of the W3C’s new HTML Working Group. In some circles this new has been greeted with dismay. For the life of me I cannont understand why this should be. Microsoft may have been extremely slow to adopt W3C standards in the past, indeed the gap between IE6 & IE7 was far too long; however they are now working hard to comply with standards, Chris has shown that he personally is commited to the cause and I beleive that under his stewardhip the W3C WG will do the right thing for developers and end users.

My biggest stumbling block was that all the WP themes I looked at were pretty bloated and it was very difficult for me with my limited php knowledge to sus out what I needed to keep and what I could throw away. I searched in vain for “blank” wordpress theme after a couple of weeks I gave up.

A few days ago I stumbled upon an article by Ryan Arrowsmith which has a link to that elusive blank theme and step by step instructions for creating your own theme! (Thanks Ryan)
So now I have a blank theme sitting in the background on the server. Now all I have to do is decide how I want this site to look.

In the UK the Disability Discrimination Act (1995) covers access to services for disabled people; the part of the act that covers websites came into force in 1999.

The act states that “reasonable adjustments” to ensure that their service is accessible to people with disabilities.

A widely accepted measure of accessibility is the W3C’s Web Content Accessibility Guidelines (WCAG). There are three levels defined in the WCAG A, AA & AAA. Any site claiming to be accessable should really meet the AA standard as a minimum.

It may come as a surprise that the government launched a new website in June last year that fails to do this.

In June 2006 the DTI launched their new website. Despite an approximate cost of £200,000, the website failed to meet basic accessibility standards. In short, this meant that the information on the website was inaccessible to some UK citizens – this is absolutely inexcusable. Further work (requiring further taxpayer money) was promised to bring the website up to Level AA of the Web Accessibility Initiative. The purpose of this petition is to ensure that all future government websites meet basic accessibility requirements from launch.

Clearly this is wrong. At best it can be seen as negligence on the part of the DTI; for a government department to ignore the guidelines like this is inexcusable. That’s why I’ve signed this petition, and you should too.

We the undersigned petition the Prime Minister to ensure that any website launched by the government complies with accessibility standards (WCAG AA at least).

Sign the petition.