Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
AUX&D MVD
Ian Pouncey, BBC
(Credit: http://blog.cirrusmedia.com.au/designing-for-user-experience)
http://shouldiuseacarousel.com/
http://shouldiuseacarousel.com/
http://shouldiuseacarousel.com/
Colour contrast
Regular sized text and icons must have a contrast ratio of at least 4.5:1
Large text and icons must have a...
Visible focus
A distinguishable focus and hover state must be defined on all focusable elements and controls
https://www.etsy.com/listing/77618623/star-wars-funny-t-shirt-dont-get-cocky
Labels
Labels for all controls and icons must be defined
Larger
Labels
Labels for all controls and icons must be defined
Next
content order
& Semantics
https://www.flickr.com/photos/dullhunk/3525013547/
content order
The order for all content elements must be defined
The position of controls in the content order must be def...
content order
The order for all content elements must be defined
The position of controls in the content order must be def...
Content order
The order for all content elements must be defined
The position of controls in the content order must be def...
Semantics
The semantics for all content elements must be described
Semantics
The semantics for all content elements must be described
unordered List
List Item
Semantics
The semantics for all content elements must be described
Section
Article
Semantics
The semantics for all content elements must be described
Article
Section
Semantics
The semantics for all content elements must be described
Paragraph
<H3>
(sub-heading)
Decorative image
(alt="")
...
Semantics
The semantics for all content elements must be described
Link
Channel
Programme title
Series and episode
Semantics
The semantics for all content elements must be described
Paragraph
<H3>
Decorative image
(alt="")Link
Semantics
The semantics for all content elements must be described
“Highlights” (hidden <H2>)
Interactions
Any changes to the position of focus must be defined
Interactions
Any changes to the position of focus must be defined
13
14
15
16
Interactions
Any changes to the position of focus must be defined
Text
Interactions
Any changes to the position of focus must be defined
Text
Features
http://intricateart.com/my-amusing-cucumbers/
Features
Features
Break the rules
Break the rules
unordered List
List Item
Link
Not in tab order
Hidden from screen readers
Conclusion
Links
• http://www.bbc.co.uk/guidelines/futuremedia/accessibility/
• http://www.bbc.co.uk/guidelines/futuremedia/accessibi...
Accessible UX&D – Minimal Viable Design
Accessible UX&D – Minimal Viable Design
Accessible UX&D – Minimal Viable Design
Accessible UX&D – Minimal Viable Design
Accessible UX&D – Minimal Viable Design
Accessible UX&D – Minimal Viable Design
Upcoming SlideShare
Loading in …5
×

Accessible UX&D – Minimal Viable Design

1,068 views

Published on

Slides from the presentation I gave at Inclusive Design 24 on Global Accessibility Awareness Day 2015
http://www.inclusivedesign24.org/

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Accessible UX&D – Minimal Viable Design

  1. 1. AUX&D MVD Ian Pouncey, BBC
  2. 2. (Credit: http://blog.cirrusmedia.com.au/designing-for-user-experience)
  3. 3. http://shouldiuseacarousel.com/
  4. 4. http://shouldiuseacarousel.com/
  5. 5. http://shouldiuseacarousel.com/
  6. 6. Colour contrast Regular sized text and icons must have a contrast ratio of at least 4.5:1 Large text and icons must have a contrast ratio of at least 3:1
  7. 7. Visible focus A distinguishable focus and hover state must be defined on all focusable elements and controls
  8. 8. https://www.etsy.com/listing/77618623/star-wars-funny-t-shirt-dont-get-cocky
  9. 9. Labels Labels for all controls and icons must be defined Larger
  10. 10. Labels Labels for all controls and icons must be defined Next
  11. 11. content order & Semantics https://www.flickr.com/photos/dullhunk/3525013547/
  12. 12. content order The order for all content elements must be defined The position of controls in the content order must be defined Text
  13. 13. content order The order for all content elements must be defined The position of controls in the content order must be defined Text 1 2 3 4 5 6 7 8 9
  14. 14. Content order The order for all content elements must be defined The position of controls in the content order must be defined 13 14 15 16
  15. 15. Semantics The semantics for all content elements must be described
  16. 16. Semantics The semantics for all content elements must be described unordered List List Item
  17. 17. Semantics The semantics for all content elements must be described Section Article
  18. 18. Semantics The semantics for all content elements must be described Article Section
  19. 19. Semantics The semantics for all content elements must be described Paragraph <H3> (sub-heading) Decorative image (alt="") Link
  20. 20. Semantics The semantics for all content elements must be described Link Channel Programme title Series and episode
  21. 21. Semantics The semantics for all content elements must be described Paragraph <H3> Decorative image (alt="")Link
  22. 22. Semantics The semantics for all content elements must be described “Highlights” (hidden <H2>)
  23. 23. Interactions Any changes to the position of focus must be defined
  24. 24. Interactions Any changes to the position of focus must be defined 13 14 15 16
  25. 25. Interactions Any changes to the position of focus must be defined Text
  26. 26. Interactions Any changes to the position of focus must be defined Text
  27. 27. Features http://intricateart.com/my-amusing-cucumbers/
  28. 28. Features
  29. 29. Features
  30. 30. Break the rules
  31. 31. Break the rules unordered List List Item Link Not in tab order Hidden from screen readers
  32. 32. Conclusion
  33. 33. Links • http://www.bbc.co.uk/guidelines/futuremedia/accessibility/ • http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobil • http://www.w3.org/TR/wai-aria-practices/ • https://cucumber.io/

×