<% provide :title do %><%= t("pages.titles.accessibility") %><% end %>
<% content_for :canonical do %>
  <%= render "shared/canonical", href: page_url("accessibility") %>
<% end %>

<div class="row">
  <div class="small-12 column">

    <h1><%= t("pages.accessibility.title") %></h1>
    <%= simple_format(t("pages.accessibility.description")) %>

    <ul>
      <% t("pages.accessibility.examples").each do |example| %>
        <li><%= example %></li>
      <% end %>
    </ul>

    <h2><%= t("pages.accessibility.keyboard_shortcuts.title") %></h2>

    <p><%= t("pages.accessibility.keyboard_shortcuts.navigation_table.description") %></p>

    <div class="small-12 medium-6">
      <table>
        <caption class="show-for-sr">
          <%= t("pages.accessibility.keyboard_shortcuts.navigation_table.caption") %>
        </caption>
        <thead>
          <tr>
            <th scope="col" class="text-center">
              <%= t("pages.accessibility.keyboard_shortcuts.navigation_table.key_header") %>
            </th>
            <th scope="col">
              <%= t("pages.accessibility.keyboard_shortcuts.navigation_table.page_header") %>
            </th>
          </tr>
        </thead>
        <tbody>
          <% t("pages.accessibility.keyboard_shortcuts.navigation_table.rows").each do |row| %>
            <tr>
              <td class="text-center"><%= row[:key_column] %></td>
              <td><%= row[:page_column] %></td>
            </tr>
          <% end %>
        </tbody>
      </table>
    </div>

    <p><%= t("pages.accessibility.keyboard_shortcuts.browser_table.description") %></p>

    <div class="small-12 medium-6">
      <table>
        <caption class="show-for-sr">
          <%= t("pages.accessibility.keyboard_shortcuts.browser_table.caption") %>
        </caption>
        <thead>
          <tr>
            <th scope="col">
              <%= t("pages.accessibility.keyboard_shortcuts.browser_table.browser_header") %>
            </th>
            <th scope="col">
              <%= t("pages.accessibility.keyboard_shortcuts.browser_table.key_header") %>
            </th>
          </tr>
        </thead>
        <tbody>
          <% t("pages.accessibility.keyboard_shortcuts.browser_table.rows").each do |row| %>
            <tr>
              <td><%= row[:browser_column] %></td>
              <td><%= row[:key_column] %></td>
            </tr>
          <% end %>
        </tbody>
      </table>
    </div>

    <h2><%= t("pages.accessibility.textsize.title") %></h2>
    <p><%= t("pages.accessibility.textsize.browser_settings_table.description") %></p>

    <div class="small-12 medium-6">
      <table>
        <thead>
          <tr>
            <th scope="col">
              <%= t("pages.accessibility.textsize.browser_settings_table.browser_header") %>
            </th>
            <th scope="col">
              <%= t("pages.accessibility.textsize.browser_settings_table.action_header") %>
            </th>
          </tr>
        </thead>
        <tbody>
          <% t("pages.accessibility.textsize.browser_settings_table.rows").each do |row| %>
            <tr>
              <td><%= row[:browser_column] %></td>
              <td><%= row[:action_column] %></td>
            </tr>
          <% end %>
        </tbody>
      </table>
    </div>

    <p><%= t("pages.accessibility.textsize.browser_shortcuts_table.description") %></p>

    <ul>
      <% t("pages.accessibility.textsize.browser_shortcuts_table.rows").each do |row| %>
        <li><code><%= row[:shortcut_column] %></code> <%= row[:description_column] %></li>
      <% end %>
    </ul>

    <h2><%= t("pages.accessibility.compatibility.title") %></h2>

    <p><%= t("pages.accessibility.compatibility.description_html") %></p>
  </div>
</div>
