Some Accessibility Examples

  
<img src="images/1948194_10201725053753001_218946715_n.jpg" height="600px"/>
<!-- BAD. What is this image?! It has no alt text! -->
  
  

    
<img src="images/1948194_10201725053753001_218946715_n.jpg" height="600px" alt="Macaroni and cheese-themed Photobooth strip of Cordelia and Zach wearing fast food hats"/>
<!-- GOOD. Image with proper alt text -->
    
  

    
<button class="menu-button">
  <img src="images/hamburger-icon.png"/>
</button>
<!-- BAD. There's no text here to tell me what this button does. -->
    
  

    
<button class="menu-button">
  <img src="images/hamburger-icon.png" alt="Menu"/>
</button>
<!-- GOOD. Now I know what that image represents. -->
    
  

Menu

    
<button class="menu-button">
  <img src="images/hamburger-icon.png" alt="Menu"/>
  Menu
</button>
<!-- MEH. The alt text here is cool, but it gives me redundant information. -->
    
  

Menu

    
<button class="menu-button">
  <img src="images/hamburger-icon.png" alt=""/>
  Menu
</button>
<!-- GOOD. Alt is empty for the image, so I know it's decorative. -->
    
  

    
<button class="menu-button">
  <span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
<!-- BAD. There's no text here! -->
    
  

    
<button class="menu-button">
  <span class="glyphicon glyphicon-menu-hamburger"></span>
  <span class="hidden-text">Menu</span>
</button>
<!-- ALRIGHT, but could be better. Hidden text alternative! -->
    
  

    
<button class="menu-button">
  <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
  <span class="hidden-text">Menu</span>
</button>
<!-- GOOD. Icon is aria-hidden and has hidden text alternative. -->
    
  

    
.hidden-text {
  position: absolute;
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  z-index: -1000;
}
    
  

    
<button class="menu-button">
  <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
  Menu
</button>
<!-- GOOD. Icon is aria-hidden and there's visible text! -->