Web Accessibility Lesson 1
Welcome!
Who is Thomas?
WorldSkills?
1.1 What is web accessibility?
1.2 Why we need accessibility on web
1.3 What difficulties people face when using web pages
1.4 Target users of accessibility web pages
1.5 Introducing to W3C Web Accessibility Initiative (WAI)
1.6 Introducing to Web Content Accessibility Guideline
1.7 Understanding the 3 levels of WCAG: A, AA, AAA
1.8 Introducing debug tools for web accessibility
1.9 Example of accessibility on web
Lesson 1
2.1 Content structure on web
2.2 Title in web page
2.3 Headings and sub-headings in web page
2.4 Importance of content order
2.5 Title and purpose for links
2.6 Using abbr for abbreviation term
Lesson 2
3.1 Alt and title for images
3.2 Examples of image links
3.3 Video playback and download
3.4 Video caption
Lesson 3
4.1 Configuring focus order with tabindex
4.2 Accessibility in inputs
4.3 Using label
4.4 Using placeholder
4.5 Accessibility for submit buttons
4.6 Error notice
4.7 Confirming the form submissions
4.8 Inputs cache
Lesson 4
5.1 Using colors
5.2 Color contrast
5.3 Able to adjust font size
5.4 Pasuable automatic content updates
5.5 Course summary and conclusion
Lesson 5
Lesson 6
Let’s get started
The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect. —Tim Berners-Lee, W3C Director and inventor of the World Wide Web
Photo from wikipedia https://en.wikipedia.org/wiki/Tim_Berners-Lee
Web Accessibility, essential for some, useful for all
—Web Accessibility Initiative
https://www.w3.org/WAI/
Let’s check the perspectives
Let’s check the perspectives
https://www.w3.org/WAI/perspective-videos/
Let’s check the perspectives
https://www.w3.org/WAI/perspective-videos/
Let’s check the perspectives
https://www.w3.org/WAI/perspective-videos/
Let’s check the perspectives
https://www.w3.org/WAI/perspective-videos/
Let’s check the perspectives
https://www.w3.org/WAI/perspective-videos/
Let’s check the perspectives
https://www.w3.org/WAI/perspective-videos/
Let’s check the perspectives
https://www.w3.org/WAI/perspective-videos/
Let’s check the perspectives
https://www.w3.org/WAI/perspective-videos/
Let’s check the perspectives
https://www.w3.org/WAI/perspective-videos/
Let’s check the perspectives
https://www.w3.org/WAI/perspective-videos/
https://www.w3.org/WAI/
Web Content Accessibility Guidelines
Case Study: 市政署網站
I found a fun post, here you are.
https://m.iam.gov.mo/c/news/detail/ba040780-eecb-4e08-bac9-7b219184e7fc
WAVE
https://wave.webaim.org
Tips to make web accessible
then progressive enhancement.
Tips to make web accessible
iOS
https://www.apple.com/accessibility/iphone/vision/
Android
https://support.google.com/accessibility/android/answer/6007100?hl=en
Press both volume keys for 3 seconds.
If TalkBack doesn't turn on right away, press both volume keys again for 3 seconds.