Rimu
Hi #accessibility mastodon,
I’ve been building a #fediverse web app, “PieFed”, for the last few months and recently put a bit of effort into making it more accessible. It is almost WCAG 2.1 AA compliant now.
However I have no lived experience of using the web with disability so any feedback in this area is most welcome. Please give it a try at https://piefed.social and let me know what you think, from an accessibility perspective.
Rimu
Some things I've done recently:
- Ensure clickable elements are large, aiming for 44px by 44px
- aria-label everywhere
- image alt text
- aria roles on things
- skip to content link at the top
- keyboard shortcuts - same keys as reddit
- high contrast colors
Rimu
@shaknais Exactly the kind of feedback I need, thanks.
James 🌈💜
@rimu The dark/light mode links are good, but because the title element is on the span, and not the wrapping link, most voice software won't read it out. They're silent or "empty span".
Rimu
@Linux_Is_Best On the home page, it's a long list of posts, each with a thumbnail pulled from the source article. They add visual interest but are often misleading or irrelevant. The thumbnails' alt text could simply be a repeat of the post title, which would be repetitive and not add new information. For this reason I set every thumbnail's alt text to double quotes, hoping that screen readers would ignore the thumbnail entirely.
I'm not sure how to handle this, clearly. 😅
Linux_Is_Best
Alt text should be mandatory.
It seems in your call for helping your instance is now flooded with memes but no one is using alt text.
Anyone either blind or with vision problems is not going to be able to use a screen reader.
Rimu
@david Yes. It uses ActivityPub to federate with Lemmy, Kbin and Mbin instances. Also Mastodon, badly.
David Peach
@rimu Is this like a "reddit" for activitypub-speaking sites?
Rimu
@storm Those are the numbers of votes that post has received. They have an aria-label="UpVote" attribute but perhaps a title="whatever" is needed...
I'm also not satisfied with the ordering of the content for each post. The title with link should come first.
Thanks!
Billy
@rimu One thing I noticed right away is, there are some headings with numbers. For example, "138" followed by another heading "1". I guess the numbers are visually related to something, maybe number of views or replies, but with a screen reader, I do not know how they relate to posts.
Rimu
@LorenAmelang Good point, thank you very much.
I will add a high contrast toggle next to the light and dark mode buttons, providing either pure white text on pure black or the other way around.
LorenAmelang
@rimu Can we change those "high contrast colors"? I need pure white text on pure black. You say "tailor to your interests" but that doesn't imply changing colors...
Rimu
@AxelTerizaki @spokeek That's very helpful, thank you so much!
Axel Terizaki
- External links have a small icon next to them which appears black. Not easily visible on dark backgrounds.
- I think the background itself isn't contrasted enough with the text, it makes it more tiring to read. Most visually impaired people are sensitive to contrasts.
Apart from that I don't have much to add, I don't use lemmy enough to make any more meaningful comments.
Axel Terizaki
I'm mostly blinded by light and am pretty short sighted but I can read.
- Starting as a dark theme is good enough for my eyes at least.
- Most links being underlined makes them hard to read. Underlining them when you go over them is good enough as it allows the eye to catch when something changes and identify clickable text easily enough. Underlining links is good when there's a lot of non-underlined text but right now it doesn't work here. For some people it'll just appear like blobs of text.
Spokeek
@rimu @AxelTerizaki i don't know if you want to give it a shot
Rimu
@storm Awesome, thanks!
I've been reading https://www.a11y-101.com/development/tables and can already see some changes I need to do...
Billy
@rimu I created an account. that went quite well, everything is labeled correctly. I ran into a problem with the table of communities it presents. I noticed there is a header that spans 2 columns that says "Community, sort by name". I am guessing that one cell should be the community name, and the other cell should be the join link. Both columns say "View community". Oh actually now that I look at the other columns, "join community" is the first column. The rest of the table looks good.
I will do more testing for you as time permits. I have my CPACC, so I am actually qualified to do this sort of thing. It's nice to be able to put it to use for an open source project.
Rimu
@storm I've just put aria-hidden="true" on a few things, hopefully that removes some clutter.
Rimu
@storm The table contains links to every community, with the text of the link being the community name. Those links have an aria-label of "View community". Perhaps when there is an aria-label, the text of the link does not get read out? I could be using aria-label wrong.
What's the most commonly used screen reader software? I should try it myself.
Billy
@rimu I was wondering about the table on the "Explore Communities" link. All of them just say "View Community". Is this what is shown visually as well, or is the community name/topic missing for screen readers? I'm having difficulty looking through to find things to follow, but I'm not sure if that's accessibility, or user error lol.
Rimu
@storm Ooo, cloudflare was treating community names (e.g. community@instance.com) as email addresses and 'helpfully' obfuscating them. Maybe that threw a spanner in the works.
Rimu
@storm Thanks for that, I'll try NVDA later.
I've made some improvements to https://piefed.social/communities now, I hope they help :)
Billy
@rimu If you are on Windows NVDA is the best screen reader for testing. It is free and open source. On Linux, you could use Orca. Orca comes with most distros or is installable through the package manager. For Mac, the screen reader is called Voiceover. I don't really know any more than the name for that one, but a lot of people complain about web navigation with Voiceover. Voiceover is also the screen reader for IOS devices like the iPhone. For Android the screen reader is called Talkback. If you ddcide to test with either of those, they do change how your device operates, for example, on Android you have to double tap items to activate them.
Link text should be enough to convey the link's purpose. Aria label is only needed when non standard elements are used, so for your typical a href="stuf", so long as you have accurate text before /a, you don't need to do anything else.
Thanks for being so awesome, and working hard on accessibility. It is very much appreciated. :)
Billy
@rimu The table of communities is awesome now, thanks for that. I have joined a few communities.
Would it be possible to start each comment with a heading level? It would make it easy to skim through the comments or jump to the next one if desired. Also, I tried up voting a couple of things, and I can't tell if the button has been pressed or not. In this case, an aria live region to provide a status message would be good. Also, once voted, the selected button should report itself as disabled, (Orca says "grayed"). I'm not sure if the button turns gray visually or not.
This is getting more and more awesome. ☺️
Rimu
@storm Hopefully I can do better than heading levels - comments would benefit from https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tree_role or possibly https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-level
Rimu
Yesterday I played around with NVDA and Orca for a few hours and made many tweaks and got the comment tree working.
There is a new heading - "Comments" delineating the end of a post and the start of the comments, which you can jump to.
Also I removed the markdown editor which was disrupting the tab order.
Maybe screen reader support for tree view is not very consistent and headings will turn out better. It seemed ok in NVDA.
Billy
@rimu After talking to @sektor the tree view sounds like a neat option. Also @anguskola@stormux.org is interested in testing that too when it is available.
GNU social JP is a social network, courtesy of GNU social JP管理人. It runs on GNU social, version 2.0.2-dev, available under the GNU Affero General Public License.
All GNU social JP content and data are available under the Creative Commons Attribution 3.0 license.