Why headings and lists? Well, a large part of my role as a web developer involves conducting accessibility audits on websites and time after time I’m both surprised and somewhat disappointed with the distinct lack of underlying structure I find in the source code of these sites. During my time as a web developer it has become apparent to me that whilst web designers are beginning to see the bright gleaming light of CSS (that’s Cascading Style Sheets, for those of you not in the know) there is still a long long way to go. Too often I find myself sitting at my desk staring at the screen in disbelief, wondering why a site has been built with such poor structure. The main problem is that headings, paragraphs, lists, quotes, and so on are often marked up with inappropriate tags which are then simply styled with CSS to look like headings, paragraphs, quotes, lists and so on. I chose to write about lists and headings because they are easy to implement, provide quick accessibility fixes and yet seem to be something that many sites find difficult to address.

Headings

So what’s this section about? You guessed it, headings, how did you guess? Ahh yes, the heading on the line above may have given it away, that’s what it’s there for, so why would you not use a heading in the source code? There is no valid reason; however there are plenty of websites out there that don’t bother using them. It may be simply down to lack of understanding, designers may think they are using a heading, when it actual fact it is simply text that has been styled to look like a heading, maybe with a larger and bolder font for example. Take a look at the example below which uses CSS to style the text within a standard non-structural html tag: Here is the HTML source code:

Lists and headings

Here is the CSS that styles it:

.heading {
font-size: 1.5em;
color: #002469;
font-weight: normal;
}

Assuming you are using a CSS enabled browser, the above code would look something like this: Lists and Headings (for those of you using a screen reader, trust me, it looks like a heading!) It looks like a heading, but things are not always what they seem. I used to have a friend who had a shiny red Porsche, the only problem was the Ford Granada ignition key, that’s right, it was a kit car, proving that looks can be deceiving. If you’re a sighted user, you can scan the page, interpreting the visual presentation and skip straight to the section that interests you. As you can imagine, someone with a visual impairment using a screen reader, has a tougher time identifying a section of interest. Headings are the solution, but only if we use the correct method of marking up headings, with the use of tags. You should always start with a

heading then as you get to a sub-heading you should drop it down a level and use a

, you can do this in a hierarchical manor all the way down to an

.  If you don’t like the look of a heading’s default style, you can use CSS to style it just as I did above but this time using a tag that conveys some structure.

So how does this help screen readers?

Well screen readers have an ace up their sleeve, in the form of a shortcut key. The shortcut key enables screen reader users to jump from heading to heading through the hierarchical organisation of the content. However, if developers don’t use heading tags in their source code then they are effectively stripping the screen reader of this ability. Screen readers use a huge range of shortcut keys to navigate around web pages, but in every case they rely on the code being in place to support them.

Lists

As we’ve already established, when writing code for the Internet it is important to break up the information in a structured way so that a user can easily access the information. This doesn’t mean just using headings, there are a wealth of tags available to the developer, each of which helps the user make the most of a web page. On many occasions whilst auditing websites I come across information which is visually laid out like a list, but the underlying source code is a jumble of ‘tag’ soup, styled to look like a list. I’m at a loss to understand why developers don’t use the available code. It may be that developers don’t appreciate the value of doing it the right way, so if we try and relate it to an everyday example maybe it will become clearer. I’m not sure about you, but when I was younger my mother used to drag me kicking and screaming to Sainsburys where we would traipse around the whole shop, section by section, never backtracking and conveniently ending up at the checkouts with a mountain of food in the trolley. I always took this for granted until I went to university and went to Sainsburys by myself for the first time, what a fun trip that was, I must of walked a half marathon in there, up and down, back and fourth and still arrived back at the house with no toilet paper, brilliant! It took me a while to work out that the secret to my mum’s success was ‘the shopping list of life’, a beautifully crafted bulleted list with everything on it, including toilet paper. For those of you who are wondering how she managed to get everything we needed without having to backtrack to previously visited sections of the shop, simple, the list was broken down into the same sections that Sainsburys had, using……headings! The point is that just as it’s not a good idea to go to the supermarket without a list, carefully divided into headed sections; it is not a good idea to write web pages without making use of the various structural elements available. Lists in particular are very versatile. They can be ordered, unordered or can even be a definition list, each one suited to a different purpose.

An alternative use for lists

The next point to make about lists is that they can and should be used for more than just when you want to display a list of items on the page. They can also be used to structure elements such as navigation mechanisms. Take www.nomensa.com for instance, the main navigation in the left column is a list that has been styled with CSS, not only that but if you look at the code you will see that it also has a heading ‘Main Navigation’ just like the shopping list.

Conclusion

It is important when writing good, solid HTML that the underlying structure is based on logic, order and the use of semantically correct markup. If you have a heading use the heading tag, if you have a list, use the list tag, if you have a paragraph use the paragraph tag, you get the idea. Don’t be afraid to try new things and change the way you think!

Can we help?

Start building accessibility into your projects at the beginning to save time and money, don’t just leave it hanging on the backlog letting it gather up dust. Drill it in.

If you would like Nomensa to help you with your accessibility challenges or to provide you with an accessibility evaluation of your website/mobile app, please don’t hesitate to get in touch.

Take a full look at the digital accessibility services that we offer.