feat (accessibility) : improvements (#6)

codexarama · Jun 6, 2021 · 9890ec8 · 9890ec8
1 parent 68beb3a
commit 9890ec8
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -24,14 +24,14 @@
     <div class="evitement">
     <a tabindex="0" class="evitement__link btn" role="link" href="#contenu">Passer au contenu</a>
   </div>
-    <header class="header">
+    <header role="banner" class="header">
 
       <img
         src="images/logo/logo_fisheye.svg"
         class="header__logo"
         alt="Fisheye Home page"
       />
-      <nav aria-label="photographer categories">
+      <nav role="navigation" aria-label="photographer categories">
         <ul class="tagsNav">
           <li class="tagNav"><a href='?tag=portrait' title="portrait" rel="tag" role="link">#Portrait</a></li>
           <li class="tagNav"><a href='?tag=art' title="art" rel="tag" role="link">#Art</a></li>
@@ -41,20 +41,12 @@
           <li class="tagNav"><a href='?tag=animals' title="animals" rel="tag" role="link">#Animals</a></li>
           <li class="tagNav"><a href='?tag=events' title="events" rel="tag" role="link">#Events</a></li>
           <li class="tagNav"><a href='?tag=fashion' title="fashion" rel="tag" role="link">#Fashion</a></li>
-          <!-- <li class="tagNav"><a href='#' title="portrait" rel="tag" role="link">#Portrait</a></li>
-          <li class="tagNav"><a href='#' title="art" rel="tag" role="link">#Art</a></li>
-          <li class="tagNav"><a href='#' title="architecture" rel="tag" role="link">#Architecture</a></li>
-          <li class="tagNav"><a href='#' title="sport" rel="tag" role="link">#Sport</a></li>
-          <li class="tagNav"><a href='#' title="travel" rel="tag" role="link">#Travel</a></li>
-          <li class="tagNav"><a href='#' title="animals" rel="tag" role="link">#Animals</a></li>
-          <li class="tagNav"><a href='#' title="events" rel="tag" role="link">#Events</a></li>
-          <li class="tagNav"><a href='#' title="fashion" rel="tag" role="link">#Fashion</a></li> -->
         </ul>
       </nav>
       <a href="index.html" class="nosPhotographes" title="Homepage"><h1 class="header__headline">Nos Photographes</h1></a>
     </header>
     <main role="main">
-      <section id="contenu" tabindex="-1" aria-label="Photographers">
+      <section role="presentation" id="contenu" tabindex="-1" aria-label="Photographers">
 
       </section>
     </main>

diff --git a/js/gallery.js b/js/gallery.js
@@ -17,7 +17,6 @@ const setGallery = (media) => {
       },
 
       elmtFactory('div', {
-        tabindex: '0',
         class: 'gallery__media',
       })
     ),
@@ -32,7 +31,6 @@ const setGallery = (media) => {
           'p',
           {
             class: 'gallery__title',
-            tabindex: '0',
           },
           `${media.title}`
         )
@@ -41,6 +39,7 @@ const setGallery = (media) => {
         'div',
         {
           class: 'gallery__likes',
+          onfocus: 'return  false',
         },
         elmtFactory('label', {
           class: 'gallery__likes--label',
@@ -49,6 +48,7 @@ const setGallery = (media) => {
           class: 'gallery__likes--count',
           type: 'text',
           readonly: 'true',
+          onselectstart: 'false',
           value: `${media.likes}`,
         }),
         elmtFactory(

diff --git a/js/pro_page.js b/js/pro_page.js
@@ -126,6 +126,7 @@ function fetchData() {
       for (let i = 0; i < likeCounterLabel.length; i++) {
         let label = likeCounterLabel[i];
         // console.log(label);
+        label.setAttribute('aria-label', 'likes')
         setAttributes(label, {
           id: 'likes-counter' + i,
           for: 'likes' + i,

diff --git a/propage.html b/propage.html
@@ -20,8 +20,8 @@
 </head>
 <html>
   <body id="body">
-    <header class="banner">
-      <a href="index.html" class="banner__link" title="Homepage"
+    <header role="banner" class="banner">
+      <a href="index.html" class="banner__link"
         ><img
           src="images/logo/logo_fisheye.svg"
           class="banner__logo"
@@ -30,12 +30,12 @@
     </header>
     <main id="main-content">
       <!-- profil du photographe -->
-      <section class="id">
+      <section aria-label="photographer infos" class="id">
         <button title="Me contacter" type="button" id="modalBtn" class="btn btn-contact">Contactez-moi</button>
       </section>
 
     <!-- choix des options de filtrage de la galerie photos -->
-      <section class="filter">
+      <section aria-label="gallery filter" class="filter">
           <p tabindex="0" type="text" class="filter__title">Trier par</p>
           <div
             aria-expanded="false"
@@ -76,7 +76,7 @@
       </section>
 
       <!-- gallerie virtuelle -->
-      <section class="gallery"></section>
+      <section aria-label="photographer works" class="gallery"></section>
 
       <!-- lightbox -->
       <section class="lightbox">

diff --git a/sass/layout/_gallery.scss b/sass/layout/_gallery.scss
@@ -101,6 +101,7 @@
 
     &--count {
       all: unset;
+      pointer-events: none;
       width: 35px;
       border-radius: 3px;
       padding: 0 2px;