Improves website accessibility

This commit is contained in:
Alberto Garcia Cabeza
2016-03-07 18:42:42 +01:00
parent 0e054b4e24
commit 84f044c131
14 changed files with 310 additions and 204 deletions

View File

@@ -378,39 +378,57 @@ header {
padding-bottom: 0;
}
a {
color: white;
display: inline-block;
line-height: rem-calc(46);
position: relative;
text-align: left;
width: 100%;
ul {
list-style-type: none;
margin: 0;
@media (min-width: $small-breakpoint) {
color: $text;
font-weight: bold;
margin-right: $line-height*1.5;
margin-right: 12px\9;
width: auto;
li {
display: inline-block;
margin-right: rem-calc(36);
&:hover {
color: $link;
}
}
a {
color: white;
display: inline-block;
line-height: $line-height*2;
position: relative;
text-align: left;
width: 100%;
&.active {
color: white;
@media (min-width: $small-breakpoint) {
color: $text;
display: block;
font-weight: bold;
margin-left: 18px\9;
margin-right: 18px\9;
width: auto;
@media (min-width: $small-breakpoint) {
border-bottom: 2px solid $brand;
color: $brand;
&:hover {
color: $link;
}
}
&.active {
color: white;
@media (min-width: $small-breakpoint) {
border-bottom: 2px solid $brand;
color: $brand;
}
}
}
}
}
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 +624,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 +652,7 @@ form.locale-form {
outline: none;
padding-left: rem-calc(3);
padding-right: $line-height;
width: auto;
}
}
}
@@ -1035,10 +1060,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 {
@@ -1047,7 +1077,11 @@ table {
}
&:nth-child(odd) {
background: #F0F2F6;
background: white;
}
&:nth-child(even) {
background: #fafcfb;
}
}
@@ -1055,7 +1089,7 @@ table {
margin: 0;
}
}
º
// 13. Social
// - - - - - - - - - - - - - - - - - - - - - - - - -

View File

@@ -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>

View File

@@ -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-notification" title="<%= t('layouts.header.new_notifications', count: current_user.notifications_count).html_safe %>">
<i class="icon-circle" aria-hidden="true"></i>
<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) %>

View File

@@ -1,82 +1,91 @@
<footer>
<div class="row-full">
<div class="row">
<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 %>
</h1>
<div class="small-12 large-4 column">
<h1 class="logo">
<%= link_to t("layouts.header.open_gov", open: "#{t('layouts.header.open')}").html_safe %>
</h1>
<p class="info">
<%= t("layouts.footer.description",
open_source: link_to(t("layouts.footer.open_source"), t("layouts.footer.open_source_url"), target: "blank"),
consul: link_to(t("layouts.footer.consul"), t("layouts.footer.consul_url"), target: "blank")).html_safe
%>
<%= t("layouts.footer.contact_us") %>
<%= link_to t("layouts.footer.faq"), page_path('faq') %>
</p>
</div>
<div class="footer-sections small-12 large-8 column">
<div class="small-12 medium-4 column">
<h2>
<%= link_to t("layouts.footer.participation_title"), root_path %>
</h2>
<p><%= t("layouts.footer.participation_text") %></p>
</div>
<div class="small-12 medium-4 column">
<h2>
<%= link_to t("layouts.footer.transparency_title"), t("layouts.footer.transparency_url") %>
</h2>
<p><%= t("layouts.footer.transparency_text") %></p>
</div>
<div class="small-12 medium-4 column">
<h2>
<%= link_to t("layouts.footer.open_data_title"), "/opendata" %>
</h2>
<p><%= t("layouts.footer.open_data_text") %></p>
</div>
</div>
<p class="info">
<%= t("layouts.footer.description",
open_source: link_to(t("layouts.footer.open_source"), t("layouts.footer.open_source_url"), target: "blank"),
consul: link_to(t("layouts.footer.consul"), t("layouts.footer.consul_url"), target: "blank")).html_safe
%>
<%= t("layouts.footer.contact_us") %>
<%= link_to t("layouts.footer.faq"), page_path('faq') %>
</p>
</div>
<div class="subfooter row">
<div class="small-12 medium-9 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;
<%= link_to t("layouts.footer.privacy"), page_path('privacy') %>&nbsp;|&nbsp;
<%= link_to t("layouts.footer.conditions"), page_path('conditions') %>&nbsp;|&nbsp;
<%= link_to t("layouts.footer.accessibility"), page_path('accessibility') %>
</p>
<div class="footer-sections small-12 large-8 column">
<div class="small-12 medium-4 column">
<h2>
<%= link_to t("layouts.footer.participation_title"), root_path %>
</h2>
<p><%= t("layouts.footer.participation_text") %></p>
</div>
<div class="small-12 medium-3 column social">
<% if setting['twitter_handle'] %>
<%= 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>
<div class="small-12 medium-4 column">
<h2>
<%= link_to t("layouts.footer.transparency_title"), t("layouts.footer.transparency_url") %>
</h2>
<p><%= t("layouts.footer.transparency_text") %></p>
</div>
<div class="small-12 medium-4 column">
<h2>
<%= link_to t("layouts.footer.open_data_title"), "/opendata" %>
</h2>
<p><%= t("layouts.footer.open_data_text") %></p>
</div>
</div>
</div>
<div class="subfooter row">
<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;
<%= link_to t("layouts.footer.privacy"), page_path('privacy') %>&nbsp;|&nbsp;
<%= link_to t("layouts.footer.conditions"), page_path('conditions') %>&nbsp;|&nbsp;
<%= link_to t("layouts.footer.accessibility"), page_path('accessibility') %>
</p>
</div>
<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" aria-hidden="true"></i>
<% end %>
</li>
<% end %>
<% end %>
<% if setting['facebook_handle'] %>
<%= 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>
<% 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" aria-hidden="true"></i>
<% end %>
</li>
<% end %>
<% end %>
<% if setting['blog_url'] %>
<%= 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>
<% 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" aria-hidden="true"></i>
<% end %>
</li>
<% end %>
<% end %>
<% if setting['youtube_handle'] %>
<%= 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>
<% 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" aria-hidden="true"></i>
<% end %>
</li>
<% end %>
<% end %>
</ul>
</div>
</div>
</div>

View File

@@ -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,9 +48,9 @@
<div class="row">
<div class="hide-for-small-only">
<%= render "shared/subnavigation" %>
</div>
<div class="small-12 medium-3 column">
<%= yield :header_addon %>
<div class="small-12 medium-3 column">
<%= yield :header_addon %>
</div>
</div>
</div>
</div>

View File

@@ -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">

View File

@@ -1,18 +1,70 @@
<% provide :title do %><%= t('pages.titles.accessibility') %><% end %>
<div class="page row-full">
<div class="row">
<div class="text 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>
<div class="row">
<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>
<p>Cuando los sitios web están diseñados pensando en la accesibilidad, todos los usuarios pueden acceder en condiciones de igualdad a los contenidos, por ejemplo:</p>
<p>Cuando los sitios web están diseñados pensando en la accesibilidad, todos los usuarios pueden acceder en condiciones de igualdad a los contenidos, por ejemplo:</p>
<ul>
<li>Proporcionando un texto alternativo a las imágenes, los usuarios invidentes o con problemas de visión pueden utilizar lectores especiales para acceder a la información. </li>
<li>Cuando los vídeos disponen de subtítulos, los usuarios con dificultades auditivas pueden entenderlos plenamente. </li>
<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>
<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>
<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>
<ul>
<li>Proporcionando un texto alternativo a las imágenes, los usuarios invidentes o con problemas de visión pueden utilizar lectores especiales para acceder a la información. </li>
<li>Cuando los vídeos disponen de subtítulos, los usuarios con dificultades auditivas pueden entenderlos plenamente. </li>
<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>
</div>
</div>

View File

@@ -1,73 +1,71 @@
<% 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">
<h1><%= t('pages.titles.more_information') %></h1>
<ul class="no-bullet">
<li>
<%= link_to page_path('how_it_works') do %>
<%= t('pages.more_information.titles.how_it_works') %>
<br>
<span><%= t('pages.more_information.description.how_it_works') %></span>
<% end %>
</li>
<li>
<%= link_to page_path('how_to_use') do %>
<%= t('pages.more_information.titles.how_to_use') %>
<br>
<span><%= t('pages.more_information.description.how_to_use') %></span>
<div class="row">
<div class="more-information small-12 medium-7 column">
<h1><%= t('pages.titles.more_information') %></h1>
<ul class="no-bullet">
<li>
<%= link_to page_path('how_it_works') do %>
<%= t('pages.more_information.titles.how_it_works') %>
<br>
<span><%= t('pages.more_information.description.how_it_works') %></span>
<% end %>
</li>
<li>
<%= link_to page_path('participation') do %>
<%= t('pages.more_information.titles.participation') %>
<br>
<span><%= t('pages.more_information.description.participation') %></span>
<% end %>
</li>
<li>
<%= link_to page_path('proposals_info') do %>
<%= t('pages.more_information.titles.proposals_info') %>
<br>
<span><%= t('pages.more_information.description.proposals_info') %></span>
<% end %>
</li>
<li>
<%= link_to page_path('spending_proposals_info') do %>
<%= t('pages.more_information.titles.spending_proposals_info') %>
<br>
<span><%= t('pages.more_information.description.spending_proposals_info') %></span>
<% end %>
</li>
<li>
<%= link_to page_path('participation_world') do %>
<%= t('pages.more_information.titles.participation_world') %>
<br>
<span><%= t('pages.more_information.description.participation_world') %></span>
<% end %>
</li>
<li>
<%= link_to page_path('participation_facts') do %>
<%= t('pages.more_information.titles.participation_facts') %>
<br>
<span><%= t('pages.more_information.description.participation_facts') %></span>
<% end %>
</li>
<li>
<%= link_to page_path('faq') do %>
<%= t('pages.more_information.titles.faq') %>
<br>
<span><%= t('pages.more_information.description.faq') %></span>
<% end %>
</li>
<li>
<%= link_to page_path('proposals_info', :anchor => "iii") do %>
<%= t('pages.more_information.titles.signature_sheet') %>
<br>
<span><%= t('pages.more_information.description.signature_sheet') %></span>
<% end %>
</li>
</ul>
</div>
</li>
<li>
<%= link_to page_path('how_to_use') do %>
<%= t('pages.more_information.titles.how_to_use') %>
<br>
<span><%= t('pages.more_information.description.how_to_use') %></span>
<% end %>
</li>
<li>
<%= link_to page_path('participation') do %>
<%= t('pages.more_information.titles.participation') %>
<br>
<span><%= t('pages.more_information.description.participation') %></span>
<% end %>
</li>
<li>
<%= link_to page_path('proposals_info') do %>
<%= t('pages.more_information.titles.proposals_info') %>
<br>
<span><%= t('pages.more_information.description.proposals_info') %></span>
<% end %>
</li>
<li>
<%= link_to page_path('spending_proposals_info') do %>
<%= t('pages.more_information.titles.spending_proposals_info') %>
<br>
<span><%= t('pages.more_information.description.spending_proposals_info') %></span>
<% end %>
</li>
<li>
<%= link_to page_path('participation_world') do %>
<%= t('pages.more_information.titles.participation_world') %>
<br>
<span><%= t('pages.more_information.description.participation_world') %></span>
<% end %>
</li>
<li>
<%= link_to page_path('participation_facts') do %>
<%= t('pages.more_information.titles.participation_facts') %>
<br>
<span><%= t('pages.more_information.description.participation_facts') %></span>
<% end %>
</li>
<li>
<%= link_to page_path('faq') do %>
<%= t('pages.more_information.titles.faq') %>
<br>
<span><%= t('pages.more_information.description.faq') %></span>
<% end %>
</li>
<li>
<%= link_to page_path('proposals_info', :anchor => "iii") do %>
<%= t('pages.more_information.titles.signature_sheet') %>
<br>
<span><%= t('pages.more_information.description.signature_sheet') %></span>
<% end %>
</li>
</ul>
</div>
</div>

View File

@@ -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' %>

View File

@@ -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' %>

View File

@@ -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) %>">

View File

@@ -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' %>

View File

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

View File

@@ -198,7 +198,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}