There is a guideline, right?

Let’s follow it

There is a guideline, right?

1. Learn how every one use the web.
2. Learn the guideline.

How we use web?

How disabilities use web?

How elders use web?

https://www.w3.org/WAI/

4 Principles

Perceivable

Operable

Understandable

Robust

1. Perceivable
2. Operable
3. Understandable
4. Robust

https://www.w3.org/WAI/perspective-videos/

https://www.w3.org/WAI/perspective-videos/

https://www.w3.org/WAI/perspective-videos/

https://www.w3.org/WAI/perspective-videos/

https://www.w3.org/WAI/perspective-videos/

https://www.w3.org/WAI/perspective-videos/

https://www.w3.org/WAI/perspective-videos/

https://www.w3.org/WAI/perspective-videos/

https://www.w3.org/WAI/perspective-videos/

https://www.w3.org/WAI/perspective-videos/

WCAG 2.1

Web Content Accessibility Guidelines

https://www.w3.org/WAI/standards-guidelines/wcag/

https://m.iam.gov.mo/c/news/detail/270e9c8c-4f19-46a9-9dc6-68bb540308c6

http://www.dsi.gov.mo

Enable Voice Over

iOS
https://www.apple.com/accessibility/iphone/vision/

Android
https://support.google.com/accessibility/android/answer/6007100?hl=en

Press both volume keys

Press both volume keys for 3 seconds.

If TalkBack doesn't turn on right away, press both volume keys again for 3 seconds.

Enable Voice Over

macOS
https://support.apple.com/en-mo/guide/voiceover/welcome/mac

Windows: NVDA

https://www.nvaccess.org/download/

Tool: NVDA

Non-Vision Desktop Access

https://www.nvaccess.org/download/

NVDA Recommended add-ons

Focus Highlight

by Takuya Nishimoto

https://addons.nvda-project.org/addons/focusHighlight.en.html​

Headings

• SC 2.4.6 Headings and Labels (AA)
• SC 2.4.10 Section Headings (AAA)

When h1 is missing

When h1 is missing

Reader 1

Reader 2

{h/}

HeadingsMap

https://addons.mozilla.org/en-US/firefox/addon/headingsmap/

Importance of Title

Success Criterion 2.4.2 Page Titled (A)

Where are titles used?

Purpose of Links

SC 2.4.4 Link purpose in context (A) 

SC 2.4.9 Link purpose (link text only) (AAA)

2.4.4 (A)

The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.

2.4.9 (AAA)

A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general.

Link Purpose (Link Only)

Link Purpose (In Context)

Example

Example

Observation Exercise

In your daily web browsing, do you often see links without enough description?

☹️ Example

Note on CAPTCHA

Requiring two different forms of CAPTCHA on a given site ensures that most people with disabilities will find a form they can use.

but...

https://www.w3.org/WAI/WCAG21/Understanding/non-text-content

Note on CAPTCHA

Requiring two different forms of CAPTCHA on a given site ensures that most people with disabilities will find a form they can use.

but...

https://www.w3.org/WAI/WCAG21/Understanding/non-text-content

Organizations motivated to conform to WCAG should be aware of the importance of this topic and should go as far beyond the minimum requirements of the guidelines as possible.

Note on CAPTCHA

• Providing more than two modalities of CAPTCHAs
• Providing access to a human customer service representative who can bypass CAPTCHA
• Not requiring CAPTCHAs for authorized users

https://www.w3.org/WAI/WCAG21/Understanding/non-text-content

Example: gov.uk

https://www.gov.uk/personal-tax-account/sign-in/prove-identity

aria-label

aria-labelledby

aria-describedby

☹️ Example

https://account.gov.mo/zh-hant/activate/​

Example: TED

https://www.ted.com/talks/tyler_dewitt_hey_science_teachers_make_it_fun/transcript

Some Free transcription tools

• Youtube Studio
• Amara
  https://amara.org/
• Web Captioner (for Live)
  https://webcaptioner.com

Benefits of Transcripts

• People who are deaf or hard of hearing.
• People who won't spend the time to listen to the audio or watch the video, but will skim a transcript.
• People who have difficulty processing auditory information, for example, because of cognitive disability.
• People who are not proficient in the language who find it easier to read than listen.
• People with low bandwidth connections who don't want to download the larger audio or video file.
• People who pay for bandwidth usage and thus don't want to download the larger audio or video file. This is often an issue with phones and other mobile devices.
• People who cannot play the audio because they are in a noisy environment and they can't hear it.
• People who cannot play the audio because they are in a quiet environment and they don't want to disturb others.

http://www.uiaccess.com/transcripts/transcripts_on_the_web.html​

Benefits of Transcripts

• People who are deaf or hard of hearing.
• People who won't spend the time to listen to the audio or watch the video, but will skim a transcript.
• People who have difficulty processing auditory information, for example, because of cognitive disability.
• People who are not proficient in the language who find it easier to read than listen.
• People with low bandwidth connections who don't want to download the larger audio or video file.
• People who pay for bandwidth usage and thus don't want to download the larger audio or video file. This is often an issue with phones and other mobile devices.
• People who cannot play the audio because they are in a noisy environment and they can't hear it.
• People who cannot play the audio because they are in a quiet environment and they don't want to disturb others.

http://www.uiaccess.com/transcripts/transcripts_on_the_web.html​

Photo from wikipedia https://en.wikipedia.org/wiki/Tim_Berners-Lee

https://www.w3.org/WAI/