Guías Prácticas de Código Accesible

Controles de Formulario Personalizados

Teniendo en cuenta que los formularios deben de presentar un diseño visual que agrade al usuario y que además sea accesible, en esta sección se mostraran algunos ejemplos de cómo construir controles de formulario personalizados accesibles.

Botón de Compartir

Ejemplo:

Code snippet: HTML

<form action="path/to/submit">
  <button type="submit" id="share-btn" class="btn-primary">
    <span class="count">495</span>
    <span class="text">Compartir</span>
  </button>
</form>

Code snippet: JavaScript

document.getElementById('share-btn').addEventListener('click', function(event){
  event.preventDefault();
  event.stopImmediatePropagation();

  var count = this.querySelector('.count');
  var text = this.querySelector('.text');

  count.textContent = parseInt(count.textContent) + 1;
  text.textContent = "Shared ✓";

  this.setAttribute("disabled", "true");
});

Valoración con estrellas

Ejemplo:

Code snippet: HTML

<form action="#" id="star_rating">
 <input value="0" id="star0" checked
  type="radio" name="rating" class="visuallyhidden">
  <label for="star0">
    <span class="visuallyhidden">0 Stars</span>
    <svg viewBox="0 0 512 512">
      <g stroke-width="70" stroke-linecap="square">
        <path d="M91.5,442.5 L409.366489,124.633512"></path>
        <path d="M90.9861965,124.986197 L409.184248,443.184248"></path>
      </g>
    </svg>
  </label>

  <input value="1" id="star1"
    type="radio" name="rating" class="visuallyhidden">
  <label for="star1">
    <span class="visuallyhidden">1 Star</span>
    <svg viewBox="0 0 512 512"><path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path></svg>
  </label>

  <input value="2" id="star2"
    type="radio" name="rating" class="visuallyhidden">
  <label for="star2">
    <span class="visuallyhidden">2 Stars</span>
    <svg viewBox="0 0 512 512">…</svg>
  </label>

  <input value="3" id="star3"
    type="radio" name="rating" class="visuallyhidden">
  <label for="star3">
    <span class="visuallyhidden">3 Stars</span>
    <svg viewBox="0 0 512 512">…</svg>
  </label>

  <input value="4" id="star4"
    type="radio" name="rating" class="visuallyhidden">
  <label for="star4">
    <span class="visuallyhidden">4 Stars</span>
    <svg viewBox="0 0 512 512">…</svg>
  </label>

  <input value="5" id="star5"
    type="radio" name="rating" class="visuallyhidden">
  <label for="star5">
    <span class="visuallyhidden">5 Stars</span>
    <svg viewBox="0 0 512 512">…</svg>
  </label>

  <button type="submit" class="btn-small visuallyhidden focusable">Submit rating</button>

  <output></output>
</form>

Code snippet: CSS

#star_rating svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  stroke: currentColor;
}
#star_rating label, #star_rating output {
  display: block;
  float: left;
  font-size: 2em;
  height: 1.2em;
  color: #036;
  cursor: pointer;
  /* Transparent border-bottom avoids jumping
     when a colored border is applied
     on :hover/:focus */
  border-bottom: 2px solid transparent;
}
#star_rating output {
  font-size: 1.5em;
  padding: 0 1em;
}
#star_rating input:checked ~ label {
  color: #999;
}
#star_rating input:checked + label {
  color: #036;
  border-bottom-color: #036;
}
#star_rating input:focus + label {
  border-bottom-style: dotted;
}
#star_rating:hover input + label {
  color: #036;
}
#star_rating input:hover ~ label,
#star_rating input:focus ~ label,
#star_rating input[id="star0"] + label {
  color: #999;
}
#star_rating input:hover + label,
#star_rating input:focus + label {
  color: #036;
}
#star_rating input[id="star0"]:checked + label {
  color: #ff2d21;
}
#star_rating [type="submit"] {
  float: none;
}

Code snippet: JavaScript

var radios = document.querySelectorAll('#star_rating input[type=radio]');
var output = document.querySelector('#star_rating output');

var do_something = function(stars) {
  // An AJAX request could send the data to the server
 output.textContent = stars;
};

// Iterate through all radio buttons and add a click
// event listener to the labels
Array.prototype.forEach.call(radios, function(el, i){
  var label = el.nextSibling.nextSibling;
  label.addEventListener("click", function(event){
    do_something(label.querySelector('span').textContent);
  });
});

// If the form gets submitted, do_something
document.querySelector('#star_rating').addEventListener('submit', function(event){
  do_something(document.querySelector('#star_rating :checked ~ label span').textContent);
  event.preventDefault();
  event.stopImmediatePropagation();
});