Accessible Design with HTML5      Developing Web for Accessibility                                  Raj Lal               ...
GOAL: Accessibility with HTML5        1. What     2. Why      3. How
1. What is Web Accessibility ?                  Making     Content & Feature of your Web page        Easily available to E...
Content & Feature    Communication   Interaction             Text   Login             Link   Contact          Images    Se...
Easily Available    Easy to Find, Understand and Use by:    Browsers     Assistive    Search    Devices               Tech...
By Everyone    •   Disabled, Temporary disabled    •   Not so tech savvy users    •   Senior Citizens, Parents    •   Adva...
By Everyone1
Why Accessibility ?           1. What        2. Why         3. How     1. WHAT2
The Business Case       Seniors   Section 508   SEO = Traffic2
Seniors    • Seniors folks Population is 117 Million with      annual spending power of 2 Trillion dollars    • 1/4 consum...
Section 508                     Support                  Disabled Users2
Section 508    Hearing       MobilityCognitive         Visual2
SEO    • Legal & General Group (L&G) Doubled number      of visitors http://www.legalandgeneral.com      •   Within 24 hou...
How to HTML5 for Accessibility       1. What    2. Why     3. How 1. WHAT
How to HTML5 for AccessibilityProgressive       ARIA           Pour       HTML5 Enhance       Accessibility   Principle   ...
Progressive Enhancement                              HTML CSS                              JavaScript                HTML ...
Progressive Enhancement• Design in a Progressive enhancement way• All content available by HTML alone• Use semantically st...
ARIA Accessibility APIs    ARIA = Accessible Rich Internet Applications    Part of HTML5 Specification      1. WHAT3
ARIA Accessibility APIs    • ARIA helps Assistive Technology(AT)    • ARIA Make Web content Accessible to AT    • ARIA use...
How ARIA Works    VoiceOver    Windows Eye                               Roles   States Properties     Assistive    Techno...
ARIA Accessibility APIs    • Uses a set of      -   Roles      -   States and      -   Properties     1. WHAT3
ARIA Roles    • Landmark Roles – Where Am I    • Structural Roles – What’s This    • Interface Widget Roles      1. WHAT3
ARIA Roles       Role type   Role name       Role name       Landmark    application     form       roles       banner    ...
ARIA Roles       Role type    Role name      Role name       Structural   article        listitem       roles        colum...
ARIA Roles      Role type      Role name           Role name      Interface      standalone widget   spinbutton      Widge...
ARIA Roles       Role type    Role name          Role name       Interface    marquee            widget       Widget Roles...
ARIA States    • Dynamic Properties    • Global States    • Widget States     1. WHAT3
ARIA States      Attribute type Global          Widget      ARIA states    aria-busy       listitem                     ar...
ARIA Properties      Attribute    Global            Widget      ARIA         aria-atomic       aria-autocomplete      Prop...
ARIA Properties       Attribute type    Global          Widget       ARIA Properties   aria-live       aria-orientation   ...
W3C POUR PrinciplePerceivable    Operable   Understand   Robust                              able     1. WHAT3
Perceivable    • Text alternative to all non-text content    • Alternative for media using subtitles    • Transcribed text...
Operable• Function accessible from keyboard alone• No auto refresh, allow time based contents• Proper use of Headings & An...
Understandable    • High color contrast 4.5:1    • Use Sans serif fonts & allow resize    • Avoid auto-play of media, anim...
Robust    • Broken HTML tag can cause difficulty with AT    • Follow HTML standard specifications    • Syntactically corre...
HTML5 Semantics    Semantics are 30 new HTML elements which        describe the content of the page     1. WHAT3
Accessible HTML5 Website                      Home               Form          Content     1. WHAT3
Accessible Home Page                     <header role="banner">                     <nav role="navigation">               ...
Accessible Form     1. WHAT3
Accessible Form    HTML5• Use label tag for describing form elements• Associate labels with controls using for attribute• ...
Accessible Form     ARIA    • Use role=main and keep one form in one page    • Use aria-required for required fields    • ...
Accessible Content    • Accessible Image    • Accessible Text and Links      1. WHAT3
Accessible Image    Use alt attribute for alternative text for the image    Use title attribute for tooltip    Use role=pr...
Accessible Text and Links• Font size should always be relative , never fixed• Links should be underlined and of different ...
Reference    WAI ARIA: http://www.w3.org/WAI/intro/aria    WCAG: http://www.w3.org/TR/WCAG/    POUR PRINCIPLE: http://weba...
Thank You   Raj LalTwitter @ iRajLal
Próxima SlideShare
Cargando en…5
×

Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jose @iRajLal

3.187 visualizaciones

Publicado el

How to design an HTML5 website which supports people with disabilities, and know why its a good business decision.
The four major disabilities which will be covered, that effect user capabilities are visual, hearing, mobility (difficulty in using the mouse), and cognitive disabilities, which are related to learning abilities. Know how to use the latest technologies to accommodate these users in the user interface. An accessible web application gives maximum reach to your application’s information, functionalities and benefits, by allowing multiple input methods, different interaction models, and customization based on special needs and limited device supports.
What People Will Learn
- Understand the problem around designing interfaces for people with, disabilities
- Know concrete steps to design and develop web applications to, accommodate the four kinds of major disabilities in HTML5
- Know the business case for Accessibility, 4; Learn the standard practices and design guidelines for accessible, design in HTML5

Publicado en: Tecnología
4 comentarios
3 recomendaciones
Estadísticas
Notas
  • Get my book on Web User Interface design guidelines and best practices here http://www.designuserinterface.com/
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Check my MSDN magazine article on Accessible HTML5 design. Building HTML5 Applications - Designing Accessibility with HTML5

    thanks go to Web Axe / Dennis Lembrée for reviewing it.

    http://msdn.microsoft.com/en-us/magazine/jj863135.aspx
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Good diagram on HTML5 Structural Elements with ARIA , yes right about tabindex, ,y point there is to Test the tabs for logical order,

    slide 41: my suggestion there is Use one Form in one page with role=main
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Pretty good deck. A few comments.
    Slide 38: a better visual that I made of structure: http://bit.ly/YSRIse
    Slide 40 correction: do NOT use tabindex for logical order, but source order.
    Slide 41: unsure of first bullet point; role=main should be used once per page for the main content; isn't related to forms.
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
Sin descargas
Visualizaciones
Visualizaciones totales
3.187
En SlideShare
0
De insertados
0
Número de insertados
659
Acciones
Compartido
0
Descargas
26
Comentarios
4
Recomendaciones
3
Insertados 0
No insertados

No hay notas en la diapositiva.
  • Multiple Browsers: Old &amp; NewMultiple Devices: Mobile, Tablet, TV, PCAssistive Technologies: Audio Browsers, Text only Browsers, Screen Readers, MagnifiersSearch Engines spiders
  • Boomer and Senior population 117 Million with annual spending power of more than 2 trillion
  • Boomer and Senior population 117 Million with annual spending power of more than 2 trillion
  • Boomer and Senior population 117 Million with annual spending power of more than 2 trillion
  • Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jose @iRajLal

    1. 1. Accessible Design with HTML5 Developing Web for Accessibility Raj Lal Senior Engineer
    2. 2. GOAL: Accessibility with HTML5 1. What 2. Why 3. How
    3. 3. 1. What is Web Accessibility ? Making Content & Feature of your Web page Easily available to Everyone1
    4. 4. Content & Feature Communication Interaction Text Login Link Contact Images Search Media Registration Animation1
    5. 5. Easily Available Easy to Find, Understand and Use by: Browsers Assistive Search Devices Technologies Engines1
    6. 6. By Everyone • Disabled, Temporary disabled • Not so tech savvy users • Senior Citizens, Parents • Advanced Users, Mobile Users • Low literacy level • Users in extenuating circumstances1
    7. 7. By Everyone1
    8. 8. Why Accessibility ? 1. What 2. Why 3. How 1. WHAT2
    9. 9. The Business Case Seniors Section 508 SEO = Traffic2
    10. 10. Seniors • Seniors folks Population is 117 Million with annual spending power of 2 Trillion dollars • 1/4 consumer is baby boomer (born 1946-1964) • 57% working-age adults benefit Assistive Tech 1. WHAT2 • Book: Marketing to leading edge boomers and seniors , * Recent study: http://msdn.microsoft.com/en-us/library/windows/desktop/gg712257.aspx
    11. 11. Section 508 Support Disabled Users2
    12. 12. Section 508 Hearing MobilityCognitive Visual2
    13. 13. SEO • Legal & General Group (L&G) Doubled number of visitors http://www.legalandgeneral.com • Within 24 hours search engine traffic saw a 25% increase, eventually growing to 50%. • Significant improvement in Google rankings for all target keywords • Site visitors receiving quotations doubled within 3 months • CNET - 30% increase in traffic from Google • after CNET started providing transcripts 1. WHAT2 http://www.w3.org/WAI/bcase/resources.html
    14. 14. How to HTML5 for Accessibility 1. What 2. Why 3. How 1. WHAT
    15. 15. How to HTML5 for AccessibilityProgressive ARIA Pour HTML5 Enhance Accessibility Principle Semantics 1. WHAT3
    16. 16. Progressive Enhancement HTML CSS JavaScript HTML CSS HTML 1. WHAT3
    17. 17. Progressive Enhancement• Design in a Progressive enhancement way• All content available by HTML alone• Use semantically structured HTML• All presentation elements in the style sheet• Load JavaScript after the page is loaded 1. WHAT3
    18. 18. ARIA Accessibility APIs ARIA = Accessible Rich Internet Applications Part of HTML5 Specification 1. WHAT3
    19. 19. ARIA Accessibility APIs • ARIA helps Assistive Technology(AT) • ARIA Make Web content Accessible to AT • ARIA uses HTML and CSS Tags • Most of ARIA is embedded in JS libraries 1. WHAT3
    20. 20. How ARIA Works VoiceOver Windows Eye Roles States Properties Assistive Technology ARIA Platform HTML Accessibility APIs 1. WHATOSX Accessibility Protocol Mac Linux IAccessible23 Windows MSAA
    21. 21. ARIA Accessibility APIs • Uses a set of - Roles - States and - Properties 1. WHAT3
    22. 22. ARIA Roles • Landmark Roles – Where Am I • Structural Roles – What’s This • Interface Widget Roles 1. WHAT3
    23. 23. ARIA Roles Role type Role name Role name Landmark application form roles banner main complementary navigation contentinfo search 1. WHAT3
    24. 24. ARIA Roles Role type Role name Role name Structural article listitem roles columnheader math definition note directory presentation document region group row heading rowheader 1. WHAT img separator3 list toolbar
    25. 25. ARIA Roles Role type Role name Role name Interface standalone widget spinbutton Widget Roles alert status alertdialog tab button tabpanel checkbox textbox dialog timer gridcell tooltip 1. WHAT link treeitem log composite3
    26. 26. ARIA Roles Role type Role name Role name Interface marquee widget Widget Roles menuitem combobox menuitemcheckbox grid menuitemradio listbox option menu progressbar menubar radio radiogroup 1. WHAT scrollbar tablist slider Tree / treegrid3
    27. 27. ARIA States • Dynamic Properties • Global States • Widget States 1. WHAT3
    28. 28. ARIA States Attribute type Global Widget ARIA states aria-busy listitem aria-disabled math aria-grabbed note aria-hidden presentation aria-invalid region row rowheader 1. WHAT separator3 toolbar
    29. 29. ARIA Properties Attribute Global Widget ARIA aria-atomic aria-autocomplete Properties aria-controls aria-haspopup aria- aria-label describedby aria-level aria-dropeffect aria-multiline aria-flowto aria-multiselectable aria-haspopup 1. WHAT aria-label3 aria-labelledby
    30. 30. ARIA Properties Attribute type Global Widget ARIA Properties aria-live aria-orientation aria-owns aria-readonly aria-relevant aria-required aria-sort aria-valuemax aria-valuemin aria-valuenow 1. WHAT aria-valuetext3
    31. 31. W3C POUR PrinciplePerceivable Operable Understand Robust able 1. WHAT3
    32. 32. Perceivable • Text alternative to all non-text content • Alternative for media using subtitles • Transcribed text and Sign language 1. WHAT3
    33. 33. Operable• Function accessible from keyboard alone• No auto refresh, allow time based contents• Proper use of Headings & Anchors• Joysticks, Voice recognition or audio feedback 1. WHAT3
    34. 34. Understandable • High color contrast 4.5:1 • Use Sans serif fonts & allow resize • Avoid auto-play of media, animation • Avoid auto refresh, or flashy graphics • Multiple visual cues, icons, audio for feedback 1. WHAT3
    35. 35. Robust • Broken HTML tag can cause difficulty with AT • Follow HTML standard specifications • Syntactically correct HTML & validate page • Proper “lang” attributes in the markup • Use “abbr” tag with proper usage 1. WHAT3
    36. 36. HTML5 Semantics Semantics are 30 new HTML elements which describe the content of the page 1. WHAT3
    37. 37. Accessible HTML5 Website Home Form Content 1. WHAT3
    38. 38. Accessible Home Page <header role="banner"> <nav role="navigation"> <section role=“main”> <footer role=“contentinfo”> … Accessible HTML5 1. WHAT HTML53
    39. 39. Accessible Form 1. WHAT3
    40. 40. Accessible Form HTML5• Use label tag for describing form elements• Associate labels with controls using for attribute• Create a logical tab order with tabindex• Use placeholder, type=email, url, text• Use fieldset and legend to group form elements 1. WHAT3
    41. 41. Accessible Form ARIA • Use role=main and keep one form in one page • Use aria-required for required fields • Use aria-live=assertive in the form for validation • Use aria-describedby for adding help to fields 1. WHAT3
    42. 42. Accessible Content • Accessible Image • Accessible Text and Links 1. WHAT3
    43. 43. Accessible Image Use alt attribute for alternative text for the image Use title attribute for tooltip Use role=presentation to ignore the image Use blank alt for decorative images Use meaningful name for src=meaningful.png 1. WHAT3
    44. 44. Accessible Text and Links• Font size should always be relative , never fixed• Links should be underlined and of different color• Use Anchor links, easily navigable by screen readers• Meaningful link text , avoid using “click here” or “more”• Color in CSS with foreground & background color• Simple and Machine readable words like “Home page” 1. WHAT 3
    45. 45. Reference WAI ARIA: http://www.w3.org/WAI/intro/aria WCAG: http://www.w3.org/TR/WCAG/ POUR PRINCIPLE: http://webaim.org/articles/pour/ 1. WHAT3
    46. 46. Thank You Raj LalTwitter @ iRajLal

    ×