5.5: Examen y Reparación de Código
- Page ID
- 154531
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)
( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\id}{\mathrm{id}}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\kernel}{\mathrm{null}\,}\)
\( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\)
\( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\)
\( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
Una vez que haya descubierto una barrera potencial, puede identificar dónde está ocurriendo el problema en el marcado HTML. En la captura de pantalla siguiente, la pestaña de comentarios (1) a la derecha de la pantalla se examina haciendo clic derecho y eligiendo “Inspeccionar elemento con Firebug”” (2). Nota: Firebug ya está en desuso, pero puedes hacer lo mismo seleccionando “Inspeccionar elemento” en el menú. Notarás que el código asociado a la función está resaltado en la ventana de código (3) en la parte inferior izquierda. Haga clic en el botón Editar (4) para editar ese HTML para probar posibles soluciones.
Figura: Pasos para examinar y modificar el código para probar posibles soluciones de accesibilidad
En el caso anterior, la prueba de Navegación de Teclas de Tabulación reveló que la pestaña Feedback no recibiría foco, por lo que no se podía operar con un teclado. Una solución simple para esto es agregar tabindex="0" al elemento principal que contiene la pestaña. Una vez agregado, sin recargar la página, se vuelve a realizar la prueba de navegación de teclas de tabulación para ver si la pestaña ahora toma el foco del teclado. Lo hace, aunque todavía no es posible operar la pestaña, lo que requiere modificar el JavaScript asociado.
Figura: Resultado de agregar tabindex="0"
Después de hacer clic en el botón Editar, el código seleccionado desde arriba se abre para su edición. En este caso se ha agregado tabindex="0" para probar si esto agrega el enfoque del teclado a la pestaña Comentarios (lo que hace).
Para ver otras herramientas para examinar el código, vea el siguiente video sobre las auditorías de accesibilidad de Chrome.
Video: La nueva forma de probar la accesibilidad con Chrome DevTools
Un elemento de YouTube ha sido excluido de esta versión del texto. Puedes verlo en línea aquí: https://pressbooks.library.ryerson.ca/pwaa/?p=1349
© Google Chrome Desarrolladores. Publicado bajo los términos de una licencia Creative Commons Attribution.