Pizza Service Survey: aria-labelledby

Features

• Uses aria-labelledby to label radio buttons with existing visible content on the page.
• Keyboard focus and hover styling use CSS :focus and :hover pseudo selectors with the outline property.

Pizza Survey

Question	Very Dissatisfied	Dissatisfied	Neutral	Satisfied	Very Satisfied
Quality of your ordering experience?
Quality of Pizza?
Quality of your Pizza delivery?

HTML Source Code

  <h2>
    Pizza Survey
  </h2>
  <table class="survey table table-striped">
    <thead>
      <tr>
        <th class="question">
          Question
        </th>
        <th id="r1" class="rating">
          Very Dissatisfied
        </th>
        <th id="r2" class="rating">
          Dissatisfied
        </th>
        <th id="r3" class="rating">
          Neutral
        </th>
        <th id="r4" class="rating">
          Satisfied
        </th>
        <th id="r5" class="rating">
          Very Satisfied
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th id="q1" class="question">
          Quality of your ordering experience?
        </th>
        <td class="rating">
          <input name="q1"
               type="radio"
               value="1"
               aria-labelledby="r1 q1">
        </td>
        <td class="rating">
          <input name="q1"
               type="radio"
               value="2"
               aria-labelledby="r2 q1">
        </td>
        <td class="rating">
          <input name="q1"
               type="radio"
               value="3"
               aria-labelledby="r3 q1">
        </td>
        <td class="rating">
          <input name="q1"
               type="radio"
               value="4"
               aria-labelledby="r4 q1">
        </td>
        <td class="rating">
          <input name="q1"
               type="radio"
               value="5"
               aria-labelledby="r5 q1">
        </td>
      </tr>
      <tr>
        <th id="q2" class="question">
          Quality of Pizza?
        </th>
        <td class="rating">
          <input name="q2"
               type="radio"
               value="1"
               aria-labelledby="r1 q2">
        </td>
        <td class="rating">
          <input name="q2"
               type="radio"
               value="2"
               aria-labelledby="r2 q2">
        </td>
        <td class="rating">
          <input name="q2"
               type="radio"
               value="3"
               aria-labelledby="r3 q2">
        </td>
        <td class="rating">
          <input name="q2"
               type="radio"
               value="4"
               aria-labelledby="r4 q2">
        </td>
        <td class="rating">
          <input name="q2"
               type="radio"
               value="5"
               aria-labelledby="r5 q2">
        </td>
      </tr>
      <tr>
        <th id="q3" class="question">
          Quality of your Pizza delivery?
        </th>
        <td class="rating">
          <input name="q3"
               type="radio"
               value="1"
               aria-labelledby="r1 q3">
        </td>
        <td class="rating">
          <input name="q3"
               type="radio"
               value="2"
               aria-labelledby="r2 q3">
        </td>
        <td class="rating">
          <input name="q3"
               type="radio"
               value="3"
               aria-labelledby="r3 q3">
        </td>
        <td class="rating">
          <input name="q3"
               type="radio"
               value="4"
               aria-labelledby="r4 q3">
        </td>
        <td class="rating">
          <input name="q3"
               type="radio"
               value="5"
               aria-labelledby="r6 q3">
        </td>
      </tr>
    </tbody>
  </table>
  <input type="submit" value="Submit Survey">

CSS Source Code

  

      table.survey th.rating,
      table.survey td.rating {
      text-align: center;
      }

      table.survey tbody th {
      font-weight: normal;
      }

      table.survey input:focus,
      table.survey input:hover {
        outline: 2px solid #444444;
        outline-offset: 0.25em;
      }

    

Javascript Source Code

  

        function itemFocus(event) {
          if( event.target ) event.target.parentNode.classList.add("focus");
        }

        function itemBlur(event) {
          if( event.target ) event.target.parentNode.classList.remove("focus");
        }

        window.addEventListener('load', function load(event) {
          var itemList = document.querySelectorAll('td input');

          for(var i = 0; i < itemList.length; i++) {
            var item = itemList[i];
            item.addEventListener('focus', itemFocus, true);
            item.addEventListener('blur', itemBlur, true);
          }
        }, false);