When a visual indicator is important for the users interaction with an object, there should be a text explanation at the object to relay this information to the user.
In the File app a lock-icon shows when a file is locked and can’t be opened. But if the user can’t see the icon they won’t understand why they can’t open the file. Make sure to add the locked status to the accessible name of the interactive element. So in the example below, we could use aria-describedby connected to the id of the lock icon to connect it to the file name.
File locked or not
When a visual indicator is important for the users interaction with an object, there should be a text explanation at the object to relay this information to the user.
In the File app a lock-icon shows when a file is locked and can’t be opened. But if the user can’t see the icon they won’t understand why they can’t open the file. Make sure to add the locked status to the accessible name of the interactive element. So in the example below, we could use aria-describedby connected to the id of the lock icon to connect it to the file name.