From 23dccd8d0ca8594627043316822b090b29f0cc75 Mon Sep 17 00:00:00 2001
From: vikramj74 <vikramj74@gmail.com>
Date: Sat, 24 Oct 2015 18:32:56 +0530
Subject: [PATCH 01/10] ARIA Landmark roles and labels added

---
 index.html               | 423 ++++++++++++++++++++-------------------
 src/client/css/style.css |   3 +
 2 files changed, 218 insertions(+), 208 deletions(-)

diff --git a/index.html b/index.html
index 35b3b30..5992d1d 100644
--- a/index.html
+++ b/index.html
@@ -78,7 +78,7 @@ <h3 class="pull-right">Start Time:<br><br>End Time:</h3>
       <!-- Sticky Events section goes here -->
       <h3 class="text-center">This is Alpha v0.1 of Mozpacers powered by MozAwesomeness ;)</h3>
       <!-- Hero Image goes here -->
-      <section id="Hero_Image">
+      <section id="Hero_Image" role="presentation">
         <div class ="row">
           <div id ="hero_col" class="col-xs-12 col-sm-12 col-md-12 col-lg-12" >
             <img id="hero_main" src="src/client/img/hero/back2.jpg" class ="img-responsive animated fadeInDown" />
@@ -89,7 +89,8 @@ <h3 class="text-center">This is Alpha v0.1 of Mozpacers powered by MozAwesomenes
       <!-- Hero Image ends Here -->
 
       <!-- Firefox Download section goes here -->
-      <section id="download-section">
+      <section id="download-section" role="banner" aria-labelledby="firefox-download-h">
+        <h1 class="sr-only" id="firefox-download-h">Firefox Download Banner</h1>
         <div class="container">
           <div class="row">
             <div class="col-md-8 col-sm-12">
@@ -112,230 +113,236 @@ <h1 id="ff-download-btn-h" class="col-sm-12">
           </div><!-- Row End -->
         </div><!-- Container End -->
       </section>
-      <!-- Events section goes here -->
-      <section id="events" class="container-fluid">
-        <div class="row grid">
-          <header>
-            <h1 class="text-center">Upcoming events</h1>
-          </header>
-        </div>
-        <div class="row">
-          <ul class="grid cs-style-3 event future">
-          </ul>
-        </div>
-        <div class="row grid">
-          <button id="future-more" type="button" class="click btn btn-default btn-lg col-xs-offset-4 col-sm-offset-5 col-md-offset-5 col-lg-offset-5">More events</button>
-        </div>
-        <div class="row grid">
-          <header>
-            <h1 class="text-center">Past events</h1>
-          </header>
-        </div>
-        <div class="row">
-          <ul class="grid cs-style-3 event past">
-          </ul>
-        </div>
-        <div class="row grid">
-          <button id="past-more" type="button" class="click btn btn-default btn-lg col-xs-offset-4 col-sm-offset-5 col-md-offset-5 col-lg-offset-5">More events</button>
-        </div>
-      </section>
-      <section id="testcase" class="container-fluid testing">
-        <div class="row grid">
-          <div class="container-back">
-          <a class="back"><i class="fa fa-4x fa-chevron-left"></i></a>
+      <div role="main">
+        <!-- Events section goes here -->
+        <section id="events" class="container-fluid" aria-labelledby="events-h">
+          <h1 id="events-h" class="sr-only">Events</h1>
+          <div class="row grid">
+            <header>
+              <h1 class="text-center" >Upcoming events</h1>
+            </header>
           </div>
-        </div>
-        <div class="row">
-          <ul class="grid cs-style-3 event-view">
-          </ul>
-          <div class="single-event col-xs-12 col-sm-12 col-md-12 col-lg-12">
+          <div class="row">
+            <ul class="grid cs-style-3 event future">
+            </ul>
           </div>
-        </div>
-      </section>
-      <!-- Slider goes here -->
-      <section class="pillars">
-        <ul class="accordion">
-          <li id="panel-friends" class="panel" tabindex="0">
-            <h2 class="panel-title">Firefox Friends</h2>
-            <div class="panel-inner">
-              <div class="panel-content">
-                <a href="http://friends.mozilla.org" target="_blank">
-                  <h3>Join The Innovators</h3>
-                  <p>
-                    Firefox Friends is our ever-growing team of social-sharers and word-spreaders. By joining, you’ll be helping us bring an open and innovative Web to people everywhere.
-                  </p>
-                  <p class="go">
-                    Visit Firefox Friends
-                  </p>
-                </a>
-              </div>
+          <div class="row grid">
+            <button id="future-more" type="button" class="click btn btn-default btn-lg col-xs-offset-4 col-sm-offset-5 col-md-offset-5 col-lg-offset-5">More events</button>
+          </div>
+          <div class="row grid">
+            <header>
+              <h1 class="text-center">Past events</h1>
+            </header>
+          </div>
+          <div class="row">
+            <ul class="grid cs-style-3 event past">
+            </ul>
+          </div>
+          <div class="row grid">
+            <button id="past-more" type="button" class="click btn btn-default btn-lg col-xs-offset-4 col-sm-offset-5 col-md-offset-5 col-lg-offset-5">More events</button>
+          </div>
+        </section>
+        <section id="testcase" class="container-fluid testing">
+          <div class="row grid">
+            <div class="container-back">
+            <a class="back"><i class="fa fa-4x fa-chevron-left"></i></a>
             </div>
-          </li>
-          <li id="panel-webmaker" class="panel" tabindex="0">
-            <h2 class="panel-title"><i>The Web</i> You Want</h2>
-            <div class="panel-inner">
-              <div class="panel-content">
-                <a href="https://www.webmaker.org" hreflang="en-US" target="_blank">
-                  <h3>Make The Web You Want</h3>
-                  <p>
-                    Join us at Mozilla Web Maker and help shape the web you want. Web Maker helps you to create your own web.
-                  </p>
-                  <p class="go">
-                    Mozilla Web Maker
-                  </p>
-                </a>
-              </div>
+          </div>
+          <div class="row">
+            <ul class="grid cs-style-3 event-view">
+            </ul>
+            <div class="single-event col-xs-12 col-sm-12 col-md-12 col-lg-12">
             </div>
-          </li>
-          <li id="panel-FSA" class="panel" tabindex="0">
-            <h2 class="panel-title"><i>Firefox Student</i> Ambassador</h2>
-            <div class="panel-inner">
-              <div class="panel-content">
-                <a href="https://www.mozilla.org/en-US/contribute/studentambassadors/" target="_blank">
-                  <h3>Help Change the Web</h3>
-                  <p>
-                    Individuals who are passionate about Mozilla and raise awareness about many benefits of firefox
-                    and other Mozilla products.
-                  </p>
-                  <p class="go">
-                    Become a student ambassador
-                  </p>
-                </a>
+          </div>
+        </section>
+        <!-- Slider goes here -->
+        <section class="pillars" role="slider" aria-labelledby="slider-h">
+          <h1 id="slider-h" class="sr-only">Interactive Slider</h1>
+          <ul class="accordion">
+            <li id="panel-friends" class="panel" tabindex="0">
+              <h2 class="panel-title">Firefox Friends</h2>
+              <div class="panel-inner">
+                <div class="panel-content">
+                  <a href="http://friends.mozilla.org" target="_blank">
+                    <h3>Join The Innovators</h3>
+                    <p>
+                      Firefox Friends is our ever-growing team of social-sharers and word-spreaders. By joining, you’ll be helping us bring an open and innovative Web to people everywhere.
+                    </p>
+                    <p class="go">
+                      Visit Firefox Friends
+                    </p>
+                  </a>
+                </div>
               </div>
-            </div>
-          </li>
-          <li id="panel-fxos" class="panel" tabindex="0">
-            <h2 class="panel-title"><i>Discover </i><br> Firefox OS</h2>
-            <div class="panel-inner">
-              <div class="panel-content">
-                <a href="https://www.mozilla.org/en-US/firefox/os/2.0/" target="_blank">
-                  <h3>Discover Firefox OS</h3>
-                  <p>
-                    Designed to give you what you need, just when you need it. Firefox OS is an open source OS based on web
-                    technologies to bring you the best experience.
-                  </p>
-                  <p class="go">
-                    Get Firefox OS
-                  </p>
-                </a>
+            </li>
+            <li id="panel-webmaker" class="panel" tabindex="0">
+              <h2 class="panel-title"><i>The Web</i> You Want</h2>
+              <div class="panel-inner">
+                <div class="panel-content">
+                  <a href="https://www.webmaker.org" hreflang="en-US" target="_blank">
+                    <h3>Make The Web You Want</h3>
+                    <p>
+                      Join us at Mozilla Web Maker and help shape the web you want. Web Maker helps you to create your own web.
+                    </p>
+                    <p class="go">
+                      Mozilla Web Maker
+                    </p>
+                  </a>
+                </div>
               </div>
-            </div>
-          </li>
-          <li id="panel-reps" class="panel" tabindex="0">
-            <h2 class="panel-title"><i>Mozilla</i> Representatives</h2>
-            <div class="panel-inner">
-              <div class="panel-content">
-                <a href="https://www.mozilla.org/fr/mission/" target="_blank">
-                  <h3>Mozilla Representatives</h3>
-                  <p>
-                    The program aims at those enthusiastic volunteers of Mozilla who want to become official representatives of Mozilla in
-                    their locale/region.
-                  </p>
-                  <p class="go">
-                    Join the Mozilla Mission
-                  </p>
-                </a>
+            </li>
+            <li id="panel-FSA" class="panel" tabindex="0">
+              <h2 class="panel-title"><i>Firefox Student</i> Ambassador</h2>
+              <div class="panel-inner">
+                <div class="panel-content">
+                  <a href="https://www.mozilla.org/en-US/contribute/studentambassadors/" target="_blank">
+                    <h3>Help Change the Web</h3>
+                    <p>
+                      Individuals who are passionate about Mozilla and raise awareness about many benefits of firefox
+                      and other Mozilla products.
+                    </p>
+                    <p class="go">
+                      Become a student ambassador
+                    </p>
+                  </a>
+                </div>
               </div>
-            </div>
-          </li>
-        </ul>
-      </section>
-      <!-- About us goes here -->
-      <section id="About">
-        <div class="container">
-          <div class="row">
-            <div id="AboutUs" class="col-md-12">
-              <h1>Who are Mozpacers?</h1>
-              <p>Mozpacers are the active Mozillians of Mozilla Delhi Community. The seed was sowed in January 2014 by Anup Mishra, Ajay Kumar and Bhuvnesh Dogra and now it is blossoming with the Mozpacers as petals. We believe in building up an open and dynamic community and so are trying to indulge people from diverse backgrounds to better contribute the making of better web, as is mission of Mozilla.</p>
-              <h1>Regions Covered:</h1>
-              <p>The fragrance is not just in Delhi and NCR zone but we also conduct various campaigns and workshops in North India states viz. Haryana, Himachal Pradesh, Punjab etc. This way we get to teach a lot of people about web and Mozilla’s mission and in the same time get potential people in the community.</p>
-              <h1>Structure of the Community:</h1>
-              <p>We are mainly divided into Technical and Non-technical teams. We try that all the members get to take various leadership and managerial roles in various projects and events. We are open to the way of contributions and anybody can contribute in whichever positions he/she are comfortable in. </p>
-            </div>
-            <div id="coreContributers" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
-            <ul class="ContributerImages">
-              <h1>Meet the team</h1>
-              <li>
-                <div class="ch-item ch-img-1">
-                  <div class="ch-info">
-                    <h3>Ajay Kumar</h3>
-                    <p>Community Mentor<a href="https://reps.mozilla.org/u/ajaysinghi1188/">View on Reps</a></p>
-                  </div>
+            </li>
+            <li id="panel-fxos" class="panel" tabindex="0">
+              <h2 class="panel-title"><i>Discover </i><br> Firefox OS</h2>
+              <div class="panel-inner">
+                <div class="panel-content">
+                  <a href="https://www.mozilla.org/en-US/firefox/os/2.0/" target="_blank">
+                    <h3>Discover Firefox OS</h3>
+                    <p>
+                      Designed to give you what you need, just when you need it. Firefox OS is an open source OS based on web
+                      technologies to bring you the best experience.
+                    </p>
+                    <p class="go">
+                      Get Firefox OS
+                    </p>
+                  </a>
                 </div>
-              </li>
-              <li>
-                <div class="ch-item ch-img-2">
-                  <div class="ch-info">
-                    <h3>Anup Mishra</h3>
-                    <p>Community Mentor<a href="https://reps.mozilla.org/u/anupkumarmishra29/">View on Reps</a></p>
-                  </div>
+              </div>
+            </li>
+            <li id="panel-reps" class="panel" tabindex="0">
+              <h2 class="panel-title"><i>Mozilla</i> Representatives</h2>
+              <div class="panel-inner">
+                <div class="panel-content">
+                  <a href="https://www.mozilla.org/fr/mission/" target="_blank">
+                    <h3>Mozilla Representatives</h3>
+                    <p>
+                      The program aims at those enthusiastic volunteers of Mozilla who want to become official representatives of Mozilla in
+                      their locale/region.
+                    </p>
+                    <p class="go">
+                      Join the Mozilla Mission
+                    </p>
+                  </a>
                 </div>
-              </li>
-              <li>
-                <div class="ch-item ch-img-3">
-                  <div class="ch-info">
-                    <h3>Bhuvnesh Kumar</h3>
-                    <p>Community Mentor<a href="https://mozillians.org/en-US/u/BhuvneshDogra/">View on Mozillians</a></p>
+              </div>
+            </li>
+          </ul>
+        </section>
+        <!-- About us goes here -->
+        <section id="About" aria-labelledby="about-us-h">
+          <h1 class="sr-only" id="about-us-h">About Us</h1>
+          <div class="container">
+            <div class="row">
+              <div id="AboutUs" class="col-md-12">
+                <h1>Who are Mozpacers?</h1>
+                <p>Mozpacers are the active Mozillians of Mozilla Delhi Community. The seed was sowed in January 2014 by Anup Mishra, Ajay Kumar and Bhuvnesh Dogra and now it is blossoming with the Mozpacers as petals. We believe in building up an open and dynamic community and so are trying to indulge people from diverse backgrounds to better contribute the making of better web, as is mission of Mozilla.</p>
+                <h1>Regions Covered:</h1>
+                <p>The fragrance is not just in Delhi and NCR zone but we also conduct various campaigns and workshops in North India states viz. Haryana, Himachal Pradesh, Punjab etc. This way we get to teach a lot of people about web and Mozilla’s mission and in the same time get potential people in the community.</p>
+                <h1>Structure of the Community:</h1>
+                <p>We are mainly divided into Technical and Non-technical teams. We try that all the members get to take various leadership and managerial roles in various projects and events. We are open to the way of contributions and anybody can contribute in whichever positions he/she are comfortable in. </p>
+              </div>
+              <div id="coreContributers" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+              <ul class="ContributerImages">
+                <h1>Meet the team</h1>
+                <li>
+                  <div class="ch-item ch-img-1">
+                    <div class="ch-info">
+                      <h3>Ajay Kumar</h3>
+                      <p>Community Mentor<a href="https://reps.mozilla.org/u/ajaysinghi1188/">View on Reps</a></p>
+                    </div>
                   </div>
-                </div>
-              </li>
-            </ul>
+                </li>
+                <li>
+                  <div class="ch-item ch-img-2">
+                    <div class="ch-info">
+                      <h3>Anup Mishra</h3>
+                      <p>Community Mentor<a href="https://reps.mozilla.org/u/anupkumarmishra29/">View on Reps</a></p>
+                    </div>
+                  </div>
+                </li>
+                <li>
+                  <div class="ch-item ch-img-3">
+                    <div class="ch-info">
+                      <h3>Bhuvnesh Kumar</h3>
+                      <p>Community Mentor<a href="https://mozillians.org/en-US/u/BhuvneshDogra/">View on Mozillians</a></p>
+                    </div>
+                  </div>
+                </li>
+              </ul>
+              </div>
             </div>
           </div>
-        </div>
-      </section>
-      <!--  About(Community) goes here  -->
-      <section id="community">
-        <div class="container">
-          <div class="row">
-            <div class="col-sm-4 col-md-4 col-lg-4">
-              <span class="spanContributer">
-                <i class="fa fa-users fa-lg"></i>
-                 10,554
-              </span>
-              <br>
-              <span class='content'>
-                active Mozillians
-                 <br>
-                worldwide
-              </span>
-            </div>
-            <div class="col-sm-4 col-md-4 col-lg-4">
-              <span class="spanOrganiser">
-                <i class="fa fa-heart fa-lg"></i>
-                 121
-              </span>
-              <br>
-              <span class='content'>
-                upcoming events
+        </section>
+        <!--  About(Community) goes here  -->
+        <section id="community" role="banner" aria-labelledby="community-h">
+          <h1 class="sr-only" id="community-h">Mozilla Community</h1>
+          <div class="container">
+            <div class="row">
+              <div class="col-sm-4 col-md-4 col-lg-4">
+                <span class="spanContributer">
+                  <i class="fa fa-users fa-lg"></i>
+                   10,554
+                </span>
                 <br>
-                around the globe
-              </span>
-            </div>
-            <div class="col-sm-4 col-md-4 col-lg-4">
-              <span class="statCountries">
-                <i class="fa fa-globe fa-lg"></i>
-                 87
-              </span>
-              <br>
-              <span class='content'>
-                languages and counting,
+                <span class='content'>
+                  active Mozillians
+                   <br>
+                  worldwide
+                </span>
+              </div>
+              <div class="col-sm-4 col-md-4 col-lg-4">
+                <span class="spanOrganiser">
+                  <i class="fa fa-heart fa-lg"></i>
+                   121
+                </span>
                 <br>
-                on every continent
-              </span>
-            </div>
-            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
-              <a class="contribute-btn" href="https://www.mozilla.org/en-US/contribute/" data-element-location="button-click" data-link-type="Get Involved with Mozilla today">Get Involved with Mozilla today</a>
+                <span class='content'>
+                  upcoming events
+                  <br>
+                  around the globe
+                </span>
+              </div>
+              <div class="col-sm-4 col-md-4 col-lg-4">
+                <span class="statCountries">
+                  <i class="fa fa-globe fa-lg"></i>
+                   87
+                </span>
+                <br>
+                <span class='content'>
+                  languages and counting,
+                  <br>
+                  on every continent
+                </span>
+              </div>
+              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+                <a class="contribute-btn" href="https://www.mozilla.org/en-US/contribute/" data-element-location="button-click" data-link-type="Get Involved with Mozilla today">Get Involved with Mozilla today</a>
+              </div>
             </div>
           </div>
-        </div>
-      </section>
+        </section>
+      </div>
       <!-- Contact Form goes here -->
-      <section id="contact_form" class="contact">
+      <section id="contact_form" class="contact" role="form" aria-labelledby="contact-h">
         <div class="container">
           <div class="row">
             <div class="col-lg-12 text-center">
-              <h2 style="color:white" class="section-heading">Contact Us</h2>
+              <h2 class="section-heading" id="contact-h">Contact Us</h2>
             </div>
           </div>
             <div class="row">
@@ -368,7 +375,7 @@ <h2 style="color:white" class="section-heading">Contact Us</h2>
       </section>
     </div>
       <!-- Footer goes here -->
-      <footer class="navbar-static-bottom clearfix" >
+      <footer class="navbar-static-bottom clearfix" role="contentinfo" >
         <div class="container">
           <div class="row">
             <div class="text-center col-xs-12 col-sm-12 col-md-3 col-lg-3">
@@ -443,7 +450,7 @@ <h2> Connect with us </h2>
           </div>
         </div>
       </footer>
-      <section id="copyright">
+      <section id="copyright" role="banner">
         <div class="row">
           <div class="col-xs-12 text-center">
           <p><b>©Mozilla Delhi 2015 </b>| Powered by <b>Mozpacers</b></p>
diff --git a/src/client/css/style.css b/src/client/css/style.css
index ce0fe27..6033b6d 100644
--- a/src/client/css/style.css
+++ b/src/client/css/style.css
@@ -1087,6 +1087,9 @@ section#community .fa-globe{
 #send{
   margin-bottom:15px;
 }
+#contact-h {
+  color:white;
+}
 
 
 .contact {

From 3b741e2ede0e29a7eeac2588f83d023769832a78 Mon Sep 17 00:00:00 2001
From: vikramj74 <vikramj74@gmail.com>
Date: Sat, 24 Oct 2015 20:04:27 +0530
Subject: [PATCH 02/10] Added accessible markup for social links

---
 index.html               | 44 +++++++++++++++++++++++++---------------
 src/client/css/style.css |  8 ++++++++
 2 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 5992d1d..0406d2e 100644
--- a/index.html
+++ b/index.html
@@ -424,26 +424,38 @@ <h2 class="section-heading" id="contact-h">Contact Us</h2>
             <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
               <div class="row" id="social_icons">
                 <div class="col-xs-12 text-center">
-                  <h2> Connect with us </h2>
+                  <h2 id="connect-h"> Connect with us </h2>
                 </div>
               </div>
               <div class="row">
                 <div class="col-xs-12 text-center">
-                  <a target="_blank" href="https://github.com/mozpacers">
-                    <i class="fa fa-github fa-3x"></i>
-                  </a>
-                  <a target="_blank" href="https://www.facebook.com/mozpacers">
-                    <i class="fa fa-facebook fa-3x"></i>
-                  </a>
-                  <a target="_blank" href="https://twitter.com/mozpacers">
-                    <i class="fa fa-twitter fa-3x"></i>
-                  </a>
-                  <a target="_blank" href="https://www.youtube.com/channel/UCeT3xFmGkKhvjUMjNCiBLkg">
-                    <i class="fa fa-youtube fa-3x"></i>
-                  </a>
-                  <a target="_blank" href="https://mozpacers.slack.com/">
-                    <i class="fa fa-slack fa-3x"></i>
-                  </a>
+                  <ul id="social-links" aria-labelledby="connect-h">
+                    <li>
+                      <a target="_blank" href="https://github.com/mozpacers">
+                        <i class="fa fa-github fa-3x" title="Mozpacers on Github"></i>
+                      </a>
+                    </li>
+                    <li>
+                      <a target="_blank" href="https://www.facebook.com/mozpacers">
+                        <i class="fa fa-facebook fa-3x" title="Mozpacers on Facebook"></i>
+                      </a>
+                    </li>
+                    <li>
+                      <a target="_blank" href="https://twitter.com/mozpacers">
+                        <i class="fa fa-twitter fa-3x" title="Mozpacers on Twitter"></i>
+                      </a>
+                    </li>
+                    <li>
+                      <a target="_blank" href="https://www.youtube.com/channel/UCeT3xFmGkKhvjUMjNCiBLkg">
+                        <i class="fa fa-youtube fa-3x" title="Mozpacers on Youtube"></i>
+                      </a>
+                    </li>
+                    <li>
+                      <a target="_blank" href="https://mozpacers.slack.com/">
+                        <i class="fa fa-slack fa-3x" title="Mozpacers on Slack"></i>
+                      </a>
+                    </li>
+                  </ul>
                 </div>
               </div> <!--Social Icon's END -->
             </div> <!--Connect with us END -->
diff --git a/src/client/css/style.css b/src/client/css/style.css
index 6033b6d..fed7a41 100644
--- a/src/client/css/style.css
+++ b/src/client/css/style.css
@@ -1247,6 +1247,14 @@ footer a:hover, a:focus{
   transform: scaleX(1);
 }
 
+#social-links {
+  list-style-type:none;
+}
+
+#social-links > li {
+  display:inline;
+}
+
 /*Footer End*/
 
 /* Copyright Text */

From a99726b612d83ec51ebdc18cfd2af3ba483f4943 Mon Sep 17 00:00:00 2001
From: vikramj74 <vikramj74@gmail.com>
Date: Wed, 25 Nov 2015 20:38:05 +0530
Subject: [PATCH 03/10] Accessibility enhancements for events widget

---
 index.html               | 14 +++++-----
 src/client/css/style.css | 55 ++++++++++++++++++++++++++++++++++++++--
 src/client/js/script.js  | 11 ++++++++
 3 files changed, 71 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 0406d2e..0ef0bef 100644
--- a/index.html
+++ b/index.html
@@ -27,32 +27,32 @@
     <![endif]-->
     <script id="card-template" type="text/html">
       <li class="col-sm-6 col-md-4 col-lg-4">
-        <figure class="cardfigure">
+        <figure class="cardfigure" tabindex="0">
           <img src="" alt="">
           <figcaption>
-            <div class="info-box">
+            <div class="info-box" >
               <h3></h3>
               <h4 class="pull-right"></h4>
               <p></p>
             </div>
             <span></span>
-            <a id="" class="more click" >More info</a>
-            <a class="register" href="">Register</a>
+            <a id="" class="more click" tabindex="0">More info</a>
+            <a class="register" href="" tabindex="0">Register</a>
           </figcaption>
         </figure>
       </li>
     </script>
     <script id="single-template" type=text/html>
       <div>
-        <section class="info col-xs-12 col-sm-12 col-md-offset-2 col-md-8 col-lg-offset-2 col-lg-8">
+        <section class="info col-xs-12 col-sm-12 col-md-offset-2 col-md-8 col-lg-offset-2 col-lg-8" tabindex="0">
           <h1 class="text-center"></h1>
           <h3 class="pull-left"><br></h3>
           <h3 class="pull-right">Start Time:<br><br>End Time:</h3>
           <!-- <h3 class="pull-right"></h3> -->
           <p></p>
           <div class="buttons">
-            <a class="reg" href=""><button id="registersingle" type="button" class="btn btn-primary btn-lg pull-left">Register Here</button></a>
-            <a class="meetup" href=""><button id="meetupsingle" type="button" class="btn btn-info btn-lg pull-right">Meetup Page</button></a>
+            <a class="reg" href="" role="button"><button id="registersingle" type="button" class="btn btn-primary btn-lg pull-left">Register Here</button></a>
+            <a class="meetup" href=""><button id="meetupsingle" type="button" class="btn btn-info btn-lg pull-right" role="button">Meetup Page</button></a>
           </div>
         </section>
       </div>
diff --git a/src/client/css/style.css b/src/client/css/style.css
index fed7a41..3fddd44 100644
--- a/src/client/css/style.css
+++ b/src/client/css/style.css
@@ -1437,7 +1437,8 @@ section#copyright{
 	bottom: 0;
 	transition: height 0.4s;
 }
-.cs-style-3 figure:hover figcaption {
+.cs-style-3 figure:hover figcaption 
+{
 	transition: height 0.4s;
 }
 .cs-style-3 figure:hover figcaption p
@@ -1447,6 +1448,56 @@ section#copyright{
   visibility:visible;
   transition:height 0.4s,opacity 0.4s,visibility 0.4s;
 }
+/* Keyboard accessability for events card */
+.cs-style-3 figcaption .more:focus , .cs-style-3 figcaption .register:focus {
+  opacity:1;
+  visibility:visible;
+  transition:height 0.4s,opacity 0.4s,visibility 0.4s;
+}
+.cardfigure:focus figcaption .more {
+  height:initial;
+  visibility: visible;
+  opacity: 1;
+  transition:height 0.4s,opacity 0.4s,visibility 0.4s   
+}
+.cardfigure:hover figcaption .register {
+  visibility: visible;
+  height: initial;
+  opacity:1;
+  transition:height 0.4s,opacity 0.4s,visibility 0.4s
+}
+.cardfigure:focus figcaption .register {
+  visibility: visible;
+  height: initial;
+  opacity:1;
+  transition:height 0.4s,opacity 0.4s,visibility 0.4s
+}
+.cardfigure figcaption .more:focus + .register {
+  visibility: visible;
+  height: initial;
+  opacity:1;
+  transition:height 0.4s,opacity 0.4s,visibility 0.4s
+}
+.cardfigure figcaption .more:focus {
+  height:initial;
+}
+.cardfigure figcaption .register:focus {
+  height:initial;
+}
+.cs-style-3 figure:focus figcaption 
+{
+  transition: height 0.4s;
+}
+.cs-style-3 figure:focus figcaption p
+{
+  height:60%;
+  opacity:1;
+  visibility:visible;
+  transition:height 0.4s,opacity 0.4s,visibility 0.4s;
+}
+/* Keyboard accessability for events card */
+
+
 .cs-style-3 figure:hover figcaption .more, .cs-style-3 figure:hover figcaption .register
 {
   height:initial;
@@ -1487,7 +1538,7 @@ section#copyright{
   background-color: #363636;
   color: #E0E4CC;
 }
-.cardfigure a:hover{
+.cardfigure a:hover, .cardfigure a:focus{
   color:#363636;
   background-color:#E0E4CC;
   text-decoration: none;
diff --git a/src/client/js/script.js b/src/client/js/script.js
index bad4e3f..871645f 100644
--- a/src/client/js/script.js
+++ b/src/client/js/script.js
@@ -1363,6 +1363,17 @@ $(document).ready(function() {
       function() {
         $(this).find("figcaption").css("height","100px");
     });
+  /* Keyboard accessability for events card */
+  $(document.body).on('focusin', '.cardfigure',
+      function() {
+        var height = $(this).css( "height" );
+        $(this).find("figcaption").css("height",height);
+    });
+  $(document.body).on('focusout', '.cardfigure',
+      function() {
+        $(this).find("figcaption").css("height","100px");
+    });
+  /* Keyboard accessabilty for events card */
   var requestupcoming = $.ajax({
               url: "http://stormy-gorge-8134.herokuapp.com/api/events/?time=future",
               method: "GET",

From 57b447643a038257ac9e6c2604298ec6340b8fae Mon Sep 17 00:00:00 2001
From: vikramj74 <vikramj74@gmail.com>
Date: Wed, 25 Nov 2015 22:57:43 +0530
Subject: [PATCH 04/10] Slider restructuring for better accessibility

---
 index.html | 86 ++++++++++++++++++++++++------------------------------
 1 file changed, 38 insertions(+), 48 deletions(-)

diff --git a/index.html b/index.html
index 0ef0bef..dbeadf0 100644
--- a/index.html
+++ b/index.html
@@ -163,15 +163,13 @@ <h1 id="slider-h" class="sr-only">Interactive Slider</h1>
               <h2 class="panel-title">Firefox Friends</h2>
               <div class="panel-inner">
                 <div class="panel-content">
-                  <a href="http://friends.mozilla.org" target="_blank">
-                    <h3>Join The Innovators</h3>
-                    <p>
-                      Firefox Friends is our ever-growing team of social-sharers and word-spreaders. By joining, you’ll be helping us bring an open and innovative Web to people everywhere.
-                    </p>
-                    <p class="go">
-                      Visit Firefox Friends
-                    </p>
-                  </a>
+                  <h3>Join The Innovators</h3>
+                  <p>
+                    Firefox Friends is our ever-growing team of social-sharers and word-spreaders. By joining, you’ll be helping us bring an open and innovative Web to people everywhere.
+                  </p>
+                  <p class="go">
+                    <a href="http://friends.mozilla.org" target="_blank">Visit Firefox Friends</a>
+                  </p>
                 </div>
               </div>
             </li>
@@ -179,15 +177,13 @@ <h3>Join The Innovators</h3>
               <h2 class="panel-title"><i>The Web</i> You Want</h2>
               <div class="panel-inner">
                 <div class="panel-content">
-                  <a href="https://www.webmaker.org" hreflang="en-US" target="_blank">
-                    <h3>Make The Web You Want</h3>
-                    <p>
-                      Join us at Mozilla Web Maker and help shape the web you want. Web Maker helps you to create your own web.
-                    </p>
-                    <p class="go">
-                      Mozilla Web Maker
-                    </p>
-                  </a>
+                  <h3>Make The Web You Want</h3>
+                  <p>
+                    Join us at Mozilla Web Maker and help shape the web you want. Web Maker helps you to create your own web.
+                  </p>
+                  <p class="go">
+                    <a href="https://www.webmaker.org" hreflang="en-US" target="_blank">Mozilla Web Maker</a>
+                  </p>
                 </div>
               </div>
             </li>
@@ -195,16 +191,14 @@ <h3>Make The Web You Want</h3>
               <h2 class="panel-title"><i>Firefox Student</i> Ambassador</h2>
               <div class="panel-inner">
                 <div class="panel-content">
-                  <a href="https://www.mozilla.org/en-US/contribute/studentambassadors/" target="_blank">
-                    <h3>Help Change the Web</h3>
-                    <p>
-                      Individuals who are passionate about Mozilla and raise awareness about many benefits of firefox
-                      and other Mozilla products.
-                    </p>
-                    <p class="go">
-                      Become a student ambassador
-                    </p>
-                  </a>
+                  <h3>Help Change the Web</h3>
+                  <p>
+                    Individuals who are passionate about Mozilla and raise awareness about many benefits of firefox
+                    and other Mozilla products.
+                  </p>
+                  <p class="go">
+                    <a href="https://www.mozilla.org/en-US/contribute/studentambassadors/" target="_blank">Become a student ambassador</a>
+                  </p>
                 </div>
               </div>
             </li>
@@ -212,16 +206,14 @@ <h3>Help Change the Web</h3>
               <h2 class="panel-title"><i>Discover </i><br> Firefox OS</h2>
               <div class="panel-inner">
                 <div class="panel-content">
-                  <a href="https://www.mozilla.org/en-US/firefox/os/2.0/" target="_blank">
-                    <h3>Discover Firefox OS</h3>
-                    <p>
-                      Designed to give you what you need, just when you need it. Firefox OS is an open source OS based on web
-                      technologies to bring you the best experience.
-                    </p>
-                    <p class="go">
-                      Get Firefox OS
-                    </p>
-                  </a>
+                  <h3>Discover Firefox OS</h3>
+                  <p>
+                    Designed to give you what you need, just when you need it. Firefox OS is an open source OS based on web
+                    technologies to bring you the best experience.
+                  </p>
+                  <p class="go">
+                    <a href="https://www.mozilla.org/en-US/firefox/os/2.0/" target="_blank">Get Firefox OS</a>
+                  </p>
                 </div>
               </div>
             </li>
@@ -229,16 +221,14 @@ <h3>Discover Firefox OS</h3>
               <h2 class="panel-title"><i>Mozilla</i> Representatives</h2>
               <div class="panel-inner">
                 <div class="panel-content">
-                  <a href="https://www.mozilla.org/fr/mission/" target="_blank">
-                    <h3>Mozilla Representatives</h3>
-                    <p>
-                      The program aims at those enthusiastic volunteers of Mozilla who want to become official representatives of Mozilla in
-                      their locale/region.
-                    </p>
-                    <p class="go">
-                      Join the Mozilla Mission
-                    </p>
-                  </a>
+                  <h3>Mozilla Representatives</h3>
+                  <p>
+                    The program aims at those enthusiastic volunteers of Mozilla who want to become official representatives of Mozilla in
+                    their locale/region.
+                  </p>
+                  <p class="go">
+                    <a href="https://www.mozilla.org/fr/mission/" target="_blank">Join the Mozilla Mission</a>
+                  </p>
                 </div>
               </div>
             </li>

From daee4a61f332f104a1275aa53bb93a9408841ae2 Mon Sep 17 00:00:00 2001
From: vikramj74 <vikramj74@gmail.com>
Date: Wed, 25 Nov 2015 22:59:34 +0530
Subject: [PATCH 05/10] Button roles for register and more links

---
 index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index dbeadf0..348dd95 100644
--- a/index.html
+++ b/index.html
@@ -36,8 +36,8 @@ <h4 class="pull-right"></h4>
               <p></p>
             </div>
             <span></span>
-            <a id="" class="more click" tabindex="0">More info</a>
-            <a class="register" href="" tabindex="0">Register</a>
+            <a role="button" id="" class="more click" tabindex="0">More info</a>
+            <a role="button" class="register" href="" tabindex="0">Register</a>
           </figcaption>
         </figure>
       </li>

From eaa9c488e63b782a0d31ce4442f2822b83bbb806 Mon Sep 17 00:00:00 2001
From: vikramj74 <vikramj74@gmail.com>
Date: Wed, 25 Nov 2015 23:03:08 +0530
Subject: [PATCH 06/10] Heading level correction for meet the team section

---
 index.html               | 6 +++---
 src/client/css/style.css | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 348dd95..22c97f0 100644
--- a/index.html
+++ b/index.html
@@ -253,7 +253,7 @@ <h1>Meet the team</h1>
                 <li>
                   <div class="ch-item ch-img-1">
                     <div class="ch-info">
-                      <h3>Ajay Kumar</h3>
+                      <h2>Ajay Kumar</h2>
                       <p>Community Mentor<a href="https://reps.mozilla.org/u/ajaysinghi1188/">View on Reps</a></p>
                     </div>
                   </div>
@@ -261,7 +261,7 @@ <h3>Ajay Kumar</h3>
                 <li>
                   <div class="ch-item ch-img-2">
                     <div class="ch-info">
-                      <h3>Anup Mishra</h3>
+                      <h2>Anup Mishra</h2>
                       <p>Community Mentor<a href="https://reps.mozilla.org/u/anupkumarmishra29/">View on Reps</a></p>
                     </div>
                   </div>
@@ -269,7 +269,7 @@ <h3>Anup Mishra</h3>
                 <li>
                   <div class="ch-item ch-img-3">
                     <div class="ch-info">
-                      <h3>Bhuvnesh Kumar</h3>
+                      <h2>Bhuvnesh Kumar</h2>
                       <p>Community Mentor<a href="https://mozillians.org/en-US/u/BhuvneshDogra/">View on Mozillians</a></p>
                     </div>
                   </div>
diff --git a/src/client/css/style.css b/src/client/css/style.css
index 3fddd44..01134fa 100644
--- a/src/client/css/style.css
+++ b/src/client/css/style.css
@@ -316,7 +316,7 @@ section#About{
 	transform: scale(0);
 	backface-visibility: hidden;
 }
-.ch-info h3 {
+.ch-info h2 {
 	color: #fff;
 	text-transform: uppercase;
 	position: relative;

From 0e2faf8fcb70ff0586958b8285be95a5f003fbee Mon Sep 17 00:00:00 2001
From: vikramj74 <vikramj74@gmail.com>
Date: Wed, 25 Nov 2015 23:05:38 +0530
Subject: [PATCH 07/10] Labels for contact form

---
 index.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/index.html b/index.html
index 22c97f0..9e90b11 100644
--- a/index.html
+++ b/index.html
@@ -340,10 +340,12 @@ <h2 class="section-heading" id="contact-h">Contact Us</h2>
                 <div class="row">
                   <div class="col-lg-offset-2 col-lg-8 col-md-offset-2 col-md-8">
                     <div class="form-group">
+                      <label class="sr-only" for="name">Name</label>
                       <input class="form-control" type="text" name="name" id="name" placeholder="Name*" />
                       <span class="error" id="error_name"></span>
                     </div>
                     <div class="form-group">
+                     <label class="sr-only" for="email">Email</label>
                      <input class="form-control" type="email" name="email" id="email" placeholder="Email Address*" />
                      <span class="error" id="error_email"></span>
                     </div>
@@ -353,6 +355,7 @@ <h2 class="section-heading" id="contact-h">Contact Us</h2>
                     </div>
                     <div class="form_group">
                       <div class="row">
+                        <label class="sr-only" for="message">Message</label>
                         <span id="success" class="col-xs-4"></span>
                         <input type="submit" name="send" id="send" value="Send" class="col-sm-8 btn btn-lg btn-info send-button" >
                       </div>

From f98771262707e9301883c6f3f5ff00a0baf2806a Mon Sep 17 00:00:00 2001
From: vikramj74 <vikramj74@gmail.com>
Date: Fri, 27 Nov 2015 22:01:22 +0530
Subject: [PATCH 08/10] Accessibility markup for back button

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 9e90b11..c7d8fe6 100644
--- a/index.html
+++ b/index.html
@@ -145,7 +145,7 @@ <h1 class="text-center">Past events</h1>
         <section id="testcase" class="container-fluid testing">
           <div class="row grid">
             <div class="container-back">
-            <a class="back"><i class="fa fa-4x fa-chevron-left"></i></a>
+            <a class="back" role="button" tabindex="0"><i title="back to main page" class="fa fa-4x fa-chevron-left"></i></a>
             </div>
           </div>
           <div class="row">

From babc5f863c6de93c711f7f63967a86e32ff2a115 Mon Sep 17 00:00:00 2001
From: Vikram Jaswal <vikramj74@gmail.com>
Date: Fri, 1 Jan 2016 19:46:15 +0530
Subject: [PATCH 09/10] Tabzilla conflict fixed

---
 index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index f9107e8..1374adc 100644
--- a/index.html
+++ b/index.html
@@ -78,7 +78,9 @@ <h3 class="pull-right">Start Time:<br><br>End Time:</h3>
       <!-- Tabzilla and navbar goes here-->
       <header id="masthead" class="col-md-12">
         <div class="container col-md-8 col-md-offset-2">
-          <a href="https://www.mozilla.org/" id="tabzilla">mozilla</a>
+          <div id="tabzilla">
+            <a href="https://www.mozilla.org/">mozilla</a>  
+          </div>
           <nav id="nav-main" role="navigation">
             <span class="toggle" role="button" aria-controls="nav-main-menu" tabindex="0">Menu</span>
             <ul id="nav-main-menu">
@@ -479,8 +481,6 @@ <h2 id="connect-h"> Connect with us </h2>
     <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
     <!-- Include all compiled plugins (below), or include individual files as needed-->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
-    <!-- Tabzilla script-->
-    <script src="https://mozorg.cdn.mozilla.net/tabzilla/tabzilla.js"></script>
     <!-- Custom Script -->
     <script src="src/client/js/script.js"></script>
   </body>

From 9394fa7ed37f45bbbd093ccafd9824c041992d54 Mon Sep 17 00:00:00 2001
From: Vikram Jaswal <vikramj74@gmail.com>
Date: Fri, 1 Jan 2016 20:10:18 +0530
Subject: [PATCH 10/10] Accessibility markup for hero image ( Presentational
 role removed)

---
 index.html | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 1374adc..3e49695 100644
--- a/index.html
+++ b/index.html
@@ -95,11 +95,12 @@ <h3 class="pull-right">Start Time:<br><br>End Time:</h3>
       <!-- Sticky Events section goes here -->
       <h3 class="text-center">This is Alpha v0.2.1 of Mozpacers powered by MozAwesomeness ;)</h3>
       <!-- Hero Image goes here -->
-      <section id="Hero_Image" role="presentation">
+      <section id="Hero_Image" aria-labelledby="mozpacers-group-photo-h">
+        <h1 class="sr-only" id="mozpacers-group-photo-h">Mozpacers Group Photo</h1>
         <div class ="row">
           <div id ="hero_col" class="col-xs-12 col-sm-12 col-md-12 col-lg-12" >
-            <img id="hero_main" src="src/client/img/hero/back2.jpg" class ="img-responsive animated fadeInDown" />
-            <img id="hero_logo" src="src/client/img/hero/logo2.png" class="img-responsive col-xs-3 col-sm-2 col-md-2 col-lg-2 animated fadeInDown"  />
+            <img id="hero_main" src="src/client/img/hero/back2.jpg" class ="img-responsive animated fadeInDown" alt="Mozpacers Group Photo" />
+            <img id="hero_logo" src="src/client/img/hero/logo2.png" class="img-responsive col-xs-3 col-sm-2 col-md-2 col-lg-2 animated fadeInDown" alt="Mozilla Delhi Logo"  />
           </div>
         </div>
       </section>