Skip to content

Some Accessibility issues #92

@zhou-zhoukang

Description

@zhou-zhoukang

Hi! Thank you for your hard work on this great open-source app. I noticed a few accessibility issues in DNSNet.

  1. Taking the example of the interface shown in the figure below, 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.

Image

Perhaps a more accessible approach in this case would be to set the onCheckedChange of the Switch to null, and instead handle the click event within the ToggleableSetting. This is just a suggestion based on what I’ve observed, and I hope it may be helpful.

ToggleableSetting(  
    modifier = Modifier.clickable { onCheckedChange() },  
    toggleableContent = {  
        MaterialSwitch(  
            onCheckedChange = null,  
        )
    }  
)
  1. It is often considered a good practice to set an onClickLabel for clickable controls, which may help improve accessibility. An example of how this can be implemented is provided in the code snippet below. For instance, when considering a button, 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 enter", which can make the button's function more intuitive and clear to users. This is just one way to enhance the user experience, and there may be other approaches as well.
modifiler = Modifier.semantics {  
   onClick(label = "enter") { }
}

Please feel absolutely no pressure — I completely understand if this takes a back seat to other priorities. Truly appreciate all the effort and hard work you've already put in!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions