writefreely / writefreely

A clean, Markdown-based publishing platform made for writers. Write together and build a community.
https://writefreely.org
GNU Affero General Public License v3.0
4.53k stars 320 forks source link

view-edit-pin-delete-move menu isn't accessible and doesn't work on mobile #94

Open ghost opened 5 years ago

ghost commented 5 years ago

Since this menu does not appear until a user mouses over it, this is very difficult for people with dexterity issues, but also nearly impossible on a mobile device, unless you guess correctly in the neighborhood of the menu. This happens on the main blog page for mobile and non-mobile devices.

When viewing individual posts, the "edit" link is extremely faint on desktop/laptop, but it's completely invisible on mobile devices.

It would be great if there were an option when setting up a blog for a high-contrast mode, that would show these menus/links all the time (no mouse-dependent behaviors).

I understand that users could customize their CSS to do this (an awesome feature!), but that relies on CSS knowledge, and it also relies on specific physical abilities to find the features in the first place.

thebaer commented 5 years ago

Thanks for the input, @jmfcodes, this is important and helpful feedback. For the two issues here:

Faint navigation links on individual posts: I think we could make the default link color darker and consistent with the rest of the app (I'm thinking the same color as post action links on the blog index). Maybe the translucent state / hover effect could also be removed, as it's a kind of unnecessary design element. What does everyone else think about this?

Hidden post actions on the blog index: while it's possible to tap on the body of a post to have the menu appear on mobile, I agree it's not a good enough solution. I'd always prefer accessible by default over new configuration options, so maybe a menu redesign would be in order. But if we did add an option, I'd like it to address as many accessibility issues as possible. Would you be able to help identify other issues we have?

ghost commented 5 years ago

Hi @thebaer! Thanks for being so receptive.

Tapping the body of the post doesn’t bring up the menu for me (iPhone 5S, iOS 12.2, Safari— haven’t tried any other browsers), but if I guess in the neighborhood of the menu bar, I can usually get it to pop up (or accidentally pin a post). So at least for mobile, I’d love to see the effect removed, but I completely agree and am heartened so see you’re in favor of accessible by default.

I can understand why people would love it though— less “clutter” when reading through many shorter posts, less useful if you’re reading and not editing, that sort of thing, which is why I thought a toggle (with high-contrast the default) might be a fair compromise if anyone’s especially in love with the feature.

Yes I’m willing to tinker a little more to identify other accessibility issues over the next few days and get back to you. :)

gytisrepecka commented 5 years ago

I think it's not a problem if logged in user would always see post actions next to his/her blog posts - that's better than not seeing them at all. Or maybe we could have small icons?

unwaivering commented 5 years ago

I'm not 100% sure how the standards work, because when I tried to look at them it gave me a headache lol. This means I'm not quite sure if setting it up for someone with dexterity issues will work for screen reader users like me. Although if you set it up to work on mobile, it will most likely work. Sites developed for mobile use generally work well with screen readers.

ghost commented 5 years ago

I'm not sure if it's best to start a new thread for this, but I like the idea of keeping everything together since my main accessibility concerns are related to the menu.

just FYI, for general accessibility checks, I'm a big fan of WebAIM's Web Accessibility Evaluation Tool (WAVE). There's a browser plugin or you can just paste a link for evaluation. I'm also a fan of turning off CSS and seeing what the page looks like without any styling whatsoever, as well as viewing the page in Lynx. It's no substitute for testing it with screen reader software, but it's a good start.

Some concerns/suggestions/questions:

kudos for sticking with the classic black & white color scheme, too. it looks real slick, and is naturally high-contrast. :)

unwaivering commented 5 years ago

My thing with standards is that it doesn't have to validate 100%. there are some effects that will obviously make parts of the site not work, like hover, drag-and-drop, etc. As long as those are removed, or dealt with via a setting, (which is always a good way to approach these kind of things,) then everything should work well enough. The only thing that doesn't work for me right now is this particular menu.

unwaivering commented 5 years ago

That being said I haven't sent my other blogs over to write.as yet so I haven't tested posting with multiple blogs. I used to use self-hosted WP so I have the content exports from that.

thebaer commented 5 years ago

Thanks for the input and insight, @jmfcodes and @hopesthoughts. I do think it'll be easier to track and comment on each additional issue if we break this up into smaller individual reports. I just want to make sure we address everything.

I'm caught up with other issues right now, but please feel free to do that in the meantime if you want.

unwaivering commented 5 years ago

Guess what? Everything seems to be working fine now for me in Firefox. I can read the menu links just fine. It actually seems to work when I access the blog via write.as/me, instead of just using my domain. However I think that should work fine. I did make sure to test on a second browser that I was still logged in with.

unwaivering commented 5 years ago

By the way that entire menu is MIA again. Not sure why it isn't working anymore.