testaro 1.0.0

package/validation/scripts/test/tabNav.json

@@ -0,0 +1,97 @@
+{
+  "what": "validation of tabNav test",
+  "strict": true,
+  "commands": [
+    {
+      "type": "launch",
+      "which": "chromium",
+      "what": "usual browser"
+    },
+    {
+      "type": "url",
+      "which": "file://__dirname/validation/targets/tabNav/good.html",
+      "what": "page with standard menu navigation"
+    },
+    {
+      "type": "test",
+      "which": "tabNav",
+      "what": "tab-list navigation",
+      "withItems": false,
+      "expect": [
+        ["totals.navigations.all.total", "=", 21],
+        ["totals.navigations.all.correct", "=", 21],
+        ["totals.navigations.all.incorrect", "=", 0],
+        ["totals.navigations.specific.tab.total", "=", 3],
+        ["totals.navigations.specific.tab.correct", "=", 3],
+        ["totals.navigations.specific.tab.incorrect", "=", 0],
+        ["totals.navigations.specific.left.total", "=", 3],
+        ["totals.navigations.specific.left.correct", "=", 3],
+        ["totals.navigations.specific.left.incorrect", "=", 0],
+        ["totals.navigations.specific.right.total", "=", 3],
+        ["totals.navigations.specific.right.correct", "=", 3],
+        ["totals.navigations.specific.right.incorrect", "=", 0],
+        ["totals.navigations.specific.up.total", "=", 3],
+        ["totals.navigations.specific.up.correct", "=", 3],
+        ["totals.navigations.specific.up.incorrect", "=", 0],
+        ["totals.navigations.specific.down.total", "=", 3],
+        ["totals.navigations.specific.down.correct", "=", 3],
+        ["totals.navigations.specific.down.incorrect", "=", 0],
+        ["totals.navigations.specific.home.total", "=", 3],
+        ["totals.navigations.specific.home.correct", "=", 3],
+        ["totals.navigations.specific.home.incorrect", "=", 0],
+        ["totals.navigations.specific.end.total", "=", 3],
+        ["totals.navigations.specific.end.correct", "=", 3],
+        ["totals.navigations.specific.end.incorrect", "=", 0],
+        ["totals.tabElements.total", "=", 3],
+        ["totals.tabElements.correct", "=", 3],
+        ["totals.tabElements.incorrect", "=", 0],
+        ["totals.tabLists.total", "=", 1],
+        ["totals.tabLists.correct", "=", 1],
+        ["totals.tabLists.incorrect", "=", 0]
+      ]
+    },
+    {
+      "type": "url",
+      "which": "file://__dirname/validation/targets/tabNav/bad.html",
+      "what": "page with deviant menu navigation"
+    },
+    {
+      "type": "test",
+      "which": "tabNav",
+      "what": "tab-list navigation",
+      "withItems": false,
+      "expect": [
+        ["totals.navigations.all.total", "=", 21],
+        ["totals.navigations.all.correct", "=", 9],
+        ["totals.navigations.all.incorrect", "=", 12],
+        ["totals.navigations.specific.tab.total", "=", 3],
+        ["totals.navigations.specific.tab.correct", "=", 1],
+        ["totals.navigations.specific.tab.incorrect", "=", 2],
+        ["totals.navigations.specific.left.total", "=", 3],
+        ["totals.navigations.specific.left.correct", "=", 0],
+        ["totals.navigations.specific.left.incorrect", "=", 3],
+        ["totals.navigations.specific.right.total", "=", 3],
+        ["totals.navigations.specific.right.correct", "=", 0],
+        ["totals.navigations.specific.right.incorrect", "=", 3],
+        ["totals.navigations.specific.up.total", "=", 3],
+        ["totals.navigations.specific.up.correct", "=", 3],
+        ["totals.navigations.specific.up.incorrect", "=", 0],
+        ["totals.navigations.specific.down.total", "=", 3],
+        ["totals.navigations.specific.down.correct", "=", 3],
+        ["totals.navigations.specific.down.incorrect", "=", 0],
+        ["totals.navigations.specific.home.total", "=", 3],
+        ["totals.navigations.specific.home.correct", "=", 1],
+        ["totals.navigations.specific.home.incorrect", "=", 2],
+        ["totals.navigations.specific.end.total", "=", 3],
+        ["totals.navigations.specific.end.correct", "=", 1],
+        ["totals.navigations.specific.end.incorrect", "=", 2],
+        ["totals.tabElements.total", "=", 3],
+        ["totals.tabElements.correct", "=", 0],
+        ["totals.tabElements.incorrect", "=", 3],
+        ["totals.tabLists.total", "=", 1],
+        ["totals.tabLists.correct", "=", 0],
+        ["totals.tabLists.incorrect", "=", 1]
+      ]
+    }
+  ]
+}

package/validation/scripts/test/zIndex.json

@@ -0,0 +1,40 @@
+{
+  "what": "validation of zIndex test",
+  "strict": true,
+  "commands": [
+    {
+      "type": "launch",
+      "which": "chromium",
+      "what": "usual browser"
+    },
+    {
+      "type": "url",
+      "which": "file://__dirname/validation/targets/zIndex/good.html",
+      "what": "page with no explicit z-index attributes"
+    },
+    {
+      "type": "test",
+      "which": "zIndex",
+      "what": "zIndex",
+      "withItems": false,
+      "expect": [
+        ["totals.total", "=", 0]
+      ]
+    },
+    {
+      "type": "url",
+      "which": "file://__dirname/validation/targets/zIndex/bad.html",
+      "what": "page with explicit z-index attributes roles"
+    },
+    {
+      "type": "test",
+      "which": "zIndex",
+      "what": "zIndex",
+      "withItems": false,
+      "expect": [
+        ["totals.total", "=", 2],
+        ["totals.tagNames.BUTTON", "=", 2]
+      ]
+    }
+  ]
+}

package/validation/targets/bulk/bad.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Large page</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <main>
+      <h1>Large page</h1>
+      <p>This page is large.</p>
+      <p>It contains a long list.</p>
+      <ul>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+        <li>item</li>
+      </ul>
+    </main>
+  </body>
+</html>

package/validation/targets/bulk/good.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Small page</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <main>
+      <h1>Small page</h1>
+      <p>This page is small.</p>
+    </main>
+  </body>
+</html>

package/validation/targets/embAc/bad.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with embedded interactive elements</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <main>
+      <h1>Page with embedded interactive elements</h1>
+      <p>All of the following embeddings violate the HTML specification for <a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element">links</a> or <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element">buttons</a>.</p>
+      <p>This link to <a href="https://en.wikipedia.org/wiki/Button">information about <button type="button">buttons</button> like this</a> contains one.</p>
+      <p>This link to <a href="https://en.wikipedia.org/wiki/Input_method">information about checkboxes such as <input type="checkbox" aria-label="yes or no"> this</a> contains one.</p>
+      <p>This link to <a href="https://en.wikipedia.org/wiki/Drop-down_list">information about drop-down lists such as <select aria-label="choose one"><option>A</option><option>B</option></select></a> contains one.</p>
+      <p>This link to <a href="https://en.wikipedia.org/wiki/HTML">information about HTML text inputs (<input type="text" aria-label="input">), <button type="button">buttons</button>, etc.</a> contains a text input and a button.</p>
+      <p>This <button type="button"> I have read <a href="https://en.wikipedia.org/wiki/Button">Button</a></button> button contains a link.</p>
+      <p>This <button type="button"> Check this <input type="checkbox" aria-label="I have read the button article"> and click <a href="https://en.wikipedia.org/wiki/Button">buttons</a> button</button> contains a checkbox and a link.</p>
+    </main>
+  </body>
+</html>

package/validation/targets/embAc/good.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page without embedded interactive elements</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <main>
+      <h1>Page without embedded interactive elements</h1>
+      <p>This page contains a link to <a href="https://en.wikipedia.org">information</a> and a <button type="button">button</button>. No interactive element is embedded in either of them.</p>
+    </main>
+  </body>
+</html>

package/validation/targets/focAll/good.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with full focusability</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <main>
+      <h1>Page with full focusability</h1>
+      <p>This page contains a link to <a href="https://en.wikipedia.org">information</a>, a <button type="button">button</button>, and a <label>text input <input type="text"></label>. All three, and no other elements, can be focused with Tab-key navigation.</p>
+    </main>
+  </body>
+</html>

package/validation/targets/focAll/less.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with partial focusability</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <main>
+      <h1>Page with partial focusability</h1>
+      <p>This page contains a link to <a id="link" href="https://en.wikipedia.org">information</a>, a <button type="button" onblur="document.getElementById('link').focus()">button</button>, and a <label>text input <input type="text"></label>. Only two of them can be focused with Tab-key navigation, because, when the button is blurred, the link becomes focused again.</p>
+    </main>
+  </body>
+</html>

package/validation/targets/focAll/more.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with added focusability</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <main>
+      <h1>Page with added focusability</h1>
+      <p>This page contains a link to <a href="https://en.wikipedia.org">information</a>, a <button type="button" onfocus="document.getElementById('hiddenP').style.display = 'block'">button</button>, and a <label>text input <input type="text"></label>. All three, and no other elements, can be focused with Tab-key navigation.</p>
+      <p id="hiddenP" style="display: none">The button, when focused, makes this paragraph, and therefore this <a href="https://en.wikipedia.org/wiki/Web_accessibility">link on web accessibility</a> and this <button type="button">new button</button>, visible.</p>
+    </main>
+  </body>
+</html>

package/validation/targets/focInd/bad.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with mixed focus indication</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      input[type=text]:focus {
+        outline: none;
+      }
+      input[type=checkbox]:focus {
+        outline: 3px blue solid;
+        outline-offset: 2px;
+      }
+      #special:focus {
+        outline: none;
+        text-decoration-line: underline overline;
+        text-decoration-color: orange;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Page with mixed focus indication</h1>
+      <p>This paragraph contains a link to <a href="https://en.wikipedia.org">information</a>, a <button type="button">button</button>, and a <label>text input <input type="text"></label>. The link and button exhibit default focus indicators, but the input has none.</p>
+      <p>This paragraph contains a checkbox with an enhanced focus-indication outline. <label><input type="checkbox"> I am human</label></p>
+      <p>This paragraph contains a button with a non-outline focus indicator. <button id="special" type="button">special button</button></p>
+    </main>
+  </body>
+</html>

package/validation/targets/focInd/good.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with outline focus indication</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      input[type=checkbox]:focus {
+        outline: 3px blue solid;
+        outline-offset: 2px;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Page with outline focus indication</h1>
+      <p>This paragraph contains a link to <a href="https://en.wikipedia.org">information</a>, a <button type="button">button</button>, and a <label>text input <input type="text"></label>. All three exhibit default focus indicators.</p>
+      <p>This paragraph contains a checkbox with an enhanced focus-indication outline. <label><input type="checkbox"> I am human</label></p>
+    </main>
+  </body>
+</html>

package/validation/targets/focOp/bad.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with deviant focusability and operability</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <main>
+      <h1>Page with deviant focusability and operability</h1>
+      <p>This paragraph contains a link to <a href="https://en.wikipedia.org">information</a>, a <button type="button" tabindex="-1">button</button>, and a <label>text input <input type="text"></label>. The button is not focusable.</p>
+      <p>This paragraph contains a <span style="font-weight: bold" tabindex="0">focusable part</span> that is not operable.</p>
+      <p>If you click <span id="clickable" style="color: red" onclick="document.getElementById('clickable').style.color = 'black'">this text</span>, it will turn black, but it is not focusable.</p>
+      <p>This <span style="cursor: pointer">word</span> is not focusable, but its cursor makes you think it is operable.</p>
+    </main>
+  </body>
+</html>

package/validation/targets/focOp/good.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with standard focusability and operability</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <main>
+      <h1>Page with standard focusability and operability</h1>
+      <p>This paragraph contains a link to <a href="https://en.wikipedia.org">information</a>, a <button type="button">button</button>, and a <label>text input <input type="text"></label>. All three are focusable and operable.</p>
+    </main>
+  </body>
+</html>

package/validation/targets/hover/bad.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with deviant hover behavior</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <main>
+      <h1>Page with deviant hover behavior</h1>
+      <p>This page contains a link to <a href="https://en.wikipedia.org" onmouseover="document.getElementById('translucent').style.opacity = 1">information</a>, a <button type="button" onmouseover="document.getElementById('hiddenP').style.display = 'block'">button</button>, and a <label>text input <input type="text"></label>. All three elements can be hovered over.</p>
+      <p id="hiddenP" style="display: none">The button, when hovered over, makes this paragraph, and therefore this <a href="https://en.wikipedia.org/wiki/Web_accessibility">link on web accessibility</a> and this <button type="button">new button</button>, visible.</p>
+      <p id="translucent" style="opacity: 0.4">The first link, when hovered over, changes the opacity of this paragraph from 0.4 to 1. That indirectly changes the opacity of this <span>word</span>, too.</p>
+      <p>The small button is mostly covered by a large one below.</p>
+      <p style="position: relative"><button style="position: absolute; left: 10rem">button</button><button style="position: absolute; left: 11rem; top: -0.5rem; font-size: x-large">bigger button</button></p>
+    </main>
+  </body>
+</html>

package/validation/targets/hover/good.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with standard hover behavior</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <main>
+      <h1>Page with standard hover behavior</h1>
+      <p>This paragraph contains a link to <a href="https://en.wikipedia.org">information</a>, a <button type="button">button</button>, and a <label>text input <input type="text"></label>. All three can be hovered over, and hovering over any of them does not trigger any change in content.</p>
+    </main>
+  </body>
+</html>

package/validation/targets/labClash/bad.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with deviant labeling</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <main>
+      <h1>Page with deviant labeling</h1>
+      <p>This paragraph contains an empty <button type="button" aria-label></button> button, with no accessible name.</p>
+      <p>This is another <button id="labButton" type="button" aria-labelledby="buttonLabel">button</button> with its text content overridden by both an explicit label and a reference label as a <label id="buttonLabel" for="labButton">special type of button</label>.</p>
+      <p>This is an implicitly and attribute-labeled <label>checkbox input <input id="cbox" type="checkbox" aria-label="a checkbox-type input"></label>.</p>
+      <p><span id="textInputLabel">Who is your favorite actor?</span> <input type="text" aria-labelledby="textInputLabel" aria-label="your favorite actor">.</p>
+      <p>What do you think? Enter your thoughts into this text area, which is unlabeled.</p>
+      <p><textarea aria-label></textarea></p>
+    </main>
+  </body>
+</html>

package/validation/targets/labClash/good.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with standard labeling</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <main>
+      <h1>Page with standard labeling</h1>
+      <p>This paragraph contains a <button type="button">button</button> with its text content as accessible name, another <button id="labButton" type="button">button</button> with its text content overridden by an explicit label as a <label for="labButton">special type of button</label>, an <label>implicitly labeled text input <input type="text"></label>, and an explicitly labeled <label for="cbox">checkbox input</label>: <input id="cbox" type="checkbox">.</p>
+      <p>This <label>implicitly labeled text input <input id="textInput" type="text"></label> also has an explicit label, which validly provides <label for="textInput">additional information</label>.</p>
+      <p><span id="what">What do you think?</span> Enter your thoughts into this text area, which is labeled by reference.</p>
+      <p><textarea aria-labelledby="what"></textarea></p>
+    </main>
+  </body>
+</html>

package/validation/targets/linkUl/bad.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page without underlined inline links</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <main>
+      <h1>Page without underlined inline links</h1>
+      <p>This paragraph contains an inline link to <a style="text-decoration: overline" href="https://en.wikipedia.org">English information</a> that has an overline instead of an underline.</p>
+      <p>This paragraph contains an inline link to <a style="text-decoration: none" href="https://fr.wikipedia.org">French information</a> without any underline.</p>
+    </main>
+  </body>
+</html>

package/validation/targets/linkUl/good.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with underlined inline links</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      .nude > li > a {
+        text-decoration: none;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Page with underlined inline links</h1>
+      <p>This page contains inline links to <a href="https://en.wikipedia.org">English information</a> and <a style="text-decoration: underline wavy 2px" href="https://fr.wikipedia.org">French information</a>. The latter is weird, but still an underline.</p>
+      <p>The following links, however, are not inline, so can be (and are) devoid of underlines.</p>
+      <ul class="nude">
+        <li><a href="https://sp.wikipedia.org">Spanish information</a></li>
+        <li><a href="https://eo.wikipedia.org">Esperanto information</a></li>
+      </ul>
+      <p>The following links are not inline, so can be devoid of underlines, but still have them.</p>
+      <ul>
+        <li><a href="https://eus.wikipedia.org">Basque information</a></li>
+        <li><a href="https://tr.wikipedia.org">Turkish information</a></li>
+      </ul>
+    </main>
+  </body>
+</html>

package/validation/targets/linkUl/na.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page without inline links</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <main>
+      <h1>Page without inline links</h1>
+      <p>This page contains no inline links.</p>
+      <p>The following links are not inline.</p>
+      <ul>
+        <li><a href="https://eus.wikipedia.org">Basque information</a></li>
+        <li><a href="https://tr.wikipedia.org">Turkish information</a></li>
+      </ul>
+    </main>
+  </body>
+</html>

package/validation/targets/menuNav/bad.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with deviant menu navigation</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="style.css">
+    <script src="bad.js" defer></script>
+  </head>
+  <body>
+    <main>
+      <h1>Page with deviant menu navigation</h1>
+      <p>This page contains a menu bar. In it, the personalities submenu implements pseudofocus management and the technologies menu implements true focus management. <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#menu">These two patterns</a> are recommended by the Accessible Rich Internet Applications Working Group. However, the technologies menu manages focus in a nonstandard manner.</p>
+      <p id="menuBarAbout">Choose a domain to toggle that domain&rsquo;s submenu open or closed. The submenu contains links to definitions (in a new tab).</p>
+      <ul id="menubar" role="menubar" class="menubar blockLink" aria-labelledby="menuBarAbout">
+        <li role="none">
+          <button
+            id="persButton"
+            role="menuitem"
+            type="button"
+            tabindex="0"
+            aria-haspopup="menu"
+            aria-expanded="false"
+            aria-controls="persMenu"
+          >
+            Personalities
+          </button>
+          <ul
+            id="persMenu"
+            role="menu"
+            aria-labelledby="persButton"
+            aria-activedescendant="introvert"
+            class="shut"
+            tabindex="-1"
+          >
+            <li role="none">
+              <a
+                id="introvert"
+                role="menuitem"
+                class="blurred"
+                tabindex="-1"
+                href="https://en.wiktionary.org/wiki/introvert"
+                target="_blank"
+              >
+                introvert
+              </a>
+            </li>
+            <li role="none">
+              <a
+                id="extravert"
+                role="menuitem"
+                class="blurred"
+                tabindex="-1"
+                href="https://en.wiktionary.org/wiki/extravert"
+                target="_blank"
+              >
+                extravert
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li role="none">
+          <button
+            id="techButton"
+            role="menuitem"
+            type="button"
+            tabindex="-1"
+            aria-haspopup="menu"
+            aria-expanded="false"
+            aria-controls="techMenu"
+          >
+            Technologies
+          </button>
+          <ul
+            id="techMenu"
+            role="menu"
+            aria-labelledby="techButton"
+            class="shut"
+          >
+            <li role="none">
+              <a
+                tabindex="-1"
+                role="menuitem"
+                href="https://en.wikipedia.org/wiki/Prestressed_concrete"
+                target="_blank"
+              >
+                prestressed concrete
+              </a>
+            </li>
+            <li role="none">
+              <a
+                tabindex="-1"
+                role="menuitem"
+                href="https://en.wikipedia.org/wiki/Heat_pump"
+                target="_blank"
+              >
+                heat pump
+              </a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </main>
+  </body>
+</html>