Accessibility Issues #48
Comments
|
Also, here is a list of ARIA roles and properties that might be useful. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
{{ message }}
title: How To Make Pages Accessible
(Downloadable here: How to Make Pages Accessible.docx)
Step 1 Set language to en-US for whole document by inserting lang=“en-US”
within the html tag at the top of the document, as in the following:
<html lang=“en-US”>
Step 2 Add a skip links for navigation, main content, and footnotes
(if applicable) after the <body> tag. (For example: <a
href="#main-content" aria-label="skip to main
content"></a>.) Then, place “ids” in the appropriate
places below. (For example, in terms of navigation: <div
class="navbar-right" id=navigation>). When adding the
footnotes id, be sure also to set the tabindex to 0 in both the div
class and the first footnote so that the screenreader will pick them
up:
Step 3 Add aria-labels to the previous page icon, link to cover page, and
the next page icon in the navigation header. For example, with
insertion in bold: <a id="next-link" href="../acknowledgments/"
aria-label="next page">
Step 4 Add aria roles to the search and side navigation icons on the
navigation header <a href="javascript:void(0);"
id="navbar-search" role=“search” @click="loadSearchIndex">
Step 5 Add an aria-label to the background image or cover or catalogue
entry by inserting an aria-label as such: “<div class='cover'
aria-label="Background cover is detail of Roman mosaic, Cat.
[number]">.
Step 6 To underline links when the mouse hovers, change the
“text-decoration” to “underline” in the stylesheets for
“a:active, a:focus, a:hover.”
Step 7 To adjust color contrast, find the problematic items in the
stylesheets and use a color contrast tool to alter the colors so
that they are at a 4.5:1 contrast. (I used the Contrast Colour
Analyser, which can be downloaded at
https://www.paciellogroup.com/resources/contrastanalyser/.)
Step 8 Add <alt> tags to images that are missing them for those
images which don’t require an aria-label.
Step 9 Add aria-labels to footnotes by inserting it inside the link. For
example: <sup id="fnref:1"><a href="#fn:1"
aria-label="footnote
1" class="footnote">1</a></sup>.
Step 10 Add aria-labels to footnote return arrows by inserting it inside
the link. For example:
Step 11 Add aria-labels and tabindex=0 to words with definitions. For
example, in the case of the word, Kantharoi: <span class="popup
popup-definition" tabindex=0 aria-label="Kantharoi: definition:
Plural of the word kantharos: two-handled drinking cup"
data-definition="Plural of the word <em>kantharos</em>:
two-handled
drinking cup"><em>Kantharoi</em></span>.
Please note that these steps were applied to the following pages, which
can be found in the build folder on the
“accessibility-testing”
branch of the gettypubs/romanmosaics github repository:
index.html (cover)
contents
foreward
catalogue/1
Further Issues (In Order of Priority)
unless he or she activates the navigation button itself. This makes
for a long list of tabs where there is no visible keyboard focus on
the screen.
because it says that “Contents” is part of a list of two, but it is
the only one mentioned (the other item being the complete list of
regions for the catalogue).
is in the search menu and can enter keywords. For an example of
this, see how the Innovation Studio at Carnegie Museums does it at
https://studio.carnegiemuseums.org/.
(Downloadable here: How to Make Pages Accessible.docx)
The text was updated successfully, but these errors were encountered: