Changing header tags for accessibility

  • Resolved leetramp

    (@leetramp)


    9 years, 6 months ago

    Sorry for the newbie question, but I’m trying to change the header tags to comply more with accessible design. I’m using the Twenty Fourteen theme, and I’d like change:

    • so single posts have only one ‘h1’ tag, the name of the post
    • so the home page has only one ‘h1’, the name of the blog
    • so the home page (with multiple posts listed on it) tags each post title as h2
    • I’m still struggling with how to tag the name of the blog on single post pages, since it’s not really a header. If the name of the blog comes before the title of the post, then it can’t really be an h2, but that’s another story (if you have a suggestion, please comment!)

    So, my newbie questions:

    • What .php file contains the h1 tags for individual posts
    • What .php file contains the header tags for the home page?

    Any other comments will be appreciated.

    Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hi leetramp,

    single.php controls the output of single blog post pages, and the homepage will depend on whether you’re using a static front-page. If so, you’ll have a front-page.php, otherwise it will just be the standard page.php.

    What’s the URL of your site? Wondering what exactly you mean by having multiple h1’s. Such as within the content itself?

    Thread Starter leetramp

    (@leetramp)

    Hi cdcampbell26,

    Thanks for the pointers. Here’s the site: https://modelinginstruction.org/ (and a couple other teacher organizations I help with and I’m also using the 2014 theme). As I see it, each post on the home page (including featured posts) are given h1 tags.

    Thank you—I see what you mean now!

    So this is actually good for both accessibility and semantic coding. Each h1 of the posts is contained within a <header> and <article> tag. It’s a misconception that there should only be 1 h1, 2 h2, etc. per page. As long as there is only one h1 per <section> or <article> it’s perfectly accessible and semantic, and the same goes for h2, etc. ??

    Thread Starter leetramp

    (@leetramp)

    Thanks for the clarification, this helps a lot. I expected updated WP “Twenty…” themes to be accessible and semantic.

    Thread Starter leetramp

    (@leetramp)

    I’m marking this “Resolved.” ??

    Exactly—I’m super glad to see you taking accessibility seriously though ??

    Checkout tenon.io—you can enter your site’s URL and it will rate its accessibility while also giving examples on how to fix areas of needed improvement. It’s become a favorite tool of mine!

    Thread Starter leetramp

    (@leetramp)

    Thanks for the tip on tenon.io. I found their WP plugins also.

    Thread Starter leetramp

    (@leetramp)

    Very cool tool. Nice to see the number of errors go down as I make changes.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Changing header tags for accessibility’ is closed to new replies.