Description
Description
The Problem
When we are using the Image element to present some picture on the screen we have unexpected behavior for accessibility level.
So, if we set the alt value for the Image element - VoiceOver and Accessibility Inspector could not identify the element as an Image, only as an Other element.
<Image alt="Hello world" />
I noticed that if I set the alt value, my element becomes accessible (true) automatically.
Then to identify the problem I tried to remove the alt value and tried to use only accessible={true}, and got the same behavior.
<Image accessible={true} />
Note
But, for example, the ExpoImage element doesn’t have such behavior, and this case works as expected.
Impact
The element beheives unexpectable, and there is not a way to be sure, that the user will have proper information from the accessible Image element.
Which makes it difficult to interact with the user interface.
Thank you, React-Native team, please ping me if you need any additional information related to this case!
Steps to reproduce
- Add the
Imageelement:
<Image
source={{
uri: "https://letsenhance.io/static/73136da51c245e80edc6ccfe44888a99/1015f/MainBefore.jpg",
}}
style={{ width: "100%", flex: 1, height: 200 }}
accessible
/>
- Run the application on an iOS Simulator or real device.
- Check with Accessibility Inspector (simulator) or VoiceOver (real device) the traits (role, type) property of the Image element.
Expected: Image
Real: Other
React Native Version
0.74.5
Affected Platforms
Runtime - iOS
Output of npx @react-native-community/cli info
System:
OS: macOS 15.3.1
CPU: (12) arm64 Apple M3 Pro
Memory: 316.22 MB / 36.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 23.7.0
path: /opt/homebrew/bin/node
Yarn:
version: 4.7.0
path: /opt/homebrew/bin/yarn
npm:
version: 10.9.2
path: /opt/homebrew/bin/npm
Watchman:
version: 2025.02.17.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: /Users/anton.v.yereshchenko/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.1
- iOS 18.1
- macOS 15.1
- tvOS 18.1
- visionOS 2.1
- watchOS 11.1
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode:
version: 16.1/16B40
path: /usr/bin/xcodebuild
Languages:
Java: Not Found
Ruby:
version: 3.2.2
path: /Users/anton.v.yereshchenko/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react: Not Found
react-native: Not Found
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
Stacktrace or Logs
-
Reproducer
<Image
source={{
uri: "https://letsenhance.io/static/73136da51c245e80edc6ccfe44888a99/1015f/MainBefore.jpg",
}}
style={{ width: "100%", flex: 1, height: 200 }}
accessible
/>
Screenshots and Videos
No response