Accessibility in Practice: Real world design challenges Action for Blind People website design & build. Guest Lecture at MSc Digital Inclusion, Middlesex University. 26th September 2011

1. Accessibility in Practice
Real world design challenges
Action for Blind People
website design & build
Sandi Wassmer, Guest Lecturer
MSc Digital Inclusion, Middlesex University
26th September 2011

2. A website is a product that
people interact with
Accessibility is not standalone
It is one of many design
considerations that competes to
meet a project's objectives

3. If you don't know why, what's the point?
Purpose: What's the purpose?
Audience: Who's it for?
Objectives: What must the Audience do to
fulfil the Purpose?
Plan: How will they do it?

4. The Team
Relationships underpin everything.
Knowledge, skill and experience
are meaningless without respect,
understanding & communication.

5. Considerations
Content Types:
‣ Text
‣ Graphics
‣ Images
‣ Audio
‣ Video
‣ Downloadable Documents

6. Considerations
Design:
‣ Conceptual
‣ Visual
‣ User Interface
‣ Information Architecture
‣ Interaction

7. Considerations
Client Side Development:
‣ Content HTML
‣ Style CSS
‣ Experience Javascript

8. Considerations
Server Side Development:
‣ CMS
‣ Database
‣ Programming

9. Considerations
Best Practices:
‣ Design
‣ Development
‣ Content Strategy
‣ Web Standards
‣ User Experience
‣ Usability
‣ Accessibility
‣ User Testing

10. User Experts are involved from the start
Learning: collating existing knowledge, conducting
market research, analysis, reporting
Scoping: functional scoping, technical scoping, use cases
documentation
Prototyping: schematics, user journeys, wireframes, user
interactions
Testing: features & functionality, task completion,
accessibility conformance, markup validation,
browser & device compatibility, assistive
technologies

11. Laying the foundation
‣ Clean semantic markup
‣ XHTML 1.0 Strict vs HTML 4.01

12. User Interfaces
‣ Intuitive
‣ Consistent
‣ Memorable

13. Information Architecture
‣ Well Structured
‣ Meaningful
‣ Consistent
‣ Informative

14. Findability
‣ Search
‣ Filter
‣ Navigation
‣ Sitemap

15. Presentation
‣ Style Switcher
‣ Keyboard Focus
‣ Screenreader Navigation
‣ Disable CSS
‣ Printability

16. Presentation: Style Switcher

17. Presentation: Keyboard Focus

18. Presentation: Screenreader Navigation

19. Presentation: Disable CSS

20. Presentation: Printability

21. Interactions
‣ Instructions
‣ Error Prevention
‣ Error Handling
‣ Success

22. WCAG 2.0: Think. Don't Tick.
1.4.4 Resize text: "....text can be resized
without assistive technology up to 200
percent" (Level AA)
200 percent of what?

23. WCAG 2.0: Think. Don't Tick.
3.1.5 Reading Level: When text requires reading ability
more advanced than the lower secondary education
level after removal of proper names and titles,
supplemental content, or a version that does not
require reading ability more advanced than the lower
secondary education level, is available. (Level AAA)
Sure. Right after I rewrite War and Peace.

24. WCAG 2.0: Think. Don't Tick.
2.4.4 Link Purpose (In Context): "The purpose of each
link can be determined from the link text alone or
from the link text together with its programmatically
determined link context, ...." (Level A)
Made sense until we tested with screen
reader users who group links out of context.

25. WCAG 2.0: Think. Don't Tick.
1.1.1 Non-text Content: "All non-text
content that is presented to the user has a
text alternative that serves the equivalent
purpose..." (Level A)
Is the purpose to describe or
convey meaning?

26. Testing, Testing, Testing
Experts: test the whole website for
conformance against known
standards and objectives
Users: are set a series of tasks to
complete that determine whether
a website is fit for purpose

27. Any Questions?
Transcript of this presentation available for Download
2011 Sandi Wassmer