Open thibaudcolas opened 5 years ago
Current structure is basically
html
body
.skiplink
div.wrapper
aside
- sidebarmain
.messages
(aria role needed?)header
What if we did the following;
html
body
.skiplink
div.wrapper
nav
- sidebar (instead of an aside
)header
- main
.messages
(aria role needed? + also means it will show under the header, I think this is also a better experience UI and accessibility wise)footer
- add ability to have a footer on each page by defaultAnd we put the actual root elements in the skeleton so that they are in one place and not in each sub-template? (although, this makes it a bit harder to find things maybe).
wagtail/admin/templates/wagtailadmin/skeleton.html
<a class="skiplink button" href="#main" data-skiplink>{% trans 'Skip to main content' %}</a>
<div class="wrapper">
{% block furniture %}
<nav id="nav">{% block navigation %}{% endblock %}</nav>
<header class="header" id="header">{% block header %}{% endblock %}</header>
<main class="content-wrapper" id="main">
{% block messages %}{% endblock %}
{% block main %}{% endblock %}
</main>
{% block footer %}{% endblock %}
{% endblock %}
</div>
wagtail/admin/templates/wagtailadmin/base.html
{% extends "wagtailadmin/admin_base.html" %}
{% load wagtailadmin_tags wagtailcore_tags i18n %}
{% block navigation %}
<template data-wagtail-sidebar-branding-logo>{% block branding_logo %}{% endblock %}</template>
{% sidebar_props %}
<div id="wagtail-sidebar" data-wagtail-sidebar></div>
{% endblock%}
{% block messages %}
<div class="messages" data-wagtail-messages>
{% if messages %}
<ul>
{% for message in messages %}
{% message_level_tag message as level_tag %}
<li class="{% message_tags message %}">
{% if level_tag == "error" %}
{# There is no error icon, use warning icon instead #}
{% icon name="warning" class_name="messages-icon" %}
{% elif message.extra_tags == "lock" %}
{% icon name="lock" class_name="messages-icon" %}
{% elif message.extra_tags == "unlock" %}
{% icon name="lock-open" class_name="messages-icon" %}
{% else %}
{% icon name=level_tag class_name="messages-icon" %}
{% endif %}
{{ message|safe }}
</li>
{% endfor %}
</ul>
{% endif %}
</div>
{% endblock %}
{% block main %}
<div class="content">{% block content %}{% endblock %}</div>
{% endblock %}
Dom structure above based on https://www.w3.org/WAI/tutorials/page-structure/regions/
As part of #5275, we’ve introduced more ARIA landmarks across the CMS admin (
<main>
, and more). Axe is now reporting issues with those new landmarks:main
landmark for the 404 page)These first 2 warnings are because the
main
wraps both the page’s main content, as well as areas designated as header and footer:I’m not entirely sure which course to follow here – whether
main
should be right afterheader
, andfooter
right aftermain
, or whether we would want to remove some or all of those landmarks. Thoughts welcome! Tagging this as "enhancement" because Axe classifies this as a best practice rather than an accessibility compliance failure, and I’m not entirely sure of the impact on screen readers myself.Relevant: #5275, #5406.