consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #972 from consul/accessibility

Browse Source 
Accessibility
This commit is contained in:
Juanjo Bazán
2016-03-08 14:23:48 +01:00
parent ae0e366098 1722645e6b
commit cfef0c42ed
16 changed files with 398 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
app/assets/stylesheets/layout.scss
View File

@@ -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-right: 12px\9;
margin-left: 18px\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;
}
}

2
app/views/debates/index.html.erb
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>

12
app/views/devise/menu/_login_items.html.erb
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) %>

25
app/views/layouts/_footer.html.erb
View File

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

7
app/views/layouts/_header.html.erb
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,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>

2
app/views/notifications/index.html.erb
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">

136
app/views/pages/accessibility.html.erb
View File

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

4
app/views/pages/more_information.html.erb
View File

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

2
app/views/proposals/index.html.erb
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' %>

2
app/views/proposals/summary.html.erb
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' %>

8
app/views/shared/_locale_switcher.html.erb
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) %>">

2
app/views/shared/_map.html.erb
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' %>

18
app/views/shared/_subnavigation.html.erb
View File

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

2
config/locales/es.yml
View File

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

6
spec/features/debates_spec.rb
View File

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

8
spec/features/proposals_spec.rb
View File

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