Next up is a sumptious Thai dish from Bruce Lawson, web standards evangelist, co-author of Introducing HTML5, and a man with possibly the coolest tattoo ever.

Ingredients

Serves two people.

• 1 monk fish or sea bass (cleaned but with the head left on).
• 5 limes.
• 1 stick lemon grass.
• 3 lime leaves.
• 5 or 6 slices of galangal.
• 2 bulbs of garlic.
• 6 Thai small red chillies (very small, so very spicy).
• 4 tbsp sugar.
• 6 tbsp fish sauce.

Method

1. Put the fish into a dish for steaming. Then put the galangal, lemon grass (cut it in half), and lime leaves into the fish stomach.
2. Cover fish and put the dish in boiling water for 15 to 20 minutes. When the fish is cooked, take it out from the steam pot.
3. Chop the chillies and garlic into very small pieces and mix with the lime juice, sugar, and fish sauce. This sauce must have the 4 tastes that characterise Thai food: sour, spicy, a little bit sweet and a little bit salty.
4. Serve the fish with the sauce, and don’t forget to save the most succulent pieces of fish (the eyes and the cheeks) to give to your boyfriend/girlfriend!

Bruce’s notes

This is a recipe from Thailand, the home of my lovely missus and where I met her when we were both teachers in Bangkok. She teaches Thai cookeryfor a living now.

First up is a gorgeous salsa recipe from unrepentant web accessibility champion, tribe philosopher, and all round good guy, John Foliot.

Ingredients

Weights and measures conversion information.

• 20lbs Fresh tomatoes (I prefer the Roma< type).
• 24 Assorted hot peppers (ideally Jalapeño, but any hot pepper will do).
• 6 Medium sized onions.
• 12 Tomatillos.
• 4 Cloves of garlic, peeled.
• 4tbsp Salt.
• 1cup Vinegar.
• 3/4cup Olive oil.
• 1/4cup Sugar.
• 1/2cup Each of fresh cut Basil, Cilantro, & Parsley leaves.

Method

1. Bring a large pot of water to a boil. Drop in tomatoes to scald briefly then drain and remove skins. Chop finely and transfer to a large colander.
2. Trim
   tops off peppers and chop coarsely. Add to the tomatoes.
3. Chop onions, garlic, and tomatillos finely, add to tomatoes.
4. Stir in salt and allow to sit and
   drain for 2 to 3 hours (this reduces the water content and leaves you with more tomato ‘meat’).
5. After draining, give a few good stirs, then add the oil, vinegar, sugar and herbs. Transfer to a large pot and cook over Medium heat until it bubbles.
6. Enjoy
   fresh or pack into hot, sterilized jars and process for canning.

John’s notes

I’ve had this recipe for years now: I don’t recall exactly where it came from, but I dug it out of one of my mother’s old recipe books back in the early
’90′s.

In those days I owned an old house in the country (just outside of Ottawa, Canada) where I had a silly-sized vegetable garden – it measured something like
12 ft X 40 ft and I grew so many tomatoes and hot peppers that I harvested them in a wheel-barrow (in fact, I ended up growing all of the ingredients for
this recipe in my garden, including the garlic and herbs). Each Autumn I would settle into a production-mode weekend where I canned dozens of quart Mason
jars of this salsa – enough to supply me for the full year and also give away to family, friends and neighbors.

While the fresh salsa is great straight out of the pot, I found that the canned salsa mellowed and melded the flavors, which I preferred. Enjoy!

Ingredients

Makes two sandwiches.

• 4 Slices wholemeal bread.
• 4 Rashers back bacon.
• Marmalade.
• English breakfast tea.

Method

1. Grill the bacon under a medium heat for about 12 minutes, or until the edges are crispy.
2. Meanwhile, spread a little marmalade on to each slice of bread, and then put the kettle on.
3. When the bacon is ready, make the sandwiches and a fresh pot of tea.
4. Enjoy with someone close to you.

HTML4 navigation

With HTML4, a typical navigation block might look like this:

<div>
<ul>
<li><a href=”home.html”>Home</a></li>
<li><a href=”about.html”>About us</a></li>
…
</ul>
</div>

Using a screen reader it would be possible to move through a page that uses this approach, and access the navigation without difficulty. One strategy might be to use your screen reader’s shortcut key for moving from one div on the page to the next.

The drawback is that to a screen reader, one div looks pretty much like another. There isn’t any semantic information that a screen reader can use to inform you about the purpose of the content you’re dealing with.

This is where the nav element comes in. Here’s what the HTML5 specification says about the nav element:

“The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.”

HTML5 navigation

So the same navigation block in HTML5 might look like this:

<nav>
<ul>
<li><a href=”home.html”>Home</a></li>
<li><a href=”about.html”>About us</a></li>
…
</ul>
</nav>

The nav element makes it possible for screen readers (and other user agents) to identify the purpose of the content. NVDA 2011.3 already does this. It won’t be long before other screen readers also support the nav element, but in the meantime you can use ARIA landmark roles to achieve the same effect:

HTML5 navigation with ARIA

Adding the ARIA navigation role to the nav element is a useful belt and braces technique.

<nav role=”navigation”>
<ul>
<li><a href=”home.html”>Home</a></li>
<li><a href=”about.html”>About us</a></li>
…
</ul>
</nav>

When to use the HTML5 nav element

Use the nav element wisely. The HTML5 specification isn’t too prescriptive, but instead offers the following guidance:

“Not all groups of links on a page need to be in a nav element – the element is primarily Intended for sections that consist of major navigation blocks.”

Using the nav element too often will rapidly reduce the benefit to screen reader users. In the same way that one div looks like another to a screen reader, so does one nav element to the next. Using the nav element to mark up just one or two key navigation blocks helps keep those sections semantically distinct from the rest of the page.

To highlight this, the HTML5 specification gives the following example:

“… it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.”

Use the nav element to mark up the primary (site) navigation block. If a secondary (page) navigation block is needed, use the nav element here as well.

Otherwise, it’s your judgement call as to when you use the nav element. Just remember that screen reader users will benefit most when the nav element is used lightly, and that doing this won’t have a negative impact on other people either.

Ingredients

Makes five 227g jars.

• 9 Red onions.
• 1 Red chilli.
• 2 Bay leaves.
• 30ml Olive oil.
• 200g Brown sugar.
• 150ml Balsamic vinegar.
• 150ml Red wine vinegar.

Method

1. Peel the onions and cut into thin slices, remove the seeds from the chilli and cut it into thin strips.
2. Put the onions, chilli, bay leaves and olive oil into a pan, and cook over a low heat for about 20 minutes or until the onions become very soft.
3. Add the two sorts of vinegar and the brown sugar, then simmer at an enthusiastic bubble for about 30 minutes or until the chutney becomes dark and sticky.
4. Meanwhile place your jam jars in the oven at about 120C to heat through.
5. When the chutney is about the consistency of jam, transfer it straight into the warm jam jars.
6. Place a wax disc or circle of grease proof paper on top of the chutney in each jar, then set aside to cool before putting the lids on.

Notes

The caramelised onion chutney should be left for around four weeks before eating, to really bring out all the flavours.

HTML5 sections

HTML5 uses sectioning content to break a page up into chunks. The <article>, <aside>, <nav> and <section> elements can be used to explicitly create sections. Here’s what the HTML5 specification says about sectioning content:

Sectioning content is content that defines the scope of headings and footers… Each sectioning content element potentially has a heading and an outline.

HTML5 headings

This means that each section contains its own heading hierarchy. Here’s what the HTML5 specification says about it:

The first element of heading content in an element of sectioning content represents the heading for that section.

This means that you could use an h1 at the start of each sectioning element. For example:

<body>
<h1>Favourite colours</h1>

	<section>
	<h1>Purple</h1>
	<p>Purple is my favourite colour.</p>

		<aside>
		<h1>Reasons</h1>
		<p>I like purple because…</p>
		</aside>
	</section>

	<section>
	<h1>Pink</h1>
	<p>Pink is my least favourite colour.</p>

		<aside>
		<h1>Reasons</h1>
		<p>I dislike pink because…</p>
		</aside>
	</section>

</body>

HTML5 calculates the rank of each heading based on its location within the sectioning content elements. The above example would therefore have the following structure:

1. Favourite colours
1.1. 	Purple
1.1.1. 			Reasons
1.2. 				Pink
1.2.1. 						Reasons
						

If the same page were to be coded with semantically correct HTML4.01, it might look something like this:

<body>
<h1>Favourite colours</h1>

	<div>
	<h2>Purple</h2>
	<p>Purple is my favourite colour.</p>

		<div>
		<h3>Reasons</h3>
		<p>I like purple because…</p>
		</div>
	</div>

	<div>
	<h2>Pink</h2>
	<p>Pink is my least favourite colour.</p>

		<div>
		<h3>Reasons</h3>
		<p>I dislike pink because…</p>
		</div>
	</div>

</body>

The idea is that the HTML5 heading hierarchy is adaptable. You could pull out the <section> elements and slot them into another HTML5 website, without breaking the heading hierarchy.

HTML5 explicit and implicit headings

Things get a touch more involved when you create a heading hierarchy within a single section. The HTML5 specification goes on to say:

The first element of heading content in an element of sectioning content represents the heading for that section. Subsequent headings of equal or higher rank start new or implied sections. Headings of lower rank start implied sub sections that are part of the previous one.

This means that if you use nested headings within the same section, HTML5 will behave as though they’re explicit sub sections. For example:

<body>
<h1>Favourite colours</h1>

	<section>
	<h1>Purple</h1>
	<p>Purple is my favourite colour.</p>

		<h2>Reasons</h2>
		<p>I like purple because…</p>
	</section>

</body>

In the above example the <aside> element has been removed, so that section is no longer explicitly defined. The “Reasons” heading is of lower rank than the “Purple” heading though, so HTML5 implicitly assumes there is a sub section there anyway. The outline would look like this:

1. Favourite colours
1.1. 	Purple
1.1.1. 			Reasons

If the “Reasons” heading had been an h1 instead, HTML5 would automatically close the explicitly defined <section> and open an implicitly defined section at the same level. For example:

<body>
<h1>Favourite colours</h1>

	<section>
	<h1>Purple</h1>
	<p>Purple is my favourite colour.</p>

		<h1>Reasons</h1>
		<p>I like purple because…</p>
		</section>

</body>

The resulting outline structure would therefore be:

1. Favourite colours
1.1. 	Purple
1.2. 	Reasons

Using h1 only or explicitly ranked headings

If you wanted to conform to the HTML5 specification, and there was no need to provide backwards compatibility, the h1 only technique would be the best.

It’s going to be some while before we reach that utopia though. In the meantime, developers can use explicitly ranked headings to support the browsers and assistive technologies that haven’t implemented HTML5 headings at all. Here’s what the HTML5 specification has to say on the subject:

Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section’s nesting level.

This means that the following HTML5 examples would both represent the same outline structure.

Using h1 only

<body>
<h1>Favourite colours</h1>

	<section>
	<h1>Purple</h1>
	<p>Purple is my favourite colour.</p>

		<aside>
		<h1>Reasons</h1>
		<p>I like purple because…</p>
		</aside>
	</section>

</body>

Using explicitly ranked headings

<body>
<h1>Favourite colours</h1>

	<section>
	<h2>Purple</h2>
	<p>Purple is my favourite colour.</p>

		<aside>
		<h3>Reasons</h3>
		<p>I like purple because…</p>
		</aside>
	</section>

</body>

The outline structure represented by both of the above examples would be:

1. Favourite colours
1.1. 	Purple
1.1.1. 		Reasons

HTML5 heading support

At the moment Jaws 13 supports the h1 only technique in Internet Explorer 9 and Firefox. No other screen readers support HTML5 headings at all.

It’s worth noting that as of Jaws 13.0.527, explicitly ranked HTML5 headings are completely broken in both Firefox and Internet Explorer. It takes the rank of the heading and the sectioning content hierarchy in conjunction, and the result is an extremely broken heading hierarchy.

Choosing h1 only or explicitly ranked headings

The question has been asked whether the h1 only or explicitly ranked headings technique is the best one to use.

The HTML5 specification clearly encourages the h1 only technique. The difficulty is that withbrowsers and screen readers that don’t support HTML5, the heading hierarchy is flattened out completely.

Using explicitly ranked HTML5 headings solves the flat heading hierarchy problem. The likelihood is that using this more complicated technique will result in even fewer pages with a meaningful heading hierarchy though.

My suggestion would be to use the h1 only technique unless you’re absolutely sure you’ve got your head around the way explicitly ranked headings work in HTML5. Jason Kiss recommends a different approach, and it’s good advice as well. Here’s my take on things though.

A flat heading structure certainly isn’t ideal. It’s considerably better than the (usually broken) HTML4.01 heading structures you find on every other website at the moment though.

In time browsers and other screen readers will adopt support for the h1 only technique. When they do, we’ll probably have the best chance of semantically correct, logical and usable heading hierarchies since HTML was created!

Ingredients

Serves 2 people.

• 2Tbsp olive oil.
• .25Tsp sea salt.
• .25Tsp black pepper.
• 1 clove of garlic.
• Handful of basil leaves.
• Juice of 1 lemon.
• Zest of 1 lemon.
• 2 chicken breast fillets.
• 150g wholeweat pasta.
• Green salad *.

Method

Step 1

1. Blend the olive oil, lemon juice, lemon zest, garlic, basil, salt and pepper into a runny mixture.
2. Place the chicken breasts into a sealable bag with about a quarter of the mixture.
3. Seal the bag and gently massage the chicken for a couple of minutes so it becomes coated inside the bag, then put it in the fridge for a couple of hours (or overnight).

Step 2

1. Cook the pasta according to packet instructions, drain and return it to the saucepan to keep warm.
2. Meanwhile preheat a griddle pan**, remove the chicken from the bag and grill until just cooked through (about 5 minutes on each side).
3. Chuck the remaining basil mixture into the saucepan with the warm pasta and coat thoroughly.
4. Serve the chicken on top of the pasta, with the green salad on the side (add a little vinaigrette to the salad if you like).

* You can use any green salad with this recipe. Baby spinach, rocket, little gem or cos lettuce all work well though (together or separately).

** You can use the barbeque if you want to cook outside. A frying pan will also do the trick, but you won’t get the chargrilled effect that you would with a griddle pan. You might also need to add a small dash of olive oil to the pan before you cook the chicken.

Inspiration comes courtesy of an old school friend, founder and CEO (Chief Eternal Optimist) of Architecture for Humanity. His philosophy? Design like you give a damn!

It’s a philosophy to change the world by. It’s a mantra that is as relevant in the digital world as it is in the physical. It’s a clarion call to anyone who believes things need to change, and that together we can do it!

Design like you’re Banksy. Read the rule book, then rip it up and create something that challenges the accepted wisdom.

Design like you’re Da Vinci. Be curious about everything, and never stop questioning how you can make things better.

Design like you’re Brunel. Know that planning is important, but that imagination makes the extraordinary possible.

Be bold, be disruptive, be innovative, be inclusive. Be whatever you want to be. But whatever you do, let’s get out there and design like we give a damn!

It’s increasingly common to find landmark roles applied to HTML4 documents. They’re extremely useful to screen reader users, who can use them to navigate around a page and understand the purpose of different areas of content.

A simple example is role=”navigation”. It might be applied like this:

<div>
<ul role=”navigation”>
…
</ul>
</div>

With NVDA and Jaws you can move from one landmark role on a page to the next using a shortcut key. Both screen readers behave similarly when they encounter a landmark role. Using the example above, they would announce “Navigation landmark” on reaching the list.

So far, so good. With the move to HTML though, the code example might evolve into something like this:

<nav>
<ul role=”navigation”>
…
</ul>
</nav>

In slightly older screen readers this transition makes no difference. The <nav> element is effectively ignored, and the navigation role behaves exactly as expected. There’s a bit of a problem though.

The introduction of HTML5 support for elements such as <nav> means that both Jaws and NVDA now treat the above code exactly as they should. In other words, they both behave as though two navigation landmarks were present in quick succession. The result is that screen reader users hear “Navigation landmark navigation landmark”, which isn’t a great user experience.

Logically, the answer is to remove the role=”navigation” from the code entirely:

<nav>
<ul>
…
</ul>
</nav>

The trouble is that this removes the role for anyone using a slightly older version of either screen reader. Happily the solution is straight forward. Apply the role to the element it maps to:

<nav role=”navigation”>
<ul>
…
</ul>
</nav>

Current versions of NVDA and Jaws will announce the landmark once, and so will the slightly older versions that have ARIA support but not HTML5. It isn’t quite the minimalist approach many would prefer, but it’s currently the one that delivers the best experience for screen reader users.

When you’re looking at a website’s navigation, the current page should be visually distinct from the other pages. When you’re using a screen reader, the separation needs to be programmatic rather than visual.

A common technique used with HTML4.01 is to use the <strong> element to markup the current page:

<ul>
<li><a href=”home.html”>Home</a></li>
<li><strong>About us</strong></li>
<li><a href=”contact.html”>Contact us</a></li>
…
</ul>

This had the advantage of creating both the visual effect and the programmatic effect needed to differentiate the current page from the rest.

The HTML5 specification subtly changes the purpose of the <strong> element though. Instead of marking up content with strong emphasis, it should be used to markup content of strong importance. More on this (and other similar changes) within the HTML5 spec can be found on the HTML5 Doctor website.

This change in the specification probably doesn’t make it wrong to use the above technique, since it could be argued that the current page is something of strong importance. It is one of those potentially murky areas though, and besides, the HTML5 spec recommends a much cleaner approach instead.

If the a
element has an href
attribute, then it represents a hyperlink
(a hypertext anchor).

If the a
element has no href
attribute, then the element represents
a placeholder for where a link might otherwise have been placed, if it had been relevant.

In other words you can strip out all the usual attributes from the <a> element, to turn it into a placeholder instead:

<ul>
<li><a href=”home.html”>Home</a></li>
<li><a>About us</a></li>
<li><a href=”contact.html”>Contact us</a></li>
…
</ul>

As far as the screen reader is concerned, the current page link is deactivated. This provides the separation needed to understand which page you’re on, and which pages you can go to. To create the same separation visually, you can apply a CSS class that gives the current page a different appearance from the other links within the navigation.