Siteimprove - The myth of accessibility uncovered uk Siteimprove Customer Workshop June 2013

1. The myth of accessibility
uncovered
How accessibility affects the users of your
website
08-11-13
1

2. Users and their technologies
08-11-13
2

3. Reading difficulties
• Needs the ability to highlight all
texts and have it read aloud
– When having text in images make
sure that there is an equivalent alt
text
• Can have a need to stop / hide
moving content
• (Consider reading level)
08-11-13
3

4. Low vision
•
'There is often a need to be able to adapt text
–
–
–
•
•
•
•
•
•
A need to change colours for text and background
Need to be able to resize text
A problem with text in image
May find there is a problem with forms given in
columns / content belonging together but not visually
close
A problem with images conveying information
Problems with information only conveyed by colour
Needs sufficient contrasts between text and background
Can have a problem with change in context / focus
unexpectedly
Need text or audio description for videos
08-11-13
4

5. Platforms
• Meeting the W3C syntax
requirements
• Responsive design / device
specific versions also help
08-11-13
5

6. Colour blindness
• Can experience problems with
information only conveyed by
use of colour
• Needs sufficient contrasts
between text and image
08-11-13
6

7. Motion impairments
•
•
•
Problems with things only being
accessible with a computer mouse and
not from the keyboard alone
Form elements being small and not
connected to control
Need a meaningful sequence for
content and for the focus order
– Focus needs to be visible
•
•
Can have a problem with change in
context / focus unexpectedly
Needs to be able to bypass blocks of
repeated content (such as global menu)
08-11-13
7

8. Deafness
• Needs captions for videos
• Might need a transcript of video
• (Consider signing)
08-11-13
8

9. Blindness
•
•
•
•
•
•
•
Cannot access non-text content such as
images, Flash animations and the likes - need
a text alternative
Need text or audio description for videos
Need information about elements and their
relationship / Tagging: headings, forms,
semantic elements, tables, …
The need for content to have a meaningful
sequence
Cannot use sensory characteristics used to
identify content
Cannot use elements identified only by colour
Need to be able to control audio that starts
automatically (stop / pause / control volume)
08-11-13
9

10. Blindness II
•
Needs to be able to access everything from
the keyboard alone
–
•
•
•
•
•
A meaningful focus order is necessary
Can have a need to stop / hide moving
content
Needs to be able to bypass blocks of repeated
content (such as global menu)
Need link texts that makes sense (not ‘read
more’, ‘click here’ etc.)
Need for pages to have a language defined
Can have a problem with change in context /
focus unexpectedly
08-11-13
10

11. For all
•
•
•
•
•
Provide adjustable time limits to give everyone
a chance to work through content
Give all pages titles that are informative about
the page and it’s content
Provide multiple ways of finding pages: Search
/ Index / Site Map
Have a website that looks and works in a
consistent manner
When providing forms:
–
–
–
Always give labels / introductions
Provide error identification and provide it in text
identifying the field
Validate input and possibly provide a summary of
entered data
08-11-13
11

12. 08-11-13
12

13. END OF PART I
08-11-13
13

14. Accessibility Top 5
Text for everyone
Versatility
Association
Colour for everyone
Robustness
08-11-13
14

15. Text for everyone
•
Make sure all text can be highlighted
and read aloud so that screen readers
and reading tools can access them
–
–
–
–
•
Turning off style sheets
Try it with reading tools
Simulations such as Fangs
Test with real users!
Avoid images of text where possible.
Where not, make sure that text
alternatives are equivalent
08-11-13
15

16. Text for everyone II
• Give alternative text for
images for those (screen
readers and search
engines) that cannot see
an image. An alternative
text must reflect the
purpose of the image.
08-11-13
Decorative /
creating visual
context: no
alternative text
Having a function:
describe the
function
Linking:
Describe
destination
16

17. Versatility
Create a website that can be used by
as many as possible, in as many ways
as possible according to user needs.
•All functionality can be used with a
mouse
•All functionality can be used without
a mouse – from the keyboard alone.
•Users can adapt colour and font
according to specific needs.
08-11-13
17

18. Association
• Text, headings, buttons, fields
etc. that are logically connected
must also visually be connected.
• Make sure it is also connected in
the code.
08-11-13
18

19. Colours for all
•
•
Make sure that the colour of the
background a and colour of the text is
in sufficient contrast to each other. That
way people with low vision can also
read it.
Make sure you do not give information
to the user only by use of colour (such
as saying ‘In the green box you will
find…’). Otherwise it can create
problems for both users with low vision
or no vision or people with colour
blindness.
08-11-13
Can you read this?
Can you read this?
19

20. Robustness
• Have a consistent design
throughout the website
• Follow known conventions
• Follow sthe standard for the
format you are publishing in (for
example xhtml 4.1 syntax) – this
will optimise your website for
many different platforms and
user agents
08-11-13
20

21. SEO & Accessibility
•
•
•
•
•
Page titles
(Alternative text for images)
Headings
Link texts
Text in image
08-11-13
21

22. More information
• Next webinar: Working with
content that requires accessible
alternatives – sign up!
– June 12th: Working with content that
requires accessible alternatives
•
Whitepaper
08-11-13
22