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.
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 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.
@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!
@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.
@storm Awesome, thanks!
I've been reading https://www.a11y-101.com/development/tables and can already see some changes I need to do...
@storm I've just put aria-hidden="true" on a few things, hopefully that removes some clutter.
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.
Thanks for the idea for this!
@rimu@kbin.social @rimu@mastodon.nzoss.nz @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. :)
@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.
@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 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. :)
- replies
- 1
- announces
- 0
- likes
- 1
@storm Thanks for that, I'll try NVDA later.
I've made some improvements to https://piefed.social/communities now, I hope they help :)
@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. ☺️
@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
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.