Use tidy-html5 to validate the term-table page

Errors corrected:
- An "img" element must have an "alt" attribute, except under certain
conditions. For details, consult guidance on providing text alternatives
for images. (All occurrences)

t/web/term_table/bahamas.rb

@@ -3,7 +3,10 @@
 require_relative '../../../app'
 
 describe 'Bahamas' do
-  subject { Nokogiri::HTML(last_response.body) }
+  subject      { Nokogiri::HTML(last_response.body) }
+  let(:hubert) { subject.css('#mem-4a7bfd46-3b03-46ec-957f-3ef526b04bbe') }
+  let(:damian) { subject.css('#mem-58709524-7f66-44fd-8315-9712c4655768') }
+  let(:philip) { subject.css('#mem-dcd1a356-a7e6-409b-8028-27fea2691105') }
 
   before do
     stub_popolo('4da60b8', 'Bahamas/House_of_Assembly')
@@ -21,4 +24,32 @@
       sources.css('a/@href').last.text.must_include '/Members+of+Parliament/'
     end
   end
+
+  describe 'alt attribute on avatars' do
+    it 'has the person name in a normal image' do
+      img = hubert.css('img.person-card__image')[0]
+      img.attr('alt').must_equal 'Member headshot for Hubert Chipman'
+    end
+
+    it 'has the person name in a normal image when JS is disabled' do
+      img = hubert.css('img.person-card__image')[1]
+      img.attr('alt').must_equal 'Member headshot for Hubert Chipman'
+    end
+
+    it 'has the person name in a placeholder image' do
+      img = damian.css('img.person-card__image')
+      img.attr('alt').text.must_equal 'Placeholder image for Damian Gomez'
+    end
+
+    it 'doesnt break for names with double quotes' do
+      img = philip.css('img.person-card__image')[0]
+      img.attr('alt').must_equal 'Member headshot for Philip "Brave" Davis'
+    end
+  end
+
+  describe 'HTML validation' do
+    it 'has no errors in the term-table page' do
+      last_response_must_be_valid
+    end
+  end
 end

views/term_table.erb

@@ -154,10 +154,13 @@
                                 <img src="/images/person-placeholder-108px.png"
                                      data-src="<%= person.proxy_image %>"
                                      style="display: none"
-                                     class="person-card__image">
-                                <noscript><img src="<%= person.proxy_image %>" class="person-card__image"></noscript>
+                                     class="person-card__image"
+                                     alt="Member headshot for <%= escape_html(person.name) %>">
+                                <noscript><img src="<%= person.proxy_image %>" class="person-card__image"
+                                alt="Member headshot for <%= escape_html(person.name) %>"></noscript>
                               <% else %>
-                                <img src="/images/person-placeholder-108px.png" class="person-card__image">
+                                <img src="/images/person-placeholder-108px.png" class="person-card__image"
+                                alt="Placeholder image for <%= escape_html(person.name) %>">
                               <% end %>
 
                                 <h3 class="person-card__name"><%= person.name %></h3>
@@ -216,4 +219,4 @@
           <p><b>Anything wrong?</b> If you've spotted an error, or the data is incomplete,
             here's <a href="http://docs.everypolitician.org/contribute.html">how to get that fixed</a>.</p>
         </div>
-      </div>
+      </div>