SlideShare a Scribd company logo
1 of 39
I
    W
     eb
       AI
          M
           .o
             rg
webaim.org/resources/designers
throup.org.uk/infographic
“So long as a web-based
system is inaccessible, it
  suffers from quality
problems and we should
 focus on quality.”
                                                                        – Karl Groves
http://www.karlgroves.com/2012/01/27/chasing-the-accessibility-business-case-conclusion/
Structure and headings
• Logical!
• Skip to main content links (blind &
  keyboard users)
• Sequence and patterns (non-linear
  navigation - reading order)
• Style guides (for consistency)
• ARIA (application, banner, complementary,
  contentinfo, form, main, navigation, search)
Lists:
   <ol>
   <ul>
    <li>
& CSS styling
Do it with a keyboard
<alt=””>
Labels



Source of images: http://www.youtube.com/watch?v=T5OClvFL8I8
COLOR




        8% ♂; 0.5-1% ♀
Tables

• Screen readers read tables from left to
  right, from row to row.
• <summary>, <th>, <scope>
• How-to: http://dev.opera.com/articles/view/
  creating-accessible-data-tables/  &  http://
  isolani.co.uk/articles/structuredTables.html 
  (with a football pools example!)
Auto-play
“Click here”/“Read more”
YouTube 4 All
•   Keyboard-accessible YouTube controls: http://
    simplyaccessible.com/article/keyboard-accessible-
    youtube-controls/

•   JW Player:  http://wac.osu.edu/

•   Easy YouTube Player: http://icant.co.uk/easy-
    youtube/docs/index.html

•   Accessible Media Player: http://www.nomensa.com/
    services/accessibility-and-inclusive-design/
    accessible-media-player
Screen reader testing
• Learn: http://www.iheni.com/screen-reader-
  testing/
• Plan: http://www.spotlessinteractive.com/
  articles/accessibility/screen-reader-test-
  plan.php
• More at http://webaxe.blogspot.com/
  2011/04/learning-how-to-use-and-test-
  with.html
Visual / Hearing
    Motor
   Cognition
    (Aging)
(Perceivable, Operable, Understandable, Robust
Danish: Opfattelig, Anvendelig, Forståelig, Robust)
People are different:
    Test with real people!

• http://www.uiaccess.com/accessucd/involve.html
• http://alistairduggin.co.uk/blog/using-personas-to-
  teach-accessibility/
http://www.flickr.com/photos/veeliam/5095362394/
http://www.flickr.com/photos/mjmonty/5087474397/
http://www.flickr.com/photos/mroche/5414095073/




                                                 http://www.flickr.com/photos/mroche/5414095073/
When universal design
processes fail to include,
consult with, and listen to the
people we are actually
designing for, we also fail to
design effectively.
                    – Lisa Herrod
         http://scenariogirl.com/inclusive-design/the-social-model-of-disability
Evaluation Tools
•   WAVE http://wave.webaim.org/

•   Color Contrast and more https://addons.mozilla.org/da/firefox/addon/juicy-
    studio-accessibility-too/

•   Fireeyes http://www.deque.com/products/worldspace-fireeyes/download-
    worldspace-fireeyes

•   Functional Accessibility Evaluator http://fae.cita.uiuc.edu/about/

•   Web Developer Extension http://chrispederick.com/work/web-developer/

•   Web Accessibility Toolbar for IE http://www.paciellogroup.com/resources/
    wat-ie-about.html

•   W3C WAI Tool List http://www.w3.org/WAI/RC/tools/complete
$€£¥?




Bug cost chart from http://blogs.windriver.com/vxworks/device-management/
$€£¥?
• Cost I: http://eclecti.ca/2011/05/the-cost-of-
  accessibility/
• Cost II: http://www.karlgroves.com/
  2011/11/30/how-expensive-is-accessibility/
• For manager-types: http://openconcept.ca/
  blog/mgifford/accessibility-tips-management
• Case study: http://www.w3.org/WAI/bcase/
  legal-and-general-case-study
WCAG 2 at a glance
                     •   Perceivable
                         •   Provide text alternatives for non-text content.
                         •   Provide captions and other alternatives for multimedia.
                         •   Create content that can be presented in different ways,
                         •   including by assistive technologies, without losing meaning.
                         •   Make it easier for users to see and hear content.
                     •   Operable
                         •   Make all functionality available from a keyboard.
                         •   Give users enough time to read and use content.
                         •   Do not use content that causes seizures.
                         •   Help users navigate and find content.
                     •   Understandable
                         •   Make text readable and understandable.
                         •   Make content appear and operate in predictable ways.
                         •   Help users avoid and correct mistakes.
                     •   Robust
                         •   Maximize compatibility with current and future user tools.
WCAG 2.0:
Understanding and How-To
  •   Understanding WCAG 2.0: A guide to
      understanding and implementing Web Content
      Accessibility Guidelines 2.0
      http://www.w3.org/TR/UNDERSTANDING-
      WCAG20/

  •   How to Meet WCAG 2.0: A customizable quick
      reference to Web Content Accessibility Guidelines
      2.0 requirements (success criteria) and techniques.
      http://www.w3.org/WAI/WCAG20/quickref/
Resources
• Yahoo! accessibility code library: http://
  yaccessibilityblog.com/library/
• Accessibility topics at Web Standards
  Sherpa: http://webstandardssherpa.com/
  reviews/by-topic/accessibility
• Mozilla ARIA resources: https://
  developer.mozilla.org/en/ARIA
Learn-more resources

•   What is a screen reader? Article from 2005 so
    some product details are outdated. Read it for
    what it is and how it works.  http://
    www.nomensa.com/blog/2005/what-is-a-screen-
    reader/

•   Just Ask: Integrating Accessibility Throughout
    Design: http://www.uiaccess.com/accessucd/ (+
    print)
Learn-more resources
•   Opera Web Standards Curriculum in association
    with Yahoo! Developer Network: http://
    www.opera.com/company/education/curriculum/

•   Web Standards Project's InterACT (site/book)
    http://interact.webstandards.org/

•   U of MN Newsletter: Typography, information
    architecture, usability, accessibility, maintained by
    @laura_carlson http://www.d.umn.edu/itss/
    training/online/webdesign/
    webdev_listserv.html#subscribe
Mobile resources
“Mobile Matters Most”
• For iOS app builders - discusses Apple
  Interface Builder. http://mattgemmell.com/
  2010/12/19/accessibility-for-iphone-and-
  ipad-apps/ 
• Updates for Android developers: http://
  android-developers.blogspot.com/2012/04/
  accessibility-are-you-serving-all-your.html
Twitter+ Resources
•   @RogerJohansson + 456bereastreet.com

•   @webaxe + webaxe.blogspot.com

•   @silviapfeiffer (all about <video>)

•   @MarcoInEnglish / @MarcoZehe + marcozehe.de (Firefox)

•   @jared_w_smith + WebAIM.org (with discussion list, too!)

•   @iheni + iheni.com (mobile)

•   @stevefaulkner + paciellogroup.com/blog (ARIA, HTML5)

•   @dugboticus + alistairduggin.co.uk

•   @AccessifyForum + accessifyforum.com
10 Principles
• Be equitable           • Be preventative
• Be flexible             • Be tolerant
• Be simple and          • Be effortless
  intuitive
                         • Be accommodating
• Be perceptible         • Be consistent
• Be informative
  http://www.copious.co.uk/10Principles.php
http://www.flickr.com/photos/ottoman42/5026107/
Thank you for listening!
     Questions?

@kmdk / @stcaccess
http://www.mardahl.dk
http:/flavors.me/kmdk
Build Accessibly - Community Day 2012

More Related Content

What's hot (12)

Web Accessibility Testing With Axe
Web Accessibility Testing With AxeWeb Accessibility Testing With Axe
Web Accessibility Testing With Axe
 
Implementing Acessibility in Liferay 6.1
Implementing Acessibility in Liferay 6.1Implementing Acessibility in Liferay 6.1
Implementing Acessibility in Liferay 6.1
 
Flash media technology
Flash media technologyFlash media technology
Flash media technology
 
Selfish Accessibility: WordCamp Toronto 2014
Selfish Accessibility: WordCamp Toronto 2014Selfish Accessibility: WordCamp Toronto 2014
Selfish Accessibility: WordCamp Toronto 2014
 
How to build an online profile as a scientist
How to build an online profile as a scientistHow to build an online profile as a scientist
How to build an online profile as a scientist
 
Localisation of AT - PDF Version
Localisation of AT - PDF Version Localisation of AT - PDF Version
Localisation of AT - PDF Version
 
Website Review with Screen Reader vs. SiteImprove
Website Review with Screen Reader vs. SiteImproveWebsite Review with Screen Reader vs. SiteImprove
Website Review with Screen Reader vs. SiteImprove
 
What is Web Accessibility? An Introduction to Web Accessibility.
What is Web Accessibility? An Introduction to Web Accessibility.What is Web Accessibility? An Introduction to Web Accessibility.
What is Web Accessibility? An Introduction to Web Accessibility.
 
Drupal for rlace
Drupal for rlaceDrupal for rlace
Drupal for rlace
 
iPad project - Moving forward
iPad project - Moving forwardiPad project - Moving forward
iPad project - Moving forward
 
Introduction to Accessibility
Introduction to AccessibilityIntroduction to Accessibility
Introduction to Accessibility
 
Web1 2
Web1 2Web1 2
Web1 2
 

Similar to Build Accessibly - Community Day 2012

Getting Down and Dirty with Accessibility and Usability workshop at TCUK12
Getting Down and Dirty with Accessibility and Usability workshop at TCUK12Getting Down and Dirty with Accessibility and Usability workshop at TCUK12
Getting Down and Dirty with Accessibility and Usability workshop at TCUK12Karen Mardahl
 
Web Accessibility and Design
Web Accessibility and DesignWeb Accessibility and Design
Web Accessibility and Designcolinbdclark
 
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)Carrie Anton
 
How to engineer accessible websites
How to engineer accessible websitesHow to engineer accessible websites
How to engineer accessible websitesRachel Cherry
 
Text to speech and word predicition tagged
Text to speech and word predicition taggedText to speech and word predicition tagged
Text to speech and word predicition taggedHindie Dershowitz
 
Find your path in the web industry
Find your path in the web industryFind your path in the web industry
Find your path in the web industryJon Thomas
 
Using Web 2.0 Tools inside Brightspace with an Eye on Accessibility
Using Web 2.0 Tools inside Brightspacewith an Eye on AccessibilityUsing Web 2.0 Tools inside Brightspacewith an Eye on Accessibility
Using Web 2.0 Tools inside Brightspace with an Eye on AccessibilityD2L Barry
 
How to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitHow to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitRachel Cherry
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screenFour Kitchens
 
Accessibility Quick Wins
Accessibility Quick WinsAccessibility Quick Wins
Accessibility Quick WinsJeff Reynolds
 
Library 2.011 Free Web Tools for Libraries Cheryl Peltier-Davis
Library 2.011 Free Web Tools for Libraries Cheryl Peltier-DavisLibrary 2.011 Free Web Tools for Libraries Cheryl Peltier-Davis
Library 2.011 Free Web Tools for Libraries Cheryl Peltier-DavisCheryl Peltier-Davis
 
Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility pro...
Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility pro...Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility pro...
Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility pro...Rodrigo Castilho
 
Creating a Universal Design syllabus
Creating a Universal Design syllabusCreating a Universal Design syllabus
Creating a Universal Design syllabusLouise Hamelin at QCC
 
WordPress Accessibility - WordCamp Buffalo 2016
WordPress Accessibility - WordCamp Buffalo 2016WordPress Accessibility - WordCamp Buffalo 2016
WordPress Accessibility - WordCamp Buffalo 2016Adrian Roselli
 
Documenting APIs: Sample Code and More (with many pictures of cats)
Documenting APIs: Sample Code and More (with many pictures of cats)Documenting APIs: Sample Code and More (with many pictures of cats)
Documenting APIs: Sample Code and More (with many pictures of cats)Anya Stettler
 
Making and sharing content online
Making and sharing content onlineMaking and sharing content online
Making and sharing content onlineHelen Webster
 
Making Websites Accessible to People with Disabilities
Making Websites Accessible to People with DisabilitiesMaking Websites Accessible to People with Disabilities
Making Websites Accessible to People with DisabilitiesChristian Brink
 
Accessibility & Inclusive Design to Enable Success
Accessibility & Inclusive Design to Enable Success Accessibility & Inclusive Design to Enable Success
Accessibility & Inclusive Design to Enable Success Jacqueline L. Frank
 
Accessibility Testing on the Cheap
Accessibility Testing on the CheapAccessibility Testing on the Cheap
Accessibility Testing on the Cheaprgcarrjr
 

Similar to Build Accessibly - Community Day 2012 (20)

Getting Down and Dirty with Accessibility and Usability workshop at TCUK12
Getting Down and Dirty with Accessibility and Usability workshop at TCUK12Getting Down and Dirty with Accessibility and Usability workshop at TCUK12
Getting Down and Dirty with Accessibility and Usability workshop at TCUK12
 
Web Accessibility and Design
Web Accessibility and DesignWeb Accessibility and Design
Web Accessibility and Design
 
Designing for Everybody Workshop
Designing for Everybody WorkshopDesigning for Everybody Workshop
Designing for Everybody Workshop
 
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
 
How to engineer accessible websites
How to engineer accessible websitesHow to engineer accessible websites
How to engineer accessible websites
 
Text to speech and word predicition tagged
Text to speech and word predicition taggedText to speech and word predicition tagged
Text to speech and word predicition tagged
 
Find your path in the web industry
Find your path in the web industryFind your path in the web industry
Find your path in the web industry
 
Using Web 2.0 Tools inside Brightspace with an Eye on Accessibility
Using Web 2.0 Tools inside Brightspacewith an Eye on AccessibilityUsing Web 2.0 Tools inside Brightspacewith an Eye on Accessibility
Using Web 2.0 Tools inside Brightspace with an Eye on Accessibility
 
How to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitHow to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility Summit
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
Accessibility Quick Wins
Accessibility Quick WinsAccessibility Quick Wins
Accessibility Quick Wins
 
Library 2.011 Free Web Tools for Libraries Cheryl Peltier-Davis
Library 2.011 Free Web Tools for Libraries Cheryl Peltier-DavisLibrary 2.011 Free Web Tools for Libraries Cheryl Peltier-Davis
Library 2.011 Free Web Tools for Libraries Cheryl Peltier-Davis
 
Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility pro...
Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility pro...Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility pro...
Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility pro...
 
Creating a Universal Design syllabus
Creating a Universal Design syllabusCreating a Universal Design syllabus
Creating a Universal Design syllabus
 
WordPress Accessibility - WordCamp Buffalo 2016
WordPress Accessibility - WordCamp Buffalo 2016WordPress Accessibility - WordCamp Buffalo 2016
WordPress Accessibility - WordCamp Buffalo 2016
 
Documenting APIs: Sample Code and More (with many pictures of cats)
Documenting APIs: Sample Code and More (with many pictures of cats)Documenting APIs: Sample Code and More (with many pictures of cats)
Documenting APIs: Sample Code and More (with many pictures of cats)
 
Making and sharing content online
Making and sharing content onlineMaking and sharing content online
Making and sharing content online
 
Making Websites Accessible to People with Disabilities
Making Websites Accessible to People with DisabilitiesMaking Websites Accessible to People with Disabilities
Making Websites Accessible to People with Disabilities
 
Accessibility & Inclusive Design to Enable Success
Accessibility & Inclusive Design to Enable Success Accessibility & Inclusive Design to Enable Success
Accessibility & Inclusive Design to Enable Success
 
Accessibility Testing on the Cheap
Accessibility Testing on the CheapAccessibility Testing on the Cheap
Accessibility Testing on the Cheap
 

More from Karen Mardahl

Desiring accessibility!
Desiring accessibility!Desiring accessibility!
Desiring accessibility!Karen Mardahl
 
Getting Things Done for Technical Communicators
Getting Things Done for Technical CommunicatorsGetting Things Done for Technical Communicators
Getting Things Done for Technical CommunicatorsKaren Mardahl
 
Getting Things Done for Technical Communicators at TCUK14
Getting Things Done for Technical Communicators at TCUK14Getting Things Done for Technical Communicators at TCUK14
Getting Things Done for Technical Communicators at TCUK14Karen Mardahl
 
Getting Things Done for Technical Communicators
Getting Things Done for Technical CommunicatorsGetting Things Done for Technical Communicators
Getting Things Done for Technical CommunicatorsKaren Mardahl
 
Tænk tilgængelighed og brugervenlighed ind i dine sites
Tænk tilgængelighed og brugervenlighed ind i dine sites Tænk tilgængelighed og brugervenlighed ind i dine sites
Tænk tilgængelighed og brugervenlighed ind i dine sites Karen Mardahl
 
UX Camp CPH Ignite presentation 24 April 2014
UX Camp CPH Ignite presentation 24 April 2014UX Camp CPH Ignite presentation 24 April 2014
UX Camp CPH Ignite presentation 24 April 2014Karen Mardahl
 
STC13: All you need is... Accessibility
STC13: All you need is... AccessibilitySTC13: All you need is... Accessibility
STC13: All you need is... AccessibilityKaren Mardahl
 
UX Camp CPH 2013 Ignite! presentation, Karen Mardahl
UX Camp CPH 2013 Ignite! presentation, Karen MardahlUX Camp CPH 2013 Ignite! presentation, Karen Mardahl
UX Camp CPH 2013 Ignite! presentation, Karen MardahlKaren Mardahl
 
Adaptability: The True Key to Accessibility and Usability? #TCUK12
Adaptability: The True Key to Accessibility and Usability? #TCUK12Adaptability: The True Key to Accessibility and Usability? #TCUK12
Adaptability: The True Key to Accessibility and Usability? #TCUK12Karen Mardahl
 
The "A" in Drupal Stands for Accessibility
The "A" in Drupal Stands for AccessibilityThe "A" in Drupal Stands for Accessibility
The "A" in Drupal Stands for AccessibilityKaren Mardahl
 
Ignite Accessibility
Ignite AccessibilityIgnite Accessibility
Ignite AccessibilityKaren Mardahl
 
Technical Communication and Inclusion
Technical Communication and InclusionTechnical Communication and Inclusion
Technical Communication and InclusionKaren Mardahl
 

More from Karen Mardahl (12)

Desiring accessibility!
Desiring accessibility!Desiring accessibility!
Desiring accessibility!
 
Getting Things Done for Technical Communicators
Getting Things Done for Technical CommunicatorsGetting Things Done for Technical Communicators
Getting Things Done for Technical Communicators
 
Getting Things Done for Technical Communicators at TCUK14
Getting Things Done for Technical Communicators at TCUK14Getting Things Done for Technical Communicators at TCUK14
Getting Things Done for Technical Communicators at TCUK14
 
Getting Things Done for Technical Communicators
Getting Things Done for Technical CommunicatorsGetting Things Done for Technical Communicators
Getting Things Done for Technical Communicators
 
Tænk tilgængelighed og brugervenlighed ind i dine sites
Tænk tilgængelighed og brugervenlighed ind i dine sites Tænk tilgængelighed og brugervenlighed ind i dine sites
Tænk tilgængelighed og brugervenlighed ind i dine sites
 
UX Camp CPH Ignite presentation 24 April 2014
UX Camp CPH Ignite presentation 24 April 2014UX Camp CPH Ignite presentation 24 April 2014
UX Camp CPH Ignite presentation 24 April 2014
 
STC13: All you need is... Accessibility
STC13: All you need is... AccessibilitySTC13: All you need is... Accessibility
STC13: All you need is... Accessibility
 
UX Camp CPH 2013 Ignite! presentation, Karen Mardahl
UX Camp CPH 2013 Ignite! presentation, Karen MardahlUX Camp CPH 2013 Ignite! presentation, Karen Mardahl
UX Camp CPH 2013 Ignite! presentation, Karen Mardahl
 
Adaptability: The True Key to Accessibility and Usability? #TCUK12
Adaptability: The True Key to Accessibility and Usability? #TCUK12Adaptability: The True Key to Accessibility and Usability? #TCUK12
Adaptability: The True Key to Accessibility and Usability? #TCUK12
 
The "A" in Drupal Stands for Accessibility
The "A" in Drupal Stands for AccessibilityThe "A" in Drupal Stands for Accessibility
The "A" in Drupal Stands for Accessibility
 
Ignite Accessibility
Ignite AccessibilityIgnite Accessibility
Ignite Accessibility
 
Technical Communication and Inclusion
Technical Communication and InclusionTechnical Communication and Inclusion
Technical Communication and Inclusion
 

Recently uploaded

Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...FIDO Alliance
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfFIDO Alliance
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctBrainSell Technologies
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...marcuskenyatta275
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Skynet Technologies
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireExakis Nelite
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftshyamraj55
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfUK Journal
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...ScyllaDB
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FIDO Alliance
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingScyllaDB
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfFIDO Alliance
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxFIDO Alliance
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераMark Opanasiuk
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGDSC PJATK
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceSamy Fodil
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?Mark Billinghurst
 
Your enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4jYour enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4jNeo4j
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...FIDO Alliance
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfSrushith Repakula
 

Recently uploaded (20)

Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
Your enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4jYour enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4j
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 

Build Accessibly - Community Day 2012

  • 1.
  • 2. I W eb AI M .o rg
  • 4.
  • 6.
  • 7.
  • 8. “So long as a web-based system is inaccessible, it suffers from quality problems and we should focus on quality.” – Karl Groves http://www.karlgroves.com/2012/01/27/chasing-the-accessibility-business-case-conclusion/
  • 9. Structure and headings • Logical! • Skip to main content links (blind & keyboard users) • Sequence and patterns (non-linear navigation - reading order) • Style guides (for consistency) • ARIA (application, banner, complementary, contentinfo, form, main, navigation, search)
  • 10. Lists: <ol> <ul> <li> & CSS styling
  • 11. Do it with a keyboard
  • 13. Labels Source of images: http://www.youtube.com/watch?v=T5OClvFL8I8
  • 14. COLOR 8% ♂; 0.5-1% ♀
  • 15. Tables • Screen readers read tables from left to right, from row to row. • <summary>, <th>, <scope> • How-to: http://dev.opera.com/articles/view/ creating-accessible-data-tables/  &  http:// isolani.co.uk/articles/structuredTables.html  (with a football pools example!)
  • 17. YouTube 4 All • Keyboard-accessible YouTube controls: http:// simplyaccessible.com/article/keyboard-accessible- youtube-controls/ • JW Player:  http://wac.osu.edu/ • Easy YouTube Player: http://icant.co.uk/easy- youtube/docs/index.html • Accessible Media Player: http://www.nomensa.com/ services/accessibility-and-inclusive-design/ accessible-media-player
  • 18. Screen reader testing • Learn: http://www.iheni.com/screen-reader- testing/ • Plan: http://www.spotlessinteractive.com/ articles/accessibility/screen-reader-test- plan.php • More at http://webaxe.blogspot.com/ 2011/04/learning-how-to-use-and-test- with.html
  • 19.
  • 20. Visual / Hearing Motor Cognition (Aging) (Perceivable, Operable, Understandable, Robust Danish: Opfattelig, Anvendelig, Forståelig, Robust)
  • 21. People are different: Test with real people! • http://www.uiaccess.com/accessucd/involve.html • http://alistairduggin.co.uk/blog/using-personas-to- teach-accessibility/
  • 24. http://www.flickr.com/photos/mroche/5414095073/ http://www.flickr.com/photos/mroche/5414095073/
  • 25. When universal design processes fail to include, consult with, and listen to the people we are actually designing for, we also fail to design effectively. – Lisa Herrod http://scenariogirl.com/inclusive-design/the-social-model-of-disability
  • 26. Evaluation Tools • WAVE http://wave.webaim.org/ • Color Contrast and more https://addons.mozilla.org/da/firefox/addon/juicy- studio-accessibility-too/ • Fireeyes http://www.deque.com/products/worldspace-fireeyes/download- worldspace-fireeyes • Functional Accessibility Evaluator http://fae.cita.uiuc.edu/about/ • Web Developer Extension http://chrispederick.com/work/web-developer/ • Web Accessibility Toolbar for IE http://www.paciellogroup.com/resources/ wat-ie-about.html • W3C WAI Tool List http://www.w3.org/WAI/RC/tools/complete
  • 27. $€£¥? Bug cost chart from http://blogs.windriver.com/vxworks/device-management/
  • 28. $€£¥? • Cost I: http://eclecti.ca/2011/05/the-cost-of- accessibility/ • Cost II: http://www.karlgroves.com/ 2011/11/30/how-expensive-is-accessibility/ • For manager-types: http://openconcept.ca/ blog/mgifford/accessibility-tips-management • Case study: http://www.w3.org/WAI/bcase/ legal-and-general-case-study
  • 29. WCAG 2 at a glance • Perceivable • Provide text alternatives for non-text content. • Provide captions and other alternatives for multimedia. • Create content that can be presented in different ways, • including by assistive technologies, without losing meaning. • Make it easier for users to see and hear content. • Operable • Make all functionality available from a keyboard. • Give users enough time to read and use content. • Do not use content that causes seizures. • Help users navigate and find content. • Understandable • Make text readable and understandable. • Make content appear and operate in predictable ways. • Help users avoid and correct mistakes. • Robust • Maximize compatibility with current and future user tools.
  • 30. WCAG 2.0: Understanding and How-To • Understanding WCAG 2.0: A guide to understanding and implementing Web Content Accessibility Guidelines 2.0 http://www.w3.org/TR/UNDERSTANDING- WCAG20/ • How to Meet WCAG 2.0: A customizable quick reference to Web Content Accessibility Guidelines 2.0 requirements (success criteria) and techniques. http://www.w3.org/WAI/WCAG20/quickref/
  • 31. Resources • Yahoo! accessibility code library: http:// yaccessibilityblog.com/library/ • Accessibility topics at Web Standards Sherpa: http://webstandardssherpa.com/ reviews/by-topic/accessibility • Mozilla ARIA resources: https:// developer.mozilla.org/en/ARIA
  • 32. Learn-more resources • What is a screen reader? Article from 2005 so some product details are outdated. Read it for what it is and how it works.  http:// www.nomensa.com/blog/2005/what-is-a-screen- reader/ • Just Ask: Integrating Accessibility Throughout Design: http://www.uiaccess.com/accessucd/ (+ print)
  • 33. Learn-more resources • Opera Web Standards Curriculum in association with Yahoo! Developer Network: http:// www.opera.com/company/education/curriculum/ • Web Standards Project's InterACT (site/book) http://interact.webstandards.org/ • U of MN Newsletter: Typography, information architecture, usability, accessibility, maintained by @laura_carlson http://www.d.umn.edu/itss/ training/online/webdesign/ webdev_listserv.html#subscribe
  • 34. Mobile resources “Mobile Matters Most” • For iOS app builders - discusses Apple Interface Builder. http://mattgemmell.com/ 2010/12/19/accessibility-for-iphone-and- ipad-apps/  • Updates for Android developers: http:// android-developers.blogspot.com/2012/04/ accessibility-are-you-serving-all-your.html
  • 35. Twitter+ Resources • @RogerJohansson + 456bereastreet.com • @webaxe + webaxe.blogspot.com • @silviapfeiffer (all about <video>) • @MarcoInEnglish / @MarcoZehe + marcozehe.de (Firefox) • @jared_w_smith + WebAIM.org (with discussion list, too!) • @iheni + iheni.com (mobile) • @stevefaulkner + paciellogroup.com/blog (ARIA, HTML5) • @dugboticus + alistairduggin.co.uk • @AccessifyForum + accessifyforum.com
  • 36. 10 Principles • Be equitable • Be preventative • Be flexible • Be tolerant • Be simple and • Be effortless intuitive • Be accommodating • Be perceptible • Be consistent • Be informative http://www.copious.co.uk/10Principles.php
  • 38. Thank you for listening! Questions? @kmdk / @stcaccess http://www.mardahl.dk http:/flavors.me/kmdk

Editor's Notes

  1. &amp;#x201C;Byg Tilg&amp;#xE6;ngeligt&amp;#x201D; or &amp;#x201C;Build Accessibly&amp;#x201D; by Karen Mardahl for Community Day 2012 on 10 May 2012. communityday.dk\n
  2. Confession: I love WebAIM. They have so many resources I can learn from. \nLet&amp;#x2019;s start the discussion with an example from WebAIM: an infographic of web accessibility tips for designers (and developers).\nA pretty .png picture. Useless to someone with little or no vision.\n
  3. This picture is available on their site - ALONG with a text version...\n
  4. The text version is the text that is in the image we first saw.\nAll text was pulled from the picture and put into this alternate form.\nAt the top of the screen shown here is a link to an accessible version of the .png file...\n
  5. Someone else - Chris Throup - made an accessible version of the picture.\nLooks the same.\n
  6. But the code reveals how there is no image in what looked like an image on the previous slide.\nIt&amp;#x2019;s just code - machine-readable code.\n
  7. This slide shows Chris Thorup&amp;#x2019;s code with - at the bottom of the slide - a sample of the WebAIM code for the text version.\nThe same message gets across, but in 2 different ways. The WebAIM sample showed icons echoing the original image.\nHowever, those icons get alt text to tell a person using a screen reader what that icon represents.\n
  8. My point today is doing quality work. That&amp;#x2019;s really what this accessibility stuff is about. Karl Groves wrote a series of blog posts and this quote is the last sentence in the concluding post: \nhttp://www.karlgroves.com/2012/01/27/chasing-the-accessibility-business-case-conclusion/\nRead all the articles in the series and you are well on your way to more accessibility in your work!\n1. Chasing the Web Accessibility Business Case &amp;#x2013; Part 1\n2. Chasing the Web Accessibility Business Case &amp;#x2013; Part 2\n3. The SEO Benefits of Accessibility\n4. Increased Usability Through Accessibility\n5. Accessibility and Reduced Design, Development, Production, Maintenance Costs\n6. Accessibility and Reduced Resource Utilization\n7. The buying power of persons with disabilities\n8. The Social Factors of Accessibility\n9. Support for Low Bandwidth Users\n10. List of Web Accessibility-Related Litigation and Settlements\n11. Website Accessibility Increases Compatibility with Mobile/ Alternative Devices\n12. How Expensive is Web Accessibility?\n13. Accessibility Support for Aging Populations\n14. Reduction of Legal Risk as Accessibility Business Case\n15. Chasing the Accessibility Business Case &amp;#x2013; Conclusion\n
  9. Proper structure and good use of headings aid navigation. Use semantic markup and good navigation. Keep things logical. Visual readers interpret the graphic presentation for navigation: headers, location, etc.\nA screen reader needs similar info because screen reader users need the same thing for navigation.\nARIA is especially helpful (more links later). There are 8 document landmark roles to help screen reader users navigate and identify purpose of content as explained in http://www.nomensa.com/blog/2010/wai-aria-document-landmark-roles/ \nSkip to main content links - beneficial not only to blind, but to keyboard users who want to get to a link in the main article and want to avoid all the navigation and advertising links. This is a useful link on the topic:\nhttp://terrillthompson.com/blog/161\nIt&amp;#x2019;s a myth that vision impaired users access everything in a linear fashion or listen to everything on the page. They can skip around on a page (if the structure lets them) and it helps if there is a pattern (vision-impaired users access things sequentially - learn layout and become familiar. Frequent layout changes must be a pain!) VI users listen to all on-screen text - they can skip around, too, listening to just enough to decide whether to stay or go. Source:&amp;#xA0; http://mattgemmell.com/2010/12/19/accessibility-for-iphone-and-ipad-apps/&amp;#xA0; \nBBC has a standards &amp; guidelines semantic markup guide they use - you can base your own in-house style guide on that - for example, to ensure that everyone uses markup correctly and consistently.\nhttp://www.bbc.co.uk/guidelines/futuremedia/technical/semantic_markup.shtml\n\n\n\n
  10. Always use li, ol, ul and style with your CSS. Why people don&apos;t do this, I don&apos;t know. It&apos;s clean! Rumor has it, that this is a problem so I mention it to make sure YOU don&amp;#x2019;t make this mistake!\n\n
  11. Can you do everything with a keyboard? Everything? I use Hootsuite.com for scheduling tweets. I must use a mouse or I cannot complete the login procedure. Same problem with Tweetdeck (which I don&amp;#x2019;t use). Cannot log in with a keyboard. This is crazy when social media is proving to be a great and growing community for people with disabilities - mouse-only means they are excluded. I&amp;#x2019;m told only onClick works with both keyboard and mouse. Why not use classic HTML where possible? This can solve your mobile needs, too. Making everything keyboard accessible is a basic improvement that can go a long way.\n\n
  12. Use alt text correctly. All the time. For all your images. Period! Read the following links to get things right. Add them to your style guide.\nhttp://dev.w3.org/html5/alt-techniques/ \nhttp://webaim.org/techniques/alttext/ \nhttp://www.paciellogroup.com/blog/2010/11/using-the-html-title-attribute/\nhttp://yaccessibilityblog.com/library/accessible-image-links.html\n
  13. Labels need to be made correctly. Always identify the form field with an id attribute. \nThen, create a label element for each field. Connect it to the input field&amp;#x2019;s id using the &amp;#x2018;for&amp;#x2019; attribute.\nSource of images: http://www.youtube.com/watch?v=T5OClvFL8I8\nPlaceholder is optional. Read this article for one opinion on why it is a bad idea: http://blog.laurakalbag.com/labels-in-input-fields-arent-such-a-good-idea/&amp;#xA0; \n
  14. In Denmark, it&amp;#x2019;s estimated that 8% men are colorblind and 0.5-1% women are colorblind.\nResource: http://www.sundhedsguiden.dk/da/temaer/alle-temaer/synet/farveblindhed/\nMoral: consider what colors you are using. This color contrast check from snook.ca is fantastic and very popular. Helps you determine whether you comply with standards, too.\nhttp://www.snook.ca/technical/colour_contrast/colour.html\nA keyword is contrast - watch out for color contrast. http://wearecolorblind.com is a great resource about color issues.\n\n
  15. Tables are for data. Make sure your tables are accessible. Because I don&amp;#x2019;t make tables regularly, I forget how to code them properly. The two resources here are a great help. Remember: use &lt;summary&gt; where you can also list number of columns and rows. Learn to love &lt;th&gt; element and &lt;scope&gt; attribute!\n
  16. You get a gold star if you never do this two things!\n1. DON&amp;#x2019;T USE AUTOPLAY! Hard or impossible to stop using screen reader. If page is opened in a different tab, the sudden noise can be confusing, startling, or conflicting. I.e. cognition issues. DON&amp;#x2019;T DO IT!!\n2. DO NOT USE CLICK HERE OR READ MORE. I rant the reasons why at http://mardahl.dk/2010/11/22/i-dont-want-to-read-more-or-click-here\n\n
  17. Resources for accessible media players. Some are standalone players made to be accessible. The first link is a way to make YouTube accessible.\nThe issue is that screen readers cannot access the controls for the typical media players, which means that cannot access the video. And yes, blind people want to access videos to hear the information. Even a blind and deaf person could enjoy a video if it was captioned properly so there was an interactive transcript.\n
  18. Learn more about using screen readers and testing with them.\nA great collection of videos showing screen reader use collected by @dugboticus\nhttp://alistairduggin.co.uk/blog/screenreader-resources/\n\n
  19. Let&amp;#x2019;s sum up the discussion of what developers can begin to work on to improve accessibility.\nHere we have Twitter.com. It has poor color contrast and problems with labels. It requires JavaScript for nearly everything and has no ARIA. A screen reader user cannot do most things like reply, favorite, etc.\nEnter EasyChirp.com, the child of one developer passionate about accessibility. It has improved use of headings, good semantics, consistent layout and navigation, links that are focusable and visually clear (use :focus with :hover). Everything is keyboard accessible, and JavaScript is unobtrusive JavaScript.\nAccessibility can be done. Why not do it from the beginning.\n
  20. When you have coded with accessibility in mind, you need to meet the users. Here are issues you will encounter.\nVisual: blind, low-vision, colorblind (Uncertain how many people have a vision impairment in Denmark. No central register of this data. There are indications that it is around 65 000. \nSource of information: http://www.servicestyrelsen.dk/handicap/synshandicap/om-synshandicap/statistik\nHearing: deaf or hard-of-hearing: about 800 000 people in Denmark have some sort of hearing loss. http://www.hoerehandicap.dk/index.php?id=608\nMotor skills: using mouse, affects control\nCognition: think especially of dyslexia and types of autism, which affects processing of information. I say busy people of average intelligence under stress can also have cognition issues.\nSome US/UK/Canada stats:&amp;#xA0; http://blog.powermapper.com/blog/post/Website-Accessibility-Disability-Statistics.aspx\nThese issues all relate to the terms used in Web Accessibility Content Guidelines (WCAG): P.O.U.R for perceivable, operable, understandable, and robust. \nThe Danish translation of WCAG 2.0 is at http://www.visinfo.dk/wcag20/WCAG20-da.html\n
  21. Users are different. But are you aware of the variety? When you test your systems, test with real people who have real disabilities.\nPersonas can be a substitute in some cases. Personas to help teach accessibility. Developers are more likely to&amp;#xA0; respond if they can see how people can be affected by their inaccessible web pages.\n
  22. This image shows a man named Jennison Ascuncion surfing the web. But his laptop lid is halfway closed. What&amp;#x2019;s he doing? He&amp;#x2019;s listening to his computer via his screen reader. Without vision, he has no use for looking at the screen. (It might be a cool trick to learn to navigate with a screen reader even when not blind. Then you can relieve the boredom of a conference by listening to what you browse on your computer while pretending to listen to the speaker in the room! :))\n\n
  23. This glimpse inside the Yahoo! Accessibility Lab in California shows an example of someone using enlarged text on a monitor. There is a giant red button on a mouse pad &amp;#x2013; it is used by people with motor skill issues. It&amp;#x2019;s easier to hit that big red button than grip and manipulate a little button on a little mouse.\n\n
  24. Here we have a typical kid slaving away at his homework. He&amp;#x2019;s not so typical, however. He has a Braille reader by his side. This cool technology is helping this kid do his homework and use the potential of his brain even though his eyes cannot see. Let&amp;#x2019;s hope all his digital assignments are accessible so he can charge ahead.\n\n
  25. I love this quote from Lisa @scenariogirl Herrod. It says it all.\n
  26. There are many tools out there to help you evaluate your site. It is good to try them all at first and get a feel for what works best for you. Having a couple installed is not a bad idea. They can back each other up. These can catch the major bloopers. Use these tools to catch the low-hanging fruit. Never uninstall the best overall evaluation tool you have &amp;#x2013; your brain!!\nIf testing excites you, consider joining the Browser Testing and Tools Working Group: http://www.w3.org/2011/08/browser-testing-charter.html\n
  27. So what does accessibility cost? The point of this chart is probably familiar to all software developers. It is cheaper to fix things in the early stages and more expensive to fix them in the later stages.\nAll logic says this applies to accessibility, too.\nSource: http://blogs.windriver.com/vxworks/device-management/\n\n
  28. These are all good articles that discuss the cost of accessibility.\nSome argue that the cost is no different from any training you&amp;#x2019;d take to improve your skills. \nThe case study is interesting, but there are too few case studies and there seems to be a need for more case studies. The doubters want proof. Let&amp;#x2019;s start working on collecting the data.\n
  29. WCAG 2.0 is the best starting place for learning about the Web Accessiblity Content Guidelines. They are huge, so this quick guide is handy to remind you of what to consider along the way.\nFrom: http://www.w3.org/WAI/WCAG20/glance/\nW3C WAI http://www.w3.org/WAI/ \n\n
  30. A more detailed starting point to all the WCAG 2.0 literature is the &amp;#x201C;Understanding WCAG 2.0&amp;#x201D;.\nThe quick reference in the second bullet is fantastic. You can specify technologies, success levels, and sections. The techniques and failures are listed for the technologies HTML, CSS, SMIL, client or server-side scripting, Flash, PDF, Silverlight, and WAI-ARIA. Levels are, of course, A, AA, and AAA. Sections are Advisory Techniques or Sufficient Techniques and Failures.\nPS Don&amp;#x2019;t panic. Just take one step at a time.\n
  31. Great coding resources. The Mozilla ARIA resource is huge and growing. Start your ARIA explorations there.\n
  32. Get to know how a screen reader works by reading the first article. \nThe &amp;#x201C;Just Ask&amp;#x201D; link is an online book that is also available in print form. It is also a great way to start your journey into accessibility.\n
  33. The first two links are teaching/teach-yourself resources.\nThe last link is an excellent newsletter that comes out every week. It comes highly recommended.\n
  34. A quick comment on mobile. Mobile accessibility is a topic unto itself. I include these links just as starting points for those eager to learn more in this area.\n
  35. People are probably the best resources. This is the tip of the iceberg here. I could talk for hours about the people I think you should follow. It caused me pain to not include some people. Because the audience today is developers, I tried to pick out the most appropriate Twitter accounts to get everyone started. Note that the last one also has a forum where you can ask all sorts of questions related to developing accessibly.\n
  36. Written by Sandi Wassmer, one of the architects of BS8878 - British Standard akin to Section 508 in the US.\nThese ten principles are in people-speak and another way to get the mindset for building accessibly.\n
  37. In summary, think about how your work reflects back on you. The man in the photo sees his reflection on the shiny surface of a button on a lamp post in the city. Think back to the starting thought about quality - what quality will you see in your work?\n
  38. \n
  39. \n