bootstrap_package
bootstrap_package copied to clipboard
benjaminkott
main tag missing in some templates
In some templates there's no main tag, e.g. in "Default" or "DefaultClean", it only exists in templates with more than one column. This tag is important e.g. for screen readers to identify the main content and skip e.g. header and navigation.
Btw: The attribute "role" with value "main" isn't needed any more (see https://wiki.selfhtml.org/wiki/HTML/Seitenstrukturierung/main)
@SventB I am regularly scanning all issues, but for some of them, I have no idea how to solve it properly. So we should have a look at all templates - if you have a generic solution for this, let's do it.
You can change the "main" div container in the default layout for pages
Resources -> Private -> Layouts -> Page -> Default.html -> Line 14
from
<div id="page-content" class="bp-page-content main-section">
to
<main id="page-content" class="bp-page-content main-section">
and -> line 18
from
</div> to
</main>
@olivermeckel yes, but what is about all other templates?
EDIT: oh you're in the layout - if whats fine and correct we can go for it.
Yes, I think all page templates are using the default layout. I'm still using it in a project and it works fine
@SventB is the outer wrapper <div class="body-bg … ok?
We could add the main tag in the layout, but that means it includes all columns (left and right content column, main content column, subnav). But I think it would be better to just use the main tag for the main content column (like you already do it).
So my suggestion is to add the main tag e.g. in Resources -> Private -> Templates -> Page -> Default.html:
<main class="section section-default">
Remember: Only one main tag is allowed per site and role=main can be removed!
But then – e.g. for Default.html - you exclude three content blocks and so maybe a lot of relevant content. Better use a simple but correct structure.
The required semantic structure depends on the project and its requirements and differs strongly from site to site. Won’t it be better to adapt it to your needs by overriding the templates for your project?
@olivermeckel Yes, you are right, you should include all three content blocks in the main tag in Default.html. My point is, that every template should have one main tag (not zero, not two).
As discussed with the A11Y team on the CodeSprint the suggested solution is to wrap it all relevant content in main that was done with https://github.com/benjaminkott/bootstrap_package/commit/2bceb1491979f55ca218207707aafc22056f2852