Accessibility Updates (#16633)

* Fixed accessibility issues in home page Signed-off-by: ChaitanyaKaranam <[email protected]> * Fixed accessibility issues for docs/home page Signed-off-by: chaitanyakaranam <[email protected]> * Fixed accessibility issues for /partners page Signed-off-by: chaitanyakaranam <[email protected]> * Fixed accessibility issues for /community page Signed-off-by: chaitanyakaranam <[email protected]> * Update layouts/partials/header.html Co-Authored-By: Tim Bannister <[email protected]> * Update layouts/partials/footer-scripts.html Co-Authored-By: Tim Bannister <[email protected]> * Update layouts/index.html Co-Authored-By: Tim Bannister <[email protected]> * Update content/en/partners/_index.html Co-Authored-By: Tim Bannister <[email protected]> * Update content/en/community/_index.html Co-Authored-By: Tim Bannister <[email protected]> * Added missing quotes * Added landmark roles for search bar and footer Signed-off-by: chaitanyakaranam <[email protected]> * Changed images alt text Changed alt text from 'kubernetes community' to 'Kubernetes Conference Gallery' * Removed verb from iframe title Signed-off-by: chaitanyakaranam <[email protected]> * Change alt text for GitHub image Co-Authored-By: Tim Bannister <[email protected]> * Few alt text changes * Modified alt text
kubernetes · Oct 6, 2019 · 920d14f · 920d14f
1 parent 4c10506
commit 920d14f
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 67 deletions.
diff --git a/assets/sass/_base.sass b/assets/sass/_base.sass
@@ -1065,7 +1065,7 @@ dd
   position: fixed
   bottom: 0
 
-#miceType
+.miceType
   clear: both
   font-size: 11px
   line-height: 18px

diff --git a/content/en/community/_index.html b/content/en/community/_index.html
@@ -6,8 +6,8 @@
 
 <div class="newcommunitywrapper">
 <div class="banner1">
-  <img src="/images/community/kubernetes-community-final-02.jpg" style="width:100%" class="desktop">
-  <img src="/images/community/kubernetes-community-02-mobile.jpg" style="width:100%" class="mobile">
+  <img src="/images/community/kubernetes-community-final-02.jpg" alt="Kubernetes Conference Gallery" style="width:100%" class="desktop">
+  <img src="/images/community/kubernetes-community-02-mobile.jpg" alt="Kubernetes Conference Gallery" style="width:100%" class="mobile">
 </div>
 
 <div class="intro">
@@ -17,30 +17,30 @@
 <br class="mobile">
 </div>
 
-<div class="navbar">
+<div class="navbar">
 
 <a href="#conduct">Code of conduct </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <a href="#videos">Videos</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <a href="#discuss">Discussions</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <a href="#events">Events and meetups</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-<a href="#news">News</a>
-
+<a href="#news">News</a>
+
 </div>
 <br class="mobile"><br class="mobile">
 <div class="imagecols">
 <br class="mobile">
   <div class="imagecol">
-    <img src="/images/community/kubernetes-community-final-03.jpg" style="width:100%" class="desktop">
+    <img src="/images/community/kubernetes-community-final-03.jpg" alt="Kubernetes Conference Gallery" style="width:100%" class="desktop">
   </div>
 
   <div class="imagecol">
-    <img src="/images/community/kubernetes-community-final-04.jpg" style="width:100%" class="desktop">
+    <img src="/images/community/kubernetes-community-final-04.jpg" alt="Kubernetes Conference Gallery" style="width:100%" class="desktop">
   </div>
 
   <div class="imagecol" style="margin-right:0% important">
-    <img src="/images/community/kubernetes-community-final-05.jpg" style="width:100%;margin-right:0% important" class="desktop">
+    <img src="/images/community/kubernetes-community-final-05.jpg" alt="Kubernetes Conference Gallery" style="width:100%;margin-right:0% important" class="desktop">
   </div>
-  <img src="/images/community/kubernetes-community-04-mobile.jpg" style="width:100%;margin-bottom:3%" class="mobile">
+  <img src="/images/community/kubernetes-community-04-mobile.jpg" alt="Kubernetes Conference Gallery" style="width:100%;margin-bottom:3%" class="mobile">
 
 <a name="conduct"></a>
 </div>
@@ -78,7 +78,7 @@ <h1 style="margin-top:0px">Videos</h1>
 
 <div class="video">
 
-  <iframe width="100%" height="250" src="https://www.youtube.com/embed/videoseries?list=PL69nYSiGNLP3azFUvYJjGn45YbF6C-uIg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+  <iframe width="100%" height="250" src="https://www.youtube.com/embed/videoseries?list=PL69nYSiGNLP3azFUvYJjGn45YbF6C-uIg" title="Monthly office hours" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
 
 <a href="https://www.youtube.com/playlist?list=PL69nYSiGNLP3azFUvYJjGn45YbF6C-uIg">
 <div class="videocta">
@@ -87,7 +87,7 @@ <h1 style="margin-top:0px">Videos</h1>
 </div>
 
 <div class="video">
-  <iframe width="100%" height="250" src="https://www.youtube.com/embed/videoseries?list=PL69nYSiGNLP1pkHsbPjzAewvMgGUpkCnJ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+  <iframe width="100%" height="250" src="https://www.youtube.com/embed/videoseries?list=PL69nYSiGNLP1pkHsbPjzAewvMgGUpkCnJ" title="Weekly community meetings" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
 <a href="https://www.youtube.com/playlist?list=PL69nYSiGNLP1pkHsbPjzAewvMgGUpkCnJ">
 <div class="videocta">
 Watch weekly community meetings&nbsp;&#9654;
@@ -97,7 +97,7 @@ <h1 style="margin-top:0px">Videos</h1>
 
 <div class="video">
 
-<iframe width="100%" height="250" src="https://www.youtube.com/embed/videoseries?list=PL69nYSiGNLP3QpQrhZq_sLYo77BVKv09F" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+<iframe width="100%" height="250" src="https://www.youtube.com/embed/videoseries?list=PL69nYSiGNLP3QpQrhZq_sLYo77BVKv09F" title="Talk from a community member" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
 
 <a href="https://www.youtube.com/playlist?list=PL69nYSiGNLP3QpQrhZq_sLYo77BVKv09F">
 <div class="videocta">
@@ -121,7 +121,7 @@ <h1 style="padding-top:1%">Discussions</h1>
 <div class="resourcecontainer">
 
 <div class="resourcebox">
-<img src="/images/community/discuss.png" style="width:80%;padding-bottom:2%">
+<img src="/images/community/discuss.png" alt=Forum" style="width:80%;padding-bottom:2%">
 <a href="https://discuss.kubernetes.io/" style="color:#0662EE;display:block;margin-top:1%">
 forum&nbsp;&#9654;
 </a>
@@ -131,7 +131,7 @@ <h1 style="padding-top:1%">Discussions</h1>
 </div>
 
 <div class="resourcebox">
-<img src="/images/community/twitter.png" style="width:80%;padding-bottom:2%">
+<img src="/images/community/twitter.png" alt="Twitter" style="width:80%;padding-bottom:2%">
 <a href="https://twitter.com/kubernetesio" style="color:#0662EE;display:block;margin-top:1%">
 twitter&nbsp;&#9654;
 </a>
@@ -140,7 +140,7 @@ <h1 style="padding-top:1%">Discussions</h1>
 </div>
 
 <div class="resourcebox">
-<img src="/images/community/github.png" style="width:80%;padding-bottom:2%">
+<img src="/images/community/github.png" alt="GitHub" style="width:80%;padding-bottom:2%">
 <a href="https://github.com/kubernetes/kubernetes" style="color:#0662EE;display:block;margin-top:1%">
 github&nbsp;&#9654;
 </a>
@@ -150,7 +150,7 @@ <h1 style="padding-top:1%">Discussions</h1>
 </div>
 
 <div class="resourcebox">
-<img src="/images/community/stack.png" style="width:80%;padding-bottom:2%">
+<img src="/images/community/stack.png" alt="Stack Overflow" style="width:80%;padding-bottom:2%">
 <a href="https://stackoverflow.com/search?q=kubernetes" style="color:#0662EE;display:block;margin-top:1%">
 stack overflow&nbsp;&#9654;
 </a>
@@ -184,53 +184,53 @@ <h1 style="color:white !important">Upcoming Events</h1>
 </div>
 </div>
 
-<div class="meetups">
-<div class="meetupcol">
-<div class="meetuptext">
-<h1 style="text-align:left">Global Community</h1>
-With over 150 meetups in the world and growing, go find your local kube people. If one isn't near, take charge and create your own.
-</div>
-<a href="https://www.meetup.com/topics/kubernetes/">
-<div class="button">
-FIND A MEETUP
-</div>
-</a>
-<a name="news"></a>
-</div>
-</div>
-
-
-<!--
-<div class="contributor">
+<div class="meetups">
+<div class="meetupcol">
+<div class="meetuptext">
+<h1 style="text-align:left">Global Community</h1>
+With over 150 meetups in the world and growing, go find your local kube people. If one isn't near, take charge and create your own.
+</div>
+<a href="https://www.meetup.com/topics/kubernetes/">
+<div class="button">
+FIND A MEETUP
+</div>
+</a>
+<a name="news"></a>
+</div>
+</div>
+
+
+<!--
+<div class="contributor">
 <div class="contributortext">
 <br>
-<h1 style="text-align:left">
-New Contributors Site
+<h1 style="text-align:left">
+New Contributors Site
  </h1>
-Text about new contributors site.
+Text about new contributors site.
 
-<br><br>
+<br><br>
 
-<div class="button">
-VISIT SITE
+<div class="button">
+VISIT SITE
+</div>
 </div>
-</div>
-</div>
-
--->
+</div>
+
+-->
 
 <div class="news">
 <br class="mobile"><br class="mobile">
 <br class="tablet"><br class="tablet">
 <h1 style="margin-bottom:2%">Recent News</h1>
 
-<br>
-<div class="twittercol1">
-<a class="twitter-timeline" data-tweet-limit="1" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">Tweets by kubernetesio</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
-</div>
-
-<br>
-<br><br><br><br>
-</div>
-
-</div>
+<br>
+<div class="twittercol1">
+<a class="twitter-timeline" data-tweet-limit="1" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">Tweets by kubernetesio</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+</div>
+
+<br>
+<br><br><br><br>
+</div>
+
+</div>
diff --git a/content/en/partners/_index.html b/content/en/partners/_index.html
@@ -75,7 +75,7 @@ <h5><b>Kubernetes Training Partners</b></h5>
 </script>
 <body>
     <div id="frameHolder">
-      <iframe id="landscape" frameBorder="0" scrolling="no" style="width: 1px; min-width: 100%" src=""></iframe>
+      <iframe id="landscape" title="CNCF Landscape" frameBorder="0" scrolling="no" style="width: 1px; min-width: 100%" src=""></iframe>
       <script src="https://landscape.cncf.io/iframeResizer.js"></script>
     </div>
 </body>

diff --git a/layouts/docs/docsportal_home.html b/layouts/docs/docsportal_home.html
@@ -43,7 +43,7 @@ <h4>{{ .title }}</h4>
         {{ end }}
       </ul>
       <br><br>
-      <button id="btn-concepts" class="button" onClick="location.href='{{ .button_path | relLangURL }}';">{{ .button }}</button>
+      <button id="btn-concepts" class="button" onClick="location.href='{{ .button_path | relLangURL }}';" aria-label="{{ .title }}">{{ .button }}</button>
     </div>
   {{ end }}
 {{ end }}
diff --git a/layouts/index.html b/layouts/index.html
@@ -24,13 +24,13 @@
             <div id="mc_embed_signup_scroll">
         	<p style="font-size: 20px">{{ T "main_kubeweekly_baseline" }}</p>
           <br />
-        	<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
+        	<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" aria-label="email" required>
             <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
             <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3885586f8f1175194017967d6_11c1b8bcb2" tabindex="-1" value=""></div>
             <div class="clear" style="margin-left: 15px;"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
             </div>
         </form>
-        <h5 style="text-align: center"><a href="https://us10.campaign-archive.com/home/?u=3885586f8f1175194017967d6&id=11c1b8bcb2" style="color: #3371E3; font-weight: 400; font-size: 20px">{{ T "main_kubeweekly_past_link" }}</a></h5>
+        <h5 style="text-align: center"><a href="https://us10.campaign-archive.com/home/?u=3885586f8f1175194017967d6&id=11c1b8bcb2" aria-label="Kube Weekly" style="color: #3371E3; font-weight: 400; font-size: 20px">{{ T "main_kubeweekly_past_link" }}</a></h5>
         </div>
 <br>
 <br>

diff --git a/layouts/partials/docs/top-menu.html b/layouts/partials/docs/top-menu.html
@@ -15,7 +15,7 @@ <h5>{{ .Params.abstract }}</h5>
 		<li><a href="{{ .RelPermalink }}"{{ if $yah }} class="YAH"{{ end }}>{{ .LinkTitle | upper }}</a></li>
 		{{ end }}
 	</ul>
-	<form id="searchBox" action="/docs/search/">
+	<form id="searchBox" action="/docs/search/" role="search">
 		<input type="text" id="search" name="q" placeholder="{{ T "ui_search_placeholder" }}" aria-label="Search">
 	</form>
 </div>
diff --git a/layouts/partials/footer-scripts.html b/layouts/partials/footer-scripts.html
@@ -1,4 +1,4 @@
-<button class="flyout-button" onclick="kub.toggleToc()"></button>
+<button class="flyout-button" onclick="kub.toggleToc()" aria-label="Toggle table of contents visibility"></button>
 
 <script>
 // hide docs nav area if no nav is present, or if nav only contains a link to the current page

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -7,7 +7,7 @@
             {{ with site.GetPage "section" . }}<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>{{ end }}
             {{ end }}
         </nav>
-        <div class="social">
+        <div class="social" role="region" aria-label="Social hyperlinks">
             <div>
                 <a href="https://twitter.com/kubernetesio" class="twitter"><span>{{ T "community_twitter_name" }}</span></a>
                 <a href="https://github.com/kubernetes/kubernetes" class="github"><span>{{ T "community_github_name" }}</span></a>
@@ -23,13 +23,13 @@
                 <a href="https://git.k8s.io/community/contributors/guide" class="button">{{ T "main_contribute" }}</a>
             </div>
         </div>
-        <div id="miceType" class="center">
+        <div class="miceType center">
             &copy; {{ now.Year }} {{ T "main_documentation_license" | safeHTML }}</a>
         </div>
-        <div id="miceType" class="center">
+        <div class="miceType center">
             Copyright &copy; {{ now.Year }} {{ T "main_copyright_notice" | safeHTML }}
         </div>
-        <div id="miceType" class="center">
+        <div class="miceType center">
             ICP license: 京ICP备17074266号-3
         </div>
     </main>

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -1,7 +1,7 @@
 <div id="cellophane" onclick="kub.toggleMenu()"></div>
 
 <header>
-    <a href="{{ site.Home.RelPermalink }}" class="logo"></a>
+    <a href="{{ site.Home.RelPermalink }}" class="logo" title="Production-Grade Container Orchestration - Kubernetes" aria-label="Kubernetes website"></a>
 
     <div class="nav-buttons" data-auto-burger="primary">
         <ul class="global-nav">

diff --git a/layouts/shortcodes/blocks/case-studies.html b/layouts/shortcodes/blocks/case-studies.html
@@ -10,7 +10,7 @@ <h3>{{ $caseStudiesSection.Title }}</h3>
       {{ range $caseStudiesPages }}
       {{ $logo := .Resources.GetMatch "**logo*.png" }}
       <div>
-        {{ with $logo }}<img src="{{ .RelPermalink }}">{{ end }}
+        {{ with $logo }}<img src="{{ .RelPermalink }}" alt="{{ .Title }}">{{ end }}
         <p>"{{ .Params.quote | truncate 100 }}"</p>
         <a href="{{ .RelPermalink }}">{{ T "main_read_more" }}</a>
       </div>