Saltar al contenido principal
LibreTexts Español

5.5: Información sobre herramientas

  • Page ID
    152620
  • \( \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}\)

    Una información sobre herramientas se usa normalmente para mostrar cierta información sobre su elemento propietario cuando un usuario coloca el puntero del mouse sobre o le da el enfoque del teclado a un elemento. La información sobre herramientas puede incluir una definición para una palabra, tal vez una redacción completa para un acrónimo o abreviatura, o tal vez instrucciones sobre cómo operar una herramienta o widget. Hay muchas posibilidades.

    La información sobre herramientas es una mejora para el estándar predeterminado de “texto de título” con HTML. Proporcionan mucha más flexibilidad en la presentación y los tipos de información que se pueden presentar que una descripción emergente de texto de título estándar.

    Funciones, estados y propiedades de WAI-ARIA utilizados en una descripción emergente

    • role="tooltip”
    • aria-hidden: [verdadero|falso]
    • aria-live="educado”
    • tabindex = [0|-1]
    Lectura sugerida: Para obtener detalles sobre la construcción de información sobre herramientas accesibles, consulte: WAI-ARIA Best Practices: Tooltips.

    El siguiente JSFiddle presenta una descripción típica. Revise el marcado JavaScript y HTML. Pruebe la descripción emergente que se presenta en la pestaña Resultado con ChromeVox para comprender cómo funciona sin agregar ninguna característica de accesibilidad. Puedes trabajar en JSFiddle haciendo clic en “Editar en JSFiddle”, copiando el código de Accesibilidad/Wai-Aria que se describe a continuación para corregir la accesibilidad de la información sobre herramientas antes de completar la Actividad 6 en la página que sigue.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    Lo primero que hay que añadir a la función init (), donde <span>se define el elemento tooltip, son los atributos WAI-ARIA. Primero, defina la información sobre herramientas con role="tooltip”. Oculta la información sobre herramientas por defecto con aria-hidden="true”. Además, agrega una región en vivo con aria-live="polite”, para que los lectores de pantalla lean automáticamente la descripción emergente cuando aparezca. Tenga en cuenta que las mejores prácticas de WAI-ARIA 1.1 recomiendan usar aria-describedby dentro del elemento propietario para hacer referencia al contenido de una descripción emergente, que no anuncia como se esperaba con las versiones actuales de Chrome. En cambio, usamos aria-live, que anuncia correctamente en todos los navegadores actuales.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    A continuación, agregue el enfoque del teclado al elemento al que pertenece la información sobre herramientas con tabindex="0", y agregue enfoque a .on ('mouseover'), de modo que tanto un mouse hover como un enfoque de teclado abren la información sobre herramientas.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    Además, más abajo en la definición del elemento propietario, agregue aria-hidden="false” para que la información sobre herramientas oculta por defecto se haga visible cuando se produzca el desplazamiento del mouse o el enfoque del teclado.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    Además, aquí se agrega aria-hidden="true” para asegurarse de que la información sobre herramientas esté oculta a los lectores de pantalla, si un evento mouseout cierra la información sobre herramientas, agregándola a .on (mouseout) encadenado a la definición del elemento ($elem).

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    Adición de operabilidad del teclado

    Las mejores prácticas de WAI-ARIA definen la interacción del teclado para una descripción emergente de la siguiente manera:

    Interacción recomendada con el teclado para una descripción emergente

    Los widgets de información sobre herramientas no reciben enfoque. Un hover que contiene elementos enfocable se puede hacer usando un diálogo no modal.

    • Esc: Descarta la descripción emergente.

    Nota:

    1. El foco permanece en el elemento desencadenante mientras se muestra la información sobre herramientas.
    2. Si se invoca la información sobre herramientas cuando el elemento disparador recibe foco, entonces se descarta cuando ya no tiene foco (onBlur). Si la información sobre herramientas se invoca con MouseIn, entonces se descarta con MouseOut.

    Fuente: W3C WAI-ARIA Best Practices 1.1

    La operabilidad del teclado para una información sobre herramientas o, más bien, el elemento propietario es relativamente simple. Como equivalente de teclado para el .on (mouseout) descrito anteriormente, .on (blur) está encadenado al elemento $elem y dentro de él aria-hidden="true” vuelve a ocultar la información sobre herramientas, si el puntero del mouse no está sobre el elemento.
    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    Además, si se usa la tecla Esc, agrega aria-hidden="true” para ocultar la información sobre herramientas, incluso si el mouse está rondando, o el elemento propietario tiene foco.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    Información sobre herramientas accesible en acción

    Mira el siguiente video para ver cómo ChromeVox interactúa con una descripción emergente. La tecla Tab se utiliza para navegar hasta la primera descripción emergente, que abre una región en vivo cuando su contenido se lee en voz alta. Al presionar la tecla Tab una vez más, mueve el foco al campo de entrada de texto y se abre una segunda descripción emergente y su contenido se lee en voz alta. Apunta a que las informaciones sobre herramientas que actualices en la Actividad 6 de la siguiente página operen y anuncien como la del video.

    Video: Información sobre herramientas accesibles

    Miniatura del elemento incrustado “Información sobre herramientas accesibles”

    Un elemento de YouTube ha sido excluido de esta versión del texto. Puedes verlo en línea aquí: https://pressbooks.library.ryerson.ca/wafd/?p=336


    This page titled 5.5: Información sobre herramientas is shared under a CC BY-SA license and was authored, remixed, and/or curated by Digital Education Strategies, The Chang School.