spacecruft
/
satnogs-db
1
0
Fork 0
Code Releases Activity

Accessibility improvements 

Some accessibility improvements:

* fixed some buttons to be more compatible with keyboard focus
* added labels where missing for tab links where a screenreader might get confused by the fontawesome icon
* added a "Skip to main content" link
* labeled the search box 
* added labels for some of our visual indicators for satellite and transmitter statuses
* ensured that "Focusable elements should have interactive semantics"

Fixes #414
Fixes #417
Fixes #418
Fixes #419
Fixes #420

Signed-off-by: Corey Shields <cshields@gmail.com>
spacecruft
Corey Shields 2020-09-07 12:38:51 -04:00
parent cb705d3c1b
commit d6f6ff0c2e
6 changed files with 102 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
db/static/css/app.css
View File

@ -522,3 +522,44 @@ blockquote {
width: 60px;
border-bottom-left-radius: 0.25rem;
}
/* taken from https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/mouse-and-keyboard-events/skip-to-main-content/ */
a.skip-main {
left: -999px;
position: absolute;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: -999;
}
/* taken from https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/mouse-and-keyboard-events/skip-to-main-content/ */
a.skip-main:focus, a.skip-main:active {
color: #fff;
background-color: #000;
left: auto;
top: auto;
width: 30%;
height: auto;
overflow: auto;
margin: 10px 35%;
padding: 5px;
border-radius: 15px;
border: 4px solid yellow;
text-align: center;
font-size: 1.2em;
z-index: 999;
}
.sidebar a:focus {
font-weight: bold;
}
[class*='sidebar-dark'] .search-label {
color: rgba(255, 255, 255, .5);
font-size: .7rem;
margin-bottom: .2rem;
}

13
db/templates/base.html
View File

@ -27,6 +27,7 @@
<!-- Top Navbar menu -->
<nav class="main-header navbar navbar-white navbar-light navbar-expand">
<a class="skip-main" href="#main">Skip to main content</a> <!-- for a11y, see #414 -->
<ul class="navbar-nav d-lg-none ml-2">
<a data-widget="pushmenu" href="#" role="button">
<!-- <i class="fas fa-bars"></i> -->
@ -62,14 +63,14 @@
<img src="{% static 'img/satnogs-db-logo.png' %}" alt="SatNOGS DB Logo" class="brand-image"
id="nav-logo">
</div>
<div class="sidebar d-flex flex-column">
<div class="sidebar d-flex flex-column">
<form class="form-inline mt-1" action="{% url 'search_results' %}" method="GET">
<label class="search-label m-0" for="search" id="search-label">Search</label> <!-- See #416 -->
<div class="input-group input-group-sm">
<input class="form-control form-control-sidebar" type="search" name="q"
placeholder="Satellite name or ID" aria-label="Search" value="{{ q }}">
<input class="form-control form-control-sidebar" type="search" id="search" name="q"
placeholder="Satellite name or ID" aria-labelledby="search-label" value="{{ q }}">
<div class="input-group-append">
<button class="btn btn-navbar-satnogs" type="submit">
<button class="btn btn-navbar-satnogs" type="submit" aria-label="Submit Search">
<i class="fas fa-search"></i>
</button>
</div>
@ -201,7 +202,7 @@
<!-- /.control-sidebar -->
<!-- Content window -->
<div class="content-wrapper bg-light">
<div class="content-wrapper bg-light" id="main">
{{ stage_notice }}
{% if messages %}
<!-- This is hidden, transitional to Toasts - see app.js -->

44
db/templates/base/satellite.html
View File

@ -22,20 +22,20 @@
<ul class="navbar-nav nav nav-pills" data-widget="treeview" role="menu" data-accordion="false" id="tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"
aria-selected="true"><i class="nav-icon fas fa-satellite"></i>
aria-selected="true" aria-label="Information"><i class="nav-icon fas fa-satellite"></i>
<p class="d-none d-lg-inline-block text-sm">Info</p>
</a>
</li>
<li class="nav-item{% if satellite.status == 're-entered' %} disabled{% endif %}">
{% if showmap %}
<a class="nav-link" id="mapcontent-tab" data-toggle="tab" href="#mapcontent" role="tab" aria-controls="mapcontent"
aria-selected="false">
aria-selected="false" aria-label="Map">
<i class="nav-icon fas fa-map-marked-alt"></i>
<p class="d-none d-lg-inline-block text-sm">Map</p>
</a>
{% else %}
<span data-toggle="tooltip" title="No map available for this satellite" data-placement="bottom">
<a class="nav-link disabled">
<a class="nav-link disabled" aria-label="Map not available">
<i class="nav-icon fas fa-map-marked-alt"></i>
<p class="d-none d-lg-inline-block text-sm">Map</p>
</a>
@ -44,7 +44,7 @@
</li>
<li class="nav-item">
<a class="nav-link" id="transmitters-tab" data-toggle="tab" href="#transmitters" role="tab"
aria-controls="transmitters" aria-selected="false">
aria-controls="transmitters" aria-selected="false" aria-label="Transmitters">
<i class="nav-icon fas fa-satellite-dish"></i>
{% if satellite.transmitters %}
<span class="badge badge-satnogs-primary navbar-badge">{{ satellite.transmitters.count }}</span>
@ -57,7 +57,7 @@
</li>
<li class="nav-item">
<a class="nav-link" id="data-tab" data-toggle="tab" href="#data" role="tab" aria-controls="data"
aria-selected="false">
aria-selected="false" aria-label="Data">
<i class="nav-icon fas fa-chart-bar"></i>
{% if satellite.telemetry_data_count %}
<span class="badge badge-satnogs-primary navbar-badge">{{ badge_telemetry_count }}</span>
@ -69,19 +69,19 @@
{% if request.user.is_authenticated %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
aria-haspopup="true" aria-expanded="false" aria-label="Edit Menu">
<i class="nav-icon fas fa-edit"></i>
<p class="d-none d-lg-inline-block text-sm">Edit</p>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item d-flex align-items-center create-transmitter-link" href="#" id="create-transmitter-side"
data-form-url="{% url 'create_transmitter' satellite_pk=satellite.id %}">
data-form-url="{% url 'create_transmitter' satellite_pk=satellite.id %}" aria-label="Submit new transmitter">
<i class="nav-icon mr-2 fas fa-plus-square"></i>
<p class="mb-0">Submit New Transmitter</p>
</a>
{% if perms.base.change_satellite %}
<a class="dropdown-item d-flex align-items-center bs-modal" id="satellite-update" href="#"
data-form-url="{% url 'update_satellite' satellite.id %}">
data-form-url="{% url 'update_satellite' satellite.id %}" aria-label="Edit this satellite">
<i class="nav-icon mr-2 fas fa-edit"></i>
<p class="mb-0">Edit {{ satellite.name }}</p>
</a>
@ -160,17 +160,21 @@
</div>
<div class="card-body row p-1">
<div class="satellite-status-icon d-flex">
<img src="
<img
{% if satellite.status == 'alive' %}
{% static 'img/status_alive.png' %}
src="{% static 'img/status_alive.png' %}"
alt="Satellite alive"
{% elif satellite.status == 're-entered' %}
{% static 'img/status_decayed.png' %}
src="{% static 'img/status_decayed.png' %}"
alt="Satellite re-entered"
{% elif satellite.status == 'dead' %}
{% static 'img/status_dead.png' %}
src="{% static 'img/status_dead.png' %}"
alt="Satellite dead"
{% else %}
{% static 'img/status_unknown.png' %}
src="{% static 'img/status_unknown.png' %}"
alt="Status unknown"
{% endif %}
" height="30" class="m-auto align-self-center">
height="30" class="m-auto align-self-center">
</div>
<div class="
{% if satellite.status == 'alive' %}
@ -266,18 +270,18 @@
SatNOGS Links
</div>
<div class="card-body text-center">
<a class="btn btn-info m-1 satnogs-link-btn"
<button class="btn btn-info m-1 satnogs-link-btn"
href="https://network.satnogs.org/observations/?norad={{ satellite.norad_cat_id }}" target="_blank"
role="button">
aria-label="Network Observations">
Network Observations
<i class="mr-2 fas fa-external-link-alt"></i>
</a>
</button>
{% if satellite.dashboard_url %}
<a class="btn btn-info m-1 satnogs-link-btn" href="{{ satellite.dashboard_url }}" target="_blank"
role="button">
<button class="btn btn-info m-1 satnogs-link-btn" href="{{ satellite.dashboard_url }}" target="_blank"
aria-label="Telemetry Dashboard">
Telemetry Dashboard
<i class="mr-2 fas fa-external-link-alt"></i>
</a>
</button>
{% endif %}
</div>
</div>

15
db/templates/base/stats.html
View File

@ -23,20 +23,20 @@
<ul class="navbar-nav nav nav-pills" data-widget="treeview" role="menu" data-accordion="false" id="tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="dashboard-tab" data-toggle="tab" href="#dashboard" role="tab"
aria-controls="dashboard" aria-selected="true"><i class="nav-icon fas fa-chart-line"></i>
aria-controls="dashboard" aria-selected="true" aria-label="Dashboard"><i class="nav-icon fas fa-chart-line"></i>
<p class="d-none d-lg-inline-block">Dashboard</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="sat-leaderboard-tab" data-toggle="tab" href="#sat-leaderboard" role="tab"
aria-controls="sat-leaderboard" aria-selected="false">
aria-controls="sat-leaderboard" aria-selected="false" aria-label="Satellite statistics">
<i class="nav-icon fas fa-satellite"></i>
<p class="d-none d-lg-inline-block">Satellites</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="user-leaderboard-tab" data-toggle="tab" href="#user-leaderboard" role="tab"
aria-controls="user-leaderboard" aria-selected="false">
aria-controls="user-leaderboard" aria-selected="false" aria-label="Ground station statistics">
<i class="nav-icon fas fa-broadcast-tower"></i>
<p class="d-none d-lg-inline-block">Ground Stations</p>
</a>
@ -62,7 +62,7 @@
<div class="icon">
<i class="fas fa-satellite"></i>
</div>
<a href="{% url 'satellites' %}" class="small-box-footer">
<a href="{% url 'satellites' %}" class="small-box-footer" aria-label="Link to all satellites">
Satellites <i class="fas fa-arrow-circle-right"></i>
</a>
</div>
@ -74,7 +74,7 @@
<div class="icon">
<i class="fas fa-satellite-dish"></i>
</div>
<a href="{% url 'transmitters_list' %}" class="small-box-footer">
<a href="{% url 'transmitters_list' %}" class="small-box-footer" aria-label="Link to all transmitters">
Transmitters <i class="fas fa-arrow-circle-right"></i>
</a>
</div>
@ -86,7 +86,7 @@
<div class="icon">
<i class="fas fa-satellite-dish"></i>
</div>
<a href="{% url 'transmitters_list' %}" class="small-box-footer">
<a href="{% url 'transmitters_list' %}" class="small-box-footer" aria-label="Link to all transmitters">
Transmitters <i class="fas fa-arrow-circle-right"></i>
</a>
</div>
@ -98,9 +98,6 @@
<div class="icon">
<i class="fas fa-database"></i>
</div>
<!-- <a href="#" class="small-box-footer">
Data <i class="fas fa-arrow-circle-right"></i>
</a> -->
</div>
</div>
<div class="col-xs-12 col-md-4">

2
db/templates/includes/cards/satellite_card.html
View File

@ -86,7 +86,7 @@
{% endwith %}
</div>
<div class="float-right d-flex flex-column align-content-center">
<img class="rounded img-fluid" src="{{ satellite.get_image }}" style="max-height: 82.5px;" />
<img class="rounded img-fluid" src="{{ satellite.get_image }}" style="max-height: 82.5px;" alt="Satellite image" />
</div>
</div>
</div>

27
db/templates/includes/cards/transmitter_card.html
View File

@ -1,14 +1,33 @@
<div class="card shadow card-outline {% if suggestion_card %}card-warning{% elif transmitter.bad_transmitter %}card-danger{% else %}card-satnogs{% endif %}">
{% if suggestion_card %}
<div class="card shadow card-outline card-warning" aria-label="Suggested transmitter {{ transmitter.description }}">
{% elif transmitter.bad_transmitter %}
<div class="card shadow card-outline card-danger" aria-label="Bad or uncoordinated transmitter {{ transmitter.description }}">
{% else %}
<div class="card shadow card-outline card-satnogs" aria-label="Transmitter {{ transmitter.description }}">
{% endif %}
<div class="card-header align-items-center no-gutters py-1">
<div class="row">
<div class="col">
<span class="card-title align-self-center">{% if suggestion_card %}Suggestion - {% endif %}{{ transmitter.description }}</span>
</div>
<div class="row ml-auto align-items-center">
<i class="fas fa-satellite fa-lg align-self-center {% if satellite.status == 're-entered' %}text-satnogs-inactive{% elif transmitter.status == 'active' %}text-satnogs-active{% else %}text-satnogs-inactive{% endif %}"></i>
{% if satellite.status == 're-entered' %}
<i class="fas fa-satellite fa-lg align-self-center text-satnogs-inactive"
aria-label="Transmitter is not operational, the satellite has re-entered"
data-toggle="tooltip" data-placement="bottom" title="Non-operational"></i>
{% elif transmitter.status == 'active' %}
<i class="fas fa-satellite fa-lg align-self-center text-satnogs-active"
aria-label="Transmitter is operational"
data-toggle="tooltip" data-placement="bottom" title="Operational"></i>
{% else %}
<i class="fas fa-satellite fa-lg align-self-center text-satnogs-inactive"
aria-label="Transmitter is inactive or malfunctioning"
data-toggle="tooltip" data-placement="bottom" title="Malfunctioning"></i>
{% endif %}
<div class="btn-group" role="group">
<btn class="btn btn-satnogs dropdown-toggle ml-3" data-toggle="dropdown" aria-expanded="false"
id="dropdown-{{ transmitter.id }}"><i class="fas fa-bars"></i></btn>
<button class="btn btn-satnogs dropdown-toggle ml-3" data-toggle="dropdown" aria-expanded="false"
id="dropdown-{{ transmitter.id }}"><i class="fas fa-bars"></i></button>
<div class="dropdown-menu" aria-labelledby="dropdown-{{ transmitter.id }}">
{% if request.user.is_superuser and suggestion_card %}
<form action="{% url 'transmitter_suggestion_handler' %}" method="post"