skip to content W3C SVG

Page structure

Introduction

Semantic HTML structure is paramount to accessible markup. Screen readers rely on the meaning of HTML elements and attributes to convey information to blind users. It is through the semantic markup that browsers are able to parse accessibility cues and information through the accessibility API and pass that information on to users through assistive technologies.

Using the appropriate semantic elements will make sure the structure is available to the user agent. The nature of a piece of content as a paragraph, header, emphasized text, etc. can all be indicated in this way.

HTML 5 key semantic markers

HTML has historically lacked key semantic markers, such as the ability to designate sections of the page as the header, navigation, main content, and footer. With HTML 5, these deignations are possible, using the new elements <header>, <nav>, <main>, and <footer>. Similar functionality is available using the ARIA (Accessible Rich Internet Application) attributes role="banner", role="navigation", role="main", and role="contentinfo".

Many screen readers now support the ability to navigate to sections of a web page using these landmarks.

WCAG criteria

Scope of the issue

C3 lacks a semantic HTML markup. The HTML markup relies on <table> elements which were intended to represent tabular data but have been commonly used for page layout, to overcome limitations in visual presentation using HTML.

Layout tables like those used in C3 do not pose inherent accessibility issues. C3 can still be navigated and understood using a screen reader. However, because tables were designed for data grids and tabular data, it is better to use them only for that purpose from a semantic structure perspective, especially because CSS is a more robust way to design visual layouts for the modern web.

Fixing the issue

It is recommended that the underlying structure of C3 is changed to a semantic markup using HTML 5 landmarks. Here is an example of appropriate landmark use:

<header role="banner">
    <h1>
        This is the header. Put company logo, etc. here.
    </h1>
</header> 
<nav role="navigation">
    <div>
        This is the navigation. Put navigation links here.
    </div>
</nav>
<main role="main">
    <div>
        This is the main content. Put main content here.
    </div> 
    <section>
        <div>
            Main content can also be divided into sections like this.
        </div>
    </section>
</main>
<footer role="contentinfo">
    <div>
        This is the footer. Put copyright info, etc. here.
    </div>
</footer>

However, if the layout table remains the underlying structure of the site, role="presentation" should be added to the main <table> element to ensure that all screen readers will read the content of the table as text in source order, rather than as a table (essentially ignoring the semantic table markup).