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.
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.