Merge pull request #32 from byuweb/alt-text-fix

Alt text fix

README.md

@@ -11,14 +11,18 @@ To use the component on your site, use the following markup:
 
     <link href="https://cdn.byu.edu/byu-hero-banner/latest/byu-hero-banner.min.css" rel="stylesheet" />
     <script async src="https://cdn.byu.edu/byu-hero-banner/latest/byu-hero-banner.min.js"></script>
-    <byu-hero-banner id="hero" image-source="dark-image.jpg" class="side-image">
+    <byu-hero-banner id="hero" image-source="dark-image.jpg" class="side-image" alt-text="building at sunset">
         <span slot="headline">This is the Headline</span>
         <span slot="intro-text">This is the intro text. I'm going to add more words here so it's not so short, resulting in a longer piece of intro text.</span>
         <a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
     </byu-hero-banner>
 
 As of this writing there are 3 different layout options for the banner, with example images for each one in the /specs folder of this repository. You can switch between the different layout options by adding a different css class to the byu-hero-banner component. 
 
+# Accessibility
+
+A note on accessibility - while this component allows you to set an alt-text attribute, many of the layouts rely on CSS backgrounds or embedded videos. In these cases the alt text is set on a hidden image tag that's not displayed. As a result, for accessibility purposed we strongly recommend not putting informational material in the image itself, but instead in the headline, intro text, etc. 
+
 # Side Image
 
 The side image layout features a 616x414 image to the left of the text. The text and image are vertically centered. In phone sizes the image moves to the top and the text is shown below it.

byu-hero-banner/byu-hero-banner.js

@@ -21,6 +21,7 @@ import * as util from 'byu-web-component-utils';
 
 const ATTR_IMG_SRC = 'image-source';
 const ATTR_VIDEO_SRC = 'video-source';
+const ATTR_ALT_TEXT = 'alt-text';
 
 class ByuHeroBanner extends HTMLElement {
   constructor() {
@@ -34,6 +35,7 @@ class ByuHeroBanner extends HTMLElement {
       setupSlotListeners(this);
       applyImageSource(this);
       applyVideoSource(this);
+      applyAltText(this);
     });
   }
 
@@ -49,6 +51,9 @@ class ByuHeroBanner extends HTMLElement {
       case ATTR_VIDEO_SRC:
         applyVideoSource(this);
         break;
+      case ATTR_ALT_TEXT:
+        applyAltText(this);
+        break;
     }
   }
 
@@ -73,6 +78,19 @@ class ByuHeroBanner extends HTMLElement {
     }
     return '';
   }
+
+  set altText(value) {
+    this.setAttribute(ATTR_ALT_TEXT, value);
+  }
+
+  get altText() {
+    if (this.hasAttribute(ATTR_ALT_TEXT)) {
+      return this.getAttribute(ATTR_ALT_TEXT);
+    }
+    return '';
+  }
+
+
 }
 
 window.customElements.define('byu-hero-banner', ByuHeroBanner);
@@ -89,6 +107,11 @@ function applyImageSource(component) {
   hiddenImage.src = component.imageSource;
 }
 
+function applyAltText(component) {
+  let hiddenImage = component.shadowRoot.querySelector('#hidden-image');
+  hiddenImage.alt = component.altText;
+}
+
 function applyVideoSource(component) {
   if (component.videoSource.includes('youtube')) {
     let id = getParameterByName('v', component.videoSource);

demo/index.html

@@ -70,7 +70,7 @@ <h1 slot="site-title">Hero Component Demo</h1>
 
   <!-- directly models www.byu.edu/academics -->
   <h2>Title Only</h2>
-  <byu-hero-banner id="hero" image-source="jfsb.jpg" class="title-only">
+  <byu-hero-banner id="hero" image-source="jfsb.jpg" class="title-only" alt-text="Joseph F Smith Building" >
     <span slot="headline">Headline</span>
   </byu-hero-banner>
 
@@ -92,7 +92,7 @@ <h2>MP4 Video</h2>
   </byu-hero-banner>
 
   <h2>Side Image</h2>
-  <byu-hero-banner id="hero" image-source="side-image.jpg" class="side-image">
+  <byu-hero-banner id="hero" image-source="side-image.jpg" class="side-image" alt-text="Students in hallway">
     <span slot="headline">This is the Headline</span>
     <span slot="intro-text">This is the intro text. I'm going to add more words here so it's not so short, resulting in a longer piece of intro text.</span>
     <a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
@@ -107,22 +107,22 @@ <h2>Side Image: Left Aligned with Video</h2>
   </byu-hero-banner>
 
   <h2>Side Image: Left Aligned with Image only</h2>
-  <byu-hero-banner id="hero" image-source="side-image-2.jpg" class="side-image image-style-2 left-aligned">
+  <byu-hero-banner id="hero" image-source="side-image-2.jpg" class="side-image image-style-2 left-aligned" alt-text="Guidance Counseling">
     <span slot="headline">This is the Headline</span>
     <span slot="intro-text">This is the intro text. I'm going to add more words here so it's not so short, resulting in a longer piece of intro text. This is the intro text. I'm going to add more words here so it's not so short, resulting in a longer piece of intro text. This is the intro text.</span>
     <a slot="read-more" class="no-button" href="http://www.google.com">Custom "Read More" Text</a>
   </byu-hero-banner>
 
   <h2>Transparent Overlay</h2>
-  <byu-hero-banner id="hero" image-source="dark-image.jpg" class="transparent-overlay">
+  <byu-hero-banner id="hero" image-source="dark-image.jpg" class="transparent-overlay" alt-text="Campus at night">
     <span slot="headline">This is the Headline</span>
     <span slot="intro-text">This is the intro text. I'm going to add more words here so it's not so short, resulting in a longer piece of intro text.</span>
     <a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
     <a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
   </byu-hero-banner>
 
   <h2>Transparent Overlay (Right Aligned)</h2>
-    <byu-hero-banner id="hero" image-source="dark-image.jpg" class="transparent-overlay byu-hero-right">
+    <byu-hero-banner id="hero" image-source="dark-image.jpg" class="transparent-overlay byu-hero-right" alt-text="Campus at night">
       <span slot="headline">This is the Headline</span>
       <span slot="intro-text">This is the intro text. I'm going to add more words here so it's not so short, resulting in a longer piece of intro text.</span>
       <a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
@@ -131,15 +131,15 @@ <h2>Transparent Overlay (Right Aligned)</h2>
     </byu-hero-banner>
 
   <h2>Full Screen with Light Image</h2>
-  <byu-hero-banner id="hero" image-source="light-image.jpg" class="full-screen light-image">
+  <byu-hero-banner id="hero" image-source="light-image.jpg" class="full-screen light-image" alt-text="students walking past library">
     <span slot="headline">This is the Headline</span>
     <span slot="intro-text">This is the intro text. I'm going to add more words here so it's not so short, resulting in a longer piece of intro text.</span>
     <a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
     <a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
   </byu-hero-banner>
 
   <h2>Full Screen with Light Image</h2>
-  <byu-hero-banner id="hero" image-source="light-image.jpg" class="full-screen light-image">
+  <byu-hero-banner id="hero" image-source="light-image.jpg" class="full-screen light-image" alt-text="students walking past library">
     <span slot="headline">This is the Headline</span>
     <span slot="intro-text">This is the intro text. I'm going to add more words here so it's not so short, resulting in a longer piece of intro text.</span>
     <a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
@@ -148,7 +148,7 @@ <h2>Full Screen with Light Image</h2>
   </byu-hero-banner>
 
   <h2>Full Screen Dark Image</h2>
-  <byu-hero-banner id="hero" image-source="dark-image2.jpg" class="full-screen dark-image">
+  <byu-hero-banner id="hero" image-source="dark-image2.jpg" class="full-screen dark-image" alt-text="building at sunset">
     <span slot="headline">This is the Headline</span>
     <span slot="intro-text">This is the intro text. I'm going to add more words here so it's not so short, resulting in a longer piece of intro text.</span>
     <a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>