This document discusses responsive design and mobile accessibility. It provides resources for best practices in responsive web design (RWD) and accessibility. It explains that RWD and accessibility can support each other by separating content from design and ensuring support for a variety of input devices. The document then provides tips for mobile-friendly and accessible design, including using a fluid layout, responsive images, progressive enhancement, and standard platform controls. It emphasizes starting with a mobile-first approach and testing pages by disabling stylesheets and images, navigating only with a keyboard, and checking page content at different zoom levels.

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