tgram
tgram copied to clipboard
recoilme
The Inscrybmde editor is inaccessible to screen readers
This is not so much of a Typegram issue, but rather an external one with the editor. I'm raising this for discussion, as I am not entirely sure what would be the best solution here.
Blind and visually impaired users sadly cannot use Inscrybmde, due to the fact that it modifies the textarea to have just the currently edited line in it. The rest is included via a p or a div, as far as I can tell. They also catch keyboard events, to focus the particular section below, which preloads the textarea, to my best knowledge.
This is not new, a lot of editors do this, however, the problem is that screen readers cannot track where the cursor is, since it is handled by JS focus events.
For the last week or so, I've been looking at textarea replacements, and none of them seem to have the same functionality, or they are visually worse, e.g. no full screen mode, etc, which is an integral part of Typegram. Another issue is that most of them are licensed under GPL, which is incompatible with us.
I could definitely make a custom template, with some MIT-licensed JS to live-preview markdown, and to print out some stats, like word count, paragraph count, etc, however there would be no toolbar for Markdown functions. While this would work, it would be quite hard to work on something, as the two user bases (blind and sighted) would expect to have their own editor.
Maybe we could have an editor value for users, and a way to toggle between them via the settings page. I definitely do not want two templates, where only the editor would be different, as this is quite unnecessary.
i have plans to add no javascript option - https://github.com/recoilme/tgram/issues/50 and remove editor in this case. Is it help to blind people?
It would be nice, as the default textarea works, however markdown preview and stats would be nice to have if JS is enabled as well.
At the moment, I can imagine an editor option, which would switch out the current editor for a textarea, as well as some stats, via these projects (both of them are under MIT):
https://github.com/justinmc/markdown-html-form https://github.com/RadLikeWhoa/Countable
oh i spent many time and try many popular js editors its very hard to find not buggy editor working in all browsers with real-time preview and markdown support like in incrybmde problem - most people don't know markdown- that's why i choose incrybmde - it has "buttons" and preview
It is definitely easy to use, and I wish there was a way to have the best of both worlds, however, I don't think this is possible at the moment.
What do you think about the editor idea? Everything would stay the same, but if the editor is changed to the screen reader-friendly mode, it would be replaced by a standard text area, possibly a link to a Markdown cheatsheet, live preview and stats.
This would add about 200K more JS to the distributed version, but it would have the same speed at runtime, since the JS libraries are swapped out.
i'm dont understand wich problem it solve
i think blind people dont need any editor or another previe mode - i think they need working without js site - they need just textarea - but i'm nor sure
On other hand - incrybmde has zero dependencies - much power, may work without replacement textarea, may count words without special js library has visual preview and many more
i dont see any advantage from replacement, sorry may be i wrong
Yes, and no. Screen readers can indicate if something is bold, or italicised, or the font size, paragraph alignment, etc. This would be good to know, since their reader audience will most likely be the non-blind.
Another reason why live preview would be useful is the structure. Links, headings, lists, etc, are items that a screen reader can jump to, list, etc.
Also, it is generally a good idea to see how your text will look before submitting, in case of syntax errors, etc.
As I have mentioned, we should not replace the default editor, but have the option to switch to a more accessible version, while keeping most of the features, if possible.
Yes. The problem is that blind people are unable to edit the text in the textarea, because Inscrybmde modifies keyboard events, so screen readers are unable to track the cursor.
This does not happen with a standard textarea, but the standard textarea does not have features that blind people would use, such as live preview, word count, etc.
Oh, ok i don't know many about this case. I don't understand how blind people will see the preview and why they don't may use just textarea with javascript disabled in the profile or in the browser. But if you talking about it - i hope - you know more about that case.
Add alternative editor it's a good option, in general.. May be.. Not sure.. But this one.. jquery dependency for example - It looks very strange. I didn't understand why javascript coders don't may write a primitive parser without dependency hell? I google a little - https://github.com/showdownjs/showdown - so many markdown 2 html libraries. i don't have time for looking on all that javascript hell right now. Feel free try to implement something if you want, but add, please it without destroying current code ..
i hope you find some more elegant library or develop yourself Feel free to try
Blind people use software called screen readers to read the screen, usually top to bottom.
They can still detect if something is a heading, there are for example, keyboard shortcuts to jump to a specific heading level, see formatting information, navigate lists, etc. All this happens via the keyboard.
If you use a Mac, there is a built-in one called VoiceOver, and you can see what information it speaks, if you use ctrl+option+arrows to navigate, and ctrl+option+space to activate an item, for example. (cmd+f5 to activate).
On Windows and Linux, there are various ones, such as NVDA, Jaws, the Window's built-in one called Narrator, Orca, etc.
As to why a markdown preview is needed, it is the same reason why sighted users need one. For example, you would like to see if you create a heading, that that heading or list item or word is really formatted the way you want it.
Thank you very much for letting me implement this.
I will not modify the visuals of Typegram in any way, except for an editor switch in the settings template, which will switch out the current editor to one without buttons, with Markdown preview and stats. The default editor will remain the same.
I would like to avoid JQuery, and other huge JS libraries as well, if possible. Also, I would not like to go over the size of the current editor, since the page load should be as fast as possible.
Super! Sorry for misunderstanding
Don't forget to subscribe on project news! https://www.producthunt.com/upcoming/typegram/messages/typegram-time
Thanks for the link.
No worries. I will send a PR when I have something worth looking at emoji smile ☺️
Temporarily solved in https://github.com/recoilme/tgram/issues/50
More complex solution https://github.com/recoilme/tgram/pull/76 Branch with not finished work: https://github.com/recoilme/tgram/tree/editor
Need many works (nice looking, correct preview, some autosave, autoload, implement in article/comment) Need designer and frontend dev with css/js experience to finish
As a third solution, I have made an issue about this at https://github.com/Inscryb/inscryb-markdown-editor/issues/18
Hopefully we'll get some input, because ultimately, this would be the best solution for everyone.