SWAT Document Structure – Accessibility Techniques

people inside building
Photo by fauxels on Pexels.com

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

 

 

 

One thought on “SWAT Document Structure – Accessibility Techniques

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s