Guía para el Desarrollo Web
Bienvenidos al mundo del desarrollo web. En esta guía, puedes explorar aspectos esenciales sobre la accesibilidad en proyectos web. Esta información es crucial para desarrollar proyectos web efectivos y accesibles.
Temas Cubiertos
Se añaden 9 criterios nuevos, uno de ellos es:
Focus Not Obscured (Minimum):
Cuando un componente de la interfaz de usuario recibe el foco de teclado, el componente no puede estar completamente oculto por un contenido creado por el autor. Los ejemplos más habituales de contenidos que se superponen a un elemento con el foco son los pies y encabezados fijos o las capas no modales, por ejemplo, la capa de aceptación de cookies.
Más detalles aquí.
Los atributos ARIA ayudan a mejorar la accesibilidad de los elementos en una página web. A continuación, se presentan los principales componentes de ARIA y algunos ejemplos de uso:
-
Roles: Describen el tipo de elemento de la interfaz de usuario, como botones, menús o formularios.
<div role="button">Haga clic aquí</div> -
Propiedades: Proporcionan información adicional sobre el estado o características de un elemento.
<input type="checkbox" aria-checked="false"> -
Estados: Indican cambios dinámicos en la interfaz de usuario que las tecnologías de asistencia deben conocer.
<button aria-expanded="true">Mostrar más</button>
Ejemplos de uso de ARIA:
-
Formulario accesible:
<form> <label for="username">Nombre de usuario:</label> <input type="text" id="username" aria-required="true"> <label for="password">Contraseña:</label> <input type="password" id="password" aria-required="true"> <button type="submit" aria-label="Enviar formulario">Enviar</button> </form> -
Mensajes de error accesibles:
<input type="email" id="email" aria-describedby="email-error"> <span id="email-error" aria-live="polite">Por favor, ingrese un email válido.</span>
alt en una etiqueta <img> proporciona una descripción alternativa de la imagen que se mostrará si la imagen no se puede cargar. Además, esta descripción es leída por lectores de pantalla para usuarios con discapacidad visual.
Ejemplos de código:
-
Imagen de una persona de perfil:
<img src="perfil-mujer-sonriente-cabello-castano.jpg" alt="Retrato de una mujer sonriente con cabello castaño claro, usando una blusa azul" />En este ejemplo, si la imagen no se carga, el texto "Retrato de una mujer sonriente con cabello castaño claro, usando una blusa azul" será mostrado como alternativa.
-
Imagen de un plato de comida en una tienda online:
<img src="plato-pasta-salsa-tomate-albahaca.jpg" alt="Plato de pasta con salsa de tomate y albahaca, servido en un plato blanco" />En este ejemplo, si la imagen no se carga, el texto "Plato de pasta con salsa de tomate y albahaca, servido en un plato blanco" será mostrado como alternativa.
-
Imagen de una prenda de vestir publicada en una tienda online:
<img src="camisa-algodon-blanca.jpg" alt="Camisa de algodón blanca con botones, con cuello en forma de V" />En este ejemplo, si la imagen no se carga, el texto "Camisa de algodón blanca con botones, con cuello en forma de V" será mostrado como alternativa.
Ejemplo de estructura de carpetas básica:
proyecto/
├── index.html
├── css/
│ └── styles.css
├── js/
│ └── scripts.js
├── img/
│ └── logo.png
└── fonts/
└── custom-font.ttf
En este ejemplo, css/ contiene los archivos de estilos, js/ los archivos de JavaScript, img/ las imágenes, y fonts/ las fuentes personalizadas.
Ejemplo de código:
/* Fondo oscuro con texto claro */
body {
background-color: #333;
color: #f9f9f9;
}
/* Fondo claro con texto oscuro */
header {
background-color: #f9f9f9;
color: #333;
}
En el ejemplo, se utiliza un fondo oscuro con texto claro para mejorar la legibilidad en la mayoría de las situaciones. Es importante verificar el contraste con herramientas de validación de accesibilidad.
Ejemplo de prueba:
Usa NVDA o cualquier otro lector de pantalla para verificar que todos los elementos interactivos, como botones y enlaces, sean descritos correctamente y que el contenido sea legible. También puedes usar la tecla Tab para navegar entre los elementos interactivos y asegurarte de que el enfoque sea claro y accesible.
Para descargar NVDA, visita el siguiente enlace: Descarga de NVDA
Ejemplo de código 1:
document.getElementById('miFormulario').addEventListener('submit', function(event) {
let nombre = document.getElementById('nombre').value;
if (nombre === '') {
alert('El nombre es obligatorio.');
event.preventDefault(); // Evita que el formulario se envíe
}
});
En este ejemplo, el formulario no se enviará si el campo "nombre" está vacío, y el usuario verá una alerta.
Ejemplo de código 2:
<form id="formulario">
<label for="nombreInput">Nombre:</label>
<input type="text" id="nombreInput" placeholder="Ingresá solo letras" aria-describedby="nombreError" oninput="validarNombre()" required>
<span id="nombreError" style="color: red; display: none;" aria-live="polite">❌ No se permiten números ni espacios en blanco.</span>
<br>
<label for="emailInput">Email:</label>
<input type="email" id="emailInput" placeholder="Ingresá tu email" required>
<br>
<input type="submit" value="Enviar">
</form>
<script>
function validarNombre() {
var nombre = document.getElementById('nombreInput').value;
var nombreError = document.getElementById('nombreError');
// Verifica si el nombre contiene números o solo espacios en blanco
if (/\d/.test(nombre) || /^\s*$/.test(nombre)) {
nombreError.style.display = 'inline';
} else {
nombreError.style.display = 'none';
}
}
document.getElementById('formulario').addEventListener('submit', function(event) {
var nombre = document.getElementById('nombreInput').value;
var email = document.getElementById('emailInput').value;
// Verifica si el nombre contiene números o solo espacios en blanco
if (/\d/.test(nombre) || /^\s*$/.test(nombre)) {
event.preventDefault(); // Evita el envío del formulario
alert('El campo nombre no puede contener números ni estar compuesto solo por espacios en blanco.');
} else if (email === '') {
event.preventDefault(); // Evita el envío del formulario
alert('El campo email es obligatorio.');
} else {
alert('Formulario enviado correctamente.');
}
});
</script>
En este ejemplo, el formulario no se enviará si no cumple con las validaciones personalizadas.
<header>, <footer>, <article>, y <section>) proporcionan significado adicional al contenido de la página, lo que mejora la accesibilidad y el SEO.
Ejemplo de código:
<header>
<h1>Título del Sitio</h1>
<nav>
<ul>
<li><a href="#home">Inicio</a></li>
<li><a href="#about">Sobre</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Sección Principal</h2>
<p>Contenido de la sección.</p>
</section>
</main>
<footer>
<p>Derechos reservados</p>
</footer>
En este ejemplo, se usan etiquetas semánticas para estructurar el contenido de manera clara y accesible.
Ejemplo de código:
<button class="btn btn-primary">Botón Primario</button>
<div class="container">
<div class="row">
<div class="col">Columna 1</div>
<div class="col">Columna 2</div>
</div>
</div>
En este ejemplo, se utiliza el componente de botón y el sistema de rejilla de Bootstrap para crear un diseño simple.
Ejemplo de comandos básicos:
# Inicializar un nuevo repositorio
git init
# Agregar un repositorio remoto a un repositorio local existente.
# Este comando se usa para conectar tu repositorio local con un repositorio en GitHub o en otro servidor.
# "origin" es el nombre por defecto para el repositorio remoto.
git remote add origin https://github.com/usuario/repo.git
# Clonar un repositorio existente.
# Este comando se usa para hacer una copia completa de un repositorio que ya existe en GitHub
# y crear un repositorio local en tu máquina con toda su historia.
git clone https://github.com/usuario/repositorio.git
# Añadir archivos al área de preparación.
git add archivo.txt
# Realizar un commit.
git commit -m "Mensaje del commit"
# Subir cambios a la rama main en GitHub.
# Después de haber agregado el repositorio remoto con "git remote add" o clonado el repositorio,
# puedes subir (push) tus cambios a este repositorio en GitHub.
git push origin main
Estos comandos te permiten comenzar a usar Git, gestionar tus archivos y colaborar en proyectos con otros desarrolladores.
Más detalles de Git aquí.
Git permite trabajar con ramas, lo que facilita que varias personas colaboren en un mismo proyecto sin afectar el código principal. Cada integrante puede trabajar en su propia rama y luego integrar los cambios en una rama de desarrollo común, como development, y finalmente en main.
Pasos básicos para colaborar con ramas:
Ejemplo:
- Equipo conformado por Manuel y Natalia.
- El proyecto estará en el Github de Natalia.
Manuel debe hacer los siguientes pasos:
0. Natalia debe permitir la colaboración, añadiendo permisos en GitHub, para que Manuel pueda modificar el repositorio.
https://docs.github.com/es/account-and-profile/setting-up-and-managing-your-personal-account-on-github/managing-access-to-your-personal-repositories/inviting-collaborators-to-a-personal-repository
1. Clonar el repositorio (si aún no lo has hecho)
git clone https://github.com/usuario/repo.git
2. Crear una nueva rama para trabajar
git checkout -b mi-rama
3. Hacer los cambios en tu rama
git add .
git commit -m "Mensaje de los cambios"
4. Subir los cambios a tu rama en el repositorio remoto
git push origin mi-rama
5. Luego, en la rama development, ambos pueden integrar sus cambios:
git checkout development
git pull origin development
6. Fusionar los cambios de tu rama en development
git merge mi-rama
7. Subir los cambios a la rama development
git push origin development
8. Cuando los cambios estén listos y revisados, se puede fusionar en main:
git checkout main
git pull origin main
git merge development
git push origin main
Descripción de la jerarquía de ramas
- main: Es la rama principal y estable del proyecto. Contiene el código que se ha revisado y que está listo para producción.
- development: Esta es la rama en la que se integran los cambios de las diferentes ramas de trabajo antes de fusionarlos en main. Es la rama de desarrollo, que puede tener código aún en pruebas.
- mi-rama (ejemplo): Cada colaborador trabaja en su propia rama individual (por ejemplo, mi-rama). Estas ramas se crean desde development y se fusionan en development cuando los cambios están listos.
Este flujo de trabajo permite que ambos integrantes trabajen en paralelo, cada uno en su propia rama, sin conflictos, y luego fusionen sus cambios de forma ordenada en development y main.
main
|
|---------------------> development
|
----------------------|-------------------
| | |
mi-rama mi-rama2 otras ramas
Más detalles sobre ramas en Git aquí.
Acerca de las ramas en Github aquí.
Video de apoyo aquí.
"La accesibilidad, al igual que la usabilidad, son cualidades relacionadas con el software que deben complementarse, tratarse y abordarse desde las etapas iniciales del desarrollo. No son sinónimos, pero tampoco son conceptos independientes. La usabilidad afecta e incide directamente en la experiencia del usuario, mientras que la accesibilidad permite que esa experiencia se lleve a cabo. La accesibilidad puede delimitar los contenidos y funcionalidades que se transmiten, más allá de cuán usables sean." — Accesibilidad web - Una mirada integral (2020)
Para más información, visite: Accesibilidad web - Una mirada integral