Accessibility improvements #878

This commit is contained in:
Amauri CHAMPEAUX 2022-03-22 16:59:49 +01:00
parent f3581d580a
commit 0d3dd2d6ad
2 changed files with 21 additions and 1 deletions

View File

@ -1,3 +1,15 @@
.tac_visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap; /* added line */
border: 0;
}
div#tarteaucitronAlertBig:focus {outline: 0;} div#tarteaucitronAlertBig:focus {outline: 0;}
.tarteaucitron-modal-open{ .tarteaucitron-modal-open{

View File

@ -17,7 +17,7 @@ var scripts = document.getElementsByTagName('script'),
var tarteaucitron = { var tarteaucitron = {
"version": 20210509, "version": 20220322,
"cdn": cdn, "cdn": cdn,
"user": {}, "user": {},
"lang": {}, "lang": {},
@ -311,6 +311,7 @@ var tarteaucitron = {
}); });
// Step 3: prepare the html // Step 3: prepare the html
html += '<div role="heading" aria-level="1" id="tac_title" class="tac_visually-hidden">' + tarteaucitron.lang.title + '</div>';
html += '<div id="tarteaucitronPremium"></div>'; html += '<div id="tarteaucitronPremium"></div>';
if (tarteaucitron.reloadThePage) { if (tarteaucitron.reloadThePage) {
html += '<button type="button" id="tarteaucitronBack" aria-label="' + tarteaucitron.lang.close + ' (' + tarteaucitron.lang.reload + ')" title="' + tarteaucitron.lang.close + ' (' + tarteaucitron.lang.reload + ')"></button>'; html += '<button type="button" id="tarteaucitronBack" aria-label="' + tarteaucitron.lang.close + ' (' + tarteaucitron.lang.reload + ')" title="' + tarteaucitron.lang.close + ' (' + tarteaucitron.lang.reload + ')"></button>';
@ -531,6 +532,9 @@ var tarteaucitron = {
} }
div.setAttribute('lang', language); div.setAttribute('lang', language);
div.setAttribute('role', 'region');
div.setAttribute('aria-labelledby', 'tac_title');
div.innerHTML = html; div.innerHTML = html;
//ie compatibility //ie compatibility
@ -602,6 +606,7 @@ var tarteaucitron = {
html += ' ' + tarteaucitron.lang.reload; html += ' ' + tarteaucitron.lang.reload;
html += ' </button>'; html += ' </button>';
html += '</div>'; html += '</div>';
html += '<div role="heading" aria-level="1" id="tac_title" class="tac_visually-hidden">' + tarteaucitron.lang.title + '</div>';
html += '<div id="tarteaucitronPremium"></div>'; html += '<div id="tarteaucitronPremium"></div>';
div.id = 'tarteaucitronRoot'; div.id = 'tarteaucitronRoot';
@ -616,6 +621,9 @@ var tarteaucitron = {
} }
div.setAttribute('lang', language); div.setAttribute('lang', language);
div.setAttribute('role', 'region');
div.setAttribute('aria-labelledby', 'tac_title');
div.innerHTML = html; div.innerHTML = html;
} }
}, 1500); }, 1500);