Pete's Alley - Accessibility

Written by Rich Morin.

Contents: (hide) (show)

Path:  AreasContentOverviews

Precis:  notes on our approach to accessibility

The goals of Pete’s Alley do not require fancy layouts or much in the way of interactive widgets. All we really need is clean and predictable organization, supported by appropriate HTML tags and a small amount of CSS and JavaScript. This means that we can use a simple (some might say boring) approach to web design.

Although I’m neither an expert on accessibility nor an expert web designer, I’ve been creating web pages and using markup languages for decades. Based on this experience, I’m attempting to follow best practices in accessible and inclusive web design. Accessible Technology at the UW does a nice job of laying out the major objectives; please let me know of any ways in which the site falls short.

Page Generation

Most of the pages in Pete’s Alley, like this one, are generated from TOML files with Markdown inclusions. The actual page rendering is performed by Elixir code (e.g., Earmark and the Phoenix Framework. This approach allows global changes to be made quickly and easily, while still keeping the rendering latency under control.

Sanity Checks

As each page is loaded, assorted sanity checks are performed. Failure of any of these checks causes the page to be ignored. For example:

After all of the pages have been loaded, more checks are performed to ensure inter-page consistency. Failure of any of these checks cancels the load. For example:

Finally, a special-purpose web crawler is used on occasion to ensure that both internal and external links resolve, headings don’t skip over levels, etc.

Page Structure

All of the pages use the same basic layout:

The main section uses headings, lists, and tables extensively.

Markdown Links

Many of the links in Pete’s Alley are expanded from our flavor of Markdown syntax into vanilla Markdown and then into HTML. For example, [TOML]{ext_wp|TOML} turns into:

<a href="https://en.wikipedia.org/wiki/TOML">TOML</a>

See Pete’s Alley - Extensions for details.

To be continued…