Make web app accessible

[binwiederhier]

https://www.digitalocean.com/community/tutorials/react-making-react-apps-more-accessible

[mhameed]

Hi,
Thanks for a great project,
and thanks for taking accessibility seriously.
I am a screenreader user, and would be happy to do some testing once you start working on this.
Thanks again.

[binwiederhier]

Oh this is so fantastic that you're willing to test! I have ignored the accessibility stuff so far, because I don't know what I'm doing. But I am happy to do anything and everything to make the web app and Android app accessible. Does the Android app need work there too? Is there any way I can test it myself? Sorry for the 100 questions.

[mhameed]

Thanks @binwiederhier, I am pleased to say that the android app is perfectly usable. I have only managed to locate one unlabled checkbox, and I'll let you know which one it is next time I have sighted assistance.
Its the last checkbox when adding a new subscription, but when checking the checkbox to use a diffrent server. The checkbox after the entry field for the url.
Yes, you can test it out yourself if you so wish, but it takes a bit of time to get use to it if you havent used it before. If you wish we can set up a jitsi meeting and I would be happy to go through it with you.
On android its talk back, usually found under settings -> accessibility -> talkback.
On Linux with the gnome desktop, its Orca.
tbh, I havent tried the webinterface for ntfy yet, happy using the android app for subscribing and curl for publishing, , but will give you feedback as soon as I get to it.
Thanks again.

[binwiederhier]

I have begun work on this in this PR (#232). I'd say it's not worth for you to test the web app, until I have at least done the basics. It seems to be missing labels and alt texts everywhere.

I'm doing the following tags for now: role, aria-label and aria-labelledby. For some things it's pretty straight forward: A textfield's aria-label is just the label of the textfield.

But for some things it's not clear to me. For instance, the notification overview (which lists all the notifications) has a lot of "Card" and "Paper" elements (the MUI framework), which are basically just boxes (div elements). Do I need to label them if they are meaningful. For instance, should I add an aria-label to each notification that says "Notification", or just not label them at all? Some guidance from you would be nice. I can also just do what I think and you'll try it out when it's ready.

If you like, you can join the Discord (https://discord.gg/cT7ECsZj9w) or Matrix (https://matrix.to/#/#ntfy:matrix.org) and we can discuss there, too.

(Don't feel obligated though)

[binwiederhier]

I've done the best I can in https://github.com/binwiederhier/ntfy/pull/232/files. If you're willing to test, let me know and then I can deploy a test app for you somewhere else.

I think this is much better than before, so I'm closing it. Happy to make more changes in the future.

[binwiederhier]

@mhameed This has been released and is deployed to https://ntfy.sh/app if you wanna check it out.