Creating Word Processors in HTML

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

Creating Word Processors in HTML

Brandon Keith Biggs
Hello,
I am wondering if there is a good way of creating word processors or text editors in HTML that don't run into the following problems:
1. 60000 characters in Firefox's textarea
2. inability to change specific colors of lines in text area (this is Javascript)
3. NVDA not reading line breaks correctly in editable elements
4. Making phantom text in a textarea that shows on the screen, but that is not read by NVDA at all.

I am starting to see text boxes on the web adopt more and more the 4th option and I'm wondering if there is a better way to deal with this problem rather than custom scripting NVDA's native handling of text with role="status" along with option 4?
Basically, complete control needs to be given to the programmer to edit formatting information for each line. This means that the text is often in normal elements and the text from the text area is inserted where the cursor is. Examples of this are on Google's code editor for google Docs, Sheets and Slides, Firepad:
https://firepad.io/#1
and many other text editors and word processors that are now being created.
I'm not sure what Gmail, Google Docs and Google Slides use, but they are not perfect either.

What method does NVDA work best with when creating a text editor in the web browser?

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, SlashDot.org! http://sdm.link/slashdot
_______________________________________________
Nvda-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/nvda-devel
Reply | Threaded
Open this post in threaded view
|

Re: Creating Word Processors in HTML

James Teh
The only way to create a properly accessible web editor which can expose formatting and other rich content is HTML contentEditable or designMode. For various reasons, several noteable editors don't use this, making them inaccessible. Some (like Google Docs in braille mode) render their own editor, but use a fake contentEditable to expose info to screen readers, etc. Gmail, CKEditor and TinyMCE all use contentEditable.

I don't follow your point about line breaks not being read correctly. Can you please provide steps to reproduce in Gmail or the like?

Thanks!

Sent from a mobile device

On 14 Oct. 2016, at 6:09 pm, Brandon Keith Biggs <[hidden email]> wrote:

Hello,
I am wondering if there is a good way of creating word processors or text editors in HTML that don't run into the following problems:
1. 60000 characters in Firefox's textarea
2. inability to change specific colors of lines in text area (this is Javascript)
3. NVDA not reading line breaks correctly in editable elements
4. Making phantom text in a textarea that shows on the screen, but that is not read by NVDA at all.

I am starting to see text boxes on the web adopt more and more the 4th option and I'm wondering if there is a better way to deal with this problem rather than custom scripting NVDA's native handling of text with role="status" along with option 4?
Basically, complete control needs to be given to the programmer to edit formatting information for each line. This means that the text is often in normal elements and the text from the text area is inserted where the cursor is. Examples of this are on Google's code editor for google Docs, Sheets and Slides, Firepad:
https://firepad.io/#1
and many other text editors and word processors that are now being created.
I'm not sure what Gmail, Google Docs and Google Slides use, but they are not perfect either.

What method does NVDA work best with when creating a text editor in the web browser?
------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, SlashDot.org! http://sdm.link/slashdot
_______________________________________________
Nvda-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/nvda-devel

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, SlashDot.org! http://sdm.link/slashdot
_______________________________________________
Nvda-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/nvda-devel
Reply | Threaded
Open this post in threaded view
|

Re: Creating Word Processors in HTML

Mgr. Janusz Chmiel-3
There is other complex problem, which is very complex to solve. If
document, which have more than 70 pages in Google docs is being opened
by following its direct link, Javascript code can freeze thanks to NVDA
WEB page intercepting. This has negative effect. In some cases, browser
display dialog that Java script is not responding. User can press wait
button. Google docs is using complex Java script to handle edited
documents. Next negative effect is, that in some cases, NVDA
intercepting can cause that document Google display error message and
user can not edit The document at all.
So for now, I press Windows start and M very quickly after pressing
Enter at The address line inside Seamonkey latest stable version.

I do not know, how Microsoft Edge can handle such complex Java scripts
interaction, I will give it a try.
I have found out, that Long Google docs documents allocates many MB of
RAM and Javascript will be always much more slower than C or C++ and if
NVDA want to communicate with browser, its timer is using Javascript
interpretation and Nvda ask somethink from its accessibility module, it
must cause problems.
The problem do not exist while typing inside this long document. While
pressing characters or while deleting.
May be, that my favourite progress bar indicator, which monitor document
load progress is causing this issue, but without it, how can I find out,
that document have been completely loaded. Handling with keystrokes
before document have been loaded can cause various bugs.
But it is not bug of NVDA developers. Google creators should include
algorithm inside their Javascripts to inform users, that document have
been loaded to send some strings to NVDA, or better to play some little
.wav file with beep.
Other wrong think is, that if user press left or right arrow key, NVDA
announce one characters when pressing left arrow key and The same
character is being announced when user press right arrow key.
It is also Javascript creators bug.


------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, SlashDot.org! http://sdm.link/slashdot
_______________________________________________
Nvda-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/nvda-devel
Reply | Threaded
Open this post in threaded view
|

Re: Creating Word Processors in HTML

James Teh
NVDA actually doesn't use buffers in Google Docs, so there really shouldn't be any intensive calls from NVDA. Are you certain you don't see this with NVDA not running?

I suggest trying Docs in braille mode, which will provide a more familiar experience for NVDA users. Google have a support article detailing how to enable this.


Sent from a mobile device

> On 14 Oct. 2016, at 7:13 pm, Mgr. Janusz Chmiel <[hidden email]> wrote:
>
> There is other complex problem, which is very complex to solve. If
> document, which have more than 70 pages in Google docs is being opened
> by following its direct link, Javascript code can freeze thanks to NVDA
> WEB page intercepting. This has negative effect. In some cases, browser
> display dialog that Java script is not responding. User can press wait
> button. Google docs is using complex Java script to handle edited
> documents. Next negative effect is, that in some cases, NVDA
> intercepting can cause that document Google display error message and
> user can not edit The document at all.
> So for now, I press Windows start and M very quickly after pressing
> Enter at The address line inside Seamonkey latest stable version.
>
> I do not know, how Microsoft Edge can handle such complex Java scripts
> interaction, I will give it a try.
> I have found out, that Long Google docs documents allocates many MB of
> RAM and Javascript will be always much more slower than C or C++ and if
> NVDA want to communicate with browser, its timer is using Javascript
> interpretation and Nvda ask somethink from its accessibility module, it
> must cause problems.
> The problem do not exist while typing inside this long document. While
> pressing characters or while deleting.
> May be, that my favourite progress bar indicator, which monitor document
> load progress is causing this issue, but without it, how can I find out,
> that document have been completely loaded. Handling with keystrokes
> before document have been loaded can cause various bugs.
> But it is not bug of NVDA developers. Google creators should include
> algorithm inside their Javascripts to inform users, that document have
> been loaded to send some strings to NVDA, or better to play some little
> .wav file with beep.
> Other wrong think is, that if user press left or right arrow key, NVDA
> announce one characters when pressing left arrow key and The same
> character is being announced when user press right arrow key.
> It is also Javascript creators bug.
>
>
> ------------------------------------------------------------------------------
> Check out the vibrant tech community on one of the world's most
> engaging tech sites, SlashDot.org! http://sdm.link/slashdot
> _______________________________________________
> Nvda-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/nvda-devel

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, SlashDot.org! http://sdm.link/slashdot
_______________________________________________
Nvda-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/nvda-devel
Reply | Threaded
Open this post in threaded view
|

Re: Creating Word Processors in HTML

Brandon Keith Biggs
In reply to this post by James Teh
Hello,
When you are in gmail web view, and you compose a message, in the body of a message, if you hit enter and backspace, strange things happen. For example, right now: I hit enter and backspace and NVDA didn't say anything. Right now: when I hit enter and backspace twice NVDA said: nothing and "blank". It should have said "line feed" and ":".
I also get double talking of the character before the line feed, so if there is ".\n" and you erase the \n, NVDA will say "." and again "." when erasing the ".".

In the following HTML page, when erasing "T" from the 3rd line: "This is another paragraph" and the line break, NVDA says: "T", "h", "h".
When one does not erase the "T", they still get "h", "h", "h" with backspace.
The correct behavior should be: "T", "blank", "h", "p".


<!DOCTYPE html><head><title>text editor test</title></head>
<body contenteditable="true" style="font: 2rem/1.5 monospace;max-width:60rem;margin:0 auto;padding:4rem;">

<h1>Welcome!</h1>
<p>This is some text in one paragraph</p>
<p>This is another paragraph</p>

</body></html>

Thanks,




On Fri, Oct 14, 2016 at 1:57 AM, James Teh <[hidden email]> wrote:
The only way to create a properly accessible web editor which can expose formatting and other rich content is HTML contentEditable or designMode. For various reasons, several noteable editors don't use this, making them inaccessible. Some (like Google Docs in braille mode) render their own editor, but use a fake contentEditable to expose info to screen readers, etc. Gmail, CKEditor and TinyMCE all use contentEditable.

I don't follow your point about line breaks not being read correctly. Can you please provide steps to reproduce in Gmail or the like?

Thanks!

Sent from a mobile device

On 14 Oct. 2016, at 6:09 pm, Brandon Keith Biggs <[hidden email]> wrote:

Hello,
I am wondering if there is a good way of creating word processors or text editors in HTML that don't run into the following problems:
1. 60000 characters in Firefox's textarea
2. inability to change specific colors of lines in text area (this is Javascript)
3. NVDA not reading line breaks correctly in editable elements
4. Making phantom text in a textarea that shows on the screen, but that is not read by NVDA at all.

I am starting to see text boxes on the web adopt more and more the 4th option and I'm wondering if there is a better way to deal with this problem rather than custom scripting NVDA's native handling of text with role="status" along with option 4?
Basically, complete control needs to be given to the programmer to edit formatting information for each line. This means that the text is often in normal elements and the text from the text area is inserted where the cursor is. Examples of this are on Google's code editor for google Docs, Sheets and Slides, Firepad:
https://firepad.io/#1
and many other text editors and word processors that are now being created.
I'm not sure what Gmail, Google Docs and Google Slides use, but they are not perfect either.

What method does NVDA work best with when creating a text editor in the web browser?
------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, SlashDot.org! http://sdm.link/slashdot
_______________________________________________
Nvda-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/nvda-devel

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, SlashDot.org! http://sdm.link/slashdot
_______________________________________________
Nvda-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/nvda-devel



------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, SlashDot.org! http://sdm.link/slashdot
_______________________________________________
Nvda-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/nvda-devel
Reply | Threaded
Open this post in threaded view
|

Re: Creating Word Processors in HTML

Brandon Keith Biggs
In reply to this post by James Teh
Hello,
NVDA does have a problem, even in Braille mode, that linebreaks and blank lines don't show correctly. Sometimes when there is a blank line after a word, that word or line will read twice when "blank" should be announced.
Also, erasing of linebreaks gives the strange behavior detailed in my last post.
I was told that this was a Firefox problem, but googling content editable bug firefox doesn't give any bug that looks like this problem. I'm not sure what to call this other than backspacing between line breaks in Firefox does not fire the correct event.
Thanks,



On Fri, Oct 14, 2016 at 2:21 AM, James Teh <[hidden email]> wrote:
NVDA actually doesn't use buffers in Google Docs, so there really shouldn't be any intensive calls from NVDA. Are you certain you don't see this with NVDA not running?

I suggest trying Docs in braille mode, which will provide a more familiar experience for NVDA users. Google have a support article detailing how to enable this.


Sent from a mobile device

> On 14 Oct. 2016, at 7:13 pm, Mgr. Janusz Chmiel <[hidden email]> wrote:
>
> There is other complex problem, which is very complex to solve. If
> document, which have more than 70 pages in Google docs is being opened
> by following its direct link, Javascript code can freeze thanks to NVDA
> WEB page intercepting. This has negative effect. In some cases, browser
> display dialog that Java script is not responding. User can press wait
> button. Google docs is using complex Java script to handle edited
> documents. Next negative effect is, that in some cases, NVDA
> intercepting can cause that document Google display error message and
> user can not edit The document at all.
> So for now, I press Windows start and M very quickly after pressing
> Enter at The address line inside Seamonkey latest stable version.
>
> I do not know, how Microsoft Edge can handle such complex Java scripts
> interaction, I will give it a try.
> I have found out, that Long Google docs documents allocates many MB of
> RAM and Javascript will be always much more slower than C or C++ and if
> NVDA want to communicate with browser, its timer is using Javascript
> interpretation and Nvda ask somethink from its accessibility module, it
> must cause problems.
> The problem do not exist while typing inside this long document. While
> pressing characters or while deleting.
> May be, that my favourite progress bar indicator, which monitor document
> load progress is causing this issue, but without it, how can I find out,
> that document have been completely loaded. Handling with keystrokes
> before document have been loaded can cause various bugs.
> But it is not bug of NVDA developers. Google creators should include
> algorithm inside their Javascripts to inform users, that document have
> been loaded to send some strings to NVDA, or better to play some little
> .wav file with beep.
> Other wrong think is, that if user press left or right arrow key, NVDA
> announce one characters when pressing left arrow key and The same
> character is being announced when user press right arrow key.
> It is also Javascript creators bug.
>
>
> ------------------------------------------------------------------------------
> Check out the vibrant tech community on one of the world's most
> engaging tech sites, SlashDot.org! http://sdm.link/slashdot
> _______________________________________________
> Nvda-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/nvda-devel

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, SlashDot.org! http://sdm.link/slashdot
_______________________________________________
Nvda-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/nvda-devel


------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, SlashDot.org! http://sdm.link/slashdot
_______________________________________________
Nvda-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/nvda-devel