Presentation by Priti Rohra - Head Accessibility Testing, BarrierBreak at 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

2. Web page Structure
•
•
•
•
Headings
Lists
Tables
Landmarks

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

6. Appropriate Heading Structure

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. Inappropriate Heading Structure

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

14. Inappropriate List

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

17. Appropriate Table

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. Inappropriate Table

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.

22. Appropriate Landmark

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