[GH-ISSUE #217] Make web app accessible #172

Closed
opened 2026-05-07 00:21:04 +02:00 by BreizhHardware · 6 comments
Originally created by @binwiederhier on GitHub (Apr 20, 2022). Original GitHub issue: https://github.com/binwiederhier/ntfy/issues/217 https://www.digitalocean.com/community/tutorials/react-making-react-apps-more-accessible
Author
Owner

@mhameed commented on GitHub (Apr 29, 2022):

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.

<!-- gh-comment-id:1113176949 --> @mhameed commented on GitHub (Apr 29, 2022): 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.
Author
Owner

@binwiederhier commented on GitHub (Apr 29, 2022):

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.

<!-- gh-comment-id:1113260036 --> @binwiederhier commented on GitHub (Apr 29, 2022): 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.
Author
Owner

@mhameed commented on GitHub (Apr 29, 2022):

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.

<!-- gh-comment-id:1113780866 --> @mhameed commented on GitHub (Apr 29, 2022): Thanks @[binwiederhier](https://github.com/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.
Author
Owner

@binwiederhier commented on GitHub (May 2, 2022):

I have begun work on this in this PR (https://github.com/binwiederhier/ntfy/pull/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)

<!-- gh-comment-id:1115468914 --> @binwiederhier commented on GitHub (May 2, 2022): I have begun work on this in this PR (https://github.com/binwiederhier/ntfy/pull/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)
Author
Owner

@binwiederhier commented on GitHub (May 4, 2022):

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.

<!-- gh-comment-id:1116853718 --> @binwiederhier commented on GitHub (May 4, 2022): 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.
Author
Owner

@binwiederhier commented on GitHub (May 8, 2022):

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

<!-- gh-comment-id:1120335922 --> @binwiederhier commented on GitHub (May 8, 2022): @mhameed This has been released and is deployed to https://ntfy.sh/app if you wanna check it out.
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/ntfy#172
No description provided.