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 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 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 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 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.
@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.
@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. :)
@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.
@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.
@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.
@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".
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.
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.
@AxelTerizaki I've made a high contrast theme now. To enable it, go to https://piefed.social/user/settings and choose 'High Contrast' as the theme. It's the last field before the "Save Settings" button.
@rimu@rimu@spokeek This looks good to me, save for one point :) The search input box on the homepage stays with a white background. Not a big, big issue since it's a search box and not actual content you have to read, but it feels kind of out of place with the other parts of the theme I think. :)
Add comment