Web Accessibility Implementation
Office of the Government Chief Information Officer
Digital Inclusion Division
5 December 2014
1
Agenda
1. Web Accessibility Recognition Scheme 2015
•
•
Website Stream
Mobile App Stream
2. Useful Reference
3. Testing Steps
4. Implementation
5. Frequency Asked Questions
2
2
Web Accessibility Recognition Scheme
Awards 2015
Stream
Award
Silver
No. of Judging Accreditation
Criteria
Logo
14
NewWebsite
Criteria of Silver Award
Gold
10
Silver
11
Gold
7
Mobile
3
3
Web Accessibility Recognition Scheme
Assessment Area – Website Stream
1.
2.
3.
4.
Main webpage
Contact Us / What’s News webpage(s)
All first-level of webpages
All webpages for
Webpage 00
Restaurant
Homepage
three core businesses
Webpage11
Online Food Order
Webpage 21
Members’ Corner
Webpage 31
Latest Promotion
Webpage 41
Shop Location
Webpage12
Food Selection
Webpage 22
Join us Registration
Webpage 32
Promotion Dishes
Details
Webpage 42
Shop List
Webpage 13
Delivery & Payment
Webpage 23
Confirmation
Webpage14
Confirmation
Webpage 51
Contact Us/ What’s
New
Webpage 43
Shop Address
Mock-up website hierarchy
4
4
Assessment Area – Website Stream
1. Main webpage – www.ogcio.gov.hk
3. All firstlevel of
webpages
2. Contact
Us
4. Core
business 1
5. Core
business 2
6. Core
business 3
5
5
Web Accessibility Recognition Scheme
Awards – Website Stream (Continue)
Triple Gold Award NEW
• Attain Gold Award for 3 consecutive years
Most Favourite Websites
• Attain Triple Gold Award; and
• Obtain the top three number of votes in public voting
6
6
Judging Criteria – Website Stream (Silver)
No.
Criteria
1
Provide meaningful text alternative for non-text contents
2
Provide accessible Flash/Animated content 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 such as proper labels for user input 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 for the website
7
7
Judging Criteria – Website Stream (Gold)
No.
Criteria
1
Provide accessible PDFs
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 for compatibility with browsers and
assistive technologies
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 headers as well as
data
8
8
Web Accessibility Recognition Scheme
Assessment Area – Mobile App Stream
1.
2.
3.
4.
Main screen
One-time Setup Wizard or Welcome / Settings / About Us screen(s)
All first-level screens
Three core business
Screen 00
Restaurant
functions nominated
Main Screen
Screen 01
by entrants
One-time Setup
Wizard/Welcome
Screen
Screen 11
Online Food Menu
Screen 21
Members’ Corner
Screen 31
Latest Promotion
Screen 41
Shop Location
Screen 12
Category Selection
Screen 22
Join us Registration
Screen 32
Promotion Dishes
Details
Screen 42
Shop List
Screen 13
Food listing
Screen 23
Confirmation
Screen 43
Shop Address
Screen 51
Settings
Screen 61
About Us
Mock-up mobile app
hierarchy
9
9
Assessment Area – Mobile Stream
1. Main screen – My Observatory
10
10
Assessment Area – Mobile Stream
1. Main screen –
My Observatory
3. All first-level
screens
4. Core
business 1
5. Core
business 2
6. Core
business 3
2. Settings
11
11
Web Accessibility Recognition Scheme
Awards – Mobile App Stream (Continue)
Most Favourite Mobile App
• Attain Gold Award; and
• Obtain the top three number of votes in public voting
12
12
Judging Criteria – Mobile Application Stream (Silver)
No. Criteria
1
Provide meaningful text alternative for non-text contents
2
Easy to turn off background sound or set as user-initiated only
3
Make all clickable objects large enough to be tapped
4
Provide clear and simple headings
5
Provide consistent and simple user interface structure
6
Provide meaningful content sequence
7
Provide navigation for going backward
8
Provide clear and informative links
9
Text resize function or text can be zoomed without loss of content
10
Compatible with screen readers
11
Provide contact points or “email feedback” feature #
# gold criterion last year
13
13
Judging Criteria – Mobile App Stream (Gold)
No. Criteria
1
Provide sufficient colour contrast
2
Provide sufficient time for users to read the content and
operate the function
3
Provide captions or sign language for 30% of pre-recorded
videos published in the recent 2 years
4
Provide alternative means for notification
5
Provide input assistance such as proper labels or instructions for user input
6
Provide error prevention for transactions
7
Provide means to close popovers
14
14
Web Accessibility Recognition Scheme
Timeline
Stage
Key Tasks
1.
Application
2.
Assessment and Enhancement
3.
Technical Workshops
4.
Re-assessment
5.
Voting for Most Favourite
Websites / Mobile App Awards
6.
Awards Presentation
Period
Now until 31 December 2014
Now until 30 January 2015
3 November 2014 – 30 January 2015
2 January 2015 – 20 February 2015
2 March 2015 – 23 March 2015
April 2015
15
15
Web Accessibility Recognition Scheme
Useful Reference
www.webforall.gov.hk
Webforall Portal
• Live-examples of success criteria
(WCAG 2.0 Level AA)
• Presentation slides of seminars /
technical workshops
• Web Designers’ Corner
• facilitating the sourcing of ICT
professional services
• Legal cases
16
16
Web Accessibility Recognition Scheme
Useful Reference
Accessible Webpage Templates
• Free Download - www.webforall.gov.hk/web_template.htm
17
17
Web Accessibility Recognition Scheme
Useful Reference
Web Accessibility Handbook
• Designed for senior executives and
management
• Introduce WCAG 2.0 and success criteria
 Web Accessibility Concept
 How Persons with Disabilities use
Websites
 Illustration of Each Criterion
 Testing Strategy
 Useful Reference
www.webforall.gov.hk/en/wahandbook
18
18
Web Accessibility Recognition Scheme
Useful Reference
Mobile Application
Accessibility Handbook
• Designed for mobile app owners and
developers
• Based on the WCAG 2.0 and feedbacks
collected from local disability groups
 Basic Concept
 Best Practices
APPS
 Checklist for Developers
 Testing Strategy
 Useful Reference
www.webforall.gov.hk/en/maahandbook
19
19
Web Accessibility Recognition Scheme
Technical Workshop
• Venue: Office of the Government Chief Information Officer
Conference Room, 15/F Wanchai Tower,
12 Harbour Road, Wanchai, Hong Kong
• Please contact Ms Windy Chan at 2582 6079 to register
•
Workshop
Date
Time
1
19 Dec 2014 (Mobile App Stream)
2:30 – 4:00 pm
2
29 Dec 2014
2:30 – 4:00 am
3
6 January 2015
2:30 – 4:00 am
More details, please refer to www.webforall.gov.hk/workshop
20
20
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/)
21
21
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 (使用者測試)
22
22
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
23
23
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
24
24
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
25
25
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
26
26
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
27
27
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
28
28
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
29
29
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
30
30
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
31
31
Silver 05
5. Popup Windows
Testing: Visual Review, Manual Testing with Screen Reader
Close
Source : www.gov.hk
32
32
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
33
33
6. Links
Silver 06
Testing: Visual Review, Manual Testing with Screen Reader
Source : www.webforall.gov.hk/en
34
34
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
35
35
7. Headings/Labels
Silver 07
Testing: Visual Review and Human Testing
36
36
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
37
37
8. Website Structure and Content
Silver 08
Testing: Code Review, Manual Testing with Screen Reader
38
38
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
39
39
9. Consistent Navigation Mechanism
Silver 09
Testing: Visual Review
Source : www.ogcio.gov.hk
40
40
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
41
41
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
42
42
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
43
43
11. Input Assistance
Silver 11
Testing: Manual Testing with Screen Reader
44
44
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
45
45
12. Error Prevention
Silver 12
Testing: Manual Testing with Screen Reader
46
46
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
47
47
13. Text Resize
Silver 13
Testing: Visual Review and Human Testing
Source : www.ogcio.gov.hk
48
48
14. Accessibility Statement
Silver 14
• Provide an accessibility statement with contact points for
users when they encounter accessibility problems
49
49
14. Accessibility Statement
Silver 14
Testing: Visual Review
50
50
Gold 01
15. Accessible PDFs
• Provide accessible PDFs
Scanned Image not accessible
Text-based accessible PDF
51
51
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
52
52
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
53
53
16. Predictable Operations
Gold 02
Testing: Visual Review and Manual Testing with Screen Reader
54
54
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
55
55
17. Skip Repetitive Blocks
Gold 03
Testing: Visual & Code Review, Manual Testing with Screen
Reader
56
56
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
57
57
18. Multiple Ways
Gold 04
Testing: Visual Review
Source : www.ogcio.gov.hk
58
58
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
59
59
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/
60
60
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
61
61
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
62
62
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)
63
63
21. Sufficient Colour Contrast
Gold 07
Testing: Colour contrast check
http://snook.ca/technical/colour_contrast/colour.html
64
64
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)
65
65
Gold 08
22. Compatibility
• Ensure correct syntax of webpages for compatibility with
browsers and assistive technologies
Incorrect syntax
Correct syntax
66
66
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/
67
67
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
68
68
23. Video
Gold 09
Testing: Visual Review
Source :
http://www.ogcio.gov.hk/en/community/web_accessibility/recognition_s
cheme/video_gallery/
69
69
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
70
70
24. Table Header and Data
Gold 10
Testing: Visual Review, Manual Testing with Screen Reader
71
71
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.
72
72
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 (替代文字)
73
73
Frequency Asked Questions
• Adopt logical reading order
2
3
1
Logical reading order
Source from www.ha.org
74
74
Frequency Asked Questions
• Good example – provide adjacent alternative format
Content in HTML format provided side by sides
Source from www.studenthealth.gov.hk
75
75
Frequency Asked Questions
• Example –document with signature
Accessible PDF
Scanned Image
+
Accessible PDF
Inaccessible PDF +
alternative version
76
76
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
77
77
Web Accessibility Recognition Scheme
Enrol Now! Deadline : 31 December 2014
www.webforall.gov.hk/scheme
78
78
Thank you!
Web Accessibility Campaign Programme Office
Email : wac@ogcio.gov.hk
Tel. no. : 2582 4606
Web Accessibility Campaign
www.webforall.gov.hk
Web Accessibility Recognition Scheme
www.webforall.gov.hk/scheme
79
79