Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make portal screen reader friendly #41

Merged
merged 7 commits into from
Jul 12, 2017
+21 −21
Merged

Make portal screen reader friendly #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
df41745
Make PR
imakshayverma Jul 10, 2017
9a4c67a
Add ARIA-attributes, alt,title attribute to footer links
imakshayverma Jul 10, 2017
2674a08
Add alt attribute to Logo, Add misc ARIA attributes
imakshayverma Jul 10, 2017
a0e7063
Add alt, label and title attributes to elements
imakshayverma Jul 10, 2017
368f060
Add ARIA-attribute to search bar
imakshayverma Jul 10, 2017
2779888
Add alt text to Tiers of Government Images
imakshayverma Jul 10, 2017
1b827cf
Add ARIA-labels to the input boxes. Comment remove skip to content text
imakshayverma Jul 11, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions ckanext/openbudgetsin_theme/templates/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
{% block footer_links_ckan %}
{% set api_url = 'http://docs.ckan.org/en/{0}/api/'.format(g.ckan_doc_version) %}
<li><a href="{{ api_url }}">{{ _('CKAN API') }}</a></li>
<li><a href="http://www.opendefinition.org/okd/"><img src="{{ h.url_for_static('/base/images/od_80x15_blue.png') }}"></a></li>
<li><a href="http://www.opendefinition.org/okd/"><img src="{{ h.url_for_static('/base/images/od_80x15_blue.png') }}" alt="Open Data License Logo"></a></li>
{% endblock %}
</ul>
{% endblock %}
Expand All @@ -25,9 +25,9 @@
<div class="row-fluid">
<ul class="footer-social">

<li class="nav-item"><a href="https://twitter.com/OpenBudgetsIn" target="_blank"><i class="icon-twitter-sign"></i></a></li>
<li class="nav-item"><a href="https://www.facebook.com/OpenBudgetsIndia" target="_blank"><i class="icon-facebook-sign"></i></a></li>
<li class="nav-item"><a href="https://github.com/cbgaindia" target="_blank"><i class="icon-github-sign"></i></a></li>
<li class="nav-item"><a href="https://twitter.com/OpenBudgetsIn" aria-hidden="true" alt="Open Budgets India's Official Twitter Handle" role="link" title="Official Twitter Handle" aria-label="Open Budgets India's Official Twitter Handle" target="_blank"><i class="icon-twitter-sign"></i></a></li>
<li class="nav-item"><a href="https://www.facebook.com/OpenBudgetsIndia" aria-hidden="true" role="link" alt="Open Budgets India's Official Facebook Page" title="Official Facebook Page" aria-label="Open Budgets India's Official Facebook Page" target="_blank"><i class="icon-facebook-sign"></i></a></li>
<li class="nav-item"><a href="https://github.com/cbgaindia" alt="Open Budgets India's Official Github handle" aria-label="Open Budgets India's Official Github handle" title="Official Github Handle" aria-hidden="true" role="link" target="_blank"><i class="icon-github-sign"></i></a></li>

</ul>
</div>
Expand Down
6 changes: 3 additions & 3 deletions ckanext/openbudgetsin_theme/templates/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
{% endif %}
{% endblock %}#}
<div class="container">
<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button">
<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button" aria-hidden="true" aria-label="Expand navigation bar" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
Expand All @@ -17,7 +17,7 @@

{% block header_logo %}
{% if g.site_logo %}
<a class="logo" href="{{ h.url('home') }}"><img src="{{ h.url_for_static_or_external(g.site_logo) }}" alt="{{ g.site_title }}" title="{{ g.site_title }}" /></a>
<a class="logo" href="{{ h.url('home') }}"><img src="{{ h.url_for_static_or_external(g.site_logo) }}" alt="Open Budgets India header logo" title="{{ g.site_title }}" /></a>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why the text here in alt ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The purpose of alt and title are different. Thus they aren't suppose to have same content. Also as alt is used highly in screen readers, SEO and for other purposes. Wanted to have a better description for the logo than just "OpenBudgetsIndia" which is the title.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

okay 👍

{% else %}
<h1>
<a href="{{ h.url('home') }}">{{ g.site_title }}</a>
Expand All @@ -31,7 +31,7 @@ <h1>
<div class="nav-collapse collapse">

{% block header_site_navigation %}
<nav class="section navigation">
<nav role="navigation" class="section navigation">
<ul class="nav nav-pills">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">The Portal<b class="caret"></b></a>
Expand Down
18 changes: 9 additions & 9 deletions ckanext/openbudgetsin_theme/templates/home/layout3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<div class="top-container">
<div class="container">
<div class="row-fluid">
<img class="homepage-logo" src="Logo_highres_text_original-26.png">
<img class="homepage-logo" alt="OpenBudgetsIndia's Logo" src="Logo_highres_text_original-26.png">
</div>
<div class="row-fluid">
{% block search %} {% snippet 'home/snippets/search.html' %} {% endblock %}
Expand All @@ -32,31 +32,31 @@ <h2 class="banner-head">Key Features</h2>
<div class="row-fluid feature-container">
<div class="span3">
<a href="/dataset?res_format=PDF" target="_blank">
<img class="banner-image" src="Budget_doc_icon-17.png">
<img class="banner-image" alt="Explore Budget Documents (PDFs)" src="Budget_doc_icon-17.png">
<div class="row-fluid icons_support_text">Budget Documents (PDFs)

</div>
</a>
</div>
<div class="span3">
<a href="/dataset?res_format=CSV">
<img class="banner-image" src="Key_features_icon-22.png">
<img class="banner-image" alt="Explore machine readable Datasets" src="Key_features_icon-22.png">
<div class="row-fluid icons_support_text">
Machine Readable Datasets
</div>
</a>
</div>
<div class="span3">
<a href="/dataset?tags=Visualization">
<img class="banner-image" src="Key_features_icon-23.png">
<img class="banner-image" alt="Explore Data Visualizations" src="Key_features_icon-23.png">
<div class="row-fluid icons_support_text">
Data Visualizations
</div>
</a>
</div>
<div class="span3">
<a href="/budget-basics/" target="_blank">
<img class="banner-image" src="Key_features_icon-21.png">
<img class="banner-image" alt="Explore our Budget Basics guide" src="Key_features_icon-21.png">
<div class="row-fluid icons_support_text">
Budget Basics
</div>
Expand Down Expand Up @@ -84,31 +84,31 @@ <h2>Tiers of Government</h2>
<li class="span3">
<a href="/organization/about/combined-budget">
<div class="thumbnail">
<img src="CB-09.png" alt="">
<img src="CB-09.png" alt="Combined Budget (Union & States) Datasets">
<h3>Combined Budget <br>(Union & States)</h3>
</div>
</a>
</li>
<li class="span3">
<a href="/organization/about/union-budget">
<div class="thumbnail">
<img src="UB-09.png" alt="">
<img src="UB-09.png" alt="Union Budget Datasets">
<h3>Union Budget</h3>
</div>
</a>
</li>
<li class="span3">
<a href="organization/about/states-budget">
<div class="thumbnail">
<img src="SB-09.png" alt="">
<img src="SB-09.png" alt="State Budgets Datasets">
<h3>State Budgets</h3>
</div>
</a>
</li>
<li class="span3">
<a href="organization/about/municipal-budget">
<div class="thumbnail">
<img src="MB-09.png" alt="">
<img src="MB-09.png" alt="Municipal Corporation Budgets Datasets">
<h3>Municipal Corporation Budgets</h3>
</div>
</a>
Expand Down
2 changes: 1 addition & 1 deletion ckanext/openbudgetsin_theme/templates/home/snippets/search.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ <h2 class="home-tagline"> Making India's Budgets open, usable and easy to compre
<form class="module-content search-form" method="get" action="{% url_for controller='package', action='search' %}">
<!--<h3 class="heading">{{ _("Search data") }}</h3>-->
<div class="search-input control-group search-giant">
<input type="text" class="search" name="q" value="" autocomplete="off" placeholder="{% block search_placeholder %}{{ placeholder }}{% endblock %}" />
<input type="text" class="search" name="q" value="" autocomplete="off" placeholder="{% block search_placeholder %}{{ placeholder }}{% endblock %}" aria-label="Search for Datasets"/>
<button type="submit">
<i class="icon-search"></i>
<span>{{ _('Search') }}</span>
Expand Down
4 changes: 2 additions & 2 deletions ckanext/openbudgetsin_theme/templates/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@

{%- block page -%}

{% block skip %}
{#{% block skip %}
<div class="hide"><a href="#content">{{ _('Skip to content') }}</a></div>
{% endblock %}

#}
{#
Override the header on a page by page basis by extending this block. If
making sitewide header changes it is preferable to override the header.html
Expand Down
2 changes: 1 addition & 1 deletion ckanext/openbudgetsin_theme/templates/snippets/search_form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

{% block search_input %}
<div class="search-input control-group {{ search_class }}">
<input type="text" class="search" name="q" value="{{ query }}" autocomplete="off" placeholder="{{ placeholder }}">
<input type="text" class="search" name="q" value="{{ query }}" autocomplete="off" placeholder="{{ placeholder }}" aria-label="{{ placeholder }}">
{% block search_input_button %}
<button type="submit" value="search">
<i class="icon-search"></i>
Expand Down
2 changes: 1 addition & 1 deletion ckanext/openbudgetsin_theme/templates/snippets/search_form_tiers_gov.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

{% block search_input %}
<div class="search-input control-group {{ search_class }}">
<input type="text" class="search" name="q" value="{{ query }}" autocomplete="off" placeholder="{{ placeholder }}">
<input type="text" class="search" name="q" value="{{ query }}" autocomplete="off" placeholder="{{ placeholder }}" aria-label="Search Budget Sources">
{% block search_input_button %}
<button type="submit" value="search">
<i class="icon-search"></i>
Expand Down