Cómo crear aplicaciones web inclusivas con React

En este taller aprenderemos cómo crear aplicaciones de una sola página (SPA por sus siglas en inglés), que incluyan principios y recomendaciones de accesibilidad web.

Nos enfocaremos en ejemplos prácticos con React que ejemplifiquen cómo hacer que nuestras aplicaciones sean accesibles y comprensibles para la mayor cantidad de usuarios.

• Demo usando Vercel
  • https://fepro-2021-accessible-react-app.vercel.app/
• Diapositivas del taller

Pre-requisitos

• Instalar NodeJS
• Instalar algún IDE o editor de código. Recomendados: WebStorm , Visual Studio Code/
• (Preferentemente) Instalar Yarn
• Tener algún navegador moderno como Firefox o Google Chrome

Creación de aplicación

Primero que nada, vamos a crear una aplicación utilizando Create React App.

npx create-react-app fepro-2021-react-app
cd fepro-2021-react-app
yarn install
yarn start

Estructura básica

.
├── node_modules        # Dependencias de nuestra aplicación
├── package.json        # Archivo principal para administración de dependencias y "scripts"
├── public              # Archivos listo para "deployment" en Internet de nuestra aplicación
├── src                 # Código fuente de nuestra aplicación
└── yarn.lock           # Registro de dependencias administradas con Yarn

Compilación y "previsualización" de nuestra aplicación

Iniciaremos nuestra apliación con:

yarn start

Y ahora estamos listos para visitar: http://localhost:3000.

Conceptos

• Introduction to Web Accessibility
• Designing for Screen Reader Compatibility
• Web Content Accessibility Guidelines
• Making the Web Accessible

Explicaciones prácticas

• WebAIM's WCAG 2 Checklist
• Section 508 Checklist (USA)

Auditoría de Accessibilidad

Instalar extensión Axe

• Firefox: Axe Dev Tools
• Chrome: Axe Dev Tools

Simulación de discapacidades visuales

• NoCoffee for Firefox

ARIA (Accessible Rich Internet Applications)

• Introduction to ARIA - Accessible Rich Internet Applications
• An overview of accessible web applications and widgets
• Using ARIA

---

Las notas y enlaces de las secciones siguientes corresponden a material de referencia extra.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

yarn build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify