2.8: Introducción al examen y reparación del código
- Page ID
- 154550
\( \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}}} \)
Examen de código
Mientras está probando con herramientas automatizadas u otras estrategias manuales, a menudo es útil y a veces necesario mirar el marcado HTML para confirmar, o investigar más a fondo, las posibles barreras que han surgido herramientas o estrategias. Todos los navegadores tienen una función View Source (o algo equivalente) para ver el HTML subyacente a una página web. Aunque usar View Source es una forma potencial de ver el marcado HTML, puede llevar mucho tiempo encontrar bits específicos de HTML asociados con posibles barreras que se han identificado.
Una mejor estrategia para examinar el código es utilizar la función Inspeccionar elemento que la mayoría de los navegadores ofrecen hoy en día. Por lo general, puede hacer clic derecho en el elemento que desea ver (como una imagen), luego elegir “Inspeccionar elemento” para ver el HTML y CSS utilizados para mostrar la imagen. Observa el marcado del elemento image para ver si el atributo alt está presente y cuál es su valor, así como qué otros atributos podría contener (por ejemplo, atributos ARIA que pueden estar presentes para abordar una barrera potencial que un verificador haya identificado).
Las herramientas de desarrollo de un navegador (por ejemplo, DevTools de Chrome o herramientas en Firefox Developer Edition) proporcionan toda una variedad de información sobre el marcado de una página además de poder examinar elementos específicos en el HTML.
Examinar el código con el inspector incorporado o con un complemento es una buena manera de encontrar códigos de color en las hojas de estilo asociadas a una página web al realizar una evaluación de contraste de color.
Veremos el examen de código con más detalle en la sección Examen y reparación de códigos.
Reparación de código
A menudo es necesario ajustar el código manualmente durante la auditoría, y volver a realizar la prueba para encontrar soluciones para corregir los problemas de accesibilidad. Usando las herramientas de desarrollo del navegador, es posible ajustar dinámicamente el marcado HTML y CSS para probar posibles soluciones, tal vez ejecutando posibles correcciones a través de un lector de pantalla, antes de hacer recomendaciones. Firefox Quantum (Developer Edition), Chrome, Internet Explorer, Edge y Safari tienen herramientas que te permiten ajustar dinámicamente el código.
Al escribir informes de accesibilidad web puede ser útil proporcionar pequeños fragmentos de código para demostrar a los desarrolladores lo que hay que hacer para corregir un problema, o al menos describir los cambios de código en palabras escritas. Tener un buen conocimiento de HTML, CSS y JavaScript es un requisito previo para proporcionar soluciones en sus informes de accesibilidad.
Hablaremos más sobre reparación de código en la sección Examen y reparación de código. El siguiente video proporciona una introducción al examen y reparación del código usando la vista Inspeccionar de un navegador.
Video: Examen y Reparación de Código
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=1240