TeX Hour

A weekly video meeting

Generating accessible HTML

Date: 13 October 2022
Time: 6:30 to 8:30pm (UK Time)

Jonathan Fine: On Thursday I’ll report on some accessibility investigations. I’d like to see a general purpose tool that writes accessible HTML. I might have to write it myself, but I hope not.

My starting point will be looking at examples of accessible pages and understanding their underlying HTML. I hope this will help me understand what’s needed in the HTML, to make it accessible.

A tool that writes simple accessible tables and which is extensible would be an interesting intermediate goal. Small enough to be practical, large enough to show difficulties, and common enough to be important. Perhaps such a tool already exists, and perhaps I can find it.

Some sites and underlying HTML

I look at some of the recommended accessible web sites, from URLs listed later. And then I did Ctrl-U to View Source and poked around for interesting snippets. More of this sort of work is required, to have an adequate idea of what’s being done to provide accessibility. And to have some sense of the technical context in which accessibility is being provided.

Scope

https://www.scope.org.uk/ is a UK charity whose purpose is equality for disabled people.

<button class="btn purple cookie-popup__allow"
  type="button"
  aria-label="Accept all"
  >Accept all </button>

<div class="accordion__item--body">
  <div class="accordion__item--content rte"
  aria-labelledby="Functional Cookies"
  >
  <p>Functional cookies improve your experience [...]

UK Government

https://www.gov.uk/ is the citizen facing UK government website.

<button aria-controls="super-navigation-menu" aria-expanded="true"
  aria-label="Hide navigation menu"
  class="gem-c-layout-super-navigation-header__navigation-top-toggle-button"
  data-text-for-hide="Hide navigation menu" data-text-for-show="Show
  navigation menu" data-toggle-desktop-group="hidden"
  data-toggle-mobile-group="top" data-tracking-key="menu" hidden
  id="super-navigation-menu-toggle" type="button"> <span
  class="gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner">
    Menu
  </span>
</button>

Patagonia

https://www.patagonia.com/home/ sells outdoor clothing and other gear.

<form role="search" action="/search/" method="get" name="simpleSearch">
  <input class="search-field field-search__input form-control"
    type="search" name="q" value="" placeholder="What are you looking
    for?" autocomplete="off" aria-label="Search (keywords,etc)" />
  <button type="submit" class="btn btn-dark search-submit disabled"
    disabled="true">Submit</button>
  <div class="suggestions-wrapper"
    data-url="/on/demandware.store/Sites-patagonia-us-Site/en_US/SearchServices-GetSuggestions?q=">
  </div>
<input type="hidden" value="null" name="lang">
</form>

W3C multi-level tables

https://www.w3.org/WAI/tutorials/tables/multi-level/

Here is a fragment of a table on holiday accomodation in Paris and Rome (and perhaps many other holiday destinations).

<tr>
  <th id="rbed1" headers="rome">1 bedroom</th>
  <td headers="rome rbed1 stud">13</td>
  <td headers="rome rbed1 apt">21</td>
  <td headers="rome rbed1 chal">22</td>
  <td headers="rome rbed1 villa">3</td>
</tr>

Here rome and the other headers information relates to the content of the table. It is quite different from the class attribute of a tag.

Search: example accessible website

Search: generating accessible html

Search: accessible html table example

Search: generating accessible html table

Search: site:.edu accessible html table

Adam Wills HTML Table generator

This is most interesting. It seems to be entirely web browser based. One ‘uploads’ a CSV file but it seem that the generation of the accessible table is done entirely in the user’s web browser.

This innovation greatly reduces many obstacles to development, deployment and use of this tool. Interested? Get some CVS files and try it out here.

For more information about the TeX Hour, including Zoom URL, see the About page.

Home About Accessibility