• devpeace

    (@devpeace)


    Hi everyone!

    Older browsers and combinations of assistive technologies don’t always recognize HTML5 elements and associate them with the correct marker role. So I’d like to add the role manually, like this for example: <header role=”banner”>.
    How can I access the header code? the nav code? and the footer code? With WP FSE.
    For the main it’s ok.

    Perhaps this could be added automatically to WordPress to improve the tool’s accessibility. What do you think?
    The following roles should be added to comply with accessibility rules:
    <header role =”banner”>
    <nav role=”navigation”>
    <main role=”main”>
    <footer role=”contentinfo”>

    Thank you in advance for your reply.

    Best Regards

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator threadi

    (@threadi)

    That depends on the theme you are using. It provides this code.

    You can usually customize it via a child theme: https://developer.wordpress.org/themes/advanced-topics/child-themes/

    If you want to know exactly how to do this with the theme you are using, please contact its support forum.

    Thread Starter devpeace

    (@devpeace)

    Hi Threadi!
    Thank you very much for your reply.
    It’s a simple home-made FSE theme.
    And I don’t see where I can access the codes for these elements.
    Best Regards

    Moderator threadi

    (@threadi)

    I must not have read that correctly yesterday. When it comes to FSE themes, it’s unfortunately a bit more complicated.

    First of all, the elements you want to change are template parts. These are an integral part of the Site Editor and can be assigned to the header or footer area, for example, to mark them as such.

    The HTML code for these elements is dynamically composed here depending on properties: https://github.com/WordPress/WordPress/blob/master/wp-includes/blocks/template-part.php#L177

    Unfortunately, it is currently not possible to add your own individual attributes at this point. What’s more, there has been an open issue since 2023 regarding your exact concern in the Gutenberg team: https://github.com/WordPress/gutenberg/issues/46002

    In my opinion, you therefore have only two options:

    • You join the above-mentioned open issue. This may give it a little more importance, so that developers will look at it for the next updates. You would have to wait until something happens here.
    • Or you can adjust the output of the HTML code using the trick below.

    The trick: you can cache the entire HTML code to be output, adjust it before output, and then output it. To be honest, for me this is the very last option for adjusting the HTML code to be output, as it seems more like a “sledgehammer method.” The procedure for this is roughly as shown here: https://gist.github.com/vielhuber/09c7818a30cca1085c5c4ef7bb55d93a – however, in your case, you would have to replace <header class="wp-block-template-part"> with <headerclass="wp-block-template-part"role="banner"> exactly. I haven’t tested this yet, so I can’t provide any complete code atm. But that would be the last resort for now.

    Thread Starter devpeace

    (@devpeace)

    Many thanks Threadi for taking the time to give me such a comprehensive reply. It’s lovely.
    I don’t really like sledgehammer methods.
    I’ll explore your solutions.
    Thanks again!

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

The topic ‘Aria Landmarks’ is closed to new replies.