Add alt text to images (#2487)

This commit is the first in a series of commits that will be aiming to make the website more accessible. This commit adds alt text to images on the landing page and the header.
thoughtbot · May 23, 2024 · 8dbf343 · 8dbf343
1 parent d89d21b
commit 8dbf343
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/app/views/layouts/_header_application_links.html.erb b/app/views/layouts/_header_application_links.html.erb
@@ -71,7 +71,8 @@
         <%= link_to my_account_path, id: "my_account_link", class: "avatar" do %>
           <%= image_tag(
             gravatar_url(current_user.email, size: "30"),
-            class: "avatar__image",
+            alt: "avatar image",
+            class: "avatar__image"
           )%>
         <% end %>
       </li>

diff --git a/app/views/pages/landing.html.erb b/app/views/pages/landing.html.erb
@@ -28,7 +28,7 @@
             receive mentorship from the best in the business.
           </p>
           <p>
-            <%= image_tag "marketing/many-faces.png" %>
+            <%= image_tag "marketing/many-faces.png", alt: "Many faces" %>
           </p>
           <p class="card__copy card__copy--centered">
           Listen to their stories on our
@@ -81,7 +81,7 @@
 
       <div class="conversation">
         <%= image_tag "marketing/conversation-upcase.png",
-          class: "conversation__avatar" %>
+          class: "conversation__avatar", alt:"Upcase logo" %>
 
         <div class="conversation__bubble">
           <p>
@@ -104,7 +104,7 @@
         </div>
 
           <%= image_tag "marketing/conversation-avi.png",
-            class: "conversation__avatar" %>
+            class: "conversation__avatar", alt: "conversation avatar" %>
       </div>
     </div>
 
@@ -128,7 +128,7 @@
             the full spectrum of skills needed to become an expert on a topic.
           </p>
 
-          <%= image_tag "marketing/follow-expert-trails.png" %>
+          <%= image_tag "marketing/follow-expert-trails.png", alt:"Trail image" %>
         </div>
       </div>
 
@@ -143,7 +143,7 @@
             mobile device.
           </p>
 
-          <%= image_tag "marketing/new-videos-weekly.png" %>
+          <%= image_tag "marketing/new-videos-weekly.png", alt: "Video preview"%>
         </div>
       </div>
     </div>
@@ -167,7 +167,7 @@
       </span>
 
       <div class="media-object testimonial__person">
-        <%= image_tag "marketing/testimonial-bryan.png" %>
+        <%= image_tag "marketing/testimonial-bryan.png", alt:"Code climate logo" %>
 
         <span>
           <span class="testimonial__person--name">Bryan Helmkamp</span></br>
@@ -238,7 +238,7 @@
           </p>
 
           <div class="media-object testimonial__person">
-            <%= image_tag "marketing/testimonial-matt.png" %>
+            <%= image_tag "marketing/testimonial-matt.png", alt: "Testimonial Person" %>
 
             <span>
               <span class="testimonial__person--name">Matt Sumner</span></br>
@@ -265,7 +265,7 @@
           </p>
 
           <div class="media-object testimonial__person">
-            <%= image_tag "marketing/testimonial-ralph.png" %>
+            <%= image_tag "marketing/testimonial-ralph.png", alt:"Testimonial Person" %>
 
             <span>
               <span class="testimonial__person--name">Ralph White</span></br>