Fixing HTML Page Structure on CMS

Question

I was tasked at work to fix some accessibility issues on one of our websites and would like some help. Our websites were built on AEM (Adobe experience manager) and we are not able to change the markup, other than adding/removing classes.

The structure of the markup generated by AEM is not accessible at all (see code sample).

     <div id="header">...</div>
     <div id="content">...</div>
     <div id="footer">...</div>

I know it would be best to use compliant code like the one below, but we are not able to do so because we cannot change the html. What is recommended in this case? Does changing the role to "header"/"footer" with JavaScript solve the problem?

    <body>
    <header id="header">
    <nav aria-label="primary">...</nav>
    </header>
   <footer id="footer">
   </body>

I have read the w3c documentation and I know the best option for structuring a page is by utilizing semantic HTML elements, but we cant do that.

score 1 · Accepted Answer · answered Feb 27 '23 at 00:08

Using semantic HTML is obviously best (see rule #1 of ARIA) but having a <div> with a role added via javascript should work. It should be the same as having <div id="header" role="banner">.

Note that

<header> is role="banner"
<nav> is role="navigation"
<footer> is role="contentinfo"

You happened to pick three landmark roles.

QuentinC · Answer 2 · 2023-02-27T05:51:47.960

Obviously, as you have mentioned, the best would be to change the HTML to use semantic elements.

So first of all, try to invest your time and energy to fix the HTML produced by your CMS. I don't know about the particular CMS you are using, but it shouldn't be so difficult to do normally. Find a more accessible theme and plugins, change a few templates, etc.

If really, really, really, it's too difficult to dive into the code of your CMS and it's too complicated to switch to another CMS producing more accessible code, then you can think about making a script. But basically, you are going to consume energy in something very fragile, so it should only be done if you have truly exhausted all other possibilities.

Now about the script itself: generally, adding a role to an existing element is not totally guaranteed to work for every roles, on every elements, in every configurations. As with aria-live, you must be very cautious with that. There are many and various bugs with that, and it has never been well specified whether or not role additions or changes had to be tracked live. In particular with landmarks, the screen reader may not pick it up, meaning that it could be skipped when navigating by landmark, or be absent from a landmark list to jump to, making the whole effort totally useless.

The only way to make sure that the element is always taken into account with its role everywhere where it's supported is to have it in the page from the start. Even adding an element in the DOM with its role after page load isn't 100% (in particular all roles involving aria-live), though it's has much better probability (99%?) to be picked up than adding or changing a role attribute to an existing element.

So basically for maximum chances, you have to more or less rewrite all your page, and at that point you can just use semantic elements.

Can't you really touch the code produced by your CMS ?

Fixing HTML Page Structure on CMS

2 Answers2