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/phillipines.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+require 'test_helper'
+require_relative '../../../app'
+
+describe 'Phillipines' do
+  subject { Nokogiri::HTML(last_response.body) }
+  let(:dina)     { subject.css('#mem-c5c42ac6-4942-4c32-baf7-3dae194f83bf') }
+  let(:dimaporo) { subject.css('#mem-236420bc-a15a-4727-a98a-75f870c5641f') }
+  let(:tiangco)  { subject.css('#mem-8fd6197f-f9fa-47a8-974f-50c54f08bbdd') }
+
+  before do
+    stub_popolo('ba933fa', 'Philippines/House')
+    get '/philippines/house/term-table/16.html'
+  end
+
+  describe 'alt attribute on avatars' do
+    it 'has the person name in a normal image' do
+      img = dina.css('img.person-card__image')
+      img.attr('alt').text.must_equal 'Member headshot for Abad, Henedina R.'
+    end
+
+    it 'has the person name in a placeholder image' do
+      img = dimaporo.css('img.person-card__image')
+      img.attr('alt').text.must_equal 'Placeholder image for Dimaporo, Abdullah D.'
+    end
+
+    it 'doesnt break for names with double quotes' do
+      img = tiangco.css('img.person-card__image')
+      img.attr('alt').text.must_equal 'Member headshot for Tiangco, Tobias "Toby" M.'
+    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

@@ -140,10 +140,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 <%= h person.name %>">
+                            <noscript><img src="<%= person.proxy_image %>" class="person-card__image"
+                            alt="Member headshot for <%= h 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 <%= h person.name %>">
                           <% end %>
 
                             <h3 class="person-card__name"><%= person.name %></h3>