Nombre de la vista de imagen
Los elementos de imagen enfocables deben proporcionar un nombre accesible y significativo disponible para tecnologías de asistencia como VoiceOver y Voice Control.
Impacto
Las personas que utilizan VoiceOver son las más afectadas. Las imágenes informativas deben tener su contexto, información o propósito para leer cuando VoiceOver las enfoca.
Confirmación
- Activar VoiceOver
- Intente enfocar la imagen
- Ocurrirá uno de los siguientes casos:
- Inaccesible: la imagen se puede enfocar pero no anuncia un nombre en VoiceOver.
- Accesible: la imagen no se puede enfocar porque no proporciona información única o adicional.
- Accesible: la imagen se puede enfocar y tiene un nombre.
Cómo solucionarlo
UIKit
Un problema encontrado por esta regla es causado por no usar accessibilityLabel, o por marcar incorrectamente una imagen como un elemento de accesibilidad.
En el guión gráfico:
- Navegar hasta la imagen
- Confirme que el Panel de inspectores es visible
- Seleccione el Inspector de identidad
- Si la imagen representa información que el usuario necesita, en “Accesibilidad”, escriba la información en el campo de texto “Etiqueta”.
- Si la imagen no muestra la información que el usuario necesita, en "Accesibilidad", desmarque la casilla "Habilitado".
En código:
Si la imagen muestra información que el usuario necesita, dale una descripción accessibilityLabel para transmitir esa información:
image.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 la información que el usuario necesita, como un fondo o una imagen decorativa, haga que no se pueda enfocar:
image.isAccessibilityElement = falseEn las aplicaciones UIKit, una imagen sin accessibilityLabel no se puede enfocar con tecnología de asistencia de forma predeterminada.
Las propiedades que usamos para verificar la enfocabilidad de Apple pueden ser inexactas cuando se configura un accessibilityIdentifier en la imagen. Debido a este comportamiento inesperado, los resultados de los problemas de ImageView Name en las aplicaciones UIKit se informarán como Necesita revisión. Se ha enviado un informe de error a Apple.
SwiftUI
Si una imagen proporciona información que el usuario necesita, puede establecer .accessibility(label: Text("Accessibility Label Here")) el modificador de vista en la imagen o puede utilizar el inicializador de imagen, que incluye el parámetro de etiqueta.
Image("format_info", label: Text("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 que el usuario pueda necesitar, como un fondo o una imagen decorativa, ocúltela con el siguiente modificador de vista:
Image("background_blue")
.accessibility(hidden: true)React Native
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 la información que el usuario necesita, como un fondo o una imagen decorativa, haga 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>