From 4c8203c0c4ba453e6f6ef9be9201b629abc2e9a1 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Tue, 16 Jan 2018 11:46:10 +0000
Subject: [PATCH] adding aria-labels to buttons, inputs and anchor tags to pass
accessibility tests
---
opentech/templates/base.html | 16 ++++++++--------
1 file changed, 8 insertions(+), 8 deletions(-)
diff --git a/opentech/templates/base.html b/opentech/templates/base.html
index 7b16d2cf9..2f97f0be2 100644
--- a/opentech/templates/base.html
+++ b/opentech/templates/base.html
@@ -77,7 +77,7 @@
<a href="#" class="link link--fixed-apply">Apply</a>
<div class="header__inner wrapper wrapper--large">
- <a href="{% slugurl 'home' %}">
+ <a href="{% slugurl 'home' %}" aria-label="Home link">
<svg class="header__logo header__logo--desktop"><use xlink:href="#logo-desktop"></use></svg>
<svg class="header__logo header__logo--mobile"><use xlink:href="#logo-mobile"></use></svg>
</a>
@@ -95,7 +95,7 @@
<section class="header__menus header__menus--desktop">
{% primarynav %}
- <button class="button button--contains-icons button--left-space js-search-toggle" aria-haspopup="true">
+ <button class="button button--contains-icons button--left-space js-search-toggle" aria-haspopup="true" aria-label="Toggle desktop search">
<svg class="header__icon header__icon--open-search icon"><use xlink:href="#magnifying-glass"></use></svg>
<svg class="header__icon header__icon--close-search icon"><use xlink:href="#cross"></use></svg>
</button>
@@ -103,11 +103,11 @@
<section class="header__menus header__menus--mobile">
<div class="header__inner header__inner--menu-open">
- <a href="{% slugurl 'home' %}">
+ <a href="{% slugurl 'home' %}" aria-label="Home link">
<svg class="header__logo header__logo--mobile"><use xlink:href="#logo-mobile"></use></svg>
</a>
<div class="header__inner header__inner--mobile-buttons">
- <button class="button js-search-toggle" aria-haspopup="true">
+ <button class="button js-search-toggle" aria-haspopup="true" aria-label="Toggle mobile search">
<svg class="header__icon header__icon--open-search header__icon--open-search-menu-open icon icon--mobile-menu"><use xlink:href="#magnifying-glass"></use></svg>
<svg class="header__icon header__icon--close-search header__icon--close-search-menu-open icon icon--mobile-menu"><use xlink:href="#cross"></use></svg>
</button>
@@ -129,10 +129,10 @@
<div class="header__search">
<form action="{% url 'search' %}" method="get" role="search" class="form form--header-search-desktop">
- <button class="button" type="submit">
+ <button class="button" type="submit" aria-label="Search">
<svg class="icon icon--magnifying-glass"><use xlink:href="#magnifying-glass"></use></svg>
</button>
- <input class="input input--transparent" type="text" placeholder="Search…" name="query"{% if search_query %} value="{{ search_query }}{% endif %}">
+ <input class="input input--transparent" type="text" placeholder="Search…" name="query"{% if search_query %} value="{{ search_query }}{% endif %}" aria-label="Search input">
</form>
</div>
@@ -208,11 +208,11 @@
<a class="link link--button link--button-transparent" href="https://run.ooni.io/nettest?tn=web_connectivity&ta=%7B%22urls%22%3A%5B%22https%3A%2F%2Fwww.opentech.fund%2F%22%5D%7D&mv=1.2.0">Run OONI!</a>
<div class="footer__credits">
- <a href="https://www.bbg.gov/">
+ <a href="https://www.bbg.gov/" aria-label="Link to the Broadcasting Board of Governors website">
<svg class="icon icon--footer-credit"><use xlink:href="#bbg-logo"></use></svg>
</a>
- <a href="http://www.rfa.org/english/">
+ <a href="http://www.rfa.org/english/" aria-label="Link to the Radio Free Asia website">
<img src="{% static 'images/radio-free-asia-logo.svg' %}" alt="logo fo radio free asia">
</a>
</div>
--
GitLab