- HTML semántico
- Accesibilidad
- Atributos ARIA
- Trabajando con diseño
- CSS avanzado
- Imágenes
- Formularios
- Tipografía
Escribir HTML semántico permite que nuestro código sea más legible, además de mejorar la interpretación de los lectores de pantalla, por lo que es beneficioso también en términos de accesibilidad.
- Elementos HTML para usar como referencia.
- Caninclude para verificar qué elementos HTML pueden anidarse.
Accesibilidad Web significa que sitios web, herramientas y tecnologías están diseñadas y desarrolladas de tal manera que las personas con discapacidades pueden usarlas. Más concretamente, que puedan: percibir, comprender, navegar e interactuar con la web, además de contribuir en ella.
Abarca todas las discapacidades que afectan al acceso a la web, incluyendo auditivas, cognitivas, neurológicas, físicas, del habla y visuales. Y no solo discapacidades: personas con limitación por su ubicación, conexión a internet, personas mayores, etc.
Fuente: W3C
- a11yphant, una introducción a la accesibilidad.
- Recursos de a11y project para conocer más.
ARIA significa Accessible Rich Internet Applications y se usa para añadir información semántica a los elementos de un sitio web. Existen tres tipos de elementos principales:
- Roles: define el tipo de elemento mediante
role=”role_name”, por ejemplobutton,checkbox,dialog,link,tab,menu, etc. - Estados: cambian en función de la interacción del usuario, por ejemplo
aria-checkedyaria-disabled. - Propiedades: no cambian con la interacción del usuario, por ejemplo
aria-labelyaria-hidden.
Ejemplos de uso:
<!-- Botón con solo un icono -->
<button aria-label="Cerrar">
<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24">
<path
d="M19 6.41L17.59 5 12 10.59 6.41 5 5
6.41 10.59 12 5 17.59 6.41 19 12
13.41 17.59 19 19 17.59 13.41 12z"
/>
</svg>
</button><!-- Inupt sin label -->
<input
type="text"
name="name"
placeholder="¿Cuál es tu email?"
aria-label="Tu email"
/>- ARIA Authoring Practices document recoge buenas prácticas para usar roles y propiedades ARIA.
- Cinco reglas de ARIA para tener en cuenta si queremos que nuestra web sea accesible.
- focus-visible
- focus-within
- A guide to designing accessible, WCAG-compliant focus indicators, por Sara Soueidan.
- Pa11y, para ejecutarlo directamente desde la terminal, por ejemplo
npx pa11y https://github.com - Lighthouse, para usarlo desde terminal o con la extensión de Chrome.
- Wave, una de las extensiones para navegadores más completas.
- Ant Design, un sistema de diseño open source.
- El clásico CSS Reset de Eric Meyer.
- Una versión más moderna, explicada al detalle.
:root {
--primary-color: teal;
}
section {
background-color: var(--primary-color);
}
button {
border: 1px solid var(--primary-color);
}div {
width: calc(100% - 80px);
}/* Cuando el navegador tiene al menos 600px */
@media screen and (min-width: 600px) {
div {
/* Estilos */
}
}<figure>
<img
src="starry-night.jpg"
alt="An abstract painting with a weird squiggly tree thing in front of a swirling starry nighttime sky."
/>
<figcaption>
The Starry Night, a famous painting by Vincent van Gogh
</figcaption>
</figure>En función de la densidad de píxeles:
<img
alt="A dog swimming on the beach"
srcset="/dog1x.jpg 1x, /dog2x.jpg 2x, /dog3x.jpg 3x, /dog4x.jpg 4x"
src="/dog-fallback.jpg"
/>En función del tamaño:
<img
alt="A dog swimming on the beach"
srcset="/dog1x.jpg 200w, /dog2x.jpg 300w, /dog3x.jpg 400w, /dog4x.jpg 500w"
src="/dog-fallback.jpg"
/><picture>
<source srcset="dog-zoomed-out.jpg" media="(min-width: 1000px)" />
<source srcset="dog.jpg" media="(min-width: 600px)" />
<img src="dog-zoomed-in.jpg" alt="A dog swimming on the beach" />
</picture>img {
object-fit: cover; /* fill | contain | cover | none | scale-down */
}img {
object-position: right bottom; /* Porcentaje o valores top | left | right | bottom */
}div {
aspect-ratio: 1 / 1; /* Cuadrado */
}Se usa normalmente para cargar fuentes locales.
@font-face {
font-family: Lato;
src: url("path-to-lato.woff2") format("woff2"), url("path-to-lato.woff")
format("woff");
}
@font-face {
font-family: Lato;
src: url("path-to-lato-bold.woff2") format("woff2"), url("path-to-lato-bold.woff")
format("woff");
font-weight: 700;
}
@font-face {
font-family: Lato;
src: url("path-to-lato-italic.woff2") format("woff2"), url("path-to-lato-italic.woff")
format("woff");
font-style: italic;
}
@font-face {
font-family: Lato;
src: url("path-to-lato-bold-italic.woff2") format("woff2"), url("path-to-lato-bold-italic.woff")
format("woff");
font-weight: 700;
font-style: italic;
}@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap");
body {
font-family: "Open Sans", sans-serif;
}<link rel="preconnect" href="<https://fonts.googleapis.com>" />
<link rel="preconnect" href="<https://fonts.gstatic.com>" crossorigin />
<link
href="<https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap>"
rel="stylesheet"
/>body {
font-family: "Open Sans", sans-serif;
}