A practical guide for web designers

1. Ottawa - Toronto
October 2020
A practical guide for web designers
A beautiful design can also
be accessible
@TouficSbeiti

2. Today’s agenda is a summary of
answers I provided my clients in the
last years
• Multimedia content such as video and audio files
• Images
• Use of color
• Web page content and layout
• Animated content

3. In Canada
One in seven Canadians aged 15 years or older
(3.8 million) reported a disability

4. Around the world

6. Audio and video files
• Accessible multimedia player
• Close captions
• Transcript

7. 7

8. Practical tools for web content accessibility testing 8

9. Use of color
• Sufficient contrast between text and its background
• Color is not used as the only visual means of conveying
information

10. 4.5:1 for normal size text
3:1 for large text
(18 point text or 14 point bold text)

16. No:
35% No:
35%
Yes:
65% Yes:
65%

19. Photos and Images
Choosing appropriate text alternatives
Imagine that you’re reading the web page aloud over the phone
Length
More than a short sentence is needed? Consider text version
Superfluous information
Avoid words like “image”, “icon”, “picture”
Consistent use of icons
use the same icon as visual aid for same function

23. Webpage layout
• Title is unique and descriptive
• Headings are identified and ordered correctly
• Content order is clear and logic
• Clear and unique text link
• Keyboard focus indicator is visible
• Consistent navigation order

24. Page title is unique and descriptive
• Screen reader
• Search – results page

25. Headings are identified and ordered
correctly
• Divide content
• Screen reader
• SEO
• Respect the hierarchy
• Don’t use headings for styling only

26. Content order is clear and logic
1 2
3 4
1 3
2 4

27. Clear and unique link text

28. Keyboard focus indicator is visible

29. Consistent navigation order

30. Animated content
Yes You Can … but

31. Mechanism to pause, stop, or hide
moving, blinking or scrolling information
that starts automatically and lasts more
than five seconds

32. Mechanism to pause, stop, or hide auto-
updating information that starts
automatically and is presented in parallel
with other content

33. Nothing flashes more than 3 times in one
second period

34. • Photosensitive Epilepsy
Analysis Tool (PEAT)
• Identify content that may
induce seizures in people with
photosensitive seizure
disorders

36. #a11yTO for my slides
Merci beaucoup!