[Resolved] Semantically incorrect heading structure

[Frank]

I want my site to pass the local Dutch version of the WCAG accessibility check.

One of the requirements is a correct heading structure:
-first heading on the page must be H1
-no heading levels may be skipped

The heading structure for my site now looks like:
– H3 (menu)
– H1 (page title)
– H4 (widget title)
– H4 (widget title)
– H4 (widget title)

This does not validate.

Is there a way to fix this? Thanks!

[Tom]

Hi there,

The H3 in the menu is for accessibility – it’s important, but not as important as h1 and h2s. Right now, there’s no way to change this, but I’ll look into adding a filter in a future version to make that possible.

The H1 for the page title is correct.

The widget titles are less important, so they’re all set as h4 tags, which is correct.

Then it’s up to you to use an H2 in your body content somewhere (preferably under the content title).

So basically, the only thing tripping up your validation is the menu H3, correct?

Let me know 🙂

[Paul]

Hi Tom,

I cannot change the style, family, weight and so on of my headings (h1, h2, h3, h4, h5, h6) with style.css. If I change or add some font information in style.css nothings changes in my website.
For example:
h1 {
font-size: 35px;
margin-bottom: 20px;
line-height: 1.2em;
}

TO

h1 {
font-size: 80px;
margin-bottom: 20px;
line-height: 1.2em;
}

The size of the header does not change. How can I influence the font of the different header?

thanks

[Tom]

Using a child theme (http://generatepress.com/api/themes/generatepress_child.zip) or our Typography add-on will work.

Changing the core style.css is never a good idea, as you’ll lose your changes when you update.

Let me know if you need more info 🙂

[Author]

Posts