Skip to content

Instantly share code, notes, and snippets.

@joelalejandro

joelalejandro/codear-calendar-a11y.html

Created September 19, 2019 16:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save joelalejandro/af6fa41c48fe21681bbc9c28dd479bc2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save joelalejandro/af6fa41c48fe21681bbc9c28dd479bc2 to your computer and use it in GitHub Desktop.
Download ZIP
Ejemplo de implementación de calendario con soporte A11y
Raw
codear-calendar-a11y.html
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>CoDeAr | Comunidad de Desarrolladores de Argentina</title>
</head>
<body>
<header>
<img alt="Comunidad de Desarrolladores de Argentina" />
<nav aria-label="Menú principal" role="menu">
<li><a href="#" role="menuitem">Conocenos</a></li>
<li><a href="#" role="menuitem">Agenda</a></li>
<li><a href="#" role="menuitem">Proyectos</a></li>
<li><a href="#" role="menuitem">Código de conducta</a></li>
</nav>
</header>
<section>
<h2 aria-hidden="true">Eventos</h2>
<ol role="table" aria-atomic="true" aria-label="Calendario de eventos">
<li role="cell" aria-hidden="true">01</li>
<li role="cell" aria-hidden="true">02</li>
<li role="cell" aria-label="Eventos para el 03 de Septiembre">
<label aria-hidden="true">03</label>
<ul aria-label="Hay 1 evento para este día." role="presentation">
<li><a href="#">Evento 1</a></li>
</ul>
</li>
<li role="cell" aria-hidden="true">04</li>
<li role="cell" aria-label="Eventos para el 05 de Septiembre">
<label aria-hidden="true">05</label>
<ul aria-label="Hay 2 eventos para este día." role="presentation">
<li><a href="#">Evento 2</a></li>
<li><a href="#">Evento 3</a></li>
</ul>
</li>
</ol>
<select role="menu" aria-label="Cambiar de mes">
<option aria-label="Ver eventos para Septiembre 2019">Septiembre 2019</option>
<option aria-label="Ver eventos para Octubre 2019">Octubre 2019</option>
</select>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment