Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ghost opened this issue Apr 17, 2019 · 10 comments
Open

Comments

@ghost
Copy link

ghost commented Apr 17, 2019

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
Copy link
Member

thebaer commented Apr 17, 2019

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
Copy link
Author

ghost commented Apr 18, 2019

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
Copy link
Contributor

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
Copy link

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
Copy link
Author

ghost commented Apr 20, 2019

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:

  • the more I think about it, the more I support removing the hover effect entirely. However, I can see the appeal, so I'd also support removing the effect by default, and allowing a user to enable the feature with a toggle.
  • there's a down arrow image for the "move post to another blog" link that has no alt-text, so it's not 100% clear what its function is. There are other images-as-icons on the site with the same issue (view blogs, font, theme, etc.). I suggest using ForkAwesome in place of images.
  • using JS onchange for the menu (to move a post to another blog) triggers a new webpage, which can make navigation difficult in some browsers. WAVE suggests using an adjacent button for the user to submit/trigger the change.
  • the <html lang> attribute is missing, and having it present allows screen readers to know what language it's reading to the user.
  • Currently, it appears that JS is required to post (so users can't post via Lynx). Is a noscript option in the works?

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

@ghost ghost closed this as completed Apr 20, 2019
@ghost ghost reopened this Apr 20, 2019
@unwaivering
Copy link

unwaivering commented Apr 20, 2019 via email

@unwaivering
Copy link

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
Copy link
Member

thebaer commented May 22, 2019

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
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

No branches or pull requests

3 participants