User tests: Successful: Unsuccessful:
Please see #39805 (comment)
The <header>
element represents a container for introductory content or a set of navigational links. Sometimes you want to display other content above it. For example, a banner. See https://magazine.joomla.org/all-issues/september-2021/joomla-4-tweak-cassiopeia-with-a-top-banner-and-horizontal-navigation.
In the case of the banner, you usually want the banner not to remain fixed when you select in the template the option sticky header
.
In the linked magazine article I described a workaround for this (at the end under the heading sticky header). Unfortunately, I have not found a solution how to achieve this without changing the index.php
file.
Changing the index.php
file means that you either have to continue working with
index.php
.An additional position above the
<header>
element would make this much easier.
Add an additional position above the <header>
element
Category | ⇒ | Front End Templates (site) |
Status | New | ⇒ | Pending |
Title |
|
||||||
Labels |
Added:
?
|
I like the idea but .. Adding a module position above the header adds an area to the site which is completely outside of every landmark. See also former discussions
This is permanently marked as an issue for all our modules.
It needs careful testing of keyboard navigation and skip navigtation plugin.
In any case it is a new feature and cannot come into 4.2.
Due to the complexity of today's web content, if using landmarks, all perceivable content should reside in a semantically meaningful landmark in order that content is not missed by the user.
source https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/general-principles.html
Thank you for the feedback. I have not yet understood the landmarks in cassiopeia I think.
I wanted to take a closer look. To do this, I reinstalled Joomla and installed the blog sample data.
The part of the HTML source code that displays the position banner of the sample data in the frontend looks like this.
....
</header>
<div class="site-grid">
<div class="container-banner full-width">
<div class="mod-custom custom banner-overlay" id="mod-custom119">
....
</div>
</div>
</div>
<div class="grid-child container-top-a">
....
How do I identify the semantically meaningful landmark
of the position banner?
How do I identify the
semantically meaningful landmark
of the position banner?
There is no meaningful landmark on the module positions in Cassiopeia directly, you can change the module tag in the parameters of the module (div, section, aside), then you get a landmark for the module.
Labels |
Added:
a11y
?
|
Status | Pending | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2023-02-11 09:38:47 |
Closed_By | ⇒ | astridx | |
Labels |
Added:
a11y
?
|
Thank you very much for your feedback. I think I misunderstood Brian's comment. If I see it correctly,
"all perceivable content should reside in a semantically meaningful landmark"
is not possible as a preset default in a CMS. Because, you can't force a user to place the navigation in a certain place. If a user wants to, he can even publish the navigation under the search position. Right?
I have now created the position above-header
in the 4.3-dev branch
. Then I installed the sample test data. I published an image once under the position banner
and then under my newly inserted position above-header
.
I have not entered the alt tag. This is criticised. Apart from that I don't see any significant difference in terms of tab order
and roles in the HTML document
.
Image on position banner
via custom module:
Image on position above-header
via custom module:
A user can change the module tag in the parameters of the module, then he gets a semantically meaningful landmark for the module, if he has selected a supporting module style
. For example html5
.
Am I missing something else?
I have tested this item
I using this in a child template of cassiopeia. For testing I installed https://github.com/joomla/joomla-cms/releases/tag/4.3.0-beta2 and made the changes from this PR.
I have tested this item
Status | Pending | ⇒ | Ready to Commit |
RTC
@brianteeman just checking but based off our conversation on the joomla.org template isn't this going to break the positioning of the skipto plugin when the module position is used?
Yes it would. If we want this module position then we would need to expose the option in the skipto plugin to change the class it is anchored to
please remove RTC for the reasons stated above
Status | Ready to Commit | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2023-04-26 18:25:44 |
Closed_By | ⇒ | astridx | |
Labels |
Added:
?
Documentation Required
PR-4.3-dev
?
Removed: ? |
I have tested this item✅ successfully on 51597d4
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39805.