ODIN Blog

MAMA has been busy these last few weeks and we have some early results coming in. Based on feedback and requests here is a snapshot of what the Web's made of and some quick and dirty  analysis. The results are based on 4,225,113 URLs tested from over 250 countries; more about the methodology can be found in Dev Opera. It's worth noting that the numbers do not all add up as URLs may fulfill a number of the criteria. Therefore, percentages are guidelines only.

Headings

• No headings used: 2473197, 58.5%
• H1 used multiple times in a doc: 336523, 7.9%
• Headings don't start with H1: 681316, 16.1%
• Heading levels were skipped: 479294, 11.3%
• Heading levels were out of order: 298695, 7.1%

Structure on the web is fundamental for readable web pages by both search engines and assistive technologies such as screen readers and refreshable braille displays. With a heading structure missing on over half the pages tested, and implemented incorrectly on the majority of others these results are pretty disappointing - if not very surprising.

WebAim's screen reader survey findings for headings found that 52% of respondents relied on headings to navigate around pages. I think this is a woefully low number but is perhaps an understandable given less than half of the websites tested had any headings at all.

Constantly debated is the use - or rather misuse - of multiple H1s in a page, so much so there is even a website dedicated to the H1 debate. Should a page have just have one heading describing the unique page content or can it have two and include the website name as a second H1?

I'm not a fan of multiple H1s as it interrupts the logical page structure for screen reader users who rely on headings to get a mental overview of the page content and navigate it. Coding the website name as H1 also duplicates unnecessary information - a user can easily find out what site they are on by reading the page title, logo or other branded elements as well as copy.

The 11.3% of pages that skip heading levels may be evidence of headings are being used for presentation rather than structure. Often this is found in sites that fail to use good CSS and style text using H1-H6. This is especially confusing for a screen reader or refreshable braille display users as they get a partial and confused structure - a bit like a text book with half the index missing.

What MAMA shows is that we're far off from getting structure right yet. In the meantime we're snubbing search engines and assistive technologies, which get left out in the cold as they can't make sense of content. To get an idea of what I mean check out the Importance of HTML Headings for Accessibility video from Aaron Cannon.

Images

• title used in an img element: 647651, 15.3%
• alt used in an img element: 3176199, 75.1%
• title and alt used together in same img element: 575544, 13.6%

The thorny issue of images doesn't really contain many surprises with still a quarter of web pages lacking any alt attribute whatsoever. This of course doesn't take into account pages that have a mix of images both with and without alt attributes. What is interesting is that just over 13% use both title and alt around the same image.

There's rarely a good use case for this and has more of a negative impact of bloating your code and creating usability woes for screen reader and refreshable braille display users. In my experience, title text is very misunderstood and generally used incorrectly. Many page authors duplicate alt - or link - text leading to a classic case of too much accessibility as some screen reader users are forced to hear text twice.

Once we have had more time to analyse the data I hope to be able to let you know how many of the title and alt text combinations replicate text exactly in both.

Summary

• Table summary: 102821 times, 2.4%
• 1829 out of 102821 URLs using summary use "layout table", 1.7%

A summary on a data table is a useful way for a screen reader user to get information about the data in the table and how it is organised. Its intended use is not, however, to describe layout tables which should be avoided (and CSS used) and also should not be made evident to the screen reader user.

In the results we can see that 1.7% of URLS are using layout tables due to the misguided use of "Layout table" as the summary. This is really a conservative estimate as we can't predict every value to be tested however MAMA did unveil numerous instances of other misguided summary text such as: "layout", "layout table", "header", "navigation", "content", "banner", "main", "main table", "breadcrumb", "category"...the list goes on. Terms like this are of little use to the user when read out and bloat the amount of information they are forced to wade through.

This is a prime example of how there is a disconnect between the HTML 4.01 specification and WCAG 2.0 with actual usage. As HTML 4.01 states "This attribute offers advisory information about the element for which it is set. It should never contain primary information and should not duplicate information. WCAG 2.0 makes explicit reference warning against usage of the summary attribute on layout tables:

...if a layout table is used, then the summary attribute is not used or is null. The purpose of a layout table is simply to control the placement of content; the table itself is “transparent" to the user. A summary would “break" this transparency by calling attention to the table. A null summary (summary="") on layout tables is acceptable.

Coming next

We're only just starting to look at the data so if you have any further requests of what you want us to look at leave a comment. Full analysis and data will be published in due course together with breakdown by country. To get an idea of what we'll cover check out last year's MAMA results