A Beautiful Design Can Also Be Accessible
Speaker: Toufic Sbeiti
Twitter: @touficsbeiti
Slides
- 1 billion people with some form of disability in the world (smallest minority)
- Disability can be permanent, temporary, situational (Microsoft Desgin Inclusive toolkit)
- 80% of users used closed captions and they don’t have disability
- Accessible Multimedia Player
- you need accessible multimedia player: control of video,
- closed captions
- Transcriptions: helps, SEO robots search
- Use of Color
- Sufficient contrast between text / background
- Don’t use colour alone to convey a message
- Photos and Images
- Use alt image properly. If decorative, just add empty string.
- If you need to many sentences to describe the image, then you might require to add text in the page itself.
- Avoid usage: Picture of, Photo of,
- Webpage Layout
- Page Title, unique & descriptive
- Headings of the page need to be organized & ordered correctly
- Each section should have a heading
- Screen readers can jump using headings & sections of the page
- Content order is clear & logic
- right -> left -> top -> bottom
- versus
- top -> bottom -> right-> left
- Link clear & unique
- Keyboard focus should be visible
- Consistent navigation order
- Animations on website
- Add mechanism to pause, stop, hide animations on your product
Resources
- Color blindness simulator for windows, mac and linux: https://colororacle.org/
- Colour contrast checker https://developer.paciellogroup.com/resources/contrastanalyser/
- https://www.getstark.co/ this is a good tool for sketch xd and figma, -most of the stuff you need a yearly plan