This page should only be applied if the script assisted migration asks you to pass the manual migration skin.20231011.INTRANETSEARCH.rgaa
Several modifications have been made to correct accessibility problems with this charter.
Some modifications may require a graphic migration.
- General
- Main navigation
- Breadcrumb trail
- Avoidance link
- Moving personal menu items
- Search form
- Search results
- Secondary navigation
- Notification icons and user menu
- News carousel on home page
- Media" service rendering
- Graphic review of form fields
- Logo overload for login/logout pages
General
Focus visibility
The keyboard focus of interactive elements (links, action buttons, form components, etc.) must be visible (sufficiently contrasting color contour).
This is done via the scss property outline on the selector *:focus-visible
All css rules of the type outline: none have been removed.
3 scss variables have been added to render the selector style:focus-visible
$outline-border: 2px; $outline-color: lime; $outline-offset: 2px;
You can override them to customize the rendering of the "focus" elements, but be careful: the RGAA requires that the defined style be sufficiently contrasted.
Landmarks aria
The role="banner" has been added to the <header>.
The role="contentinfo" has been added to the <footer class="footer">.
Rechercher vos surcharges éventuelles de <header> et/ou <footer> pour leur ajouter ces landmarks.
|
Ticket JIRA | |
|---|---|
|
Commit |
Document structure
The structure of the pages has been revised to respect the following organization:
<header role="banner"> .... </header> <main role="main"> ... </main> <footer class="footer" role="contentinfo"> ... </footer>
For this purpose XSL <xsl:template name="body"> from stylesheets/main.xsl and templates/index/template.xsl have been rewritten.
If they have been overloaded, the same patch should be applied:
- le template <xsl:call-template name="header"> doit être sorti du <div class="background">
- le reste du document jusqu'à l'élément footer doit être englober dans un élément <main role="main">
|
Ticket JIRA | |
|---|---|
|
Commit |
Main navigation
La navigation principale a été entièrement revue afin de pouvoir être naviguer au clavier et que la structure des <ul><li> soit conforme à l’ordre de tabulation.
Si les éléments de l'entête <header> et/ou que les templates XSL du fichier stylesheets/menus.xsl ont été surchargés, il est conseillé de reprendre l'intégration de ces éléments.
Here are the main changes made:
- The item containing the main menu <div class="left"> has been replaced by a <nav role="navigation" aria-label="Navigation principale">
- The element containing the search, notification links and use menu <div class="icons"> has been replaced by a <nav role="navigation" aria-label="Navigation secondaire">.
- visit <ul><li> that make up the main navigation sections respect the tab order
- addition of buttons (visible only through keyboard focus) for scrolling through page sub-pages
- close the main menu with the "Esc" key
- the structure of the main menu in mobile mode has also changed
- on inside pages, the search form has been moved next to the search button
Check all the changes you've made by referring to the ticket JIRA.
If overloaded, set aside your overloads, check the behavior without overloading, and then re-integrate them by checking the menu's behavior in desktop and mobile.
Warning: the scss _header.scss has also been extensively modified.
|
Ticket JIRA | |
|---|---|
|
Commit |
Breadcrumb trail
Dans les pages intérieures, le fil d'ariane a été revu pour remplacer l’élément <div> qui le structure par un élément <nav role="navigation" aria-label="Vous êtes ici">.
The aria-current="page" sur l’élément de liste qui structure la page affichée (le dernier élément <li>) a également été rajouté.
Check that the breadcrumb trail has not been overloaded, and if so, re-apply the modifications.
|
Ticket JIRA | |
|---|---|
|
Commit |
Avoidance link
Sur toutes les pages du site, un lien d'évitement "Aller au contenu" (visible uniquement lors de la navigation clavier) a été rajouté, directement sous la balise <body>. Ce lien pointe vers la zone du contenu identifié par <main role="main" id="main-content">
Check for template overloads xsl <xsl:template name="body">
If this template has been overloaded (for the home page and/or interior pages), it is necessary to reapply the avoid link by calling the template <xsl:call-template name="accessibility-links"/>
S'assurer également que l'élément <main role="main"> est bien identifié par id="main-content"
<xsl:template name="body"> <body> <xsl:call-template name="accessibility-links"/> [...] <main role="main" id="main-content"> [...] </body> </xsl:template>
Moving personal menu items
In the page structure, the personal menu item (class="nav-perso") as well as the buttons to open the menu.
They have been repositioned at the end of the <header> in the following order:
<header>
[...]
<!-- Button to open personal menu -->
<xsl:call-template name="boutonEspacePerso"/>
<!-- Personal menu -->
<xsl:call-template name="right-menu"/>
<!-- Button to close personal menu -->
<button aria-expanded="false" class="espace-perso-btn-in-menu" onclick="closeNavPerso()">
<i18n:texti18n:key="SKIN_ESPACE_PERSO_LABEL" i18n:catalogue="skin.{$skin}"/>
</button>
<!-- Overlay when personal menu is open -->
<divclass="overlayNav" onclick="closeNavPerso()"></div>
</header>Il faut être attentif aux surcharges éventuelles du <header> et/ou du template <body> et reporter le déplacement le cas échéant.
The content of the personal menu has also been completely redesigned to meet accessibility requirements.
|
Ticket JIRA | |
|---|---|
|
Commit |
Search form
The elements of the search form (criteria, facets, sorting) have been revised to meet accessibility criteria and, in particular, to be accessible to keyboard navigation.
Watch out for overloads on XSL . services/web/pages/services/search/default and XSL services/web/pages/services/search/search-default.xslAll modifications made to the listed criteria, facets and sort selector must be transferred to your overloads.
Refer to the ticket JIRA and the commit to see all the changes made.
|
Ticket JIRA | |
|---|---|
|
Commit |
Search results
La liste des résultats de recherche est maintenant structurée avec des éléments liste <ul> et <li> conformément aux critères RGAA.
Les éléments <section> qui structuraient les cartes résultats des membres, ont été remplacés par les éléments <div>afin d’uniformiser la structure des cartes de résultats.
The pagination of results has been completely revised to meet RGAA criteria.
Refer to the ticket JIRA and the commit to see all the changes made.
|
Ticket JIRA | |
|---|---|
|
Commit |
Secondary navigation
Inner page navigation has been completely redesigned, as has the "Site map" service with the "Site map (side zone)" view.
Check that you do not have any overloaded services/web/pages/services/sitemap/sitemap_zone_right.xsl and "navinterieur" templates in stylesheets/menus.xsl
If there is an overload, refer to the ticket JIRA and the commit to see all the changes made and transfer them to your overload.
|
Ticket JIRA | |
|---|---|
|
Commit |
Notification icons and user menu
|
|
|
The structure of HTML notification icons and the user menu have been redesigned to enable keyboard navigation.
Make sure there are no regressions on these elements. In the event of regression, refer to the ticket JIRA and the associated commit.
|
Ticket JIRA | |
|---|---|
|
Commit |
News carousel on home page
The news carousel used on the home page services/web/pages/services/search/search-carousel.xsl a été retravaillé. La librairie "owl-carousel" a été supprimée au profit de "slick-carousel". La pagination utilise à présent des <button> et des classes CSS différentes.
Depending on the overloads performed, it may be necessary to review the classes, imports... and the corresponding CSS .
|
Ticket JIRA | |
|
Commit |
Media" service rendering
The rendering of the search service for media documents in the "Media" view has been revised, in particular to correct constrast problems.
For media without images, the background color used to be a low-contrast gray. By default, the background color is now 70% of the primary color.
Depending on the case, it may be necessary to override this default background color, either to return to a gray level, or to modify the color so that it remains accessible.
The white picto/background color contrast must achieve a ratio of at least 3.
The SCSS to be overloaded in this case is resources\zones\webtv\scss\components\_service-webtv.scss
.ametys-zone-webtv .webtv-grid .webtv-grid-item .picture:after {
background: rgba($primary, .7);
}To find sufficiently contrasting color combinations: Contrast Finder
Graphic review of form fields
According to the RGAA, form fields must have sufficient contrast(minimum ratio of 3). This can be achieved through the border or background color.
The default design of form fields has been revised to meet this criterion.
Before patches:
After corrections:
To achieve this, new SCSS variables have been added to content and service form fields:
$form-label-color: $textColor2; $form-label-font-family: $font-family-primary-medium; $form-field-color: $textColor2; $form-field-bgcolor: #fff; $form-field-bordercolor: rgba($color: $grey400, $alpha: 0.8); $form-field-boxshadow: none; $form-field-border-radius: 10px;
This will also facilitate the rendering of form fields (border, background color, font, color).
Make the necessary overloads on your project, trying to respect the contrast criteria of the RGAA:
- a minimum ratio of 4.5 for text elements
- a minimum ratio of 3 for interface elements
To find sufficiently contrasting color combinations: Contrast Finder
Logo overload for login/logout pages
Visit XSL services/web/pages/frontoffice-login/logout.xsl and services/web/pages/frontoffice-login/login.xsl have certainly been overloaded to modify the logo of the login / logout pages via the template XSL <xsl:template name="logo">
This overload is now useless and should be removed and replaced by a template overload. <xsl:template name="header"> the "login" template
<xsl:template name="header">
<header class="logo" role="banner">
<img src="{ametys:skinURL('templates/common/img/logo-white.png')}" class="logo" alt="{ametys:siteParameter('title')}"/>
</header>
</xsl:template>
Back to top