Add alt text to images to help with screen reader accessibility (#1676)

Author: kentyunge

themes/vue/_config.yml

@@ -13,55 +13,79 @@ platinum_sponsors:
     alt_img: bit.png
   - url: http://tooltwist.com/
     img: tooltwist.png
+    name: tooltwist
   - url: https://vueschool.io/?utm_source=Vuejs.org&utm_medium=Banner&utm_campaign=Sponsored%20Banner&utm_content=V1
     img: vueschool.png
+    name: vue school
   - url: https://vehikl.com/
     img: vehikl.png
+    name: vehikl
 
 gold_sponsors:
   - url: https://laravel.com
     img: laravel.png
+    name: laravel
   - url: https://htmlburger.com
     img: htmlburger.png
+    name: html burger
   - url: https://chaitin.cn/en/
     img: chaitin.png
+    name: chaitin
   - url: https://www.frontenddeveloperlove.com/
     img: frontend-love.png
+    name: frontend love
   - url: https://onsen.io/vue/
     img: onsen-ui.png
+    name: onsen ui
   - url: https://vuetifyjs.com
     img: vuetify.png
+    name: vuetify
   - url: https://neds.com.au/
     img: neds.png
+    name: neds
   - url: https://hackr.io/tutorials/learn-vue-js
     img: hackr-io.png
+    name: hacker io
   - url: https://icons8.com/
     img: icons8.png
+    name: icons 8
   - url: https://vuejobs.com/?ref=vuejs
     img: vuejobs.png
+    name: vue jobs
   - url: https://codepilot.ai
     img: codepilot.png
+    name: code pilot
   - url: https://teamextension.io/
     img: teamextension.png
+    name: team extension
   - url: http://aaha.co/
     img: aaha.png
+    name: aaha
   - url: https://www.valuecoders.com
     img: valuecoders.png
+    name: value coders dot org
   - url: https://www.nsoft.com/careers/
     img: nsoft.png
+    name: n soft
   - url: https://www.vuemastery.com/
     img: vuemastery.png
+    name: vue mastery
 
 silver_sponsors:
   - url: https://dopamine.bg/
     img: dopamine.png
+    name: dopamine
 
 bronze_sponsors:
   - url: http://tighten.co/
     img: http://i.imgur.com/T7fQYLT.png
+    name: tighten co
   - url: https://alligator.io
     img: https://alligator.io/images/alligator-logo.svg
+    name: alligator dot io
   - url: https://www.accelebrate.com/
     img: https://www.accelebrate.com/assets/images/accelebrate_logo@2x.png
+    name: accelebrate
   - url: https://pullstring.com
     img: https://i.imgur.com/hQHW6TB.png
+    name: pull string

themes/vue/layout/index.ejs

@@ -9,7 +9,7 @@
 <div id="hero">
   <div class="inner">
     <div class="left">
-      <img class="hero-logo" src="<%- url_for("/images/logo.png") %>">
+      <img class="hero-logo" src="<%- url_for("/images/logo.png") %>" alt="vue logo">
     </div><div class="right">
       <h2 class="vue">Vue.js</h2>
       <h1>
@@ -31,7 +31,7 @@
 <div id="special-sponsor">
   <h3>Special Sponsor</h3>
   <a href="https://stdlib.com/" target="_blank">
-    <img src="/images/stdlib.png" style="width:160px">
+    <img src="/images/stdlib.png" style="width:160px" alt="Standard Library Logo">
     <br>
     <span>Function as a Service Platform and Library</span>
   </a>

themes/vue/layout/partials/header.ejs

@@ -1,6 +1,6 @@
 <div id="header">
   <a id="logo" href="<%- url_for("/") %>">
-    <img src="<%- url_for("/images/logo.png") %>">
+    <img src="<%- url_for("/images/logo.png") %>" alt="vue logo">
     <span>Vue.js</span>
   </a>
   <ul id="nav">

themes/vue/layout/partials/sponsors.ejs

@@ -2,14 +2,14 @@
 
 <%_ for (const sponsor of theme.platinum_sponsors) {_%>
 <a href="<%- sponsor.url %>" target="_blank" style="width: 160px;">
-  <img src="<%- url_for(`/images/${sponsor.img}`) %>" style="width: 160px;">
+  <img src="<%- url_for(`/images/${sponsor.img}`) %>" style="width: 160px;" alt="<%-sponsor.name-%>">
 </a>
 <%_ } _%>
 <br>
 <br>
 <%_ for (const sponsor of theme.gold_sponsors) {_%>
 <a href="<%- sponsor.url %>" target="_blank" style="width: 120px;">
-  <img src="<%- url_for(`/images/${sponsor.img}`) %>" style="width: 120px;">
+  <img src="<%- url_for(`/images/${sponsor.img}`) %>" style="width: 120px;" alt="<%-sponsor.name-%>">
 </a>
 <%_ } _%>
 <br>
@@ -19,13 +19,13 @@
 <div class="open-collective-sponsors">
   <h3>OpenCollective Sponsors</h3>
   <h4>Platinum</h4>
-  <%_ for (let i = 0; i < 3; i++) {_%>
+  <%_ for (let i = 0; i < 2; i++) {_%>
   <a href="https://opencollective.com/vuejs/tiers/platinum-sponsors/<%- i %>/website" target="_blank">
     <img src="https://opencollective.com/vuejs/tiers/platinum-sponsors/<%- i %>/avatar.svg">
   </a>
   <%_ } _%>
   <h4>Gold</h4>
-  <%_ for (let i = 0; i < 10; i++) {_%>
+  <%_ for (let i = 0; i < 8; i++) {_%>
   <a href="https://opencollective.com/vuejs/tiers/gold-sponsors/<%- i %>/website" target="_blank">
     <img src="https://opencollective.com/vuejs/tiers/gold-sponsors/<%- i %>/avatar.svg">
   </a>

themes/vue/layout/partials/sponsors_sidebar.ejs

@@ -4,7 +4,7 @@
     <div>
     <%_ for (const sponsor of theme.special_sponsors) {_%>
     <a href="<%- sponsor.url %>" target="_blank" class="logo">
-      <img src="<%- url_for(`/images/${sponsor.wide_img || sponsor.img}`) %>">
+      <img src="<%- url_for(`/images/${sponsor.wide_img || sponsor.img}`) %>" alt="<%-sponsor.name-%>">
     </a>
     <%_ } _%>
     </div>
@@ -17,7 +17,7 @@
     <div>
     <%_ for (const sponsor of theme.platinum_sponsors) {_%>
     <a href="<%- sponsor.url %>" target="_blank" class="logo">
-      <img src="<%- url_for(`/images/${sponsor.wide_img || sponsor.img}`) %>">
+      <img src="<%- url_for(`/images/${sponsor.wide_img || sponsor.img}`) %>" alt="<%-sponsor.name-%>">
     </a>
     <%_ } _%>
     </div>