City of
Everett, MA | Website Review
Prepared by
www.IHCDesign.org
Page
2
Image
Section
Issue Name
Issue Details
Issue Tags
1
Navigation
Inaccessible
M
ain
N
avigation
Background
All menu items and mega
-
menu functionality must be accessible
by keyboard
-
only navigation to allow screen reader users and
keyboard
-
only user
to navigate the web.
Current
Only the high
-
level five menu items are accessible with various
assistive technologies. The popover HTML is not nested within
the menu unordered list, rather at the very bottom of the page,
therefore it is not appropriately pl
aced in the accessibility tree.
Solution
Menu popovers should always be expanded using not only
hover, but also keyboard focus. In addition, the HTML should be
nested in the same intuitive order as the visual layout.
Engineering
N
otes
Review documentatio
n for accessible mega
-
menus using web
-
aria, proper html structure, and keyboard focus. See Adobe
open
-
source library for accessible mega
-
menus:
https://github.com/adobe
-
accessi
bility/Accessible
-
Mega
-
Menu/
Blind, Low
-
vision,
Dexterity
Impairments
WCAG 2.1 Section
3.2.1 On Focus
2
General Content
Header Hierarchy
Background
Many screen reader users rely on headers for navigation within
pages as well as visual users for grouping and visual focus.
Heading levels should always be consistent and always follow a
clear and helpful hierarchy.
Current
Heading levels are currently
skipped and some visually styled
html elements are not placed within heading tags. For example,
this screen shot from the homepage contains no heading levels.
Solution
Ensure that the order of headings is semantically correct; h1 to
h6 element tags shoul
d be in appropriate order.
Engineering
N
otes
Review W3’s documentation on heading level/ranks:
https://www.w3.org/WAI/tutorials/page
-
structure/headings/
Blind, Low
-
vision,
Brain
-
based
WCAG 2.1 Section
2.4.6 Headings and
Labels
Image
Section
Issue Name
Issue Details
Issue Tags
Prepared by
www.IHCDesign.org
Page
3
3
Form Fields
Missing
F
orm
L
abels
Background
Each form element must have a programmatically associated
label element.
Current
The event calendar and search block form fields have
placeholder values,
but not label elements. This makes
understanding the purpose of each form field very difficult and
sometimes impossible for assistive tech
nology
users:
<
input
onkeydown=
"searchTextHook(event);"
onblur=
"removeDefaultStartDate(this);"
onfocus=
"removeDefault
StartDate(this); showPopup(this,
event);"
onclick=
"showPopup(this, event);"
title=
"Start Date"
id=
"startDate"
type
=
"text"
value=
"Start date"
>
Solutions
Please provide labels for all input fields so that users understand
the context.
Engineering
N
otes
<
la
bel
for
=
""
startDate
""
>Start Date</label>
Blind, Low Vision
WCAG 2.0 Section
3.3.2 Labels or
Instructions
4
General
C
ontent
Color
C
ontrast
Background
All text elements must have sufficient contrast between text in
the foreground and background
colors.
Current
There is insufficient color contrast for many elements throughout
the template. In
this first example, “Create an
Account
,”
the color
contrast ratio (foreground #50B1EA & background #3D7EA5) is
only 1.9:1.
Solution
Ensure all text ele
ments have at least 4.5:1 contrast for small
text and 3:1 for large text.
IHCD recommends the Colour Contrast Analyser:
https://developer.paciellogroup.com/resources/contras
tanalyser
Low
-
Vision, Older
Users, Brain
-
based
WCAG 2.0 Section
1.4.3 Contrast
(Minimum)
Page
of 11
89%
Details
City of Everett Web Review.pdf
862.88 KB
Modified: 10/30/18 2:29PM
MD5: ccfcac8f719d73e01e94a883fa9567de