En mi día a día debo tener conocimientos de diversas áreas para poder proponer una buena solución al cliente. Lógicamente no se puede tener un control exhaustivo de todo, pero se debo tener un conocimiento mínimo y suficiente para poder orientar la propuesta del cliente. Una de ellas es la inclusividad y accesibilidad de las aplicaciones, un aspecto que hace 5 años no se tenía en cuenta y que ahora es necesario.
Para ello vamos a crear un formulario con Formik en una aplicación de React.
Sigue los pasos de Create React App:
npx create-react-app my-appAhora solo tiene que añadir formik a tu package.json:
npm install formikModificamos el fichero App.js:
import React, { Component } from "react";
import "./App.css";
import LoginForm from "./components/LoginForm";
import Modal from "./components/Modal";
class App extends Component {
state = {
username: "",
password: "",
isModalOpen: false,
};
onSubmit = async (values) => {
const { username, password } = values;
console.log("Login Form:", username, password);
this.setState({ isModalOpen: !this.state.isModalOpen });
};
onToggleModal = () => {
this.setState({ isModalOpen: !this.state.isModalOpen });
};
render() {
return (
<div className="container">
<header className="App-header">
<h1 className="App-title">Example</h1>
</header>
<LoginForm
username={this.state.username}
password={this.state.password}
onSubmit={this.onSubmit}
/>
<Modal isOpen={this.state.isModalOpen} onToggle={this.onToggleModal} />
</div>
);
}
}
export default App;
Añadimos la carpeta components y el fichero Modal.js dentro de ella:
import React from "react";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
const MyModal = ({ isOpen, onToggle }) => (
<Modal isOpen={isOpen} toggle={onToggle}>
<ModalHeader toggle={this.toggle}>Modal Form</ModalHeader>
<ModalBody>Test.</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={this.toggle}>
Cancel
</Button>
</ModalFooter>
</Modal>
);
export default MyModal;Y en la misma carpeta el fichero LoginForm.js
import React from "react";
import { Button, Form, FormGroup, Label, Input } from "reactstrap";
import { withFormik } from "formik";
import Yup from "yup";
const LoginForm = ({
values,
handleChange,
handleSubmit,
errors,
touched,
isSubmitting,
}) => {
return (
<Form onSubmit={handleSubmit}>
<FormGroup>
{touched.username && errors.username && (
<p className="red">{errors.username}</p>
)}
<Label for="username">Email</Label>
<Input
type="text"
name="username"
value={values.username}
onChange={handleChange}
id="username"
placeholder="Your user"
/>
</FormGroup>
<FormGroup>
{touched.password && errors.password && (
<p className="red">{errors.password}</p>
)}
<Label for="password">Password</Label>
<Input
type="password"
name="password"
value={values.password}
onChange={handleChange}
id="password"
placeholder="Your very secret password"
/>
</FormGroup>
<Button color="primary" disabled={isSubmitting}>
Submit
</Button>
</Form>
);
};
const FormikApp = withFormik({
mapPropsToValues({ username, password }) {
return { username, password };
},
validationSchema: Yup.object().shape({
username: Yup.string().email().required("Email is required"),
password: Yup.string()
.min(4, "Password must be 1 characters or longer")
.required(),
}),
handleSubmit(values, { props, resetForm, setErrors, setSubmitting }) {
if (values.username === "test@test.com") {
setErrors({ username: "This is an error" });
} else {
props.onSubmit(values);
resetForm();
setSubmitting(true);
}
},
displayName: "Login Form {HOC}",
})(LoginForm);
export default FormikApp;Ejecutamos y podremos interactuar con el formulario:
Como podrás observar cuando pongas un mail y una password que le guste al botón de aceptar, os mostrá re un formulario modal.
La intención de esta demo no es conocer React, si no una herramienta que no ayuda con la accesibilidad: axe DevTools.
Una vez instalada, os aparecerá el siguiente icono:
Deben existir muchas más herramientas, pero la que estoy estudiando es la que os presento hoy en este artículo. Saber de la existencia de una, ya te puede poner en la busqueda de herramientas similares.
Y ahora lo imporante es que con esta herramienta instalada y corriendo nuestra apliación de React, podemos pasarle el test de la opción free de accesibilidad:
Ejecutamos:
Lanzamos el Scan ALL of my page y obtendermos un informe:
Ahora te toca investigar cada resultado marcado como Critial, Serious, Moderate o Minor. Entrando en cada uno de ellos podrás ver una breve explciación de la solución.
A continuación vamos a ver que ocure si hacemos un test guiado, para ver que pasa con el formulario modal.
Desde el menú principal: Start an Intelligetn Guide Test Modal Dialog
Como resultado del test tenemos:
Conclusión
Como podéis ver en tan pocas líneas de código hemos puesto en evidencia que es muy fácil incumplir reglas de accesibilidad.
Hacer esto bien es un perfil dedicado a que nuestra web este funcionando con respecto a las exigencias que impone el W3C en la accesibilidad.
Valga esta pequeña demo para que como desarrolladores y en la medida de lo que podáis, comenzar a usar estas herramientas e ir arreglando lo que encontréis. Debemos adoptar la accesibilidad en una fase temprana del proyecto. Si por el contrario comenzamos con los test de accesibilidad a mediados del desarrollo o peor aun, a la hora de entregarlo, puede que afecte al 100% del diseño y por tanto toca rehacer mucho trabajo.
Por tanto, adopta la accesibilidad en una fase temprana y como desarrollador comienza a pasar los test necesarios, aunque su perfil de UX/UI este haciendo su trabajo, no está demás, asegurar la calidad asumiendo que todos somos partes del resultado final.
Espero haberos puesto en la línea de actuación mínima y suficiente para adoptar la accesibilidad en tu diseños web.
