Implement Structure for an Accessible Experience on the Web_Techshare India 2014
•
3 likes•12,145 views
The document discusses best practices for implementing an accessible web page structure using headings, lists, tables, and landmarks. Proper use of these elements helps users understand content arrangement and facilitates quick navigation, especially for users with disabilities. The document outlines guidelines for semantic use of each element and common errors to avoid, such as skipping heading levels, using empty tags, or applying non-semantic markup. Adhering to web accessibility standards helps ensure technology is inclusive for all.
Report
Share
Related slideshows
Implement Structure for an Accessible Experience on the Web_Techshare India 2014
- 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
- 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. 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. 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
- 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
- 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. 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. 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. Appropriate List
- 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
- 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. 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
- 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
- 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. 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.
- 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. 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. Where to Contact Me? Email: priti.rohra@barrierbreak.com Office: +91-26860485/6 Extn: 117 Connect with me at: pritirohra