From d6f6ff0c2ebd8eb3cd76e6a408ff654109a8729b Mon Sep 17 00:00:00 2001 From: Corey Shields Date: Mon, 7 Sep 2020 12:38:51 -0400 Subject: [PATCH] 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 --- db/static/css/app.css | 41 +++++++++++++++++ db/templates/base.html | 13 +++--- db/templates/base/satellite.html | 44 ++++++++++--------- db/templates/base/stats.html | 15 +++---- .../includes/cards/satellite_card.html | 2 +- .../includes/cards/transmitter_card.html | 27 ++++++++++-- 6 files changed, 102 insertions(+), 40 deletions(-) diff --git a/db/static/css/app.css b/db/static/css/app.css index 8477588..61871bf 100644 --- a/db/static/css/app.css +++ b/db/static/css/app.css @@ -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; +} diff --git a/db/templates/base.html b/db/templates/base.html index 066038b..acddf43 100644 --- a/db/templates/base.html +++ b/db/templates/base.html @@ -27,6 +27,7 @@