Next up is a beautifully written Italian classic from Joseph Karr O’Connor, Section 508 educator, accessibility consultant, and the man behind the inspirational WordPress Cities.

Ingredients

Serves 3 people for a week in my house.

Joseph’s notes: Unlike in Italy where pasta is a small side dish, here in the USA we eat large plates of pasta. If you add in some fresh Italian bread with butter, asparagus, salad, and desert you might find that the sauce, meatballs, and sausage go a long way.

Weights and measures conversion information.

For the sauce

• 3 28Oz cans tomato puree (tomato passata in the UK).
• 1 28Oz can crushed tomatoes (chopped tomatoes in the UK).
• 1 12Oz can tomato paste (tomato puree in the UK).
• Bit of sugar.
• Bit of salt.
• 3tbsp Italian seasoning (equal measures of Basil, Marjoram, Oregano, Rosemary and Thyme).

Joseph’s notes: in the UK puree is paste and passata is puree. Got it?

For the meatballs

• 1Lb ground top sirloin.
• 1 cup breadcrumbs.
• 1 egg.

Josephe’s notes: In the USA, top sirloin is below the sirloin and the tenderloin but above the bottom sirloin which is behind the short loin. I believe in the UK that would come somewhere in the rump. Pain in the rump, you say? You just want 90 to 92 percent lean ground beef.

For the rest

• 5 Italian sausages (hot or mild to taste).
• Wedge Locatelli Romano (Parmesan is closest in the UK).
• Angel hair pasta.

Josephe’s notes: you can use any pasta you like, sometimes I like to use shells, my wife, Linda, prefers full bore spaghetti. Advanced: make your own pasta.

Method

For the sauce

1. Wash the can tops and dry, then open them and pour the crushed (chopped) tomatoes into an 8 quart (7.5l) pot.
2. Stir in the Italian seasoning, then place the pot on a medium low heat and spoon in the tomato paste (puree), followed by the puree (passata).
3. Add a bit of sugar and salt, taste and adjust. You want a bit of sugar to take the edge off the tomato tartness, but then you’ll need a bit of salt to keep it from being too sweet.
4. Bring it to the boil with the lid ajar, then turn down the heat and simmer the sauce all day.

Josephe’s notes: I use a long handled wooden spoon to stir. If the sauce starts to stick to the bottom of the pot, reduce the heat some and use the spoon to scrape it back into the mix.

Steam will condense on the lid, pour that off into the sink. You want to reduce the sauce over a long cooking time so be sure to keep pouring the liquid off the lid.

Caution: bubbling hot sauce will spurt at you when you open the lid. That’s where the long handled spoon comes in handy. I stick the spoon in and start stirring using the lid as a shield.

For the breadcrumbs

1. Lay some bread on a cookie sheet (baking tray) and put it in a medium oven until it goes crunchy.
2. Use a food processor to crush it up. You don’t want the breadcrumbs reduced to powder, stop when there are still pea sized chunks left.

Josephe’s notes: Once I have the sauce simmering I make the breadcrumbs. I use sourdough bread, you can use whatever you have around. I make sandwiches with the large pieces and breadcrumbs with the smaller end pieces. I store up the ends in the freezer until I’m ready to make a batch. Pro tip: I keep all my bread in the freezer and toast it when ready to use so it’s always fresh.

For the meatballs

1. With the meat at room temperature, place it in a bowl with a cup of breadcrumbs and mix them thoroughly (but not excessively).
2. Crack the raw egg into the bowl, mixing it around until it’s absorbed. Don’t knead the life out of it, but mix it well.
3. Scoop a small amount of meatball mix into your hand and roll it into a small ball, then repeat the process with the rest of the mixture.
4. Fry the meatballs in a non-stick pan with some olive oil until they’re browned. You can tell when they’re done when they don’t have any soft spots. You don’t have to cook them through and through, they’ll continue cooking in the sauce.
5. Put the browned meatballs into the pot of sauce, keep stirring and pour off the liquid from time to time.

Josephe’s notes: Store any leftover breadcrumbs in the freezer for next time.

For the sausage

1. Grill the sausages until browned. You don’t need to cook them thoroughly, they will continue cooking in the sauce.
2. After grilling the sausages, let them sit for 10 minutes or so before cutting them up. If you used a mix of hot and mild sausages, you can differentiate them in the next step.
3. Cut the sausages into serving sized pieces. I always cut hot Italian sausages on the bias, and mild ones across (this makes them Perceivable, Operable and Understandable).
When you have your pieces of sausage ready, into the pot they go.
4. Keep stirring the pot from time to time, and keep pouring off the steam condensing on the lid into the sink.

Josephe’s notes: In dry weather and in torrential downpours, at night and during the day, all year I use an outdoor propane grill. I grill the sausages, being very careful not to burn them. This requires constant turning. You may not have a grill for your sausages. Get one. Otherwise, use whatever barbarous method you may have of browning the sausages.

For the pasta

1. In a 4 quart (3.75l) pot, put about 3 quarts (2.75l) water with some salt.
2. With the water boiling grab a handful of angel hair pasta (about half a 1Lb (450g) box).
3. Put the end of the angel hair into the water, then whilst stirring with the pasta gently force it to bend into the water. Stir it with a fork to make sure it’s all immersed, and to keep it separated.
4. Set the timer for 4 minutes, then drain the pasta into a collander and rinse immediately with cold water to stop it sticking together.

Josephe’s notes:A method for boiling pasta? Really? Yes, really. People use far too much water when boiling pasta. It doesn’t take much boiling to cook angel hair pasta, which is one reason I prefer it. After all, I’ve just spent the better part of a day preparing to eat, the last step needs to be fast!

To serve

1. heap a mound of spaghetti into a large bowl such as a vegetable serving dish, cut up a meatball and a few sausage pieces onto it, then smother it with sauce.
2. Onto this, grate some Locatelli Romano (Parmesan) using a coarse grinder for that rustic touch. Serve steaming hot.
3. Congratulazioni! Beware of nocturnal meatball thieves.

Optional soundtrack

play the soundtrack by Nino Rota to Fellini’s “Juliet of the Spirits” on your stereo.

Nino Rota to Fellini’s “Juliet of the Spirits”

Joseph’s notes

My parents emigrated from Ireland to New York in the late 1940s. The Italian women in the neighborhood took one look at my painfully thin dad and proceeded to teach my mom Italian cooking. You should have tasted her lasagna. Magnifico!

The first time my dad saw a dish of spaghetti he thought it was worms. This basic dish, spaghetti and meatballs, fed us all for days each time mom made it. Nothing beat a meatball sandwich the day after. It was, and still is, my ultimate comfort food.

My daughter, Siobhan, using her speech generating device, starts asking for spaghetti just before the fall weather begins. Then I truly know it’s that time of the year again.

Let’s take an example that crops up from time to time:

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

This approach is problematic for two reasons: It breaks the intended relationship between ARIA and HTML, and it offers a poor experience for screen reader users.

ARIA HTML5 relationship

Here’s how the ARIA specification defines the navigation landmark role:

A collection of navigational elements (usually links) for navigating the document or related documents.

At first glance this seems to suggest that the navigation role can be applied to the <ul>, because it’s a collection of navigational links. It actually causes a conflict though. The <ul> element already has an ARIA role of “list”, and it’s treated as a list by other accessibility APIs.

Here’s how the HTML5 specification defines 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.

The <nav> element was purpose built to contain a number of navigational elements. This makes it a much closer fit for the ARIA navigation role than the <ul> element. In fact the ARIA navigation role maps directly to the HTML5 <nav> element.

Screen reader experience

When the navigation role is applied to the <ul> element it creates extra verbosity for screen readers that support both ARIA and HTML. For example NVDA announces “Navigation landmark” when it encounters the start of the <nav>, then again when it encounters the navigation role. Jaws does the same thing with a slightly different announcement (“Navigation region”), and it also announces the end of each region. It announces “Navigation region end” when it encounters the </ul>, then again when it encounters the </nav>.

Things are further complicated by the conflicting roles: The native list role and the applied navigation role of the <ul>. NVDA announces “Navigation landmark, List of 3 items”. It does this in Firefox because the accessibility API concatonates the two roles, but in Internet Explorer it has to go into the DOM to create the same effect. Jaws appears to ignore the accessibility APIs entirely. In Firefox it fails to announce the list, although it does preface each list item with “Bullet”. In Internet Explorer it does neither, effectively ignoring the list semantics altogether.

The upshot is that the navigation role should be applied to the <nav> element. This represents the relationship between ARIA and HTML5 correctly, prevents the loss of the list semantics, and reduces screen reader verbosity to a manageable level.

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

Next up is an easy pasta dish from Graham Armfield, accessibility consultant, active supporter of Make WordPress Accessible, and member of the Web Accessibility London A-team.

Ingredients

Serves 2- 3 people.

• 1 Medium to large aubergine, diced into small cubes.
• 1 Large onion, chopped small.
• 1 400g tin of tinned chopped tomatoes.
• A good squeeze of tomato puree.
• Half a red pepper, chopped small.
• 35g red split lentils.
• 2 cloves garlic, crushed.
• Half tsp coriander seeds.
• Quarter tsp cumin seeds.
• Half tsp oregano.
• Half tsp Marmite (optional).
• 1 tsp peanut butter (optional).
• Brown spaghetti.
• Grated cheddar cheese.

Method

1. If you like to salt your aubergines, do it an hour before cooking, then rinse them off thoroughly before you need them.
2. Fry the onion and pepper with a little oil in a saucepan, stirring occasionally.
3. When the onion becomes translucent and flexible, add the tinned tomatoes, tomato puree, lentils and garlic, and bring it to the boil.
4. Add the aubergine and if nescessary add some water so the aubergine is mostly submerged, then simmer gently and stir occasionally.
5. Meanwhile crush the coriander and cumin seeds with a mortar and pestle (or between two spoons), and add to the sauce along with the Marmite and peanut butter.
6. When the aubergine and lentils are softening, bring another pan of water to the boil and cook the spaghetti according to packet instructions.
7. When the aubergines are soft, drain the spaghetti and spoon over the sauce, then sprinkle generously with grated cheese to serve.

Graham’s notes

This recipe is one I’ve been using for many years. I developed it when I was vegetarian in the 80s and it was inspired by the recipe book I bought from the veggie restaurant at Sussex University. I used to love spaghetti bolognese and so it made a good substitute. We still cook it probably once every ten days and I love the way the aubergine combines with the tomatoes and the onion when it’s cooked. The Marmite adds lower notes to the overall flavour.

Occasionally, if I have more time I will use the aubergine sauce to create a superb vegetarian lasagne. For that you’ll need to layer some lasagne sheets with the cooked sauce in am oven-proof dish. Then make a white/cheese sauce and pour over the top – with a bit of grated cheese. Bake in the oven at 200C for 45-50 mins until the lasagne is soft. Serve with a tomato and lettuce side salad.

With all the strong flavours about, the dish suits a red wine – maybe an oakey Rioja or Navarra.

Problem 1: Availability

The first problem we need to solve: It must be possible to provide a detailed description for complex images.

A complex image might be something like the blueprint for a building, a UML diagram, a renaissance oil painting or a movie poster. A person who is unable to see the image would use a detailed description to understand and enjoy its content. A person who struggles to understand the image would use the detailed description to interpret and appreciate the image.

Problem 2: Discoverability

The second problem we need to solve: It must be possible to discover and access the detailed description.

Complex images might be used to educate, inform or entertain. Whatever the circumstances, there must be a way for people to find out that a detailed description is available, and a way for them to access it. This means the call to action must be visible (for sighted people), and programmatic (for non-sighted people).

Problem 3: Structure

The third problem we need to solve: It must be possible for a detailed description to include structured content.

A detailed description of a product in an online store might only need text. A detailed description for something like a graph or chart is likely to need more structure, so a detailed description must be able to include headings, lists, data tables and so forth.

In short we need a mechanism for providing detailed descriptions for complex images. The detailed description must be discoverable by anyone, and have content that is appropriate to the image it corresponds to.

The pros and cons of longdesc have been discussed ad nauseam (let’s not do it all again). For the moment a flawed solution is better than no solution at all, but now seems like a good time to re-energise the search for a better solution. Look at it this way: If longdesc had never existed, how would we solve these problems today?

Slide deck

Design like you give a damn! (PPT, 18Mb)

Useful links

• HTML5 Accessibility
• NVDA screen reader
• Using ARIA in HTML

Video

Design like you give a damn!

Now that HTML5 is being used on mainstream websites (such as that of the UK Government), it’s interesting to see how well screen readers support this handful of elements. Testing included Jaws 14, NVDA 2012.3 and Window Eyes 8, with Firefox 18 and Internet Explorer 9, and VoiceOver (Mac OSX 10.8.2) with Safari 6.

Thanks to Alastair Campbell and Kiran Kaja for VoiceOver testing, and Steve Faulkner for the mighty useful HTML5 Accessibility test page.

Test results

Test notes

Of the six HTML5 elements tested, header is the least well supported.

Only Window Eyes does not support any of the HTML5 elements (in any browser). VoiceOver, Jaws and NVDA all support some elements, but not always consistently across browsers.

NVDA reports the start of supported elements. For example the aside element is announced as “Complimentary information landmark”. Jaws and VoiceOver report both the start and end of supported elements. For example Jaws announces “Article” and “Article end” for the article element, and VoiceOver uses the format “Entering article landmark” and “Leaving article landmark”.

One difference between the screen readers that support the footer element is that VoiceOver reports it as “footer”, whilst NVDA and Jaws use “Content information” and “Content info” respectively.

Jaws, VoiceOver and NVDA include supported elements when navigating by landmark. This makes sense because the header, footer, nav, article, section and aside elements all Map to ARIA landmarks. Worth noting that all screen readers tested have good support for ARIA landmarks.

Those elements that are not supported in a particular screen reader/browser combination are handled in the same way as a div or other element without semantic meaning would be. Which is to say that the content is accessible, but the element itself is not acknowledged in any way.

Ingredients

Serves four people.

For the Hollandaise sauce

• 3 Egg yolks.
• 200g Melted butter.
• Squeeze Lemon juice.

For the eggs benedict

• 4 English muffins.
• 8 Thick slices ham.
• 8 Free range eggs.

Method

For the Hollandaise sauce

1. Place a saucepan of water on the hob with a bowl that fits snugly into the saucepan without touching the water, and bring the water to a gentle simmer.
2. Put the eggs into the bowl with a splash of water, then add the melted butter (slowly at first then a little more quickly as the sauce begins to thicken), whisking all the time.
3. When the sauce is thick and creamy add a dash of lemon juice and a pinch of salt to serve.

For the eggs benedict

1. Split the muffins horizontally before toasting them, then place two on each plate.
2. Place a piece of ham on top of each muffin half.
3. Poach the eggs and place one on top of each muffin half, before spooning over the Hollandaise sauce to serve.

Notes

The challenge with this recipe is making the Hollandaise sauce and poaching the eggs, so they’re both ready at the same time. One approach is to cook with a friend and split the tasks between you, another is to buy in some ready made Hollandaise sauce from the grocery store.

Hollandaise sauce has a bit of a reputation for being difficult to make. It isn’t, but you have to take care not to over heat it (or the sauce curdles). Using a bowl over simmering water (known as a bain marie) is the secret because it stops the sauce coming into contact with direct heat.

ARIA roles

ARIA roles can be applied to HTML elements to give them semantic meaning. For example a div with role=”navigation” is announced by Jaws as “Navigation region”.

The advantage of ARIA roles is that screen readers can use them to navigate through a page. Use the semi colon key in Jaws, the d key in NVDA, or the roter with VoiceOver to move between these landmarks.

The disadvantage is that developers must consciously include ARIA roles in their HTML code. The advent of HTML5 elements with stronger native semantics means that (in time) this will no longer be necessary (with HTML at least). For example the HTML5 nav element already causes Jaws to announce “Navigation region”, whether role=”navigation” is present or not.

HTML5 elements

Until the main element extension was proposed by Steve Faulkner, there was no direct mapping between role=”main” and an HTML5 element. This means that a screen reader mechanism for moving focus to the primary content area, would be entirely dependent on role=”main” being added to the HTML.

One of the reasons for introducing the main element is that it’s easier for developers to code and style <main></main>, than it is to use <div id=”main” role=”main”></div>.

On the basis that the main element is more convenient for developers (and is therefore more likely to be present), it’s much more reliable for screen readers to hook into as well. It then becomes feasible for screen readers to introduce commands for moving straight to the primary content area of the page.

Jaws scripts

These (proof of concept) Jaws scripts for Firefox demonstrate how this interaction might work. When installed they introduce a new layered keystroke: Jaws key + Space j.

• Download Jaws scripts (ZIP, 33Kb)

Invoking the command causes Jaws to look for the main element with role=”main” applied. The main element doesn’t exist yet, so Jaws doesn’t recognise it. The script cheats by using the MoveToTagWithAttribute function instead.

If Jaws finds that combination of element and role, it jumps focus to that point and announces “Main content area” or “Start of main content area” if beginner verbosity is enabled). Otherwise it announces “No main content area” (or “There is no main content area on this page”).

There is a test page included in the zip file that uses <main role=”main”>, but there has been at least one sighting of <main> in the wild already.

Quick recap: Screen readers rely almost entirely on the HTML of the page, and focus is moved from one element to another using a range of navigation commands. In other words, a screen reader can only focus on one element at a time.

That’s where the trouble starts. If a screen reader is focused on a form field, it can’t be focused on the bit of the page being updated as well.

Dynamic updates

The Marks & Spencer website is a good example. When an item is added to the shopping basket, the basket summary at the top right of the page gets updated. In fact it’s the only confirmation that the item has been successfully added.

The update is easy to see at a glance, but not at all easy with a screen reader. First you have to discover that something has changed, then you have to find out where it happened. Even once you know this, you still need to move focus back and forth between the summary and the product information, every time you add an item to the basket.

Code example: without ARIA

A massively simplified version of this interaction might look like this:

< !DOCTYPE html>
<html lang="en">

<head>
<title>Tequila</title>

<script>
    var items = 0;
	function updateItems () {
		items = items + 1;
		document.getElementById("quantity").innerHTML=items;
	}
</script>
</head>

<body>
<h1>Tequila</h1>
<p>Tequila makes me happy...</p>
<p><button onclick="updateItems()">Add tequila to basket</button></p>

<h2>Basket summary</h2>
<div>
    <p>Your basket contains <span id="quantity">0</span> items.</p>
</div>

</body>
</html>

When the button is activated with a screen reader, nothing appears to happen. The page doesn’t reload, so focus remains on the button and the screen reader stays silent. The basket summary is updated, but the screen reader user remains oblivious.

The aria-live attribute

The aria-live attribute can be used to turn the basket summary into an ARIA live region. ARIA enabled screen readers can monitor ARIA live regions for changes, and automatically announce them as they happen. The monitoring is done in the background, so even if the screen reader is focused somewhere else on the page at the time, changes within the live region are still announced.

Code example/: with aria-live

Adding the aria-live attribute to the basket summary:

<h2>Basket summary</h2>
<div aria-live="assertive">
    <p>Your basket contains <span id="quantity">0</span> items.</p>
</div>

The aria-live attribute takes three possible values: off (default), polite and assertive. The polite value means that the screen reader will wait until its finished it’s current task before announcing the update, and the assertive value means the update is announced as soon as the screen reader encounters a slight pause (in reality it’s almost always immediate).

The aria-atomic attribute

The aria-atomic attribute defines whether all of the content in the ARIA live region should be announced, or only the part that’s changed.

Code example: with aria-atomic

Adding the aria-atomic attribute to the basket summary:

<h2>Basket summary</h2>
<div aria-live="assertive" aria-atomic="true">
    <p>Your basket contains <span id="quantity">0</span> items.</p>
</div>

The aria-atomic attribute has two possible values: true and false (default). Using aria-atomic=”true” means that all of the content within the ARIA live region will be announced, even though only a small part of it has changed. So screen readers will announce something like “Your basket contains 3 items”, instead of just “3″. Try the accessible forms demo to see it in action.

The All Star route deviation calculator is one of the best examples of this technique in the wild. Developed by Matt Lawson of Nomensa, the form is used to calculate cost savings based on reduced mileage.

As you manipulate information within the form, your potential cost saving is dynamically updated on the page. Because the updated information is an ARIA live region, using the form with a screen reader couldn’t be easier.

Ingredients

Serves two people.

For the cheeseburgers

• 250g Ground beef.
• 2 Shallots.
• 2 Wholemeal buns.
• 2 Cheese slices.
• 1 Clove garlic.
• Splash Worcestershire sauce.

For the potato wedges

• 3 Sweet potatoes.
• 1tsp Olive oil.
• Sea salt.

Method

1. Preheat the oven to 250c.
2. Cut the sweet potatoes (with the skin on) into wedges, then place on a baking tray.
3. Drizzle on the olive oil, salt generously, and place in the oven for 45 minutes.
4. Meanwhile peel the shallots and garlic, then chop as finely as possible (use a mini blender if available).
5. Combine the ground beef, shallots, garlic and a dash of worcestershire sauce in a mixing bowl, then divide the mixture into two balls.
6. When the potato wedges have about 15 minutes left to go, cook the burgers on a griddle for about 5 minutes on each side.
7. Split the buns, put a burger in each one with a slice of cheese, and serve with the potato wedges.

Notes

You can use a teaspoon of horseraddish sauce or mustard, instead of the worcestershire sauce. The potato wedges can be dusted with paprika, or you can use a packet of potato seasoning, for a spicy flavour.

You can use almost any kind of cheese. Cheddar is a traditional option, but Port Salut, Monterey Jack or Dolcelata all make tasty alternatives. If that isn’t enough, you can even grill a couple of slices of bacon to add to the cheeseburgers.