Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Implement structure for an
accessible experience on
the web
By Priti Rohra
Head Accessibility Testing

Tel: +91-22-2686048...
Web page Structure
•
•
•
•

Headings
Lists
Tables
Landmarks
Need For Accessible Web Page Structure
• Helps to understand how the content is
arranged
• Facilitates quick navigation
• ...
Headings
• Used to mark sections on a web page
• W3C has defined 6 heading levels:
– <h1> - to - <h6>

• Helps to navigate...
Best Practices
• Define headings as per specifications:
– <h2> should follow <h1>
– <h3> should follow <h2>& so on …

• Us...
Appropriate Heading Structure
Common Errors
• Heading levels are skipped:
– <h4> is used after <h1>
– <h2> or <h3> is used to mark the main heading on a...
Inappropriate Heading Structure
Lists
• Used to present related information
– Navigation links: site navigation, section navigation
etc.
– Page content: s...
Types of lists
• Ordered list <ol>
– Sequential content: steps of a process explained, bread
crumb trails etc.
• Unordered...
Best Practices
• Use accurate list type to mark-up related
content
• Avoid use of styles to hide list item prefix
• Avoid ...
Appropriate List
Common Errors
• Use of styles to present related content
• Use of definition list to mark-up content that
does not include...
Inappropriate List
Tables
• Consists of rows & columns used to present
information
• Types of tables:
– Data tables:
• Used to present relate...
Best Practices
• Simple data tables:
– Use <th> tags to mark-up row & column headers
– Use scope attribute???
– Caption & ...
Appropriate Table
Common Errors
• Table headers not identified
• Legend text & navigation links included in the
data table
• Summary not def...
Inappropriate Table
Landmarks
• Used to mark sections of a web page
• Introduced in WAI-ARIA & HTML 5
• Helps to quickly navigate to sections ...
Best practices
• Define landmarks as per specifications
– Specify 1 banner, search, main landmark on a page

• Use landmar...
Appropriate Landmark
Common Errors
• Use of multiple ‘Main’ landmarks on a page
• Use of only ‘Banner’ landmark on a page
• Use of ‘Application...
Let Technology be Inclusive!
Assistive Technology

Accessibility Services
Accessible Web
Development

Accessible
Conversio...
Where to Contact Me?
Email: priti.rohra@barrierbreak.com
Office: +91-26860485/6 Extn: 117
Connect with me at:

pritirohra
Upcoming SlideShare
Loading in …5
×

Implement Structure for an Accessible Experience on the Web_Techshare India 2014

11,752 views

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?
       Reply 
    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: http://bit.ly/1e4PvVm
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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: www.barrierbreak.com Email: sales@barrierbreak.com
  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: priti.rohra@barrierbreak.com Office: +91-26860485/6 Extn: 117 Connect with me at: pritirohra

×