SlideShare a Scribd company logo
Office of the Government Chief Information Officer




               Web For All


                                          Digital Inclusion Divison

                                                      March 2012
Agenda
•   Digital 21 Strategy and Inclusive Society
•   What is Web Accessibility?
•   Why Web Accessibility?
•   Major Concerns from Persons with Disabilities
    with Recommendations
•   International Standard
•   International & Government practices
•   Web Accessibility Campaign
•   Start your Web Accessibility Project
Digital 21 Strategy & Inclusive Society
One of five key areas of 2008 Digital 21 Strategy
•   Building an inclusive, knowledge-based society
•   bring the benefit of ICT to disadvantaged groups
•   enhance their quality of life
•   strengthen their capacity in engaging with the
    development of information society
What is Web Accessibility?
• Making website content available
  for ALL
• Including persons with disabilities
What is Web Accessibility?
• An accessible website -
Is perceivable   Can be used with       Provides          Reduces
                  assistive device     additional       impediments
                                      descriptions

•Adjustable      •Screen reader       •Text             •Some people
 font size                             transcript for    have
                 •Input devices
                                       multi-media       difficulties
•Sufficient       for persons
                                       contents          using the
 colour           with disabilities
                                                         mouse
 contrast
                 •Voice control
•Audio            software
 control
Why Web Accessibility?
• Equal opportunities
  • for persons with disabilities, elderly, etc.
• Social responsibility
• Widest possible reach-out
• Lower costs in the long term
Major concerns from persons with
disabilities with recommendations
• Engage rehabilitation organisations
• Receive surveys from over 300 persons
  with disabilities
• Understand major problems in accessing
  websites
Major concerns from persons with
disabilities with recommendations
1. Unable to skip Adobe Flash and moving
   objects
Major concerns from persons with
disabilities with recommendations
2. Small font sizes or insufficient colour
   contrast
Major concerns from persons with
disabilities with recommendations
• Example 1 – Resize Text
   All text can be resized up to 200%




     Cannot resize text          Can resize text
Major concerns from persons with
disabilities with recommendations
• Example 2 – Colour Contrast
   Contrast ratio of at least 1: 4.5




  Poor background contrast   Easier to read with higher contrast
Major concerns from persons with
disabilities with recommendations

3. No alternatives for non-text information
   • Descriptive text alternative
     for image                      Web Accessibility

   • Text transcripts for audio      Management
                                      Handbook

     and video
Major concerns from persons with
disabilities with recommendations
• Example 3 – Avoid Non-text Content
   Text alternative for all content




   Screen reader can not   Description of the picture can
      read the picture       be read by screen reader
Major concerns from persons with
disabilities with recommendations
4. Complicated website structure




 Complicated website structure   Simpler and ordered website structure
Major concerns from persons with
disabilities with recommendations

5. Missing heading structure
  • Provide appropriate heading structure for
    screen readers




    Missing heading structure   Appropriate heading structure
Major concerns from persons with
disabilities with recommendations

6. Images of text
  • Do NOT use images to display text as screen
    readers cannot read text inside an image




     An image of text heading   Text heading
Major concerns from persons with
disabilities with recommendations

7. Content and functions inaccessible by
   keyboard
  • Ensure all content and functions can be
    accessed via a keyboard, e.g. through Tab key
    and the Enter key
Major concerns from persons with
disabilities with recommendations
8. Websites with background audio
Major concerns from persons with
disabilities with recommendations

9. Difficulties in accessing PDF documents




   PDF documents not accessible   Text-based accessible PDF
Major concerns from persons with
disabilities with recommendations

10. Outdated text versions
  • Keep the text-only versions updated
  • Prevent asymmetrical contents with the
    graphical versions
  • When graphical version is verified to be
    accessible, text-only version may be considered
    to remove
International Standard
• World Wide Web Consortium (W3C) Web
  Content Accessibility Guidelines (WCAG)
• International widely adopted standard
• Latest version is 2.0
International Standard
• W3C WCAG 2.0 consist of four parts
  4 Principles

     12 Guidelines

       61 Success Criteria

          Many Techniques
Guidelines for Perceivable
1.1 Provide text alternatives for any non-text content so
    that it can be changed into other forms people need.

1.2 Provide alternatives for time-based media.

1.3 Create content that can be presented in different ways
    without losing information or structure.

1.4 Make it easier for users to see and hear content
    including separating foreground from background.
Guidelines for Operable
2.1 Make all functionality available from a keyboard.

2.2 Provide users enough time to read and use content.

2.3 Do not design content in a way that is known to cause
    seizures.

2.4 Provide ways to help users navigate, find content, and
    determine where they are.
Guidelines for Understandable & Robust

3.1 Make text content readable and understandable.

3.2 Make Web pages appear and operate in predictable
    ways.

3.3 Help users avoid and correct mistakes.

4.1 Maximize compatibility with current and future user
    agents, including assistive technologies.
International and Government Practices

 • Some governments are adopting W3C
   WCAG 2.0 for public facing websites
   Countries            Standard         Timeline to achieve standard
New Zealand      WCAG 2.0 Level AA       June 2010


United Kingdom   WCAG 1.0 Level AA       March 2011

Canada           WCAG 2.0 Level AA       July 2013


Singapore        WCAG 1.0 and key        December 2013
                 aspects of WCAG 2.0
Australia        WCAG 2.0 Level A & Level December 2014
                 AA
International and Government Practices

• In latest version (Version 2.0) there are three Levels
  of conformance -

         Level A               Level AA              Level AAA
     25 success criteria   +13 success criteria   +23 success criteria
           Basic           Recommended                   Ideal


               Level AA Conformance
International and Government Practices

• HK Government has been implementing web
  accessibility guidelines since 1999, based on a
  version of W3C WCAG
• HK Government websites, except archive
  materials, are required to conform to W3C
  WCAG 2.0 Level AA by 2013
• Encourage quasi-government and public
  service organisations to take corresponding
  action
Web Accessibility Campaign

Launched in 2011 -
• Focus group discussion
• Survey with persons with disabilities
• Management handbook
• Portal with Illustration webpages
  (www.webforall.gov.hk)
• Awareness building seminars
Web Accessibility Campaign

Upcoming events
• Experience sharing sessions &
  Technical workshops
• Ethics building in tertiary education
  institutions
• Recognition scheme
Start Your Web Accessibility Project

Assess the Whole Website
  • Consider rearranging the structure
  • Simplify content
  • Use simple HTML code can help a lot
    •   Alternative text for image, alt=
    •   Keyboard input, onkeypass=
    •   Define language, lang=
  • Testing
Testing Techniques

1. Code Scanning
 • Many accessibility issues can be detected
   automatically using specialist software and
   tools.
            Example Tools -
              AChecker
              WAVE
              Web Accessibility Checker
Testing Techniques

2. Manual Screen Reader Testing
• Navigate your website and determine just
  how much information you’re able to access
  through the screen reading software.

             Example Tools -
               Jaws
               VoiceOver
               Window Light
Testing Techniques

3. Human Testing – preferably by persons with
                     disabilities
• Many organisations that support persons
  with disabilities can help by providing free or
  affordable human testing services.

• Website owners are encouraged to contact
  these organisations for assistance.
Questions and Answers
Web For All
At the time building fast application
    and using modern technology
     Adopt accessibility design
 Join hands to make Hong Kong a
     caring and inclusive IT hub
Thank you

More Related Content

PPTX
Web Accessibility
PPT
Web Accessibility
PPTX
Breaking silos - all bad things must come to an end
PDF
Accessible Web Design
PPTX
It Takes an Ecosystem – How Brightspace and our partners are making education...
 
PDF
Implementing and Evaluating Web Application Accessibility
PDF
People First Accessibility
Web Accessibility
Web Accessibility
Breaking silos - all bad things must come to an end
Accessible Web Design
It Takes an Ecosystem – How Brightspace and our partners are making education...
 
Implementing and Evaluating Web Application Accessibility
People First Accessibility

What's hot (20)

PPTX
The NDIS: a role-based ICT approach - Dr Scott Hollier at the Disability Empl...
PPTX
Challenges and Strategies for Promoting Awareness of Open and Accessible Educ...
PPTX
My talk at Riga 2016 Web Accessibility Meetup
PPTX
Web accessibility workshop 2
PPTX
Baking Accessibility Into Your Event Strategy
PDF
Accessibility and why it matters
PPTX
Ud in-curriculum-4 accessu-2018 (howard-lydia combined-nn)
PPTX
Web accessibility workshop 3
PPT
Sloan-C Merlot 12: OER and Accessibility Higher Education Status and Issues
PPTX
Web accessibility workshop 1
PPTX
Captioning the 3Play Way
PDF
State of Content Accessibility
PPTX
Web accessibility workshop 2
PPT
Understanding Web Accessibility
PPTX
Empathy training & the accessible web experience
PPTX
Practical First Steps for Achieving Web Accessibility and Avoiding Liability
PPTX
Web accessibility: it’s everyone’s responsibility
PPTX
The Future of Video Player Accessibility
PPTX
Supporting employment with accessible communications
PPTX
Web accessibility
The NDIS: a role-based ICT approach - Dr Scott Hollier at the Disability Empl...
Challenges and Strategies for Promoting Awareness of Open and Accessible Educ...
My talk at Riga 2016 Web Accessibility Meetup
Web accessibility workshop 2
Baking Accessibility Into Your Event Strategy
Accessibility and why it matters
Ud in-curriculum-4 accessu-2018 (howard-lydia combined-nn)
Web accessibility workshop 3
Sloan-C Merlot 12: OER and Accessibility Higher Education Status and Issues
Web accessibility workshop 1
Captioning the 3Play Way
State of Content Accessibility
Web accessibility workshop 2
Understanding Web Accessibility
Empathy training & the accessible web experience
Practical First Steps for Achieving Web Accessibility and Avoiding Liability
Web accessibility: it’s everyone’s responsibility
The Future of Video Player Accessibility
Supporting employment with accessible communications
Web accessibility
Ad

Similar to Web For All (20)

PDF
Icaweb402 a jenninecarlin
KEY
Web Accessibility and Design
PPT
Web Site Accessibility: Identifying and Fixing Accessibility Problems in Clie...
PDF
What is WCAG 2 and why should we care?
PPT
Wipa Seminar WCAG 2.0
PPT
Wordcamp Toronto 2013
PPT
Ideas 5 - Roger Hudson - Understanding WCAG 2.0
PPT
Udem 2007 Accessibility Standards
PDF
Web Accessibility - an introduction / Salford Business School briefing / Univ...
ODP
Digital Divide And Accessibility
PDF
Digital Accessibility
PPT
Introduction To WCAG 2.0
PPT
Wordcamp buffalo
ODP
Digital Divide And Accessibility
PPT
WCAG 2.0, Simplified
PDF
Getting Down and Dirty with Accessibility and Usability workshop at TCUK12
PPTX
Web accessibility & AODA compliance
PPT
Corporate Web Accessibility Implementation Strategies
PPTX
Accessibility
Icaweb402 a jenninecarlin
Web Accessibility and Design
Web Site Accessibility: Identifying and Fixing Accessibility Problems in Clie...
What is WCAG 2 and why should we care?
Wipa Seminar WCAG 2.0
Wordcamp Toronto 2013
Ideas 5 - Roger Hudson - Understanding WCAG 2.0
Udem 2007 Accessibility Standards
Web Accessibility - an introduction / Salford Business School briefing / Univ...
Digital Divide And Accessibility
Digital Accessibility
Introduction To WCAG 2.0
Wordcamp buffalo
Digital Divide And Accessibility
WCAG 2.0, Simplified
Getting Down and Dirty with Accessibility and Usability workshop at TCUK12
Web accessibility & AODA compliance
Corporate Web Accessibility Implementation Strategies
Accessibility
Ad

Recently uploaded (20)

PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PDF
Review of recent advances in non-invasive hemoglobin estimation
PDF
Chapter 3 Spatial Domain Image Processing.pdf
PPTX
Cloud computing and distributed systems.
PDF
Electronic commerce courselecture one. Pdf
DOCX
The AUB Centre for AI in Media Proposal.docx
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PDF
Empathic Computing: Creating Shared Understanding
PPTX
MYSQL Presentation for SQL database connectivity
PDF
Approach and Philosophy of On baking technology
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PDF
Encapsulation theory and applications.pdf
PDF
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
PDF
Unlocking AI with Model Context Protocol (MCP)
Per capita expenditure prediction using model stacking based on satellite ima...
20250228 LYD VKU AI Blended-Learning.pptx
Review of recent advances in non-invasive hemoglobin estimation
Chapter 3 Spatial Domain Image Processing.pdf
Cloud computing and distributed systems.
Electronic commerce courselecture one. Pdf
The AUB Centre for AI in Media Proposal.docx
Mobile App Security Testing_ A Comprehensive Guide.pdf
Empathic Computing: Creating Shared Understanding
MYSQL Presentation for SQL database connectivity
Approach and Philosophy of On baking technology
Advanced methodologies resolving dimensionality complications for autism neur...
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
Diabetes mellitus diagnosis method based random forest with bat algorithm
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Agricultural_Statistics_at_a_Glance_2022_0.pdf
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Encapsulation theory and applications.pdf
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Unlocking AI with Model Context Protocol (MCP)

Web For All

  • 1. Office of the Government Chief Information Officer Web For All Digital Inclusion Divison March 2012
  • 2. Agenda • Digital 21 Strategy and Inclusive Society • What is Web Accessibility? • Why Web Accessibility? • Major Concerns from Persons with Disabilities with Recommendations • International Standard • International & Government practices • Web Accessibility Campaign • Start your Web Accessibility Project
  • 3. Digital 21 Strategy & Inclusive Society One of five key areas of 2008 Digital 21 Strategy • Building an inclusive, knowledge-based society • bring the benefit of ICT to disadvantaged groups • enhance their quality of life • strengthen their capacity in engaging with the development of information society
  • 4. What is Web Accessibility? • Making website content available for ALL • Including persons with disabilities
  • 5. What is Web Accessibility? • An accessible website - Is perceivable Can be used with Provides Reduces assistive device additional impediments descriptions •Adjustable •Screen reader •Text •Some people font size transcript for have •Input devices multi-media difficulties •Sufficient for persons contents using the colour with disabilities mouse contrast •Voice control •Audio software control
  • 6. Why Web Accessibility? • Equal opportunities • for persons with disabilities, elderly, etc. • Social responsibility • Widest possible reach-out • Lower costs in the long term
  • 7. Major concerns from persons with disabilities with recommendations • Engage rehabilitation organisations • Receive surveys from over 300 persons with disabilities • Understand major problems in accessing websites
  • 8. Major concerns from persons with disabilities with recommendations 1. Unable to skip Adobe Flash and moving objects
  • 9. Major concerns from persons with disabilities with recommendations 2. Small font sizes or insufficient colour contrast
  • 10. Major concerns from persons with disabilities with recommendations • Example 1 – Resize Text  All text can be resized up to 200% Cannot resize text Can resize text
  • 11. Major concerns from persons with disabilities with recommendations • Example 2 – Colour Contrast  Contrast ratio of at least 1: 4.5 Poor background contrast Easier to read with higher contrast
  • 12. Major concerns from persons with disabilities with recommendations 3. No alternatives for non-text information • Descriptive text alternative for image Web Accessibility • Text transcripts for audio Management Handbook and video
  • 13. Major concerns from persons with disabilities with recommendations • Example 3 – Avoid Non-text Content  Text alternative for all content Screen reader can not Description of the picture can read the picture be read by screen reader
  • 14. Major concerns from persons with disabilities with recommendations 4. Complicated website structure Complicated website structure Simpler and ordered website structure
  • 15. Major concerns from persons with disabilities with recommendations 5. Missing heading structure • Provide appropriate heading structure for screen readers Missing heading structure Appropriate heading structure
  • 16. Major concerns from persons with disabilities with recommendations 6. Images of text • Do NOT use images to display text as screen readers cannot read text inside an image An image of text heading Text heading
  • 17. Major concerns from persons with disabilities with recommendations 7. Content and functions inaccessible by keyboard • Ensure all content and functions can be accessed via a keyboard, e.g. through Tab key and the Enter key
  • 18. Major concerns from persons with disabilities with recommendations 8. Websites with background audio
  • 19. Major concerns from persons with disabilities with recommendations 9. Difficulties in accessing PDF documents PDF documents not accessible Text-based accessible PDF
  • 20. Major concerns from persons with disabilities with recommendations 10. Outdated text versions • Keep the text-only versions updated • Prevent asymmetrical contents with the graphical versions • When graphical version is verified to be accessible, text-only version may be considered to remove
  • 21. International Standard • World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG) • International widely adopted standard • Latest version is 2.0
  • 22. International Standard • W3C WCAG 2.0 consist of four parts 4 Principles 12 Guidelines 61 Success Criteria Many Techniques
  • 23. Guidelines for Perceivable 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need. 1.2 Provide alternatives for time-based media. 1.3 Create content that can be presented in different ways without losing information or structure. 1.4 Make it easier for users to see and hear content including separating foreground from background.
  • 24. Guidelines for Operable 2.1 Make all functionality available from a keyboard. 2.2 Provide users enough time to read and use content. 2.3 Do not design content in a way that is known to cause seizures. 2.4 Provide ways to help users navigate, find content, and determine where they are.
  • 25. Guidelines for Understandable & Robust 3.1 Make text content readable and understandable. 3.2 Make Web pages appear and operate in predictable ways. 3.3 Help users avoid and correct mistakes. 4.1 Maximize compatibility with current and future user agents, including assistive technologies.
  • 26. International and Government Practices • Some governments are adopting W3C WCAG 2.0 for public facing websites Countries Standard Timeline to achieve standard New Zealand WCAG 2.0 Level AA June 2010 United Kingdom WCAG 1.0 Level AA March 2011 Canada WCAG 2.0 Level AA July 2013 Singapore WCAG 1.0 and key December 2013 aspects of WCAG 2.0 Australia WCAG 2.0 Level A & Level December 2014 AA
  • 27. International and Government Practices • In latest version (Version 2.0) there are three Levels of conformance - Level A Level AA Level AAA 25 success criteria +13 success criteria +23 success criteria Basic Recommended Ideal Level AA Conformance
  • 28. International and Government Practices • HK Government has been implementing web accessibility guidelines since 1999, based on a version of W3C WCAG • HK Government websites, except archive materials, are required to conform to W3C WCAG 2.0 Level AA by 2013 • Encourage quasi-government and public service organisations to take corresponding action
  • 29. Web Accessibility Campaign Launched in 2011 - • Focus group discussion • Survey with persons with disabilities • Management handbook • Portal with Illustration webpages (www.webforall.gov.hk) • Awareness building seminars
  • 30. Web Accessibility Campaign Upcoming events • Experience sharing sessions & Technical workshops • Ethics building in tertiary education institutions • Recognition scheme
  • 31. Start Your Web Accessibility Project Assess the Whole Website • Consider rearranging the structure • Simplify content • Use simple HTML code can help a lot • Alternative text for image, alt= • Keyboard input, onkeypass= • Define language, lang= • Testing
  • 32. Testing Techniques 1. Code Scanning • Many accessibility issues can be detected automatically using specialist software and tools. Example Tools - AChecker WAVE Web Accessibility Checker
  • 33. Testing Techniques 2. Manual Screen Reader Testing • Navigate your website and determine just how much information you’re able to access through the screen reading software. Example Tools - Jaws VoiceOver Window Light
  • 34. Testing Techniques 3. Human Testing – preferably by persons with disabilities • Many organisations that support persons with disabilities can help by providing free or affordable human testing services. • Website owners are encouraged to contact these organisations for assistance.
  • 36. Web For All At the time building fast application and using modern technology Adopt accessibility design Join hands to make Hong Kong a caring and inclusive IT hub