![Page 1: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/1.jpg)
![Page 2: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/2.jpg)
Two common accessibility
problems
Why wireframe reviews are a
solution
What are wireframes & annotations?
How do you do a wireframe
review?
What types of issues will a
review pick up? Examples
Practice exercise Who? You!
![Page 3: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/3.jpg)
WHEN DOES ACCESSIBILITY
TESTING TYPICALLY HAPPEN?
![Page 4: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/4.jpg)
a) Before development
b) During development
c) After development, during testing phase
d) A week before launch
e) After launch
f) All of the above
In your experience, when does
accessibility testing typically occur?
![Page 5: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/5.jpg)
Problem
WE’RE TESTING TOO LATE
![Page 6: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/6.jpg)
Solution
START TO TEST SOONER
![Page 7: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/7.jpg)
Contract
Business Requirements
Wireframes
Visual Design Spec
Application Development
QA
In Production
We can test accessibility at any stage
![Page 8: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/8.jpg)
If you could place a bet on finding
accessibility issues in an app…
WHAT ISSUES WOULD YOU BET ON?
![Page 9: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/9.jpg)
Across your accessibility testing, What
are the issues you almost always see?
![Page 10: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/10.jpg)
The usual suspects
Alt text missing or inaccurate
Headings missing or inaccurate
Form labels
Error presentment
where, when, how
Roles tab set, button,
toggle
States expanded/collapsed selected, disabled
Audio, video, animation cannot be stopped
Notifications & updating content
![Page 11: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/11.jpg)
Problem
ACCESSIBILITY ISSUES ARE
PREDICTABLE
![Page 12: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/12.jpg)
"IT'S NOT A DEFECT IF
IT WASN'T A REQUIREMENT"
And the QA manager said…
![Page 13: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/13.jpg)
1. WE'RE ALWAYS TOO LATE
2. WE SEE THE SAME OLD ISSUES
A modest proposal
REVIEW ACCESSIBILITY IN THE
WIREFRAME STAGE
Two problems
![Page 14: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/14.jpg)
WHAT IS A WIREFRAME?
![Page 15: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/15.jpg)
![Page 16: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/16.jpg)
Before the design or the code
![Page 17: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/17.jpg)
A blueprint or schematic
![Page 18: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/18.jpg)
![Page 19: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/19.jpg)
A website wireframe, also known as a page schematic or screen
blueprint, is a visual guide that represents the skeletal framework of a
website... The wireframe depicts the page layout or arrangement of the website’s
content, including interface elements and navigational systems,
and how they work together.
The wireframe usually lacks typographic style, color,
or graphics, since the main focus lies in functionality, behavior, and
priority of content.
In other words, it focuses on what a screen does, not
what it looks like.
Wireframes can be pencil drawings or sketches on a
whiteboard, or they can be produced by means of a broad array of free
or commercial software applications. en.wikipedia.org/wiki/Website_wireframe
![Page 20: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/20.jpg)
# Accessibility
1.
2.
2.
3.
4.
5.
6.
7.
8.
9.
Wireframe annotations
![Page 21: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/21.jpg)
• Identify accessibility issues and
requirements before build the interface
• Doesn’t need to be perfect
• Can be informal or documented
• Raises more questions than answers
• Adapts to how project uses wireframes
What is a wireframe review?
![Page 22: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/22.jpg)
Extending wireframes for accessibility
![Page 23: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/23.jpg)
Wireframe annotations
FOUR TYPES OF
REVIEW COMMENTS
![Page 24: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/24.jpg)
Content alt text, labels,
instructions (off-screen & onscreen)
Development patterns
Known or simple: tabs, expand/collapse
Complex development tasks
(do-able)
Not accessible as-is We need to talk:
interface changes needed (or an exemption)
![Page 25: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/25.jpg)
# Accessibility
1. Needs alt text (e.g. "back")
2. No alt text needed for any
of the icons to the left of
inputs on this screen
3. No alt text needed for icon
4. No alt text needed
5. Needs hidden/off-screen
label (business to provide)
6. Needs hidden/off-screen
label (business to provide)
7. Needs hidden/off-screen
label (business to provide)
8. Add/subtract icons need alt
text
9. Needs hidden/off-screen
label (business to provide)
![Page 26: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/26.jpg)
• Alt text for icons, images, charts
• Hidden label text
• New or revised onscreen content such as expected data values, instructions or required field messaging
• This content will go into the copy deck for translation and approvals
• Keep in mind the wireframe is not a copy deck and most of the words are placeholders
Off-screen & onscreen content
![Page 27: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/27.jpg)
Content alt text, labels,
instructions (off-screen & onscreen)
Development patterns
Known or simple: tabs, expand/collapse
Complex development tasks
(do-able)
Not accessible as-is We need to talk:
interface changes needed (or an exemption)
![Page 28: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/28.jpg)
# Accessibility
1. Button
2. No alt text needed for any
of the icons to the left of
inputs on this screen
3. For screen reader whole
row should act as single
element. No alt text needed
for icon
7. After screen reader user
updates value it needs to be
announced
8. Buttons. Needs to convey if
in disabled state
10. Button
11. Heading
12. Is role a radio or a tab? Must
convey selected/checked
![Page 29: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/29.jpg)
• Headings & levels
• Buttons vs. links
• Data tables
• Disabled elements
• Tabs, Radio buttons, checkboxes
• Collapsed/expanded content
• Live regions (updates w/o screen load)
• All the things WCAG says must be pragmatically determined
Identify known accessibility
development patterns
![Page 30: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/30.jpg)
Content alt text, labels,
instructions (off-screen & onscreen)
Development patterns
Known or simple: tabs, expand/collapse
Complex development tasks
(do-able)
Not accessible as-is We need to talk:
interface changes needed (or an exemption)
![Page 31: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/31.jpg)
# Accessibility
1. Calendar will need special
attention from development
team.
![Page 32: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/32.jpg)
• Calendars
• Maps
• Carousel
• Audio/video player
• Custom camera
• Timers
Complex interactions or elements
![Page 33: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/33.jpg)
![Page 34: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/34.jpg)
Content alt text, labels,
instructions (off-screen & onscreen)
Development patterns
Known or simple: tabs, expand/collapse
Complex development tasks
(do-able)
Not accessible as-is We need to talk:
interface changes needed (or an exemption)
![Page 35: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/35.jpg)
# Accessibility
1. No mechanism for captions
1
![Page 36: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/36.jpg)
![Page 37: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/37.jpg)
# Accessibility
1. We need to talk
2. No really. If you can make this
accessible I will buy you all lunch
1 2
![Page 38: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/38.jpg)
• Expected data format if triggers error
• Missing instructions, required field
• Media or carousel that cannot be paused (no controls)
• Video without "CC" option (unless will be open captioned)
• Interactive charting
• Complex maps
• Complex games
Not accessible in current state
![Page 39: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/39.jpg)
Annotation tips What to avoid writing
Needs alt text What the alt text should be
Needs a hidden label What the label should say
Needs consistent heading Should be <h1>
This is a tabset, a button How to code it
Missing X functionality
(e.g. pause/play)
How to code it
Pattern complex, needs
discussion with developers
Write a mini-tutorial in the
wireframe
X element not accessible Use Y instead of X
Assume readers have some
accessibility experience
Teaching Accessibility 101 in
the annotations
Identify issues and options, don't write solutions
![Page 40: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/40.jpg)
A classic wireframe does not include:
• visual design decisions (such as colours, fonts, positioning, images)
• technical decisions
• Final "copy". All text is subject to change. Labels and instructions, headings cannot be reviewed with much certainty.
Checks related to design, code, copy need to happen later in the project.
What you cannot review in a wireframe
![Page 41: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/41.jpg)
LET'S REVIEW A WIREFRAME!
![Page 42: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/42.jpg)
![Page 43: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/43.jpg)
Content alt text, labels,
instructions (off-screen &
onscreen)
Development patterns
Known or simple: tabs,
expand/collapse
Complex development tasks
(do-able)
Not accessible as-is
![Page 44: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/44.jpg)
Content alt text, labels,
instructions (off-screen &
onscreen)
Development patterns
Known or simple: tabs,
expand/collapse
Complex development tasks
(do-able)
Not accessible as-is
![Page 45: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/45.jpg)
# Accessibility
1. Needs alt text
2. Needs alt text
3. Needs alt text
4. Heading
5. Heading
6. Heading
7. Needs dynamic alt text depending
on weather. This will need special
attention from development team
8. How the n 10 days of icons reads
must be logical. Solution will
need discussion
9. Graph. Will need to discuss
approaches with development
Summary of findings for exercise
![Page 46: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/46.jpg)
Content alt text, labels,
instructions (off-screen &
onscreen)
Development patterns
Known or simple: tabs,
expand/collapse
Complex development tasks
(do-able)
Not accessible as-is
![Page 47: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/47.jpg)
Project thinks about accessibility
early
Catch potential issues before development
A head start on content
Identify accessibility development
patterns
Identify complex accessibility interactions
Better requirements for designers,
developers, QA
Goals of a wireframe review
![Page 48: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/48.jpg)
QUESTIONS & COMMENTS
![Page 49: Testing accessibility before development begins: wireframe reviews and annotations](https://reader033.vdocuments.us/reader033/viewer/2022051017/55becd19bb61eb03728b456d/html5/thumbnails/49.jpg)