Speed tests and the use of header elements

TL;DR

For accessibility, the following header requirements apply.

  1. There is 1 H1 header whose text matches the title of the page
  2. The other headers are logically sequential, that is a subsequent heading may be lower, equal to or 1 higher than the previous heading

Internet Speed at a Glance is the only speed test that uses headers correctly.

 

Contents

  1. Introduction
  2. Method of measurement
  3. Speed tests to test
  4. The measurements
  5. Conclusions
 

Introduction

Improper use of heading elements is mentioned in this Top Ten Most Common Web Accessibility Issues.

Heading elements help screen reader users to understand the relationship of the page content. Besides that heading elements provide a means to easily navigate through the page.

At the page Semantic Structure: Regions, Headings, and Lists WebAIM states that (...) The <h1> describes the page as a whole (and should be similar to the page <title>). A page should typically have only one <h1> (...)

Note that according to the W3C Web Accessibility Initiative (...) Skipping heading ranks can be confusing and should be avoided where possible (...).

 

Method of measurement

For this test we visit the homepage of the speed test, use ZOMDir's Page inspector and take a look at the Outline view.

The test is invoked immediately after loading the homepage. When a speed test starts automatically, the test is started when the test is completed.

For this test, we first check whether there is correct or improper use of header elements. For the speed tests which seems to use the headers correct it is manually checked if the headers are used for visual formatting purposes only. That is, we check if all headers of the same level are formatted the same. We also check if the H1 title is similar to the title of the page.

 

Speed tests to test

Because this is a relative simple test, the unique speed tests as collected at ZOMDir will be tested.

 

The measurements

  1. Astound speedtest makes improper use of header elements
  2. Bandwidth Place makes improper use of header elements
  3. Bredbandskollen makes improper use of header elements
  4. Broadband Internet Speed test (Gone) makes correct use of header elements
  5. Broadband Speed Checker makes improper use of header elements
  6. Cloudflare makes improper use of header elements (no header elements available)
  7. Comparitech makes improper use of header elements
  8. DSLReports makes improper use of header elements
  9. Fast makes improper use of header elements (no header elements available)
  10. Fireprobe makes improper use of header elements
  11. Google Fiber makes improper use of header elements (no header elements available)
  12. Internet Speed at a Glance makes correct use of header elements
  13. LibreSpeed makes improper use of header elements
  14. M-Lab makes improper use of header elements (no header elements available)
  15. Meter.net makes correct use of header elements
  16. N Perf makes correct use of header elements
  17. Ookla Speedtest makes improper use of header elements
  18. Open Speed Test makes improper use of header elements
  19. SamKnows makes improper use of header elements
  20. SpeedCheck makes improper use of header elements
  21. SpeedOf.me makes improper use of header elements (no header elements available)
  22. SpeedOf.me API Sample Page makes improper use of header elements
  23. SpeedSmart makes improper use of header elements
  24. Speedtest4.PHP not possible to test
  25. TestMy.net makes improper use of header elements
  26. Toast makes improper use of header elements
  27. Which Broadband Speed Test makes correct use of header elements
  28. Xfinity xFi Speed Test makes improper use of header elements (no header elements available)

Manual check

It is manually checked that the speed tests that apparently use the headings correctly do not use those headings exclusively for visual formatting purposes.

  1. Broadband Internet Speed test
    1. The H2 heading is shown before the H1 heading. The headings are apparently used for the visual layout. This is incorrect use of header elements.
  2. Internet Speed at a Glance
    1. No issues found
  3. Meter.net
    1. Some heading are initially hidden. This is incorrect use of header elements.
  4. N Perf
    1. There is a H2 heading formatted as normal text. This is probably done for search engine optimalization. This is incorrect use of header elements.
    2. The H1 heading is not in line with the title
  5. Which Broadband Speed Test
    1. Initial texts including headings are hidden, they appear when the speed test results are shown. This is incorrect use of header elements.
    2. The H1 heading is not in line with the title
 

Conclusions

At first glance it looks like 5 speed tests makes correct use of header elements.

Further investigation shows that only Internet Speed at a Glance uses the header elements correctly.