accessible ux&d – minimal viable design
TRANSCRIPT
AUX&D MVDIan Pouncey, BBC
(Credit: http://blog.cirrusmedia.com.au/designing-for-user-experience)
Colour contrastRegular 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
Larger
Visible focusA 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
LabelsLabels for all controls and icons must be defined
Larger
LabelsLabels for all controls and icons must be defined
Larger
Next
content order& Semantics
https://www.flickr.com/photos/dullhunk/3525013547/
content orderThe order for all content elements must be defined
The position of controls in the content order must be defined
Text
content orderThe 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
Content orderThe order for all content elements must be defined
The position of controls in the content order must be defined
1314
15
16
SemanticsThe semantics for all content elements must be described
SemanticsThe semantics for all content elements must be described
unordered List
List Item
SemanticsThe semantics for all content elements must be described
Section
Article
SemanticsThe semantics for all content elements must be described
Article
Section
SemanticsThe semantics for all content elements must be described
Paragraph
<H3>(sub-heading)
Decorative image(alt="")
Link
SemanticsThe semantics for all content elements must be described
LinkChannel
Programme titleSeries and episode
SemanticsThe semantics for all content elements must be described
Paragraph
<H3>
Decorative image(alt="")Link
SemanticsThe semantics for all content elements must be described
“Highlights” (hidden <H2>)
InteractionsAny changes to the position of focus must be defined
InteractionsAny changes to the position of focus must be defined
1314
15
16
InteractionsAny changes to the position of focus must be defined
Text
InteractionsAny changes to the position of focus must be defined
Text
Features
Features
Break the rules
Break the rules
unordered List
List Item
Link
Not in tab orderHidden from screen readers
Conclusion
Links
• http://www.bbc.co.uk/guidelines/futuremedia/accessibility/
• http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/user-experience
• http://www.w3.org/TR/wai-aria-practices/
• https://cucumber.io/