Topic: Accessibility modifications to the footer

michaela.vrankova
May 29, 2023 at 2:39 am
Hello,

I have 2 questions:

1) Is it possible to have all footer widgets <div id="footer-widgets" class="site footer-widgets"> in the HTML element <footer>?
If so, how do I achieve this?

2) Is it possible change HTML element <aside> in footer widgets to <div>? I have standard footer widgets with next code:
```
<div id="footer-widgets" class="site footer-widgets">
  <div class="footer-widgets-container grid-container">
    <div class="inside-footer-widgets">
      <div class="footer-widget-1">
        <aside id="block-7" class="widget inner-padding widget_block widget_media_image">
          <h2>...</h2>
        </aside>
        <aside id="block-8" class="widget inner-padding widget_block widget_text">
          <p>...</p>
        </aside>
        <aside id="block-19" class="widget inner-padding widget_block widget_text">
          <p>...</p>
        </aside>
        ...
```
The <aside> HTML element represents a portion of a document whose content is only indirectly related to the document’s main content. Asides are frequently presented as sidebars or call-out boxes.

Using every element in the footer widget as an <aside> is not ideal.

If it is possible to swap <aside> for <div>, how do I do it?

Thank you in advance for your time.

Michaela
Ying
May 29, 2023 at 10:44 am

Hi Michaela,

1. You can achieve this by creating 2 hook elements.

Hook element 1:
– hook name: generate_before_footer_content
– hook content: <footer>
– location: entire site

Hook element 2:
– hook name: generate_after_footer_widgets
– hook content: </footer>
– location: entire site

2. Those tags are handled by WordPress, they are not from GP’s template. We can not change them within the theme’s functions unfortunately.
michaela.vrankova
May 29, 2023 at 1:50 pm

Thank you for your answer. In this case I have 2 <footer> elements in a row. <footer> for widgets and <footer> for copyright. I don’t know, if it is good.

Michaela
Ying
May 29, 2023 at 2:55 pm

I don’t know, if it is good.

I’m not an expert in terms of accessibility issues, I don’t know the answer either, unfortunately.
michaela.vrankova
June 6, 2023 at 12:12 pm
I did some research and it is not good to have two footers.

Finally I solved both problems in one. I totaly replaced area of widgets and default footer.
- I created an Element Block that I assigned on the Hook footer.
- I put the container block to the element and in advanced settings I selected the tag footer.
- To the container block I inserted the columns (instead of widgets) and styled them as needed.
- To be clear for users I unregitered footer widgets
Code for unregister widgets:
```
add_action( 'widgets_init', 'sons_unregister_footer_widgets',11 );

function sons_unregister_footer_widgets() {

    //ID of the sidebar widget - looking at the source code in the admin... data-widget-area-id="footer-4"
    unregister_sidebar('footer-1');
    unregister_sidebar('footer-2');
    unregister_sidebar('footer-3');
    unregister_sidebar('footer-4');
    unregister_sidebar('footer-5');
}
```
It is possibly a complicated solution, but it’s functional and most importantly accessible. So hopefully it will be useful to someone else as well.
Ying
June 6, 2023 at 1:50 pm

Glad you’ve figured a way out 🙂

However, if you are using block element - site footer, I don’t think you need to use the code to unregister the widgets, as the element should replace the entire footer, so there’re no widgets in the footer.
michaela.vrankova
June 12, 2023 at 4:33 am

Yes, you’re right, it’s not strictly necessary.

But if elements replace the function of widgets, they are unnecessary in the administration. If someone put content in the footer widgets, they would be displayed. And I don’t want that.
Ying
June 12, 2023 at 8:06 am

That makes sense too 🙂

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

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Accessibility modifications to the footer