RGAA Information Structure Accessibility Audit (Theme 9)

Audits a web page against the 4 criteria of RGAA v4.1.2 Theme 9: Information Structure.

Audit procedure

Step 1: Gather structural data

(() => {
  const structure = {};

  // Headings hierarchy
  structure.headings = [];
  document.querySelectorAll('h1,h2,h3,h4,h5,h6,[role="heading"]').forEach(el => {
    const level = el.tagName?.match(/H(\d)/)?.[1] || el.getAttribute('aria-level');
    structure.headings.push({
      level: parseInt(level),
      text: el.textContent.trim().substring(0, 80),
      tag: el.tagName.toLowerCase(),
      ariaLevel: el.getAttribute('aria-level'),
      isHidden: getComputedStyle(el).display === 'none' || getComputedStyle(el).visibility === 'hidden',
      ariaHidden: el.getAttribute('aria-hidden')
    });
  });

  // Landmark regions
  structure.landmarks = [];
  const landmarkSelectors = {
    'banner': 'header, [role="banner"]',
    'navigation': 'nav, [role="navigation"]',
    'main': 'main, [role="main"]',
    'contentinfo': 'footer, [role="contentinfo"]',
    'complementary': 'aside, [role="complementary"]',
    'search': '[role="search"], search',
    'form': '[role="form"]',
    'region': '[role="region"]'
  };

  Object.entries(landmarkSelectors).forEach(([type, selector]) => {
    document.querySelectorAll(selector).forEach(el => {
      structure.landmarks.push({
        type: type,
        tag: el.tagName.toLowerCase(),
        role: el.getAttribute('role'),
        ariaLabel: el.getAttribute('aria-label'),
        ariaLabelledby: el.getAttribute('aria-labelledby'),
        text: el.textContent.trim().substring(0, 40)
      });
    });
  });

  // Lists
  structure.lists = {
    ul: document.querySelectorAll('ul').length,
    ol: document.querySelectorAll('ol').length,
    dl: document.querySelectorAll('dl').length,
    liOutsideList: document.querySelectorAll('li:not(ul > li):not(ol > li):not(menu > li)').length,
    dtOutsideDl: document.querySelectorAll('dt:not(dl > dt)').length,
    ddOutsideDl: document.querySelectorAll('dd:not(dl > dd)').length,
    roleList: document.querySelectorAll('[role="list"]').length,
    roleListitem: document.querySelectorAll('[role="listitem"]').length
  };

  // Quotations
  structure.quotations = {
    blockquote: document.querySelectorAll('blockquote').length,
    q: document.querySelectorAll('q').length,
    cite: document.querySelectorAll('cite').length
  };

  return JSON.stringify(structure, null, 2);
})()