Web accessibility quick checklist v2

advertisement
Web accessibility checklist v2
The purpose of this checklist is to provide developers, content authors, etc. with an indication of whether their pages will be compliant with the LBG web accessibility standard v2.0. Compliance with
this checklist does not imply compliance with the full LBG standard or WCAG 2.0. It is strongly recommended that a full accessibility test is conducted against the LBG standard by experienced
accessibility testers, e.g. the IT Accessibility Test team in Group IT.
Website:
Reviewer:
Date:
Text alternatives
Yes
No
NA
How to check
Descriptive alt text has been provided for all images that
are not purely decorative, including image buttons and
hotspots in image maps.
WAT Images > Toggle Image/Alt. Any image that does not have alt text
will show up as “No Alt!”
All decorative images have empty alt text (or have been
implemented as CSS backgrounds).
As above and look for "". Images that remain visible are implemented
using CSS and will not have an alt attribute.
Text equivalents have been provided for information
provided in images that are too long to go in an alt attribute
(e.g. diagrams, charts).
Manual check – the equivalent should be either in text adjacent to the
content or be available via a link to take the user to it.
Text equivalents have been provided for information held
non-text documents (e.g. structure charts, audio/video).
Manual check – the equivalent should be either in text adjacent to the
content or be available via a link to take the user to it.
Other comments or observations
Structure and information
Yes
No
NA
How to check
All headings (and only headings) have been marked up
using heading tags (h1, h2, h3 etc).
WAT Structure > Headings. All heading tags will be highlighted or a
message will be displayed saying “No headings found”. At least one h1
heading must be present on the page. Any non-heading text that is
marked up as a heading is a fail.
Lists have been marked up using ul, ol or dl.
WAT Structure > List items. All list tags will be highlighted or a message
will be displayed saying “No list elements”. Text presented as a list but not
marked up as a list is a fail. Non-list text presented as a list is a fail.
V2.0 Draft 2
1 of 6
Structure and information
Yes
No
NA
How to check
All frames / iframes have a short description in their
title attribute.
WAT Structure > Frame name/title. If frames or iframes are present a
new window will open with containing frame information including whether
they have a title or not.
Tables have been used to present tabular information or
data.
WAT Structure > Table borders. The borders of all tables in the page will
be highlighted. If information requires row/column presentation be
understood it must be presented in a table. Using tables for layout rather
than CSS is a last resort should be limited to 2 levels of nesting –bring
instances of needless layout tables or nesting > 2 levels to the attention of
the developer / content author as it will impact usability.
All data tables (not layout tables) have been given a
descriptive summary.
WAT Structure > Simple Data Table. Summary attributes will be displayed
if present, if not “No summary!” will be shown.
Data cells in data tables are associated with their header
cells (th) using scope or id and header attributes.
WAT Structure > Complex Data Table. If present, th tags will be shown
along with any id or scope information. Absence of th (fail) will be
highlighted, ditto absence of id or scope information (fail). Use of
structural markup on a layout table is a fail.
The content can be understood if read when linearized, i.e.
read left to right, top to bottom
WAT Structure > Linearize will linearize the page content – make sure it
still makes sense when presented like this, e.g. the content order and
links etc.are still logical
Changes in the content (e.g. an AJAX update of a part of the
page, hiding/showing of content) can be accessed and read
assistive technology
Use JAWS to determine whether content changes can be accessed and
read.
The mark-up does not contain any of the following errors:
mismatched tags, incorrectly nested tags, overlapping tags,
duplicate IDs
Validate the mark-up with Total Validator or equivalent approved tool to
check for absence of the errors listed on the left.
Other comments or observations
Presentation
Information is not lost if the presentation is changed, e.g. by
a user changing text/background colours or changing layout,
being read out in a screen reader, printed to a monochrome
printer, etc.
V2.0 Draft 2
Yes
No
NA
How to check
IE Tools > Internet Options, click “Accessibility”, check the 3 ignore
checkboxes. Click Ok, then click “Colours” and uncheck “Use Windows
colors”, then Ok. The page should respect the accessibility / colour
settings and no information should be lost.
2 of 6
Presentation
Yes
No
NA
How to check
Information or cues that rely on shape, size, visual location,
sound or other sensory characteristics is also available in
text.
Manual check of content.
Information or visual cues conveyed using colour are also
available in text or via hashing/patterns (when colour is used
to convey information in images).
WAT Colours > Greyscale to check that information is not reliant on
colour, perform a manual check for text equivalents.
Foreground and background colours must have a minimum
contrast difference of 4.5:1 (NA for logotypes).
WAT Colours > Contrast Analyzer and sample the foreground /
background colours. Make sure you are using the Luminosity algorithm.
WAT Colours > Juicy Studio > Colour Contract Analyser (Luminosity) will
test all foreground / background combinations in the page and defined in
CSS.
All text can be resized up to 200% and still be readable, i.e.
not truncated, clipped, etc. (NA for captions or images of
text).
IE View > Text Size > Largest. The text size should increase to
approximately 200% and still be readable (not truncated, clipped, overrun,
etc.)
Images are not used to present text unless styling is
essential to convey information (e.g. not just for branding or
stylistic reasons) or the user can substitute images for text.
Manual check of content.
If audio automatically plays on a web page for more than 3
seconds there is a way to pause, stop or lower the volume.
Manual check of content.
Other comments or observations
Operability
Yes
No
NA
How to check
All functionality and navigation can be operated using the
keyboard.
Make sure that every element / control used for navigation or functionality
can receive the focus using Tab or other key strokes.
The focus does not get “trapped” in any element or
component in the page.
‘tab’ (or other key strokes) through the page to make sure that the focus
cycles through all the focusable elements / controls.
A skip link or other mechanism is provided to take the user to
the start of the main content and/or content blocks in the
page.
WAT Doc Info > Show Internal Links will result in a message confirming
that skip links have been found and will then highlight them.
WAT Structure > List Items can be used to check that menus have
marked up as ul enabling a screen reader user to skip over them.
V2.0 Draft 2
3 of 6
Operability
Yes
No
NA
How to check
The focus moves in a predictable and logical order.
‘tab’ through the page to make sure that the focus moves in a predictable
and logical order OR use WAT Structure > Show Tab Order to reveal the
tab order.
The focus is always visible and it is clear which component in
the page currently has the focus.
‘tab’ through the page to make sure that the focus is always visible and is
visible ‘at a glance’ (i.e. is obvious without having to search for it).
All links make sense out of context (e.g. no “click here” links).
WAT Doc Info > List Links and a new window will open listing the links in
the page. Make sure that the Link Content of all links makes sense in the
absence of the surrounding content OR that the Link Content has been
supplemented with a Title.
Web pages are given descriptive titles.
WAT Structure >Heading Structure will list the Window title and headings
in a new window – make sure the title is reflective of the page content.
Section headings are used to organize content and
headings/labels describe the topic or purpose of the content.
WAT Structure >Heading Structure will list the headings in a new window
– make sure that headings are nested correctly (h1, h2, h3 etc, not
skipping levels) and enable the content of the page to be understood (i.e.
provide an effective overview).
Content that moves, blinks, scrolls or auto-updates can be
stopped, paused or hidden by the user.
Manual check for controls that enable moving/blink/scrolling/auto-updating
content to be stopped, paused or hidden.
Nothing in the page flashes more than three times in any 1second period.
Manual check of content.
Other comments or observations
Understanding and predictability
Yes
No
NA
How to check
The language of the page has been specified (e.g. English)
WAT Doc Info > Show Language Attributes will reveal language attributes
if present, e.g. “HTML:en”
Phrases or sections of the page written in a language that
different to the rest of the page have been specified (NA for
web applications)
WAT Doc Info > Show Language Attributes will reveal language attributes
if present, e.g. “SPAN:fr”
Abbreviations are expanded on first use or other means
provided to explain them (e.g. title attribute on an abbr or
acronym tag, link to a definition). NA for staff facing pages.
WAT Structure > Acronyms and Abbreviations to reveal acronym and
abbr tags, manual check of content to find text expansions.
V2.0 Draft 2
4 of 6
Understanding and predictability
Yes
No
NA
How to check
Navigation is consistent across pages, i.e. menus and other
navigation elements are presented in the same place in each
page
Manual check of pages in the site or application.
Labels, headings, etc. are used consistently across pages
Manual check of pages in the site or application.
The page is not refreshed when an element receives the
focus OR when the setting of an element is changed (e.g.
the value of a select dropdown)
Manual check – ‘tab’ onto form elements and change their values, e.g.
change the value in a select drop-down.
Pages do not automatically refresh or forward OR the user is
able to turn of automatic refreshing/forwarding
Manual check of pages.
Links that open new windows specify this in their text, title
attribute and (optionally) have a visual indicator
WAT Structure > JavaScript / New Window Links will reveal links that
have a target attribute or potentially use JavaScript to open a new
window. For each highlighted link make sure the link text or title
attribute has been used to inform the user that a new window opens
(WAT Doc Info > Show Titles will reveal titles where present).
Other comments or observations
Forms
Yes
No
NA
How to check
All form controls (e.g. fields, checkboxes, radio buttons) have
descriptive labels which are positioned immediately to the
left, right or above their respective fields OR a title
attribute is used to identify the field (e.g. in a multi-part field
such as date of birth)
Manual check of the fields / controls to make sure they have a descriptive
label. WAT Doc Info > Show Titles will reveal titles where present.
All form control labels (where used) are marked up with the
label tag and are explicitly associated with their respective
controls using the for and id attributes of the label and
control
WAT Structure > Fieldset / Labels will reveal label tags along with for
and id attributes.
There is an indication of which fields are mandatory /
required (both visual and in mark-up)
Mandatory fields are visually marked with an asterisk * or equivalent AND
this is exposed to assistive technology like JAWS (e.g. using an image of
an asterisk and with alt text saying “required”).
If the user makes a mistake when filling in the form, the fields
in error are highlighted and a text description is given of the
error
Manual check of the form.
V2.0 Draft 2
5 of 6
Forms
Yes
No
NA
How to check
For forms that are used to capture legal or financial data, the
user is provided with the means to confirm the data they
have entered before submitting OR are able to undo/reverse
the submission.
Manual check of the form and process.
All custom built form controls (widgets) expose their name,
role and value to assistive technology
Use JAWS or Supernova to test this.
Changes in the states, properties or values of widgets is
exposed to assistive technology
Use JAWS or Supernova to test this.
Other comments or observations
Multimedia
Yes
No
NA
How to check
An alternative (e.g. text transcription) has been provided for
pre-recorded audio-only and video-only content
Manual check – check for the presence of a transcript, e.g. a link to
Additional audio content is provided to describe important
video-only content (e.g. where information is conveyed in the
video but without sound)
Manual check – play the video and see if additional audio content is
available.
Captions (open or closed) have been provided for all prerecorded video
Manual check – play the video and check whether captions can be turned
on or are present by default.
Other comments or observations
V2.0 Draft 2
6 of 6
Download