Accessibility improvements #878

css/tarteaucitron.css

@@ -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;}
 
 .tarteaucitron-modal-open{

tarteaucitron.js

@@ -17,7 +17,7 @@ var scripts = document.getElementsByTagName('script'),
 
 
 var tarteaucitron = {
-    "version": 20210509,
+    "version": 20220322,
     "cdn": cdn,
     "user": {},
     "lang": {},
@@ -311,6 +311,7 @@ var tarteaucitron = {
                 });
 
                 // 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>';
                 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>';
@@ -531,6 +532,9 @@ var tarteaucitron = {
                         }
 
                         div.setAttribute('lang', language);
+                        div.setAttribute('role', 'region');
+                        div.setAttribute('aria-labelledby', 'tac_title');
+
                         div.innerHTML = html;
 
                         //ie compatibility
@@ -602,6 +606,7 @@ var tarteaucitron = {
                             html += '       ' + tarteaucitron.lang.reload;
                             html += '   </button>';
                             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>';
 
                             div.id = 'tarteaucitronRoot';
@@ -616,6 +621,9 @@ var tarteaucitron = {
                             }
 
                             div.setAttribute('lang', language);
+                            div.setAttribute('role', 'region');
+                            div.setAttribute('aria-labelledby', 'tac_title');
+
                             div.innerHTML = html;
                         }
                     }, 1500);