AEM page structure is Broken, How do you fix?

Avatar

Avatar

aemFrontend

Avatar

aemFrontend

aemFrontend

02-12-2020

The out-of-box page structure in AEM is broken and do not conform to HTML5 Standards making it very difficult to implement any decent accessible page structures, it's a `<div>` nightmare :), I'm wondering how you guys deal with this.

 

 

The new semantic elements introduced in HTML5 bring the ability to describe the structure of a web document in a standard way. They bring a big advantage for people having HTML5 browsers and needing the structure to help them understand the page, for instance people needing the help of some assistive technology. These new semantic elements are simple to use and, with very few burdens, can be made to work also in non-HTML5 browsers. Therefore they should be used without restrictions.

 

 

 

Great reads on the topic

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Problems_so...

 

https://web.dev/use-semantic-html/

 

We.retail screenshot

aemFrontend_0-1606961417259.png

 

 

Thanks in Advance

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Mariia_Lukianet

Employee

Avatar

Mariia_Lukianet

Employee

Mariia_Lukianet
Employee

03-12-2020

This can be fixed by implementing a custom page. You can inherit from the OOTB page (use sling:resourceSuperType property) and redefine the markup according to your needs.
This tutorial walks you through extending a core component, for Page the process similar since Page is also a component in AEM:
https://experienceleague.adobe.com/docs/experience-manager-learn/spa-react-tutorial/extend-component... 


Answers (0)