Nombre de la vista de imagen

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Not for use with personal data

Los elementos de imagen enfocables deben proporcionar un nombre accesible y significativo disponible para tecnologías de asistencia como TalkBack y Voice Access.

Impacto

Las personas que utilizan TalkBack serán las más afectadas por los problemas encontrados. Si un ImageView proporciona información a los usuarios con discapacidad visual y no proporciona un nombre, TalkBack no anunciará nada y esa información faltará en las experiencias de los usuarios con TalkBack.

Las imágenes informativas deben utilizar contentDescription para proporcionar todo el contexto y los detalles necesarios a través de TalkBack.

Confirmación

Activar TalkBack
Efectuar un gesto de "tocar para explorar" en el control
Para imágenes informativas:
- Accesible: recibe el foco y anuncia una descripción significativa.
Para imágenes decorativas:
- Accesible: No recibe el foco individualmente. Dentro de un grupo se acepta.

Cómo solucionarlo

Android nativo

ImageView image = .......;
image.setContentDescription("A form highlighting the name field in a red box with an error message below that reads Invalid name: special characters are not accepted.");

React Native

important

React Native no agrega el rol de accesibilidad automáticamente a muchos elementos. Asegúrese de agregar accessibilityRole="image" a todas las imágenes que desea que estén disponibles para la tecnología de asistencia. La extensión VSCode Linter de accesibilidad axe y el axe DevTools Linter ahora incluyen compatibilidad con React Native, lo que puede ayudarlo a detectar errores como estos antes de realizar pruebas de IU.

Si la imagen muestra información que el usuario necesita, dale una accessibilityLabel descripción para transmitir esa información y establece la propiedad accesible en verdadera:

<Image
    ...
    accessible={true}
    accessibilityLabel="A form highlighting the name field in a red box with an error message below that reads Invalid name: special characters are not accepted."
/>

Si la imagen no muestra información única, como un fondo o una imagen decorativa, haz que no se pueda enfocar:

<Image
    ...
    accessible={false}
/>

.NET MAUI

Las imágenes a las que no se les ha asignado una descripción de contenido en .NET MAUI se marcan automáticamente como no importantes para la accesibilidad. Esto significa que cualquier imagen a la que no se le haya asignado intencionalmente una descripción pasa en axe DevTools Mobile como una imagen decorativa, cuando es posible que no haya sido pensada para ser una imagen decorativa. Asegúrese de que todas las imágenes que transmitan información o contexto tengan una descripción adecuada.

Opción 1: Si la imagen retrata información que el usuario necesita, dale una SemanticProperties.Description descripción para transmitir esa información.

<Image
    ...
    SemanticProperties.Description="A form highlighting the name field in a red box with an error message below that reads Invalid name: special characters are not accepted."
/>

Opción 2: Si la imagen muestra información que el usuario necesita, proporcione un Label debajo del elemento Image para transmitir esa información.

<StackLayout
    HorizontalOptions="FillAndExpand"
    VerticalOptions="StartAndExpand">        
    <Image
        BindingContext="{x:Reference imageLabel}"
        SemanticProperties.Description="{Binding Path=Text}"
        ...
    /> 

    <Label
         x:Name="etiquetaimagen"
         Texto="Un formulario que resalta el campo de nombre en un cuadro rojo con un mensaje de error debajo que dice Nombre inválido: no se aceptan caracteres especiales".
         ...
    />
</StackLayout>