bmarcelino-fe

document.body.addEventListener('keyup', function(e) {
   if (e.keyCode == "9") /* tab keycode */ {
     document.body.classList.remove('no-focus-outline');
   }
 });

bmarcelino-fe

.no-focus-outline a:focus,
.no-focus-outline button:focus {
  outline: none;
}

bmarcelino-fe

:focus { outline: thin dotted; } /* Style the outline */
:focus { background: #FFFF00; } /* Give it a background colour */
:focus { color: #FF6600; } /* Change the text colour */
:focus { outline: #FF0000 dotted medium; } /* Provide a custom outline */
:focus { color: #FFFFFF; background: #FF0000; } /* Go high visibility */

bmarcelino-fe

/* remember to define focus styles! */
:focus { outline: 0; }

bmarcelino-fe

a { outline: none; }
:focus { outline: none; }

bmarcelino-fe

.tooltip.is--hidden {
   opacity: 0;
   visibility: hidden; /* hide from assistive technologies */
}

.tooltip.is--visible {
   opacity: 1;
   visibility: visible; /* make visible to assistive technologies */
}

bmarcelino-fe

.tooltip.is--hidden { display: none; }
.tooltip.is--visible { display: block; }

bmarcelino-fe

<img src="sample_image3.png" alt="Clear Coded Programming" title="Clear Coded Programming" width="150" height="150">

bmarcelino-fe

<img src="sample_image3.png" width="150" height="150">
<img src="sample_image3.png" alt=""title="" width="150" height="150">

bmarcelino-fe

// if the user presses the Space key (keyCode: 32) or the Enter key (keyCode: 13)
if (e.keyCode == "32" || e.keyCode == "13") {
   // Checks if the current accordion item is closed - collapsed
   if(isClosed(currAccordionItem)) {
       expand(currAccordionItem);
       setAriaExpanded(currAccordionItem, 'true', 'false');
   } else {
       collapse(currAccordionItem);
       setAriaExpanded(currAccordionItem, 'false', 'true');
   }