Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

AEM page structure is Broken, How do you fix?

aemFrontend
Level 2
Level 2

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

1 Accepted Solution
Mariia_Lukianet
Correct answer by
Employee
Employee

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


View solution in original post

3 Replies
Mariia_Lukianet
Correct answer by
Employee
Employee

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


View solution in original post

aemFrontend
Level 2
Level 2
Hi, thanks for the response is there any plans to fix this in future releases?