Merge pull request #972 from consul/accessibility

Accessibility

app/assets/stylesheets/layout.scss

@@ -378,19 +378,30 @@ header {
     padding-bottom: 0;
   }
 
+  ul {
+    list-style-type: none;
+    margin: 0;
+
+    li {
+      @media (min-width: $small-breakpoint) {
+        display: inline-block;
+        margin-right: rem-calc(36);
+      }
+
       a {
         color: white;
         display: inline-block;
-    line-height: rem-calc(46);
+        line-height: $line-height*2;
         position: relative;
         text-align: left;
         width: 100%;
 
         @media (min-width: $small-breakpoint) {
           color: $text;
+          display: block;
           font-weight: bold;
-      margin-right: $line-height*1.5;
+          margin-left: 18px\9;
-      margin-right: 12px\9;
+          margin-right: 18px\9;
           width: auto;
 
           &:hover {
@@ -407,10 +418,19 @@ header {
           }
         }
       }
+    }
+  }
+
+  span {
+    color: $border;
+  }
 
   .input-group {
-    margin-bottom: 0;
     padding-top: $line-height/4;
+
+    @media (min-width: $small-breakpoint) {
+      margin-bottom: 0;
+    }
   }
 
   .input-group-field {
@@ -606,6 +626,12 @@ form.locale-form {
   display: inline-block;
   position: relative;
 
+  label {
+    color: white;
+    font-size: $small-font-size;
+    font-weight: normal;
+  }
+
   select {
     background-image: image-url("language_select.png");
     background-origin: border-box;
@@ -628,6 +654,7 @@ form.locale-form {
       outline: none;
       padding-left: rem-calc(3);
       padding-right: $line-height;
+      width: auto;
     }
   }
 }
@@ -1054,10 +1081,15 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 table {
+  border: $border;
   border-collapse: collapse;
   border-spacing: 0;
   width: 100%;
 
+  th {
+    background: #f8f9fb;
+  }
+
   tr {
 
     td {
@@ -1066,7 +1098,11 @@ table {
     }
 
     &:nth-child(odd) {
-      background: #F0F2F6;
+      background: white;
+    }
+
+    &:nth-child(even) {
+      background: #fafcfb;
     }
   }
 

app/views/debates/index.html.erb

@@ -43,7 +43,7 @@
 
     <div class="small-12 medium-3 column">
 
-      <aside class="margin-bottom" role="complementary">
+      <aside class="margin-bottom">
         <%= link_to t("debates.index.start_debate"), new_debate_path, class: 'button expanded' %>
         <%= render "shared/tag_cloud", taggable: 'debate' %>
       </aside>

app/views/devise/menu/_login_items.html.erb

@@ -1,20 +1,20 @@
 <% if user_signed_in? %>
   <li>
-    <%= link_to notifications_path, class: "notifications" do %>
+    <%= link_to notifications_path, class: "notifications", accesskey: "n" do %>
       <% if current_user.notifications_count > 0 %>
-        <i class="icon-circle"></i>
+        <i class="icon-circle" aria-hidden="true"></i>
-        <i class="icon-notification" title="<%= t('layouts.header.new_notifications', count: current_user.notifications_count).html_safe %>">
+        <i class="icon-notification" aria-hidden="true" title="<%= t('layouts.header.new_notifications', count: current_user.notifications_count).html_safe %>">
         </i>
       <% else %>
-        <i class="icon-no-notification" title="<%= t('layouts.header.no_notifications') %>"></i>
+        <i class="icon-no-notification" aria-hidden="true" title="<%= t('layouts.header.no_notifications') %>"></i>
       <% end %>
     <% end %>
   </li>
   <li>
-    <%= link_to(t("layouts.header.my_activity_link"), user_path(current_user)) %>
+    <%= link_to(t("layouts.header.my_activity_link"), user_path(current_user), accesskey: "a") %>
   </li>
   <li>
-    <%= link_to(t("layouts.header.my_account_link"), account_path) %>
+    <%= link_to(t("layouts.header.my_account_link"), account_path, accesskey: "m") %>
   </li>
   <li>
     <%= link_to(t("devise_views.menu.login_items.logout"), destroy_user_session_path, method: :delete) %>

app/views/layouts/_footer.html.erb

@@ -1,7 +1,5 @@
 <footer>
-	<div class="row-full">
 	<div class="row">
-
     <div class="small-12 large-4 column">
       <h1 class="logo">
         <%= link_to t("layouts.header.open_gov", open: "#{t('layouts.header.open')}").html_safe %>
@@ -42,7 +40,7 @@
   </div>
 
   <div class="subfooter row">
-      <div class="small-12 medium-9 column">
+    <div class="small-12 medium-8 column">
       <p>
         <%= t("layouts.footer.copyright", year: Time.now.year) %>&nbsp;|&nbsp;
         <%= link_to t("layouts.footer.more_info"), page_path('more_information') %>&nbsp;|&nbsp;
@@ -52,31 +50,42 @@
       </p>
     </div>
 
-      <div class="small-12 medium-3 column social">
+    <div class="small-12 medium-4 column social">
+      <div class="text-right">
+        <ul>
           <% if setting['twitter_handle'] %>
+            <li class="inline-block">
               <%= link_to "https://twitter.com/#{setting['twitter_handle']}", target: "_blank", title: t("social.twitter") do %>
                 <span class="sr-only"><%= t("social.twitter") %></span>
-            <i class="icon-twitter"></i>
+                <i class="icon-twitter" aria-hidden="true"></i>
               <% end %>
+            </li>
           <% end %>
           <% if setting['facebook_handle'] %>
+            <li class="inline-block">
               <%= link_to "https://www.facebook.com/#{setting['facebook_handle']}/", target: "_blank", title: t("social.facebook") do %>
                 <span class="sr-only"><%= t("social.facebook") %></span>
-            <i class="icon-facebook"></i>
+                <i class="icon-facebook" aria-hidden="true"></i>
               <% end %>
+            </li>
           <% end %>
           <%  if setting['blog_url'] %>
+            <li class="inline-block">
               <%= link_to setting['blog_url'], target: "_blank", title: t("social.blog") do %>
                 <span class="sr-only"><%= t("social.blog") %></span>
-            <i class="icon-blog"></i>
+                <i class="icon-blog" aria-hidden="true"></i>
               <% end %>
+            </li>
           <% end %>
           <% if setting['youtube_handle'] %>
+            <li class="inline-block">
               <%= link_to "https://www.youtube.com/#{setting['youtube_handle']}", target: "_blank", title: t("social.youtube") do %>
                 <span class="sr-only"><%= t("social.youtube") %></span>
-            <i class="icon-youtube"></i>
+                <i class="icon-youtube" aria-hidden="true"></i>
               <% end %>
+            </li>
           <% end %>
+        </ul>
       </div>
     </div>
   </div>

app/views/layouts/_header.html.erb

@@ -14,7 +14,7 @@
 
       <div id="responsive-menu">
         <div class="top-bar-title">
-          <%= link_to root_path, class: "hide-for-small-only" do %>
+          <%= link_to root_path, class: "hide-for-small-only", accesskey: "/" do %>
             <%= image_tag('header_logo_madrid.png', class: 'hide-for-small-only float-left', size: '80x80', alt: t("layouts.header.logo")) %>
             <% if opendata_page? %>
               <%= t("layouts.header.open_gov", open: "#{t('layouts.header.open')}") %> <span>|</span>
@@ -34,6 +34,9 @@
           <div class="show-for-small-only">
             <div class="subnavigation row">
               <%= render "shared/subnavigation" %>
+              <div class="small-12 medium-3 column">
+                <%= yield :header_addon %>
+              </div>
             </div>
           </div>
         </div>
@@ -45,11 +48,11 @@
     <div class="row">
       <div class="hide-for-small-only">
         <%= render "shared/subnavigation" %>
-      </div>
         <div class="small-12 medium-3 column">
           <%= yield :header_addon %>
         </div>
       </div>
     </div>
+  </div>
 
 </header>

app/views/notifications/index.html.erb

@@ -1,7 +1,7 @@
 <div class="row">
   <div class="small-12 column">
 
-    <h1 class="float-left margin-top"><%= t("notifications.index.title") %></h1>
+    <h1 class="float-left"><%= t("notifications.index.title") %></h1>
 
     <% if @notifications.empty? %>
       <div data-alert class="callout primary margin-top clear">

app/views/pages/accessibility.html.erb

@@ -1,7 +1,6 @@
 <% provide :title do %><%= t('pages.titles.accessibility') %><% end %>
-<div class="page row-full">
 <div class="row">
-    <div class="text small-12 column">
+<div class="small-12 column">
   <h1>Accesibilidad</h1>
   <p>La accesibilidad web se refiere a la posibilidad de acceso a la web y a sus contenidos por todas las personas, independientemente de las discapacidades (físicas, intelectuales o técnicas) que puedan presentar o de las que se deriven del contexto de uso (tecnológicas o ambientales).</p>
 
@@ -13,6 +12,137 @@
     <li>Si los contenidos están escritos en un lenguaje sencillo e ilustrados, los usuarios con problemas de aprendizaje están en mejores condiciones de entenderlos.</li>
     <li>Si el usuario tiene problemas de movilidad y le cuesta usar el ratón, las alternativas con el teclado le ayudan en la navegación.</li>
   </ul>
-    </div>
+
+  <h2>"Atajos" de teclado</h2>
+
+  <p>Para poder navegar por este sitio web de forma accesible, se han programado un grupo de teclas de acceso rápido que recogen las principales secciones de interés general en los que está organizado el sitio.</p>
+
+  <div class="small-12 medium-6">
+    <table>
+      <thead>
+        <tr>
+          <th class="text-center">Tecla</th>
+          <th>Página</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="text-center">/</td>
+          <td>Inicio</td>
+        </tr>
+        <tr>
+          <td class="text-center">D</td>
+          <td>Debates</td>
+        </tr>
+        <tr>
+          <td class="text-center">P</td>
+          <td>Propuestas</td>
+        </tr>
+        <tr>
+          <td class="text-center">S</td>
+          <td>Presupuestos ciudadanos</td>
+        </tr>
+        <tr>
+          <td class="text-center">I</td>
+          <td>Más información</td>
+        </tr>
+        <tr>
+          <td class="text-center">N</td>
+          <td>Notificaciones</td>
+        </tr>
+        <tr>
+          <td class="text-center">A</td>
+          <td>Mi actividad</td>
+        </tr>
+        <tr>
+          <td class="text-center">M</td>
+          <td>Mi cuenta</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <p>Dependiendo del sistema operativo y del navegador que se utilice, la combinación de teclas será la siguiente:</p>
+
+  <div class="small-12 medium-6">
+    <table>
+      <thead>
+        <tr>
+          <th>Navegador</th>
+          <th>Combinación de teclas</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Explorer</td>
+          <td>ALT + atajo y luego ENTER</td>
+        </tr>
+        <tr>
+          <td>Firefox</td>
+          <td>ALT + MAYÚSCULAS + atajo</td>
+        </tr>
+        <tr>
+          <td>Chrome</td>
+          <td>ALT + atajo (si es un MAC, CTRL + ALT + atajo)</td>
+        </tr>
+        <tr>
+          <td>Safari</td>
+          <td>ALT + atajo (si es un MAC, CMD + atajo)</td>
+        </tr>
+        <tr>
+          <td>Opera</td>
+          <td>MAYÚSCULAS + ESC + atajo</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <h2>Tamaño del texto</h2>
+  <p>El diseño accesible de este sitio web permite que el usuario pueda elegir el tamaño del texto que le convenga. Esta acción puede llevarse a cabo de diferentes maneras según el navegador que se utilice.</p>
+
+  <div class="small-12 medium-6">
+    <table>
+      <thead>
+        <tr>
+          <th>Navegador</th>
+          <th>Acción a realizar </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Explorer</td>
+          <td>Ver > Tamaño del texto</td>
+        </tr>
+        <tr>
+          <td>Firefox</td>
+          <td>Ver > Tamaño</td>
+        </tr>
+        <tr>
+          <td>Chrome</td>
+          <td>Ajustes (icono) > Opciones > Avanzada > Contenido web > Tamaño fuente</td>
+        </tr>
+        <tr>
+          <td>Safari</td>
+          <td>Visualización > ampliar/reducir</td>
+        </tr>
+        <tr>
+          <td>Opera</td>
+          <td>Ver > escala</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <p>Otra forma de modificar el tamaño de texto es utilizar los atajos de teclado definidos en los navegadores, en particular la combinación de teclas:</p>
+
+  <ul>
+    <li><code>CTRL y + (CMD y + en MAC)</code> para aumentar el tamaño del texto</li>
+    <li><code> CTRL y - (CMD y - en MAC)</code> para reducir el tamaño del texto</li>
+  </ul>
+
+  <h2>Compatibilidad con estándares y diseño visual</h2>
+
+  <p>Todas las páginas de este sitio web cumplen con&nbsp; las <strong>Pautas de Accesibilidad</strong> o Principios Generales de Diseño Accesible establecidas por el Grupo de Trabajo&nbsp;<abbr title="Web Accessibility Initiative" lang="en">WAI</abbr> perteneciente al W3C.</p>
+
   </div>
 </div>

app/views/pages/more_information.html.erb

@@ -1,7 +1,6 @@
 <% provide :title do %><%= t('pages.titles.more_information') %><% end %>
-<div class="page row-full">
 <div class="row">
-    <div class="more-information margin-top small-12 medium-7 column">
+  <div class="more-information small-12 medium-7 column">
     <h1><%= t('pages.titles.more_information') %></h1>
     <ul class="no-bullet">
       <li>
@@ -70,4 +69,3 @@
     </ul>
   </div>
 </div>
-</div>

app/views/proposals/index.html.erb

@@ -51,7 +51,7 @@
     </div>
 
     <div class="small-12 medium-3 column">
-      <aside class="margin-bottom" role="complementary">
+      <aside class="margin-bottom">
         <%= link_to t("proposals.index.start_proposal"), new_proposal_path, class: 'button expanded' %>
         <%= render "shared/tag_cloud", taggable: 'proposal' %>
         <%= render 'categories' %>

app/views/proposals/summary.html.erb

@@ -46,7 +46,7 @@
     </div>
 
     <div class="small-12 medium-3 column">
-      <aside class="sidebar" role="complementary">
+      <aside class="sidebar">
         <%= link_to t("proposals.index.start_proposal"), new_proposal_path, class: 'button radius expand' %>
         <%= render "shared/tag_cloud", taggable: 'proposal' %>
         <%= render 'categories' %>

app/views/shared/_locale_switcher.html.erb

@@ -1,10 +1,10 @@
 <% if I18n.available_locales.size > 1 %>
   <div class="locale" id="js-locale" data-current-local="<%= I18n.locale %>">
-    <span class="inline-block">
-      <%= t("layouts.header.locale") %>
-    </span>
     <form class="locale-form">
-      <select class="js-location-changer locale-switcher" name="locale-switcher">
+      <label class="inline-block" for="locale-switcher">
+        <%= t("layouts.header.locale") %>
+      </label>
+      <select class="js-location-changer locale-switcher inline-block" name="locale-switcher" id="locale-switcher">
         <% I18n.available_locales.map do |loc| %>
           <option <%= "selected" if loc == I18n.locale %>
                   value="<%= current_path_with_query_params(locale: loc) %>">

app/views/shared/_map.html.erb

@@ -43,7 +43,7 @@
   </div>
 
   <div class="small-12 medium-3 column">
-    <aside class="sidebar" role="complementary">
+    <aside class="sidebar">
       <%= link_to t("map.start_proposal"),
                   new_proposal_path, class: 'button radius expand' %>
       <%= render "shared/tag_cloud", taggable: 'proposal' %>

app/views/shared/_subnavigation.html.erb

@@ -1,10 +1,20 @@
 <div class="small-12 medium-9 column">
+  <ul>
     <% if feature?(:debates) %>
-    <%= link_to t("layouts.header.debates"), debates_path, class: ("active" if controller_name == "debates") %>
+      <li>
+        <%= link_to t("layouts.header.debates"), debates_path, class: ("active" if controller_name == "debates"), accesskey: "d" %>
+      </li>
     <% end %>
-  <%= link_to t("layouts.header.proposals"), proposals_path, class: ("active" if  controller_name == "proposals") %>
+    <li>
+      <%= link_to t("layouts.header.proposals"), proposals_path, class: ("active" if  controller_name == "proposals"), accesskey: "p" %>
+    </li>
     <% if feature?(:spending_proposals) %>
-    <%= link_to t("layouts.header.spending_proposals"), spending_proposals_path, class: ("active" if controller_name == "spending_proposals") %>
+      <li>
+        <%= link_to t("layouts.header.spending_proposals"), spending_proposals_path, class: ("active" if controller_name == "spending_proposals"), accesskey: "s" %>
+      </li>
     <% end %>
-  <%= link_to t("layouts.header.more_information"), page_path('more_information'), class: ("active" if current_page?("/more_information"))  %>
+    <li>
+      <%= link_to t("layouts.header.more_information"), page_path('more_information'), class: ("active" if current_page?("/more_information")), accesskey: "i"  %>
+    </li>
+  </ul>
 </div>

config/locales/es.yml

@@ -199,7 +199,7 @@ es:
         other: Tienes %{count} notificaciones nuevas
       no_notifications: No tienes notificaciones nuevas
       open: abierto
-      open_city_slogan_html: Existen ciudades gobernadas directamente por sus habitantes, que <b>debaten</b> sobre temas que les preocupan, <b>proponen</b> ideas para mejorar sus vidas y <b>deciden</b> entre todas y todos las que se llevan a cabo. Madrid ya es una de ellas.
+      open_city_slogan_html: Existen ciudades gobernadas directamente por sus habitantes, que <strong>debaten</strong> sobre temas que les preocupan, <strong>proponen</strong> ideas para mejorar sus vidas y <strong>deciden</strong> entre todas y todos las que se llevan a cabo. Madrid ya es una de ellas.
       open_city_title: La ciudad que quieres será la ciudad que quieras.
       open_data: Datos abiertos
       open_gov: Gobierno %{open}

spec/features/debates_spec.rb

@@ -465,7 +465,7 @@ feature 'Debates' do
 
         visit debates_path
 
-        within "#search_form" do
+        within(".expanded #search_form") do
           fill_in "search", with: "Schwifty"
           click_button "Search"
         end
@@ -482,7 +482,7 @@ feature 'Debates' do
       scenario "Maintain search criteria" do
         visit debates_path
 
-        within "#search_form" do
+        within(".expanded #search_form") do
           fill_in "search", with: "Schwifty"
           click_button "Search"
         end
@@ -843,7 +843,7 @@ feature 'Debates' do
       debate = create(:debate, title: "Abcdefghi")
 
       visit debates_path
-      within "#search_form" do
+      within(".expanded #search_form") do
         fill_in "search", with: debate.title
         click_button "Search"
       end

spec/features/proposals_spec.rb

@@ -583,7 +583,7 @@ feature 'Proposals' do
 
         visit proposals_path
 
-        within "#search_form" do
+        within(".expanded #search_form") do
           fill_in "search", with: "Schwifty"
           click_button "Search"
         end
@@ -603,7 +603,7 @@ feature 'Proposals' do
 
         visit proposals_path
 
-        within "#search_form" do
+        within(".expanded #search_form") do
           fill_in "search", with: proposal1.code
           click_button "Search"
         end
@@ -619,7 +619,7 @@ feature 'Proposals' do
       scenario "Maintain search criteria" do
         visit proposals_path
 
-        within "#search_form" do
+        within(".expanded #search_form") do
           fill_in "search", with: "Schwifty"
           click_button "Search"
         end
@@ -986,7 +986,7 @@ feature 'Proposals' do
       proposal = create(:proposal, title: "Abcdefghi")
 
       visit proposals_path
-      within "#search_form" do
+      within(".expanded #search_form") do
         fill_in "search", with: proposal.title
         click_button "Search"
       end