Web Accessibility Recognition Scheme 2015
How to Meet the Accreditation Criteria
(Website Stream)
Office of the Government Chief Information Officer
Digital Inclusion Division
24 October 2014
1
Website Stream – Silver Criteria
No. Judging Criteria
1
Provide meaningful text alternative for non-text contents
2
Provide accessible Flash/Animated contents or allow to skip
3
Allow to perform all operations through a keyboard interface
4
Easy to turn off background sound or set as user-initiated only
5
Provide means to close popup windows
6
Provide clear and informative links
7
Provide accurate and appropriate headings/labels
8
Make website content easy to be used with assistive technologies
9
Make website structure in a consistent navigation mechanism
10
Make website content in meaningful sequence
11
Provide input assistance and error identification and description etc.
12
Provide error prevention for transactions
13
Text can be resized up to 200 percent without loss of content
14
Provide an accessibility statement with contact points
2
2
Website Stream – Gold Criteria
No. Judging Criteria
1
Provide accessible PDFs published in the recent 2 years (i.e. since mid of April 2013)
2
Build webpages with predictable operations
3
Able to skip repetitive blocks
4
Provide multiple ways to retrieve content
5
Build webpages with user-initiated auto-updating
6
Provide sufficient time for users to read the content and operate the function
7
Provide sufficient colour contrast
8
Ensure correct syntax of webpages
9
Provide captions or sign language for 30% of pre-recorded videos published in the
recent 2 years (i.e. since mid of April 2013)
10 Provide meaningful title, summary or description for table header as well as data
3
3
Web Accessibility Recognition Scheme
Testing Steps
Code Scanning (編碼掃描) / Code Review (編碼檢查)
• Total Validator Tools
(http://www.totalvalidator.com)
• A Checker (http://achecker.ca/checker/index.php)
Visual Review (目視檢查)
•
Colour Contrast Checker
(http://snook.ca/technical/colour_contrast/colour.html)
•
ColourZilla
(https://addons.mozilla.org/en-us/firefox/addon/colorzilla/)
•
Vischeck
(http://www.vischeck.com/)
4
4
Web Accessibility Recognition Scheme
Testing Steps
Manual Testing with Screen Reader (使用讀屏軟件進行手動檢測)
•
NVDA (http://www.hkbu.org.hk/en_services4_2.php)
•
JAWS (http://www.freedomscientific.com/Products/Blindness/JAWS)
•
VoiceOver
Testing with Other Tools (使用其他檢測工具)
• ZoomText (http://www.aisquared.com/zoomtext)
Human Testing (使用者測試)
5
5
1. Meaningful Text Alternative
Silver 01
• Non-text contents, such as icons, photos, pictures, images,
banners and maps, should have a text alternative
Screen reader cannot read the picture
A text description that can be read by
the screen reader
6
6
1. Meaningful Alternative Text Description
Silver 01
Testing: Code Review, Manual Testing with Screen Reader
alt="Web Accessibility
Campaign - Making
Web Content Available
for All”
Press F12 in browser software to view the code
Source : www.webforall.gov.hk/en
7
7
Silver 02
2. Flash / Animated Content
• Provide accessible Flash/Animated content or allow skip
function
Skip
Flash content blocks the user from
getting to main content
Include accessible “Skip” option
allow user to skip Flash content
8
8
Silver 02
2. Flash / Animated Content
Testing: Visual Review, Manual Testing with Screen Reader
e.g. 1
Accessible
e.g. 2
Provide
Stop or
Next Option
Source : www.webforall.gov.hk/en
9
9
3. Keyboard Interface
Silver 03
• Functions on a webpage are operable through a keyboard
interface; the operation shall not enforce a time limit for
individual keystrokes
People using a keyboard interface
may not be able to navigate to the
help function provided
Allow users to access all content and
functions with a keyboard interface
10
10
3. Keyboard Interface
Silver 03
Testing: Code Review, Manual Testing with Screen Reader
Allow users to access all content and
functions with a keyboard interface
Source : www.webforall.gov.hk
11
11
Silver 04
4. Background Sound
• If audio plays or stop automatically for more than 3
seconds, a pause function is required
About Web Accessibility -
About Web Accessibility -
Turn off background sound
The background sound will begin
playing automatically in five seconds
Include a link to turn off the background
sound at the beginning of the webpage
12
12
4. Background Sound
Silver 04
Testing: Visual Review, Manual Testing with Screen Reader
Turn off background sound option
Source : http://s1.ecard.gov.hk/ecard/main
13
13
5. Popup Windows
Silver 05
• A close button to allow closing the popup window through
keyboard interfaces is provided to close
No ways to close the popup window
using a keyboard
Include a Close button to close the
popup window
14
14
Silver 05
5. Popup Windows
Testing: Visual Review, Manual Testing with Screen Reader
Close
Source : www.gov.hk
15
15
6. Links
Silver 06
• Either the link text alone or the text preceding the link is
clear and meaningful
The link "Yes" is ambiguous and does
not really convey much meaning
Link labels should be more descriptive
and self-explanatory
16
16
6. Links
Silver 06
Testing: Visual Review, Manual Testing with Screen Reader
Source : www.webforall.gov.hk/en
17
17
Silver 07
7. Headings/Labels
• Use clear and appropriate headings and labels
Heading does not accurately
describe the purpose of the content
Detailed heading that accurately
describes the content
18
18
7. Headings/Labels
Silver 07
Testing: Visual Review and Human Testing
19
19
8. Website Structure and Content
Silver 08
• Use heading mark-up (h1..h6) to identify headings in the
content.
Missing heading structure
Provide semantic code for
headings (h1,h2,h3) in the content
20
20
8. Website Structure and Content
Silver 08
Testing: Code Review, Manual Testing with Screen Reader
21
21
9. Consistent Navigation Mechanism
Silver 09
• Navigational mechanism should be consistent
The style is not consistent
across multiple webpages
Ensure the navigation is consistent
across multiple webpages
22
22
9. Consistent Navigation Mechanism
Silver 09
Testing: Visual Review
Source : www.ogcio.gov.hk
23
23
Silver 10
10. Meaningful Sequence
• If webpage content needs to be read in a certain order to
make sense, webpage shall be written/coded in a way which
indicates this order
• Webpage, especially web form, shall be coded in a logical
manner when read by screen reader
Focus order not intuitive to user
Focus order in logical manner
24
24
10. Meaningful Sequence
Silver 10
Testing: Manual Testing with Screen Reader
Use a screen reader to read or press the "Tab" key to go through
the input fields
25
25
11. Input Assistance
Silver 11
• Provide input assistance such as proper labels for user
input, error identification, description and suggestions etc.
The error message is located at the
bottom of the webpage and does not
provide an adequate description of
what needs to be corrected
The error message is located at the
top provides clear explanation of
what needs to be corrected
26
26
11. Input Assistance
Silver 11
Testing: Manual Testing with Screen Reader
27
27
Silver 12
12. Error Prevention
• Provide error prevention for transactions
User is forced to place the order
without a confirmation process
Allow the user to first confirm and give
him/her the option to change any of the
details before the final submission
28
28
12. Error Prevention
Silver 12
Testing: Manual Testing with Screen Reader
29
29
Silver 13
13. Text Resize
• Text can be resized up to 200 % without loss of content
No text-resize function
Text-resize function is available
30
30
13. Text Resize
Silver 13
Testing: Visual Review and Human Testing
Source : www.ogcio.gov.hk
31
31
14. Accessibility Statement
Silver 14
• Provide an accessibility statement with contact points for
users when they encounter accessibility problems
32
32
14. Accessibility Statement
Silver 14
Testing: Visual Review
33
33
Gold 01
15. Accessible PDFs
• Provide accessible PDFs
Scanned Image not accessible
Text-based accessible PDF
34
34
15. Accessible PDFs
Gold 01
Testing: Manual Testing with Screen Reader
• PDF Accessibility Checker (Free ) http://www.access-for-all.ch/en/pdf-lab/pdf-accessibility-checkerpac.html
• Adobe Acrobat Accessibility Check (Paid)
http://www.adobe.com/accessibility.html
35
35
Gold 02
16. Predictable Operations
• Build webpages with predictable operations
A field receives focus, and a help
dialogue box describing the field and
providing options opens
Allow the user to activate "Help" only
at their choice
36
36
16. Predictable Operations
Gold 02
Testing: Visual Review and Manual Testing with Screen Reader
37
37
17. Skip Repetitive Blocks
Gold 03
• Ensure users have the ability to skip past repetitive blocks of
content (e.g. the navigation at the top of the webpage)
People using screen readers need to
read all the navigation information
before getting to the target content
Add a "Skip to content" link at the
top of each webpage
38
38
17. Skip Repetitive Blocks
Gold 03
Testing: Visual & Code Review, Manual Testing with Screen
Reader
39
39
18. Multiple Ways
Gold 04
• Provide more than one way to access a webpage such as
using a search function, site map, standard navigation, etc.
The only way to navigate around
website is through the main
navigation
More than one way to navigate
around website
40
40
18. Multiple Ways
Gold 04
Testing: Visual Review
Source : www.ogcio.gov.hk
41
41
19. User-initiated Auto-updating
Gold 05
• Allow the user to pause, stop or hide any moving
information that starts automatically and lasts more than
five seconds
Update automatically as content
changes
Provide a function to turn off the
auto updating
42
42
19. User-initiated Auto-updating
Gold 05
Testing: Visual Review, Manual Testing with Screen Reader
Source : www.ogcio.gov.hk/en/news_and_publications/press_releases/
43
43
Gold 06
20. Time-limited Function
• Provide users enough time to read the content or operate
the function
Warn the user that time is about to
expire
Allow the user to extend the time
44
44
20. Time-limited Function
Gold 06
Testing: Visual Review, Manual Testing with Screen Reader
Source :
http://www.ogcio.gov.hk/en/community/web_accessibility/handbook/liv
e_example/web_access_wcag_221.htm
45
45
21. Sufficient Colour Contrast
Gold 07
• The visual presentation of text and images of text has a
contrast ratio of at least 4.5:1.
• Logo or brand name is exempted
Poor background contrast
(2.74:1)
Easier to read with higher contrast
(21:1)
46
46
21. Sufficient Colour Contrast
Gold 07
Testing: Colour contrast check
http://snook.ca/technical/colour_contrast/colour.html
47
47
21. Sufficient Colour Contrast
Gold 07
Testing: Colour blind check
http://www.vischeck.com/vischeck/
www.ogcio.gov.hk
How the webpage looks to a
person with a red/green color
deficit (deuteranopia)
48
48
Gold 08
22. Compatibility
• Ensure correct syntax of webpages for compatibility with
browsers and assistive technologies
Incorrect syntax
Correct syntax
49
49
22. Compatibility
Gold 08
Testing: Code scanning
e.g. Achecker - http://achecker.ca/checker/index.php
WAVE – http://wave.webaim.org/
Total Validator - http://www.totalvalidator.com/
50
50
Gold 09
23. Video
• Provide captions or sign language for 30% of pre-recorded
videos and audio content published in the recent 2 years
(base on full website)
Missing captions
Provide captions
51
51
23. Video
Gold 09
Testing: Visual Review
Source :
http://www.ogcio.gov.hk/en/community/web_accessibility/recognition_s
cheme/video_gallery/
52
52
Gold 10
24. Table Header and Data
• Provide meaningful title, summary or description for table
header as well as data
Monday to Friday
General Enquiry
2582 4606
8:45 am to 12:45 pm
1:45 pm to 5:45 pm
Web Accessibility
2582 6079
9:00 am to 1:00 pm
2:00 pm to 5:30 pm
No header and title for the table
Enquiry Information
Hotline
Telephone
Office Hours
General Enquiry
2582 4606
8:45 am to 12:45 pm
1:45 pm to 5:45 pm
Web Accessibility
2582 6079
9:00 am to 1:00 pm
2:00 pm to 5:30 pm
Provide meaningful header and column title for the table
53
53
24. Table Header and Data
Gold 10
Testing: Visual Review, Manual Testing with Screen Reader
54
54
Frequency Asked Questions
Q1: How to count the number of PDFs?
A1: We will perform the assessment on PDF, which:
a. Within the scope of assessment
b. Published in the most recent 2 years
Assessment will perform on the latest version for same
types’ PDF, e.g. monthly newsletter
Q2: What we can do if we do not have any software to make
PDF files (e.g. leaflet) accessible?
A2: You can put the content into an accessible text file and
place next to the PDF file as alternative.
55
55
Frequency Asked Questions
Q3: How to make the PDF accessible?
•
Good example – text description for images
Image content is explicitly described in
the PDF document
Source from www.ha.org
Text alternative is added for the
image through (替代文字)
56
56
Frequency Asked Questions
• Adopt logical reading order
2
3
1
Logical reading order
Source from www.ha.org
57
57
Frequency Asked Questions
• Good example – provide adjacent alternative format
Content in HTML format provided side by sides
Source from www.studenthealth.gov.hk
58
58
Frequency Asked Questions
• Example –document with signature
Accessible PDF
Scanned Image
+
Accessible PDF
Inaccessible PDF +
alternative version
59
59
Frequency Asked Questions
Q4: How to enhance accessibility for multi-media contents?
A4: Scenarios
Minimum level under special circumstances
New video
Follow judging criteria G09;
May consider audio description
Corporate video
Follow judging criteria G09
Video posted in social
media platform
Follow judging criteria G09
Guest speaker video
Provide presentation slides and/or a
summary
Video without source
Provide a summary and/or script
Video without script
Provide a summary
Third party video
Provide a description or summary
60
60
APPLY NOW!!
Application Deadline : 31 December 2014
Most Favourite Website : 2 March 2015
61
61
Thank you!
62
62