search

jmshrv / finamp

A Jellyfin music client for mobile
Mozilla Public License 2.0
1.67k stars 117 forks source link

missing button labels around the app #756

Open PlasticMemmories opened 1 month ago

PlasticMemmories commented 1 month ago

hello. There are several buttons around the app that aren't labeled. This is an issue for screen reader users as they will not know the function of those buttons

If I remember correctly, flutter has a label attribute for buttons, and if not I believe you can have a text widget as the button's child widget.

The buttons are as follow

I hope these buttons can be labeled as it would be a very big help for me and other screen reader users. If I can help in any way, please let me know

Chaphasilor commented 3 weeks ago

Hey! Sorry for not responding earlier regarding the missing labels.

Your descriptions are already pretty helpful in diagnosing what the issues are. I am not fully certain which buttons you're referring to in all cases, but I'll try to figure that out using a screen reader.

I also believe you were using the stable/old version, and not the (partially) redesigned beta version? The unlabeled button between "music" and "logs" is probably the link to the redesign.

If you could give the redesign a try and see if there are any new issues, that would be super helpful! You can find the latest version at https://github.com/jmshrv/finamp/releases
Aside from bug fixes, all development is focused on the beta at the moment.

I'll try to fix the labels for the beta 0.9.9 update, since we're about to release 0.9.8. Once we fixes the major labeling issues in the beta, I can backport them to the old version as a bug fix, that shouldn't be too hard!

We also have a Discord server, that could be helpful in case you prefer to chat via voice instead of typing. But GitHub is also absolutely fine if that's what you prefer.

PlasticMemmories commented 3 weeks ago

hey, thanks for telling me about the discord, I'll check that out for sure! I'm in the beta, which still has the button I mentioned, unless the testflight beta I'm a part of isn't the redesign

Chaphasilor commented 3 weeks ago

The testflight version is the beta, so you're on the right version then. Was your original comment also written specifically for the beta, or were you still using the old version there but the labels are simply still missing in the beta?

I'm asking because some of the button placement you mentioned isn't clear to me, especiall, the button next to the artwork for the current track.
I'm not sure if you'd be comfortable sharing screenshots or a screen recording of the exact locations. You could also DM them to me on Discord if that helps.

PlasticMemmories commented 3 weeks ago

hey, I made a screen recording and I'm willing to upload it here. Sorry for me stumbling over my words and the like. Also, please let me know if my screen isn't visible

I tried to upload it but github doesn't like the size of the file. Here it is on dropbox

https://www.dropbox.com/scl/fi/pjpcvqrjnk7jff7ue0303/screen_recording.webm?rlkey=of6ygf4o2cc8eabe2ihwez96c&dl=1

Chaphasilor commented 2 weeks ago

That was super helpful! Thank you so much for recording and sharing that! I could see everything just fine, and there was no sensitive info in there either (you did receive a text message right at the end, but it only showed the first name and no private info either).
The volume of Voice Over was really loud in the recording and I couldn't really hear you over it, but most of the time you talked in the pauses anyway so it wasn't a huge deal.

Seeing how you're actually interacting with the app revealed some things I hadn't considered before, for example that labeling purely visual parts like the album art is helpful for understanding the interface and purpose better, or that the progress indicator could be more descriptive. That's super interesting and makes total sense, but not something I'd ever thought of.

I'm not really sure why explore by touch isn't working, the equivalent feature on Android worked fine for me so I didn't know there is an issue. I sadly don't have an iPhone to test the app with myself. We're using a development framework called "Flutter" to develop Finamp, since that lets us develop the same app for both Android and iOS. But as you noticed, that doesn't always work perfectly, especially for platform-specific features (like explore by touch).

I'm really sorry about the unlabeled buttons, seems like they really do impact the usability for you, even with the automatic labeling based on the icons (which is super neat btw, Android doesn't have that).

Do you think it would help if I described the layout of the interface to you? Some of my confusing came from you referring to a button placement as "to the left", when the actual position is below the other element. There's no way for you to tell of course, and I guess it doesn't matter all that much to you usually. But if you knew about the grouping and layout, maybe it wouldn't be as confusing any more?

I'm also not sure if there's a good way to group related elements together, or if other apps are doing that. Visual grouping usually helps with deciphering functionality, but I'm not sure how that works with screen readers.

Either way, I've started adding labels to more elements throughout the app. So that should improve in one of the next beta updates!

PlasticMemmories commented 2 weeks ago

Hey, Sorry first for the volume, I had audio ducking on which makes voiceover louder than other audio in order to understand voiceover and forgot to turn it off.

The app is intuitive to navigate, the only issues are explore by touch and the buttons being unlabeled, other than that, the app elements are grouped in a screen reader usable way.

Since you are using flutter, I'd recommend checking out the "semantics" flutter module for accessibility related functions/methods.

Thanks for all you're doing, it's very helpful to me and others.