Skip to content

Improve accessibility of the app #565

Open
@zhou-zhoukang

Description

@zhou-zhoukang

Android version(s): Android 12

Device model(s): Pixel 5

Last working app version (if known):

Description of problem:
Hi! Thank you for your hard work on this open source app. I noticed a few accessibility improvements that could be made.

Taking the example of the first screenshot shown in the Screenshot part, the red boxes indicate the order in which components are focused sequentially by screen readers when visually impaired users navigate through the UI. When they focus on the Switch, they will only hear its current on/off state but cannot understand what specific feature this Switch is enabling/disabling. This requires them to perform additional left/right swipes to obtain contextual information about the Switch. This may creates unnecessary cognitive load.

A potential approach would be using Compose's semantic APIs to group the components together, as demonstrated in Compose's official accessibility documentation. Specifically, it might be a good idea to use the .clearAndSetSemantics method to apply Switch semantics to the entire Row inside SettingsClickableElementWithToggle, as shown in the example code below. This is just a suggestion based on what I’ve observed, and I hope it may be helpful.

Row(
  modifier = Modifier
    .clearAndSetSemantics {
	role = Role.Switch
	contentDescription = "..."
	onClick(label = "...") { true }
  }
  ...
){
  Icon()
  Column(){ ... }
  Switch()
}

Alternatively, adding an onClickLabel to the Switch might also be a good practice. An example of how this can be implemented is provided in the code snippet below. For instance, when considering a Switch, a screen reader might announce "Double tap to activate" before a label is added. After adding an appropriate label, it would instead say "Double tap to enable biometric lock", which can make the switch's function more intuitive and clear to users.

Switch(
  modifiler = Modifier.semantics {  
     onClick(label = "enable biometric lock") { }
  }
)

I also noticed that some buttons in the app don't have content descriptions set, which causes screen readers to only say "Button" when focused, without informing users of their actual function. An example of this can be seen in the second screenshot.

Screenshot or video of problem:

Image

Image

Additional information:
Please don’t feel any pressure, I completely understand if other things come first. I really appreciate all the work and effort you’ve already put in! This is only a suggestion from what I've observed, please let me know if it makes sense or if I'm missing something. I'm happy to help further if needed.

Metadata

Metadata

Assignees

No one assigned

    Labels

    featureNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions