CODEWITHSUNDEEP
htmlaccessibilityhtml-headingwcag2.0
user1675703
user1675703

Reputation: 21

Accessibility (WCAG 2.0 ): headings & header content relationships

I am trying to write accessibility (WCAG 2.0) compliant HTML5 page.

Page structure is common:

Of course, the main content of my page is the listing block, introduced by H1 tag (es. "selected ads for red bicycles in Rome").

Now, given that:

I have doubts about heading the content on top of the page which comes before the main content:

I can't assign a H2 or H3 to it since the h1 comes after, on the other hand I don't want to leave the top page content without a heading.

Thanks.

Upvotes: 1

Views: 460

Answers (1)

unobf
unobf

Reputation: 7244

One thing to understand about techniques is that they are informative and not normative read the "Abstract" of the following document http://www.w3.org/TR/WCAG20-TECHS/Overview.html

This means that the 1.3.1 requirement is simply that you mark up your structure to represent the semantics of the information.

The implication of this is that you can absolutely start a page with a lower heading level than H1. This is in fact required to allow the H1 to describe the main content of the page and in order for you to be able to use semantic heading levels to describe the banner content or navigational content that might occur before the main content.

As a best practice, you would also want to add two things to your page:

  1. Landmark roles for the main content, the banner content, the navigational elements and the footer content (if applicable), and
  2. A skip link that allows a keyboard only user to jump directly to the main content area (you can also expand this to allow skipping to other landmark areas like the footer, navigation etc.)

Upvotes: 1

Related Questions