I’m currently attending an Accessibility Bootcamp held by Deque that aims at improving the user experience of people with disabilities by making software and documentation WCAG compliant.
We’ve had an insightful session about SWAT structure for documentation. As usual, I’ve jotted down the main ideas:
Basic Document Structure Concepts
Semantic structure is a concept that describes how a page is formatted. It relates to the challenges users may find when trying to make sense of a document structure or any of its components. The semantic structure of documents impacts the user experience of people with visual, mobility, cognitive and speech impairments.
Bear the following in mind while designing content:
Page Titles
- The title must be meaningful and identify its content or purpose
- Information which is unique should go first
- The title should be updated dynamically (whenever possible)
Language
- The page must specify the language through the lang attribute <html lang=”en”>. You can also include LCID strings (e.g. en-au). Note that screenreaders prefer single language codes.
Landmarks
- All content should be integrated within landmark regions
- Pages should not contain more than one instance of banner, main and contentinfo
- Multiple instances of the same landmark should be distinguishable
Headings
- Pages must have meaningfull headings
- The main content should begin with an h1
- Heading elements should not skip heading levels
Lists
- Must be marked up appropriately according to the <ol><ul><dl> semantics
Links and Navigation
- Must have descriptive, meaningful and readable text
- Linked content should be grouped in a single link
- A skip mechanism must be provided
Data Tables
- Must have <th> for rows and column headers
- Should have an accessible name e.g. <caption>
- Complex tables must use additional techniques to associate header cells with data cells (e.g. scope=”row”)
- w3 has some good examples of data tables
Things to Look for when Testing for Accessibility
In this session we’ve also done some hands-on exercises with WS Attest and Chrome’s Developer tools to check:
- If the headings are placed in a logical order (and if elements that look like headings have the heading format)
- If titles are unique
- If tables are well formed
It’s also important to note that by improving accessibility, you also improve SEO 🙂
Useful site: JavaScript Bookmarklets for Accessibility Testing
Marina Hernández 
Leave a reply to Creating Accessible Content with Link States and Colour Ratios | Marina Hernandez Cancel reply