Designing accessible web experiences
•
0 likes•659 views
This document discusses Global Accessibility Awareness Day and designing accessible web experiences. It begins with an introduction to Global Accessibility Awareness Day, which aims to raise awareness of digital accessibility and people with disabilities. It then covers key topics like understanding what accessibility means, knowing your customers and their disabilities, and examples of best practices for accessibility. These include using proper headings and structure, adding alt text to images, ensuring keyboard navigation and tab order, using sufficient color contrast, and following user-centered design principles and policies. The overall message is that accessibility should be considered from the beginning of the design process in order to provide an inclusive experience for all users.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Designing accessible web experiences
Similar to Designing accessible web experiences (20)
More from User Vision
More from User Vision (20)
Recently uploaded
Recently uploaded (20)
Designing accessible web experiences
- 1. Global Accessibility Awareness Day: Edward Chandler Principal UX Consultant May 2015 Designing Accessible Web Experiences
- 2. Outline Introduction What do we mean by accessibility Knowing your customers Best practice examples for designing accessible experiences Strategy and Policy
- 4. Global Accessibility Awareness Day Global Accessibility Awareness Day is a community-driven effort whose goal is to dedicate one day to raising the profile of and introducing the topic of digital (web, software, mobile app/device etc.) accessibility and people with different disabilities to the broadest audience possible
- 5. Global Accessibility Awareness Day The idea of a Global Accessibility Awareness Day started after Joe Devon, an LA based developer wrote a blog post entitled: “Accessibility know-how needs to go mainstream with developers” This was picked up on Jennison Asuncion, an accessibility expert from Toronto
- 6. Thinking about web design Design Release Build Concept Live
- 7. Thinking about web design Design Release Build Concept If you’re lucky… We have a problem… Live We’re going… We need to change…
- 9. Thinking about web design Design Release Build Concept Live
- 10. A little bit about me
- 11. Outline What do we mean by accessibility
- 12. An inaccessible site locks disabled people out Ultimately it is developers that enable web content to function with assistive devices used by disabled users by writing code that is accessible Whilst web accessibility is delivered by the developers, its origins start with the management team, product owners and designers Web accessibility is essential for equal opportunity Open it up not dumb it down What is web accessibility?
- 13. Tim Berners-Lee "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
- 14. What is web accessibility?
- 15. Identifying web accessibility Web Content Accessibility Guidelines 2.0 Grouped by four principles • Perceivable • Operable • Understandable • Robust 3 Success Criteria: Level A | Level AA |
- 16. Outline Knowing your customers
- 17. Know your market – who are your customers?
- 18. Major Categories of Disabilities Visual Blindness, low vision, colour blindness Hearing Deaf and hard of hearing Motor Inability to use a mouse, limited motor control Cognitive Learning disability, distractibility, dyslexia
- 19. Looking at the next generation
- 20. Whilst focusing on their customers’ needs
- 21. Outline • Headings • Images • Forms • Keyboard accessibility • Colour and contrast • Good web UX Design
- 22. HEADINGS AND STRUCTURE Identifying heading and page structural elements (such as paragraphs and lists) allows blind people to use internal navigation ‘hotkeys’ provided by the screen reader to jump from section to section. Using headings correctly aids navigation and page structure
- 24. What do you think the headings are on this page:
- 25. Communicating design concepts: Headings Heading 1 Heading 2 Heading 2
- 26. IMAGES Being a visual representation, providing a text description (alt text) enables blind people to understand the context of the image
- 27. Removing information that enables decision making
- 28. What should the alt text be? a) Dubai remixes the beat b) Hello Tomorrow, Emirates c) Experience iconic nights out in Dubai with Emirates Airlines
- 29. Who should choose it?
- 30. This image needs an alt tag These images do not need an alt tag
- 31. KEYBOARD ACCESSIBILITY MAKE ALL CONTENT AVAILABLE “SKIP TO” LINKS VISIBLE FOCUS TAB ORDER
- 33. Keyboard accessibility Important factors…. If the page has been designed by you to follow a flow Imagine using a keyboard to navigate - what is the next thing that needs to happen? Shouldn’t you decide what that reading order is for all users?? Shouldn’t you decide what needs to be visible to users??
- 35. Using colour to optimise the experience
- 36. Good web design also produces more accessible web experiences: Simple and clear homepage Navigation (IA) Strong Product pages Seamless checkout and payment UX design enables better accessibility
- 37. Outline Strategy and Policy
- 38. Developers are at the coal face But it starts with…. Design teams And product owners / senior management team
- 39. User Centred Design Policy It sets the agenda by: Outlining responsibilities for all parties Providing business reasons for engaging customers Stating who the users /customers are Providing a project management framework for including user needs and usability testing It also manages expectations and means the business delivers customer centric solutions
- 40. What “experience” is the design / development based on – if there is no user input?
- 41. ARE YOU EXPANDING YOUR REACH OR IGNORING MARKETS?