A proof of concept script to append aria doc roles based on epub:type

index.js

// This is now its own package @ https://github.com/rodebert/epubtype-to-aria
// Please check Rodebert’s repo for a better and more up-to-date version

"use strict";

// Get all the elements with epub:type
// Since querySelectorAll can’t be used with XHTML attributes, 
// we create an array in which we’ll push elements with an epub:type attribute

var epubTypes = [];

// This function gets all the elements in the DOM
(function pushElements() {
  var els = document.querySelectorAll("*");

  for (var a = 0; a < els.length; a++) {
    var el = els[a];
    // we check if the current element has an epub:type attribute
    // If it does, we push the DOM element in the array
    if (el.hasAttribute("epub:type")) {
      epubTypes.push(el);
    }
  }
})();

// Mappings table (epub → role)
var mappings = [
      {epub: "abstract", aria: "doc-abstract"},
      {epub: "acknowledgments", aria: "doc-acknowledgments"},
      {epub: "afterword", aria: "doc-afterword"},
      {epub: "appendix", aria: "doc-appendix"},
      {epub: "biblioentry", aria: "doc-biblioentry"},
      {epub: "bibliography", aria: "doc-bibliography"},
      {epub: "biblioref", aria: "doc-biblioref"},
      {epub: "chapter", aria: "doc-chapter"},
      {epub: "colophon", aria: "doc-colophon"},
      {epub: "conclusion", aria: "doc-conclusion"},
      {epub: "cover", aria: "doc-cover"},
      {epub: "credit", aria: "doc-credit"},
      {epub: "credits", aria: "doc-credits"},
      {epub: "dedication", aria: "doc-dedication"},
      {epub: "endnote", aria: "doc-endnote"},
      {epub: "endnotes", aria: "doc-endnotes"},
      {epub: "epigraph", aria: "doc-epigraph"},
      {epub: "epilogue", aria: "doc-epilogue"},
      {epub: "errata", aria: "doc-errata"},
      {epub: "figure", aria: "figure"},
      {epub: "footnote", aria: "doc-footnote"},
      {epub: "foreword", aria: "doc-foreword"},
      {epub: "glossary", aria: "doc-glossary"},
      {epub: "glossdef", aria: "definition"},
      {epub: "glossref", aria: "doc-glossref"},
      {epub: "glossterm", aria: "term"},
      {epub: "index", aria: "doc-index"},
      {epub: "introduction", aria: "doc-introduction"},
      {epub: "landmarks", aria: "directory"},
      {epub: "list", aria: "list"},
      {epub: "list-item", aria: "listitem"},
      {epub: "noteref", aria: "doc-noteref"},
      {epub: "notice", aria: "doc-notice"},
      {epub: "pagebreak", aria: "doc-pagebreak"},
      {epub: "page-list", aria: "doc-pagelist"},
      {epub: "part", aria: "doc-part"},
      {epub: "preface", aria: "doc-preface"},
      {epub: "prologue", aria: "doc-prologue"},
      {epub: "pullquote", aria: "doc-pullquote"},
      {epub: "qna", aria: "doc-qna"},
      {epub: "referrer", aria: "doc-backlink"},
      {epub: "subtitle", aria: "doc-subtitle"},
      {epub: "table", aria: "table"},
      {epub: "table-row", aria: "row"},
      {epub: "table-cell", aria: "cell"},
      {epub: "tip", aria: "doc-tip"},
      {epub: "toc", aria: "doc-toc"}
    ];

// Init append role="" loop
for (var i = 0; i < epubTypes.length; i++) {
  var element = epubTypes[i];

  // If element hasn’t a role attribute 
  if (!element.hasAttribute("role")) {
    // Get the value for epub:type
    var epubTypeValue = element.getAttribute("epub:type");    // in tagsoup HTML, should be epub\\\:type
    
    // Split the string (we only check 2 = 1 space separator)
    var inflections = epubTypeValue.split(" ", 2);

    // We get an array for inflections so we init another loop
    for (var j = 0; j < inflections.length; j++) {
      var inflection = inflections[j];
      // check if the value (string) is in the mappings table
      var idx = mappings.findIndex(x => x.epub === inflection);
      
      // If it is found
      if (idx >= 0) {
        // Retrieve the aria value
        var ariaValue = mappings[idx].aria;
        // add the role attribute 
        element.setAttribute("role", ariaValue);
        // break the loop since role can only have one value        
        break;
      }
    }
  }
}

License MIT in case you want to use that to make a (web) app upgrading files. :-)

I have made some optimizations: https://gist.github.com/rodebert/81837a2676cf2c04819a582c3eb49c13

Have a look.

Thank you! It’s much better and cleaner.

This is exactly why I wanted to revisit it at some point, given I ended up with an array anyway and just stopped there.

You're welcome :)

Bonjour,
Dans le mappings je vois des epub list, table, cell,... Or quand je regarde dans la liste des epub:type EPUB for Education Structural Semantics je ne les retrouve pas.

Merci pour le script je m'en suis aidé pour mon Plugin vscode - EpubTools

There seems to be a more recent version at https://idpf.github.io/epub-guides/epub-aria-authoring/#sec-mappings

The best way to handle updates would probably be in this repo: https://github.com/rodebert/epubtype-to-aria

I should indeed make clearer this gist is kinda “deprecated” and rodebert’s package is 1. better, 2. distributed (via npm), and 3. documented for usage. :-)