Siteimprove - Accessibility and multiple platforms Siteimprove Customer Workshop October 2013

1. Responsive Design & Mobile devices
Accessibility
31-10-13
@SiteimproveUK #Siteimprove13
1

2. Resources available
• A lot of Best Practice help and
test cases on RWD
• W3C has established a
Mobile Accessibility Task Force
• BBC Mobile Accessibility
Standards and Guidelines
31-10-13
2

3. RWD & Accessibility can support each other
• Focus on support of separating
content from design
• Focus on a variety of input
devices
• Ensuring both layout and
following standards
31-10-13
3

4. Same web guidelines & principles
• A design & layout is a suggestion –
not a fixed presentation
• Users should always be able to adapt
content to specific needs
• Provide a link to the 'Mobile site’ on
desktop and a link to the 'Full site’ on
the mobile version. This can be placed
discretely in the footer
31-10-13
4

5. Interaction methods
Interaction methods vary across
devices. Three main interaction
methods should be considered when
designing the UI:
– Focus Based: The browser focus
"jumps" from element to element;
– Pointer Based: Key-based navigation
controls a pointer that can cover any
part of the screen;
– Touch Based: Events are related
directly to a finger or stylus touch
position on the screen.
31-10-13
5

6. Tips
• Make areas easy to hit with fingers &
the input area device friendly
• Think about colour: colour blindness
and low vision, contrasts
• Make hierarchy easy to see
• Make sure the sequence of content is
meaningful even without style sheets
31-10-13
6

7. Tips
• Pop Ups – they should fit on all
viewports and have a close button
• Make all text selectable
• Have a flexible layout
– Fluid Foundation
– No fixed width layouts
– Responsive Images
– Media Queries
31-10-13
7

8. Mobile First & Progressive Enhancement
•
•
•
•
•
•
Mobile first
Designing for the smallest screen
resolution first (<320px)
Use it as the base for the next, larger
screen resolutions
building for the less-capable devices /
browsers first
Incrementally enhance for the more
capable ones
Use ARIA to make javascript widgets
and ajax accessible
31-10-13
8

9. Use standard platform controls, elements, and objects
• Assistive technologies are built on
standards
• Semantic markup really helps
• Custom controls tend to not
implement accessibility as fully as a
standard platform control
–
–
–
–
–
Button = button (not link)
Link = link
Heading = heading
List = list
…
31-10-13
9

10. Don’t
• Don’t lock the design - Keep pinchzoom enabled
• Don’t hide important content in
background images
• Don’t give instructions solely based on
location or colour
• Avoid using images of text
31-10-13
10

11. How do you test?
• Look at web pages with style sheets disabled
– Is the order of content meaningful
– Has any content been hidden with CSS
• Try to navigate from the keyboard alone and
on a touch device
– Menus, links, forms, expands
– Layers and popups – can they be opened and
closed from the keyboard
• Try to zoom to different sizes to check no
content goes missing
• Check labels for form elements
31-10-13
11

12. How do you test images?
• Disable images – check if
alternative texts coveys purpose of
images
• Check that background images are
not conveying information
• Check that alternative texts reflect
the purpose of an image
31-10-13
12

13. Sneak Peak!
31-10-13
13

14. A lot of issues – prioritising
• Ability to ignore checks
– Globally on entire website
– On specific pages
• Ability to ignore items
– Globally on entire website
– On specific pages
31-10-13
14

15. Page Specific
31-10-13
15

16. Images: This page / all pages
31-10-13
16

17. Tell your collegues why
31-10-13
17

18. History of decisions
31-10-13
18

19. Site specific
31-10-13
19

20. On all pages - globally
31-10-13
20

21. Tell your collegues why
31-10-13
21

22. History of decisions
31-10-13
22

23. 31-10-13
23

24. 37 issues
4 issues
12 issues
31-10-13
24

25. Thank you!
31-10-13
@SiteimproveUK #Siteimprove13
25