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.
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 [...]
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>
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
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>
rome and the other
headers information relates to the
content of the table. It is quite different from the
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.