Implement Structure for an Accessible Experience on the Web_Techshare India 2014


Published on

Presentation by Priti Rohra - Head Accessibility Testing, BarrierBreak at Techshare India 2014

Published in: Technology
  • Thanks Dennis!

    Nice representation of HTML5 roles & ARIA landmarks! On an another note, I believe in native HTML elements & attributes rather then ARIA to ensure backward competibility as well. Moreover in HTML 5 Summary is absolete & Details is recommended but let's see what HTML5 finally agrees on?
    Are you sure you want to  Yes  No
    Your message goes here
  • Great preso, this has been badly needed! But I don't think I'm quite as literal as you with use of DL. I now recommend aria-describedby rather than table summary. Here's a helpful diagram on landmarks:
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Implement Structure for an Accessible Experience on the Web_Techshare India 2014

  1. 1. Implement structure for an accessible experience on the web By Priti Rohra Head Accessibility Testing Tel: +91-22-26860485/6 Web: Email:
  2. 2. Web page Structure • • • • Headings Lists Tables Landmarks
  3. 3. Need For Accessible Web Page Structure • Helps to understand how the content is arranged • Facilitates quick navigation • Helps to understand the content easily • Improves overall user experience
  4. 4. Headings • Used to mark sections on a web page • W3C has defined 6 heading levels: – <h1> - to - <h6> • Helps to navigate quickly: – Users with visual impairments – Users with mobility impairments
  5. 5. Best Practices • Define headings as per specifications: – <h2> should follow <h1> – <h3> should follow <h2>& so on … • Use 1 <h1> on a page • Use descriptive text to mark headings • Use styles consistently to mark headings at same levels
  6. 6. Appropriate Heading Structure
  7. 7. Common Errors • Heading levels are skipped: – <h4> is used after <h1> – <h2> or <h3> is used to mark the main heading on a page • • • • Multiple <h1>’s are used on a page Use of empty heading mark-up Content marked-up as a heading Use of styles to visually format text as headings
  8. 8. Inappropriate Heading Structure
  9. 9. Lists • Used to present related information – Navigation links: site navigation, section navigation etc. – Page content: steps, list of errors etc. • Helps users identify: – Beginning/end of lists – Number of items in a list
  10. 10. Types of lists • Ordered list <ol> – Sequential content: steps of a process explained, bread crumb trails etc. • Unordered list <ul> – Related content: navigation links, list of products/services etc. • Definition lists <dl> – Terms & their definition: glossary, expansion for abbreviations, acronyms etc. • Nested lists: – Lists within a list: Navigation menus & sub-menus, site map, index etc.
  11. 11. Best Practices • Use accurate list type to mark-up related content • Avoid use of styles to hide list item prefix • Avoid use of empty <li> tags
  12. 12. Appropriate List
  13. 13. Common Errors • Use of styles to present related content • Use of definition list to mark-up content that does not include definitions etc. • Use of styles to hide list item prefix • Non-semantic use of list mark-up: – Use of <ul> to mark-up sequential content – Use of <ol> to mark-up list of definitions
  14. 14. Inappropriate List
  15. 15. Tables • Consists of rows & columns used to present information • Types of tables: – Data tables: • Used to present related information • Define table headers • Define table caption & summary – Layout tables: • Used to position page content • Use CSS instead …
  16. 16. Best Practices • Simple data tables: – Use <th> tags to mark-up row & column headers – Use scope attribute??? – Caption & summary not required • Complex data tables: – Use <th> tags + header, id attributes to mark-up row & column headers – Specify table caption & summary • Layout tables: – Position the content in an accurate linear order
  17. 17. Appropriate Table
  18. 18. Common Errors • Table headers not identified • Legend text & navigation links included in the data table • Summary not defined for complex data table • Use of identical text for table caption & summary • Use of <th> tag for layout tables • Use of summary attribute for layout tables • Use of incorrect structure to present table data
  19. 19. Inappropriate Table
  20. 20. Landmarks • Used to mark sections of a web page • Introduced in WAI-ARIA & HTML 5 • Helps to quickly navigate to sections of a page: – Banner, Search, Navigation; – Main, Complementary, Content info etc.
  21. 21. Best practices • Define landmarks as per specifications – Specify 1 banner, search, main landmark on a page • Use landmarks to mark all sections of a page – Assign labels to differentiate one section from another: – Global navigation, footer navigation etc.
  22. 22. Appropriate Landmark
  23. 23. Common Errors • Use of multiple ‘Main’ landmarks on a page • Use of only ‘Banner’ landmark on a page • Use of ‘Application’ landmark’ to present form instructions
  24. 24. Let Technology be Inclusive! Assistive Technology Accessibility Services Accessible Web Development Accessible Conversion POUR Accessibility Testing • • • Empower persons with disabilities Provide equal access to technology Build inclusion and diversity • • • Testing by persons with disabilities Meet your social and legal requirements Comply with accessibility guidelines
  25. 25. Where to Contact Me? Email: Office: +91-26860485/6 Extn: 117 Connect with me at: pritirohra