Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>Sortable Column Mad Libs</h1>

<p>
  Demonstrating how a browser and screen reader build the announcement presented to users when they encounter sortable table columns. Activate the button and scroll down. Read my post <cite><a href="">Sortable Table Column Mad Libs</a></cite> for more information.
</p>

<form>
  <div id="F01" class="cCtrlType">
    <fieldset>
      <legend>Control Type</legend>
      <div>
        <input type="radio" id="CtrlTypeButton" name="CtrlType" value="button" checked>
        <label for="CtrlTypeButton">Button</label>
      </div>
      <div>
        <input type="radio" id="CtrlTypeLink" name="CtrlType" value="link">
        <label for="CtrlTypeLink">Link (no)</label>
      </div>
    </fieldset>
  </div>
  <div id="F02" class="cRoleDesc">
    <label for="RoleDesc"><code>aria-roledescription</code> Value</label>
    <input type="text" id="RoleDesc">
  </div>
  <div id="F03" class="cColName">
    <label for="ColName">Text in the Control</label>
    <input type="text" id="ColName" value="Year" required>
  </div>
  <div id="F04" class="cARIAdesc">
    <label for="ARIAdesc">Text Referenced via <code>aria-describedby</code></label>
    <input type="text" id="ARIAdesc">
  </div>
  <div id="F05" class="cARIAlbl">
    <label for="ARIAlbl">Text Referenced via <code>aria-labelledby</code></label>
    <input type="text" id="ARIAlbl">
  </div>
  <div id="F06" class="cARIAlblSelf">
    <fieldset>
      <legend>Does <code>aria-labelledby</code> reference the control itself <em>and</em> another node?</legend>
      <div>
        <input type="radio" id="ARIAlblSelfYes" name="ARIAlblSelf" value="yes" checked>
        <label for="ARIAlblSelfYes">Yes (this is better)</label>
      </div>
      <div>
        <input type="radio" id="ARIAlblSelfNo" name="ARIAlblSelf" value="no">
        <label for="ARIAlblSelfNo">No (overriding what the user sees)</label>
      </div>
    </fieldset>
  </div>
  <div id="F07" class="cColCount">
    <label for="ColCount">Column Count</label>
    <input type="number" id="ColCount" size="3" min="1" value="6" required>
  </div>
  <div id="F08" class="cColPos">
    <label for="ColPos">Column Position</label>
    <input type="number" id="ColPos" size="3" min="1" value="3" required>
  </div>
  <div id="F09" class="cSorted">
    <fieldset>
      <legend>Sorted</legend>
      <div>
        <input type="radio" id="SortedNo" name="Sorted" value="none" checked>
        <label for="SortedNo">Unsorted</label>
      </div>
      <div>
        <input type="radio" id="SortedAsc" name="Sorted" value="ascending">
        <label for="SortedAsc">Ascending</label>
      </div>
      <div>
        <input type="radio" id="SortedDesc" name="Sorted" value="descending">
        <label for="SortedDesc">Descending</label>
      </div>
    </fieldset>
  </div>
  <div id="F10">
    <button type="button" onclick="assembleString();">Sortable Column Header, Assemble!</button>
  </div>
</form>

<h2>The HTML</h2>

<p>
  Based on what you provided above, the HTML for your sort control <em>might</em> look like this (I say <em>might</em> because I am faking the <code>id</code> values of the nodes you would reference through <code>aria-labelledby</code> and <code>aria-describedby</code>).
</p>

<pre><code id="DraftHTML">&lt;em&gt;activate the Assemble button&lt;em&gt;</code></pre>

<h2>The Announcements</h2>

<h3>Android 10 / TalkBack / Chrome 85</h3>
<dl>
  <dt>Your values</dt>
  <dd id="TBC85"><em>activate the Assemble button</em></dd>
  <dt>String construct</dt>
  <dd><tt>([aria-labelledby] | [text]), [control], [aria-describedby]</tt></dd>
</dl>

<h3>Android 10 / TalkBack / Firefox 79</h3>
<dl>
  <dt>Your values</dt>
  <dd id="TBFF79"><em>activate the Assemble button</em></dd>
  <dt>String construct</dt>
  <dd><tt>[text], "column header"</tt></dd>
</dl>

<h3>iPadOS 13.4.1 / VoiceOver / Safari</h3>
<dl>
  <dt>Your values</dt>
  <dd id="IPadOS1341"><em>activate the Assemble button</em></dd>
  <dt>String construct</dt>
  <dd><tt>([aria-labelledby] | [text]), "column header", "column" [position], ([aria-roledescription] | [control], "one of one") -pause- [aria-describedby]</tt></dd>
</dl>

<h3>iOS 13.6.1 / VoiceOver / Safari</h3>
<dl>
  <dt>Your values</dt>
  <dd id="IOS1361"><em>activate the Assemble button</em></dd>
  <dt>String construct</dt>
  <dd><tt>([aria-labelledby] | [text]), "column header", "column" [position], ([aria-roledescription] | [control], "one of one") -pause- [aria-describedby]</tt></dd>
</dl>

<h3>macOS 10.15.6 Catalina / VoiceOver / Safari</h3>
<dl>
  <dt>Your values</dt>
  <dd id="MacOS10156"><em>activate the Assemble button</em></dd>
  <dt>String construct</dt>
  <dd><tt>([aria-labelledby] | [text]), ([aria-roledescription] | [control]), "column" [position] "of" [total] (, "sort" ["up"|"down"]) -pause- [aria-describedby]</tt></dd>
</dl>

<h3>NVDA 2020.2 / Firefox 81</h3>
<dl>
  <dt>Your values</dt>
  <dd id="NVDA2020FF81"><em>activate the Assemble button</em></dd>
  <dt>String construct</dt>
  <dd><tt>"column" [position] (, "sorted" ["ascending"|"descending"]), ([aria-roledescription] | [control]), ([aria-labelledby] | [text])</tt></dd>
</dl>

<h3>JAWS 2020 / IE11</h3>
<dl>
  <dt>Your values</dt>
  <dd id="JAWS2020IE11"><em>activate the Assemble button</em></dd>
  <dt>String construct</dt>
  <dd><tt>([aria-labelledby] | [text]), ([aria-roledescription] | [control]) (, "sorted" ["ascending"|"descending"]), "column" [position]</tt></dd>
</dl>

<h3>JAWS 2020 / Chrome 85</h3>
<dl>
  <dt>Your values</dt>
  <dd id="JAWS2020C85"><em>activate the Assemble button</em></dd>
  <dt>String construct</dt>
  <dd><tt>([aria-labelledby] | [text]), ([aria-roledescription] | [control]) (, "sorted" ["ascending"|"descending"]), "column" [position]</tt></dd>
</dl>
              
            
!

CSS

              
                body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  line-height: 1.4;
  /*   line-height: 1.5; */
  /*   letter-spacing: 0.12em; */
  /*   word-spacing: 0.16em; */
  color: #333;
  background: #fff;
}

code,
tt {
  font-family: "Consolas", "Andale Mono", "Lucida Sans Typewriter",
    "Courier New", "Roboto Mono", Courier, monospace;
  font-weight: normal;
  font-size: 90%;
  font-variant-ligatures: none;
}

dd em {
  color: #6b6b6b;
}

dd[id] {
  font-weight: bold;
}

dd[id] em {
  font-weight: normal;
}

pre {
  max-width: 100%;
  overflow: auto;
}

/*-- forms --*/

form {
  background-color: #fff;
  padding: 0.25em .25em;
/*   grid-template-columns: repeat(2, [col] 1fr); */
  max-width: 40em;
  margin: 0 auto;
}
@media (min-width: 42em) {
  form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "F01 F01 F01 F02 F02 F02"
      "F03 F03 F04 F04 F04 F04"
      "F05 F05 F06 F06 F06 F06"
      "F07 F07 F09 F09 F09 F09"
      "F08 F08 F09 F09 F09 F09"
      "F10 F10 F10 F10 F10 F10";
  }
}

#F01 {
  grid-area: F01;
}
#F02 {
  grid-area: F02;
}
#F03 {
  grid-area: F03;
}
#F04 {
  grid-area: F04;
}
#F05 {
  grid-area: F05;
}
#F06 {
  grid-area: F06;
}
#F07 {
  grid-area: F07;
}
#F08 {
  grid-area: F08;
}
#F09 {
  grid-area: F09;
}
#F10 {
  grid-area: F10;
  text-align: center;
}

form > div[id] {
/*   outline: 1px dotted #f00; */
  padding: .25em;
}

form div {
  box-sizing: border-box;
  margin: .25em .25em;
}

fieldset {
  padding: 0 1em .5em 1em;
  margin: .25em 0.5em 1em 0.5em;
}

fieldset legend {
/*   outline: 1px dotted #0f0; */
  padding: 0 .5em .5em .5em;
}

#F01 fieldset div {
  display: inline-block;
}

textarea,
input,
button {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  border: 0.1em solid;
  padding: 0 0.2em;
}

textarea[required],
input:not([type="checkbox"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="range"])[required] {
  border-left-width: 0.4em;
}

textarea:focus,
input:not([type="checkbox"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="range"]):focus {
  outline: 0.15em solid #00f;
  box-shadow: 0 0 0.2em #00f;
}

textarea[aria-invalid="true"],
textarea[aria-invalid="spelling"],
textarea[aria-invalid="grammar"],
input:not([type="checkbox"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="range"])[aria-invalid] {
  background: linear-gradient(135deg, rgba(255,0,0,1) 0, rgba(255,0,0,1) .4em, rgba(255,255,255,1) .4em);
}

button {
  border-color: #00c;
  background-color: #00c;
  border-radius: .5em;
  color: #fff;
  padding: .5em 2em;
  font-weight: bold;
  margin: 1em auto;
}

button:focus, button:hover {
  background-color: #fff;
  color: #00c;
  box-shadow: .1em .1em 0 #fff, .15em .15em 0 #00c, -.1em .1em 0 #fff, -.15em .15em 0 #00c, .1em -.1em 0 #fff, .15em -.15em 0 #00c, -.1em -.1em 0 #fff, -.15em -.15em 0 #00c;
  outline: none;
}

form fieldset label {
  display: inline;
}

label {
  display: block;
  margin: 0 0 0.25em 0;
}

input[type="text"] {
  width: calc(100% - .65em);
}

input[type="text"][required] {
  width: calc(100% - .95em);
}

input[type="number"] {
  width: 2.5em;
}

/* Radios and checkboxen */

input[type=radio],
input[type=checkbox] {
  position: absolute;
  top: auto;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

input[type=radio] + label,
input[type=checkbox] + label {
  display: block;
  padding: .5em;
  padding-left: 2em;
  max-width: calc(100% - 2em);
}

fieldset > div input[type=radio] + label {
  margin: -1em 0;
}

input[type=radio]:focus + label,
input[type=checkbox]:focus + label {
  color: #00f;
  outline: 1px dotted #00f;
}

input[type=radio] + label::before,
input[type=checkbox] + label::before {
  content: '';
  background: #fff;
  border: .1em solid rgba(0, 0, 0, .75);
  background-color: rgba(255, 255, 255, .8);
  display: block;
  box-sizing: border-box;
  float: left;
  width: 1em;
  height: 1em;
  margin-left: -1.5em;
  margin-top: .15em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all .1s ease-out;
}

input[type=radio] + label::before {
  border-radius: 100%;
}

input[type=radio]:disabled + label::before,
input[type=checkbox]:disabled + label::before {
  border: .1em solid rgba(0, 0, 0, .1);
  background-color: rgba(0, 0, 0, .1);
}

input[type=radio]:disabled + label,
input[type=checkbox]:disabled + label {
  color: #ccc;
}

input[type=radio]:checked + label::before {
  background-color: #00f;
  box-shadow: inset 0 0 0 .15em rgba(255, 255, 255, .95);
}

input[type=checkbox] + label::after {
  display: block;
  content: '';
  position: absolute;
  top: .5em;
  left: .5em;
  width: 1em;
  height: 1em;
  transform: rotate(0deg);
  transition: all .1s ease-out;
}

input[type=checkbox]:checked + label::after {
  top: .4em;
  left: .7em;
  width: .4em;
  height: .8em;
  border-right: .25em solid #00f;
  border-bottom: .25em solid #00f;
  transform: rotate(45deg);
}

input[type=checkbox]:disabled + label::after {
  border: none;
}

input[type=checkbox]:checked:disabled + label::after {
  border-right: .25em solid #bbb;
  border-bottom: .25em solid #bbb;
}

/* Color Coding */

.cCtrlType {
  background-color: rgba(255,0,0,.05);
  outline: .1em dotted rgba(255,0,0,.5);
}
.cRoleDesc {
  background-color: rgba(0,255,0,.1);
  outline: .1em dotted rgba(0,255,0,.5);
}
.cColName {
  background-color: rgba(0,0,255,.1);
  outline: .1em dotted rgba(0,0,255,.5);
}
.cARIAdesc {
  background-color: rgba(255,255,0,.1);
  outline: .1em dotted rgba(204,204,0,1);
}
.cARIAlbl {
  background-color: rgba(255,0,255,.1);
  outline: .1em dotted rgba(255,0,255,.5);
}
.cARIAlblSelf {
  background-color: rgba(0,255,255,.1);
  outline: .1em dotted rgba(0,255,255,.5);
}
.cColCount {}
.cColPos {
  background-color: rgba(255,128,0,.1);
  outline: .1em dotted rgba(255,128,0,.5);
}
.cSorted {
  background-color: rgba(0,0,0,.1);
  outline: .1em dotted rgba(0,0,0,.5);
}
              
            
!

JS

              
                function assembleString() {
  var strColName = document.getElementById('ColName').value;
  var strRoleDesc = document.getElementById('RoleDesc').value;
  var strColCount = document.getElementById('ColCount').value;
  var strColPos = document.getElementById('ColPos').value;
  var strARIAlbl = document.getElementById('ARIAlbl').value;
  var strARIAdesc = document.getElementById('ARIAdesc').value;
  var strCtrlType = document.querySelector('input[name="CtrlType"]:checked').value;
  var strSorted = document.querySelector('input[name="Sorted"]:checked').value;
  var strARIAlblSelf = document.querySelector('input[name="ARIAlblSelf"]:checked').value;
  // alert(strColName + ", " + strRoleDesc + ", " + strColCount + ", " + strColPos + ", " + strARIAlbl + ", " + strARIAdesc + ", " + strCtrlType + ", " + strSorted);
  
//   Draft HTML
  var txtDraftHTML;
  var strLblTxt = "";
  var strDescTxt = "";
  var strCtrlOpen;
  var strCtrlClose;
  txtDraftHTML = "&lt;th <span class=\"cSorted\">aria-sort=\"" + strSorted + "\"</span>&gt;";
  if (strCtrlType == "button") {
    strCtrlOpen = "\n  <span class=\"cCtrlType\">&lt;button type=\"button\"</span>";
    strCtrlClose = "\n  <span class=\"cCtrlType\">&lt;/button&gt;</span>"
  } else {
    strCtrlOpen = "\n  <span class=\"cCtrlType\">&lt;a href=\"#\"</span>";
    strCtrlClose = "\n  <span class=\"cCtrlType\">&lt;/a&gt;</span>"
  }
  if (strRoleDesc != '') {
    strCtrlOpen = strCtrlOpen + " <span class=\"cRoleDesc\">aria-roledescription=\"" + strRoleDesc + "\"</span>";
  }
  if (strARIAlbl != '') {
    strLblTxt = "<span class=\"cARIAlbl\">&lt;div id=\"IDRefLbl\"&gt;" + strARIAlbl + "&lt;/div&gt;</span>\n[…]\n";
    if (strARIAlblSelf == "yes") {
      strCtrlOpen = strCtrlOpen + " <span class=\"cARIAlblSelf\">id=\"ctrlMe\"</span> <span class=\"cARIAlbl\">aria-labelledby=\"<span class=\"cARIAlblSelf\">ctrlMe</span> IDRefLbl\"</span>";
    } else {
      strCtrlOpen = strCtrlOpen + " <span class=\"cARIAlbl\">aria-labelledby=\"IDRefLbl\"</span>";
    }
  }
  if (strARIAdesc != '') {
    strDescTxt = "<span class=\"cARIAdesc\">&lt;div id=\"IDRefDesc\"&gt;" + strARIAdesc + "&lt;/div&gt;</span>\n[…]\n";
    strCtrlOpen = strCtrlOpen + " <span class=\"cARIAdesc\">aria-describedby=\"IDRefDesc\"</span>";
  }
  txtDraftHTML = strLblTxt + strDescTxt + txtDraftHTML + strCtrlOpen + "&gt;";
  txtDraftHTML = txtDraftHTML + "\n    " + "<span class=\"cColName\">" + strColName + "</span>";
  txtDraftHTML = txtDraftHTML + strCtrlClose + "\n&lt;/th&gt";
  document.getElementById('DraftHTML').innerHTML = txtDraftHTML;
  
//   Android 10 / TalkBack / Chrome 85
  var strTBC85Ctrl;
  if (strARIAlbl != '') {
    if (strARIAlblSelf == "yes") {
      strTBC85Ctrl = "<span class=\"cColName\">" + strColName + "</span>" + " " + "<span class=\"cARIAlbl\">" + strARIAlbl + "</span>";
    } else {
      strTBC85Ctrl = "<span class=\"cARIAlbl\">" + strARIAlbl + "</span>";
    }
  } else {
    strTBC85Ctrl = "<span class=\"cColName\">" + strColName + "</span>";
  }
  var txtTBC85 = strTBC85Ctrl + ", <span class=\"cCtrlType\">" + strCtrlType + "</span>";
  if (strARIAdesc != '') {
    txtTBC85 = txtTBC85 + ", " + "<span class=\"cARIAdesc\">" + strARIAdesc + "</span>";
  }
  document.getElementById('TBC85').innerHTML = txtTBC85;
  
//   Android 10 / TalkBack / Firefox 79
  var txtTBFF79 = "<span class=\"cColName\">" + strColName + "</span>" + ", column header";
  document.getElementById('TBFF79').innerHTML = txtTBFF79;
  
//   iPadOS 13.4.1 / VoiceOver / Safari
  var txtIPadOS1341;
  if (strARIAlbl != '') {
    if (strARIAlblSelf == "yes") {
      txtIPadOS1341 = "<span class=\"cColName\">" + strColName + "</span>" + " " + "<span class=\"cARIAlbl\">" + strARIAlbl + "</span>";
    } else {
      txtIPadOS1341 = "<span class=\"cARIAlbl\">" + strARIAlbl + "</span>";
    }
  } else {
    txtIPadOS1341 = "<span class=\"cColName\">" + strColName + "</span>";
  }
  txtIPadOS1341 = txtIPadOS1341 + ", column header, <span class=\"cColPos\">column " + strColPos + "</span>";
  if (strRoleDesc != '') {
    txtIPadOS1341 = txtIPadOS1341 + ", " + "<span class=\"cRoleDesc\">" + strRoleDesc + "</span>";
  } else {
    txtIPadOS1341 = txtIPadOS1341 + ", " + "<span class=\"cCtrlType\">" + strCtrlType + "</span>";
  }
  txtIPadOS1341 = txtIPadOS1341 + ", one of one";
  if (strARIAdesc != '') {
    txtIPadOS1341 = txtIPadOS1341 + ". <em>pause</em> " + "<span class=\"cARIAdesc\">" + strARIAdesc + "</span>";
  }
  document.getElementById('IPadOS1341').innerHTML = txtIPadOS1341;
  
//   iOS 13.6.1 / VoiceOver / Safari
  var txtIOS1361;
  if (strARIAlbl != '') {
    if (strARIAlblSelf == "yes") {
      txtIOS1361 = "<span class=\"cColName\">" + strColName + "</span>" + " " + "<span class=\"cARIAlbl\">" + strARIAlbl + "</span>";
    } else {
      txtIOS1361 = "<span class=\"cARIAlbl\">" + strARIAlbl + "</span>";
    }
  } else {
    txtIOS1361 = "<span class=\"cColName\">" + strColName + "</span>";
  }
  txtIOS1361 = txtIOS1361 + ", column header, <span class=\"cColPos\">column " + strColPos + "</span>";
  if (strRoleDesc != '') {
    txtIOS1361 = txtIOS1361 + ", " + "<span class=\"cRoleDesc\">" + strRoleDesc + "</span>";
  } else {
    txtIOS1361 = txtIOS1361 + ", " + "<span class=\"cCtrlType\">" + strCtrlType + "</span>";
  }
  txtIOS1361 = txtIOS1361 + ", one of one";
  if (strARIAdesc != '') {
    txtIOS1361 = txtIOS1361 + ". <em>pause</em> " + "<span class=\"cARIAdesc\">" + strARIAdesc + "</span>";
  }
  document.getElementById('IOS1361').innerHTML = txtIOS1361;
  
//   macOS 10.15.6 Catalina / VoiceOver / Safari
  var txtMacOS10156;
  if (strARIAlbl != '') {
    if (strARIAlblSelf == "yes") {
      txtMacOS10156 = "<span class=\"cColName\">" + strColName + "</span>" + " " + "<span class=\"cARIAlbl\">" + strARIAlbl + "</span>";
    } else {
      txtMacOS10156 = "<span class=\"cARIAlbl\">" + strARIAlbl + "</span>";
    }
  } else {
    txtMacOS10156 = "<span class=\"cColName\">" + strColName + "</span>";
  }
  if (strRoleDesc != '') {
    txtMacOS10156 = txtMacOS10156 + ", " + "<span class=\"cRoleDesc\">" + strRoleDesc + "</span>";
  } else {
    txtMacOS10156 = txtMacOS10156 + ", " + "<span class=\"cCtrlType\">" + strCtrlType + "</span>";
  }
  txtMacOS10156 = txtMacOS10156 + ", <span class=\"cColPos\">column " + strColPos + "</span> of " + strColCount;
  if (strSorted != "none") {
    txtMacOS10156 = txtMacOS10156 + ", <span class=\"cSorted\">sort ";
    if (strSorted == "ascending") {
      txtMacOS10156 = txtMacOS10156 + "up</span>";
    } else {
      txtMacOS10156 = txtMacOS10156 + "down</span>";
    }
  }
  if (strARIAdesc != '') {
    txtMacOS10156 = txtMacOS10156 + ". <em>pause</em> " + "<span class=\"cARIAdesc\">" + strARIAdesc + "</span>";
  }
  document.getElementById('MacOS10156').innerHTML = txtMacOS10156;
  
//   NVDA 2020.2 / Firefox 81
  var txtNVDA2020FF81;
  txtNVDA2020FF81 = "<span class=\"cColPos\">column " + strColPos + "</span>";
  if (strSorted != "none") {
    txtNVDA2020FF81 = txtNVDA2020FF81 + ", <span class=\"cSorted\">sorted " + strSorted + "</span>";
  }
  if (strRoleDesc != '') {
    txtNVDA2020FF81 = txtNVDA2020FF81 + ", " + "<span class=\"cRoleDesc\">" + strRoleDesc + "</span>";
  } else {
    txtNVDA2020FF81 = txtNVDA2020FF81 + ", " + "<span class=\"cCtrlType\">" + strCtrlType + "</span>";
  }
  if (strARIAlbl != '') {
    if (strARIAlblSelf == "yes") {
      txtNVDA2020FF81 = txtNVDA2020FF81 + ", " +  "<span class=\"cColName\">" + strColName + "</span>" + " " + "<span class=\"cARIAlbl\">" + strARIAlbl + "</span>";
    } else {
      txtNVDA2020FF81 = txtNVDA2020FF81 + ", " +  "<span class=\"cARIAlbl\">" + strARIAlbl + "</span>";
    }
  } else {
    txtNVDA2020FF81 = txtNVDA2020FF81 + ", " +  "<span class=\"cColName\">" + strColName + "</span>";
  }
  document.getElementById('NVDA2020FF81').innerHTML = txtNVDA2020FF81;
  
//   JAWS 2020 / IE11
  var txtJAWS2020IE11;
  if (strARIAlbl != '') {
    if (strARIAlblSelf == "yes") {
      txtJAWS2020IE11 = "<span class=\"cColName\">" + strColName + "</span>" + " " + "<span class=\"cARIAlbl\">" + strARIAlbl + "</span>";
    } else {
      txtJAWS2020IE11 = "<span class=\"cARIAlbl\">" + strARIAlbl + "</span>";
    }
  } else {
    txtJAWS2020IE11 = "<span class=\"cColName\">" + strColName + "</span>";
  }
  if (strRoleDesc != '') {
    txtJAWS2020IE11 = txtJAWS2020IE11 + ", " + "<span class=\"cRoleDesc\">" + strRoleDesc + "</span>";
  } else {
    txtJAWS2020IE11 = txtJAWS2020IE11 + ", " + "<span class=\"cCtrlType\">" + strCtrlType + "</span>";
  }
  if (strSorted != "none") {
    txtJAWS2020IE11 = txtJAWS2020IE11 + ", <span class=\"cSorted\">sorted " + strSorted + "</span>";
  }
  txtJAWS2020IE11 = txtJAWS2020IE11 + ", <span class=\"cColPos\">column " + strColPos + "</span>";
  document.getElementById('JAWS2020IE11').innerHTML = txtJAWS2020IE11;
  
//   JAWS 2020 / Chrome 85
  var txtJAWS2020C85;
  if (strARIAlbl != '') {
    if (strARIAlblSelf == "yes") {
      txtJAWS2020C85 = "<span class=\"cColName\">" + strColName + "</span>" + " " + "<span class=\"cARIAlbl\">" + strARIAlbl + "</span>";
    } else {
      txtJAWS2020C85 = "<span class=\"cARIAlbl\">" + strARIAlbl + "</span>";
    }
  } else {
    txtJAWS2020C85 = "<span class=\"cColName\">" + strColName + "</span>";
  }
  if (strRoleDesc != '') {
    txtJAWS2020C85 = txtJAWS2020C85 + ", " + "<span class=\"cRoleDesc\">" + strRoleDesc + "</span>";
  } else {
    txtJAWS2020C85 = txtJAWS2020C85 + ", " + "<span class=\"cCtrlType\">" + strCtrlType + "</span>";
  }
  if (strSorted != "none") {
    txtJAWS2020C85 = txtJAWS2020C85 + ", <span class=\"cSorted\">sorted " + strSorted + "</span>";
  }
  txtJAWS2020C85 = txtJAWS2020C85 + ", <span class=\"cColPos\">column " + strColPos + "</span>";
  document.getElementById('JAWS2020C85').innerHTML = txtJAWS2020C85;
}
              
            
!
999px

Console