4.9: Desarrollo de pautas de accesibilidad de la organización
- Page ID
- 63093
\( \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}}} \)
\(\newcommand{\avec}{\mathbf a}\) \(\newcommand{\bvec}{\mathbf b}\) \(\newcommand{\cvec}{\mathbf c}\) \(\newcommand{\dvec}{\mathbf d}\) \(\newcommand{\dtil}{\widetilde{\mathbf d}}\) \(\newcommand{\evec}{\mathbf e}\) \(\newcommand{\fvec}{\mathbf f}\) \(\newcommand{\nvec}{\mathbf n}\) \(\newcommand{\pvec}{\mathbf p}\) \(\newcommand{\qvec}{\mathbf q}\) \(\newcommand{\svec}{\mathbf s}\) \(\newcommand{\tvec}{\mathbf t}\) \(\newcommand{\uvec}{\mathbf u}\) \(\newcommand{\vvec}{\mathbf v}\) \(\newcommand{\wvec}{\mathbf w}\) \(\newcommand{\xvec}{\mathbf x}\) \(\newcommand{\yvec}{\mathbf y}\) \(\newcommand{\zvec}{\mathbf z}\) \(\newcommand{\rvec}{\mathbf r}\) \(\newcommand{\mvec}{\mathbf m}\) \(\newcommand{\zerovec}{\mathbf 0}\) \(\newcommand{\onevec}{\mathbf 1}\) \(\newcommand{\real}{\mathbb R}\) \(\newcommand{\twovec}[2]{\left[\begin{array}{r}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\ctwovec}[2]{\left[\begin{array}{c}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\threevec}[3]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\cthreevec}[3]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\fourvec}[4]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\cfourvec}[4]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\fivevec}[5]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\cfivevec}[5]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\mattwo}[4]{\left[\begin{array}{rr}#1 \amp #2 \\ #3 \amp #4 \\ \end{array}\right]}\) \(\newcommand{\laspan}[1]{\text{Span}\{#1\}}\) \(\newcommand{\bcal}{\cal B}\) \(\newcommand{\ccal}{\cal C}\) \(\newcommand{\scal}{\cal S}\) \(\newcommand{\wcal}{\cal W}\) \(\newcommand{\ecal}{\cal E}\) \(\newcommand{\coords}[2]{\left\{#1\right\}_{#2}}\) \(\newcommand{\gray}[1]{\color{gray}{#1}}\) \(\newcommand{\lgray}[1]{\color{lightgray}{#1}}\) \(\newcommand{\rank}{\operatorname{rank}}\) \(\newcommand{\row}{\text{Row}}\) \(\newcommand{\col}{\text{Col}}\) \(\renewcommand{\row}{\text{Row}}\) \(\newcommand{\nul}{\text{Nul}}\) \(\newcommand{\var}{\text{Var}}\) \(\newcommand{\corr}{\text{corr}}\) \(\newcommand{\len}[1]{\left|#1\right|}\) \(\newcommand{\bbar}{\overline{\bvec}}\) \(\newcommand{\bhat}{\widehat{\bvec}}\) \(\newcommand{\bperp}{\bvec^\perp}\) \(\newcommand{\xhat}{\widehat{\xvec}}\) \(\newcommand{\vhat}{\widehat{\vvec}}\) \(\newcommand{\uhat}{\widehat{\uvec}}\) \(\newcommand{\what}{\widehat{\wvec}}\) \(\newcommand{\Sighat}{\widehat{\Sigma}}\) \(\newcommand{\lt}{<}\) \(\newcommand{\gt}{>}\) \(\newcommand{\amp}{&}\) \(\definecolor{fillinmathshade}{gray}{0.9}\)
Para garantizar la coherencia en la accesibilidad del contenido digital de la compañía, el comité de accesibilidad ha decidido que es necesario que haya un conjunto de pautas simples que el personal pueda seguir. Empiezas creando tres pautas:
- Guías de Accesibilidad para el Desarrollo
- Pautas de accesibilidad al contenido web
- Pautas de Accesibilidad PDF
Guías de Accesibilidad para el Desarrollo
Aunque solo podrías hacer que tus desarrolladores revisen WCAG para entender lo que hay que hacer para garantizar que la presencia de la compañía en la Web sea accesible para todos, habría una gran cantidad de “interpretación” requerida, y muchos aspectos de WCAG que pueden no ser relevantes. En su lugar, es posible que desee identificar los temas específicos que deben abordarse en los sitios web de la compañía y desarrollar un conjunto de pautas específicas para esos temas.
Utilice las 10 Guías Clave [PDF] como punto de partida. Estas pautas pueden ser destiladas para crear una breve lista de temas que los desarrolladores deben tener en cuenta a la hora de desarrollar para la Web. Estos lineamientos podrían ser los siguientes, aunque dependiendo de la organización, pueden requerir una adaptación menor para adaptarse a sus necesidades. Deben ser fáciles de aprender y memorizar.
- Todas las imágenes deben tener un atributo alt que describa los elementos significativos de la imagen, o el atributo alt se deja vacío si la imagen es decorativa o carece de sentido.
- Todo el contenido multimedia con diálogo significativo debe tener leyendas (video) o una transcripción (audio).
- El contenido con secciones o temas significativos debe estructurarse utilizando encabezados HTML correctamente secuenciados.
- Si una serie de elementos se parece a una lista, use el marcado de lista adecuado para dar formato a esos elementos.
- Cuando los datos se presentan en una tabla, la primera fila (y a veces la primera columna) debe formatearse como celdas de encabezado de tabla adecuadas (es decir,<th>).
- Asegúrese de que al navegar por el contenido web usando la tecla Tab, el cursor se mueva de izquierda a derecha, de arriba a abajo y no se desvíe de ese patrón.
- Asegúrese de que el foco del cursor sea fácilmente visible cuando navega por elementos de la página con la tecla Tab.
- Al usar el color para representar el significado, asegúrese de que algo que no sea el color también represente ese significado.
- Asegúrese de que el contraste entre los colores de primer plano (texto) y los colores de fondo proporcione suficiente contraste, en una proporción de 4. 5:1 como mínimo para texto más pequeño, 3:1 para texto más grande.
- Asegúrese de que todas las funciones que operan con un mouse, también operen con una pulsación de tecla.
- Proporcione formas de omitir contenido repetitivo pasado usando enlaces de derivación y hitos ARIA.
- Asegúrese de que el texto del enlace describa lo que se encontraría si se siguiera el enlace.
- Asegúrese de que se proporcione una retroalimentación de error o éxito accesible después de completar una acción, como enviar un formulario o iniciar sesión, generalmente usando la función de alerta ARIA con el elemento que contiene los comentarios.
- Asegúrese de que todos los campos del formulario estén explícitamente etiquetados usando el elemento HTML Label.
- Asegurar que todos los elementos funcionales cuyo funcionamiento no sea inmediatamente obvio, incluya instrucciones sobre cómo usarlos.
- Describir las características de accesibilidad de una aplicación o sitio web, y posicionar un enlace a esos detalles en la interfaz que será fácil de encontrar para los usuarios de tecnología de asistencia.
Pautas de accesibilidad al contenido web
Las pautas de accesibilidad al contenido web serán muy similares a las de desarrollo web enumeradas anteriormente, aunque difieren en que el contenido suele ser menos interactivo que una interfaz de usuario. Como tal, estas pautas se centran más en los aspectos de accesibilidad del contenido.
- Todas las imágenes deben tener un atributo alt que describa los elementos significativos de la imagen, o el atributo alt se deja vacío si la imagen es decorativa o carece de sentido.
- Si las imágenes no pueden describirse efectivamente en texto alt de 125 caracteres o menos, proporcione una descripción completa en el texto circundante, con una breve descripción y una referencia a la descripción completa en el texto alt.
- Evite usar imágenes de texto y, donde sea inevitable, reproduzca el texto significativo de la imagen como texto real en los alrededores de la imagen.
- Todos los multimedia con diálogo significativo deben tener leyendas (video) o una transcripción (audio).
- El contenido con secciones o temas significativos debe estructurarse utilizando encabezados HTML correctamente secuenciados.
- Si una serie de elementos se parece a una lista, use el marcado de lista adecuado para dar formato a esos elementos.
- Al usar el color para representar el significado, asegúrese de que algo que no sea el color también represente ese significado.
- Asegúrese de que el contraste entre los colores de primer plano (texto) y los colores de fondo proporcione suficiente contraste, en una proporción de 4. 5:1 como mínimo para texto más pequeño, 3:1 para texto más grande.
- Cuando los datos se presentan en una tabla, la primera fila (y a veces la primera columna) debe formatearse como celdas de encabezado de tabla adecuadas (es decir,<th>).
- Asegúrese de que todos los campos del formulario estén explícitamente etiquetados usando el elemento HTML Label.
Pautas de Accesibilidad PDF
Las pautas de accesibilidad de PDF son similares a las pautas de accesibilidad al contenido web, aunque existen requisitos específicos de PDF como orden de lectura, idioma de lectura y etiquetado de documentos que también deben abordarse para crear un PDF accesible. Por lo general, los documentos se crean con Microsoft Word, se guardan como PDF y luego se abren en Adobe Acrobat Pro para ajustar la accesibilidad del documento.
- Al crear un documento de Word para convertirlo a PDF, use encabezados adecuados para organizar secciones/temas en el documento.
- Al crear un documento de Word para convertirlo a PDF, asegúrese de que todas las imágenes tengan texto alt que describa los elementos significativos de la imagen.
- Al crear un documento de Word para convertirlo a PDF, asegúrese de que cualquier documento con tablas de datos tenga la opción “Repetir como fila de encabezado en la parte superior de cada página” activada en las propiedades de la tabla.
- Utilice la versión para Windows de Word 2010+ para guardar documentos de Word como PDF con la opción “Etiquetas de estructura de documentos para accesibilidad” activada al guardar. (Esto no es compatible con Mac.)
- Utilice las herramientas Hacer accesible del Asistente de acción en Adobe Acrobat Pro 11+ o Acrobat Pro DC para evaluar la accesibilidad del documento de Word convertido y realizar ajustes de accesibilidad.
- Utilice la herramienta Orden de lectura en la barra de herramientas de Acrobat Pro a la izquierda para organizar los elementos en el PDF en un orden de lectura lógico.