WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Highlighting static HTML using the keyboard

for

Number of posts in this thread: 12 (In chronological order)

From: Isabel Holdsworth
Date: Mon, Oct 15 2018 7:55AM
Subject: Highlighting static HTML using the keyboard
No previous message | Next message →

Hi all,

A customer wants us to add speech synthesis to their website. They
want to be able to highlight a block of text on the page that could be
anything from a single character to a whole paragraph, and have it
read aloud.

I can't think how to implement this functionality using a keyboard,
apart from making the whole page into a contenteditable div, which
would be a big no-no.

Is there any dyslexia software that offers this type of keyboard
navigation? If so that would give me a starting point at least.

I'd really appreciate any thoughts you can come up with.

Cheers, Isabel

From: JP Jamous
Date: Mon, Oct 15 2018 8:56AM
Subject: Re: Highlighting static HTML using the keyboard
← Previous message | Next message →

Depending on how the page is structured, you may be able to do that using
tabindex/role or add ARIA-labelledby or aria-describedby to a link or a
focusable element that calls the information from different divs or P tags.



--------------------
JP Jamous
Senior Digital Accessibility Engineer
E-Mail Me |Join My LinkedIn Network
--------------------


From: glen walker
Date: Mon, Oct 15 2018 9:52AM
Subject: Re: Highlighting static HTML using the keyboard
← Previous message | Next message →

You might have to require the user to turn on caret browsing. F7 in
firefox and internet explorer will turn it on. I think Chrome needs a
plugin. Not sure about safari.

With caret browsing on, you get a caret or cursor indicator such as an
I-beam and you can move the focus through the page.

From: Andre Polykanine
Date: Mon, Oct 15 2018 2:04PM
Subject: Re: Highlighting static HTML using the keyboard
← Previous message | Next message →

Hi Isabel,

> I'd really appreciate any thoughts you can come up with.

Sorry, but just from the top of my head:
They select a part of text with their keyboard as usual, then press,
say, Ctrl+P. You bind an onclick event of a button to that keystroke.
When the button is clicked, you pass the selected text to the
Synthesis API and play it through:
https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API
See the section about speech synthesis. However, the browser should be
relatively new and should not be IE.
Sorry, if I didn't understand your request correctly.

--
With best regards from Ukraine,
Andre
Skype: menelion_elensule
Twitter (English only): @AndrePolykanine


------------ Original message ------------
From: Isabel Holdsworth < = EMAIL ADDRESS REMOVED = >
To: WebAIM Discussion List
Date created: , 4:55:15 PM
Subject: [WebAIM] Highlighting static HTML using the keyboard


Hi all,

A customer wants us to add speech synthesis to their website. They
want to be able to highlight a block of text on the page that could be
anything from a single character to a whole paragraph, and have it
read aloud.

I can't think how to implement this functionality using a keyboard,
apart from making the whole page into a contenteditable div, which
would be a big no-no.

Is there any dyslexia software that offers this type of keyboard
navigation? If so that would give me a starting point at least.

I'd really appreciate any thoughts you can come up with.

Cheers, Isabel

From: Graham Armfield
Date: Mon, Oct 15 2018 11:59PM
Subject: Re: Highlighting static HTML using the keyboard
← Previous message | Next message →

Andre, I know your were maybe just using a particular keystroke as an
example, but Ctrl+P on Windows machines triggers the Print dialogue. Or is
that what you meant to do?

Regards
Graham Armfield

coolfields.co.uk <http://www.coolfields.co.uk/>;
M:07905 590026
T: 01483 856613
@coolfields <https://twitter.com/coolfields>

From: Isabel Holdsworth
Date: Tue, Oct 16 2018 3:06AM
Subject: Re: Highlighting static HTML using the keyboard
← Previous message | Next message →

Thanks everyone.

JP, do you think you could expand a bit more on your idea? It sounds
interesting, but I'm wary of adding too many tab stops to an already
reasonably cluttered interface, so there's no way I'd want to add a
tab stop for, say, each word in a block of static text. Am I
misunderstanding you?

Andre, thanks for the MDN link. I already have the speech synthesis
aspect working, so users can click a paragraph or list item with the
mouse and have it spoken aloud. But I'm trying to replicate the
selection functionality for keyboard users.

Glen, I've played with caret browsing in IE and FF, as I thought it
might be the way to go, but it doesn't seem to work with JAWS. Or
perhaps I'm doing something wrong. Has anyone else had any success
with this?

Cheers, Isabel

On 16/10/2018, Graham Armfield < = EMAIL ADDRESS REMOVED = > wrote:
> Andre, I know your were maybe just using a particular keystroke as an
> example, but Ctrl+P on Windows machines triggers the Print dialogue. Or is
> that what you meant to do?
>
> Regards
> Graham Armfield
>
> coolfields.co.uk <http://www.coolfields.co.uk/>;
> M:07905 590026
> T: 01483 856613
> @coolfields <https://twitter.com/coolfields>
> > > > >

From: Jonathan Avila
Date: Tue, Oct 16 2018 6:12AM
Subject: Re: Highlighting static HTML using the keyboard
← Previous message | Next message →

> Glen, I've played with caret browsing in IE and FF, as I thought it might be the way to go, but it doesn't seem to work with JAWS. Or perhaps I'm doing something wrong

JAWS allows for users to select text on the page and read it back through it's own virtual cursor and speech synthesizer. Is there something in particular that the separate page selection with the keyboard would provide that isn't already provided by the JAWS select and speak commands without having to use caret browsing?

Jonathan

From: Isabel Holdsworth
Date: Tue, Oct 16 2018 10:05AM
Subject: Re: Highlighting static HTML using the keyboard
← Previous message | Next message →

I don't know whether JAWS selects text in the same way that caret
browsing does. If I want my speech synthesis component to speak the
selected text, will it be available through JavaScript regardless of
whether I use JAWS or the caret to select it? Or is JAWS only
selecting text in the virtual buffer? I have no idea.

On 16/10/2018, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
>> Glen, I've played with caret browsing in IE and FF, as I thought it might
>> be the way to go, but it doesn't seem to work with JAWS. Or perhaps I'm
>> doing something wrong
>
> JAWS allows for users to select text on the page and read it back through
> it's own virtual cursor and speech synthesizer. Is there something in
> particular that the separate page selection with the keyboard would provide
> that isn't already provided by the JAWS select and speak commands without
> having to use caret browsing?
>
> Jonathan
>
>

From: Jonathan Avila
Date: Wed, Oct 17 2018 2:28PM
Subject: Re: Highlighting static HTML using the keyboard
← Previous message | Next message →

Isabel, It may depend on what you are doing. You will likely need to test it with JAWS and other screen readers.

Jonathan

Sent from my iPhone

> On Oct 16, 2018, at 12:05 PM, Isabel Holdsworth < = EMAIL ADDRESS REMOVED = > wrote:
>
> I don't know whether JAWS selects text in the same way that caret
> browsing does. If I want my speech synthesis component to speak the
> selected text, will it be available through JavaScript regardless of
> whether I use JAWS or the caret to select it? Or is JAWS only
> selecting text in the virtual buffer? I have no idea.
>
> On 16/10/2018, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
>>> Glen, I've played with caret browsing in IE and FF, as I thought it might
>>> be the way to go, but it doesn't seem to work with JAWS. Or perhaps I'm
>>> doing something wrong
>>
>> JAWS allows for users to select text on the page and read it back through
>> it's own virtual cursor and speech synthesizer. Is there something in
>> particular that the separate page selection with the keyboard would provide
>> that isn't already provided by the JAWS select and speak commands without
>> having to use caret browsing?
>>
>> Jonathan
>>
>>

From: Andre Polykanine
Date: Sun, Oct 21 2018 5:05AM
Subject: Re: Highlighting static HTML using the keyboard
← Previous message | Next message →

Hello Graham,
Sorry, didn't think about it :(. It might be Ctrl+Shift+P then, or
something else (P for Play, for sure).


--
With best regards from Ukraine,
Andre
Skype: menelion_elensule
Twitter (English only): @AndrePolykanine


------------ Original message ------------
From: Graham Armfield < = EMAIL ADDRESS REMOVED = >
To: WebAIM Discussion List
Date created: , 8:59:19 AM
Subject: [WebAIM] Highlighting static HTML using the keyboard


Andre, I know your were maybe just using a particular keystroke as an
example, but Ctrl+P on Windows machines triggers the Print dialogue. Or is
that what you meant to do?

Regards
Graham Armfield

coolfields.co.uk <http://www.coolfields.co.uk/>;
M:07905 590026
T: 01483 856613
@coolfields <https://twitter.com/coolfields>

From: Andre Polykanine
Date: Sun, Oct 21 2018 5:13AM
Subject: Re: Highlighting static HTML using the keyboard
← Previous message | Next message →

Hi Isabel,

> Andre, thanks for the MDN link. I already have the speech synthesis
> aspect working, so users can click a paragraph or list item with the
> mouse and have it spoken aloud. But I'm trying to replicate the
> selection functionality for keyboard users.

Sorry, but what for?
If your users are sighted, they can use a mouse. If they are blind,
they use a screen reader that gives them an opportunity to select with
keyboard alone.

--
With best regards from Ukraine,
Andre
Skype: menelion_elensule
Twitter (English only): @AndrePolykanine


------------ Original message ------------
From: Isabel Holdsworth < = EMAIL ADDRESS REMOVED = >
To: WebAIM Discussion List
Date created: , 12:06:12 PM
Subject: [WebAIM] Highlighting static HTML using the keyboard


Thanks everyone.

JP, do you think you could expand a bit more on your idea? It sounds
interesting, but I'm wary of adding too many tab stops to an already
reasonably cluttered interface, so there's no way I'd want to add a
tab stop for, say, each word in a block of static text. Am I
misunderstanding you?

Andre, thanks for the MDN link. I already have the speech synthesis
aspect working, so users can click a paragraph or list item with the
mouse and have it spoken aloud. But I'm trying to replicate the
selection functionality for keyboard users.

Glen, I've played with caret browsing in IE and FF, as I thought it
might be the way to go, but it doesn't seem to work with JAWS. Or
perhaps I'm doing something wrong. Has anyone else had any success
with this?

Cheers, Isabel

On 16/10/2018, Graham Armfield < = EMAIL ADDRESS REMOVED = > wrote:
> Andre, I know your were maybe just using a particular keystroke as an
> example, but Ctrl+P on Windows machines triggers the Print dialogue. Or is
> that what you meant to do?
>
> Regards
> Graham Armfield
>
> coolfields.co.uk <http://www.coolfields.co.uk/>;
> M:07905 590026
> T: 01483 856613
> @coolfields <https://twitter.com/coolfields>
> > > > >

From: Isabel Holdsworth
Date: Mon, Oct 22 2018 1:44AM
Subject: Re: Highlighting static HTML using the keyboard
← Previous message | No next message

Hi Andre,

Lots of sighted people use only the keyboard, either through personal
preference (my boss) or because they have a condition or disability
that makes it difficult to use a mouse (RSI, Cerebral Palsy, etc).

Cheers, Isabel

On 21/10/2018, Andre Polykanine < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Isabel,
>
> > Andre, thanks for the MDN link. I already have the speech synthesis
>> aspect working, so users can click a paragraph or list item with the
>> mouse and have it spoken aloud. But I'm trying to replicate the
>> selection functionality for keyboard users.
>
> Sorry, but what for?
> If your users are sighted, they can use a mouse. If they are blind,
> they use a screen reader that gives them an opportunity to select with
> keyboard alone.
>
> --
> With best regards from Ukraine,
> Andre
> Skype: menelion_elensule
> Twitter (English only): @AndrePolykanine
>
>
> ------------ Original message ------------
> From: Isabel Holdsworth < = EMAIL ADDRESS REMOVED = >
> To: WebAIM Discussion List
> Date created: , 12:06:12 PM
> Subject: [WebAIM] Highlighting static HTML using the keyboard
>
>
> Thanks everyone.
>
> JP, do you think you could expand a bit more on your idea? It sounds
> interesting, but I'm wary of adding too many tab stops to an already
> reasonably cluttered interface, so there's no way I'd want to add a
> tab stop for, say, each word in a block of static text. Am I
> misunderstanding you?
>
> Andre, thanks for the MDN link. I already have the speech synthesis
> aspect working, so users can click a paragraph or list item with the
> mouse and have it spoken aloud. But I'm trying to replicate the
> selection functionality for keyboard users.
>
> Glen, I've played with caret browsing in IE and FF, as I thought it
> might be the way to go, but it doesn't seem to work with JAWS. Or
> perhaps I'm doing something wrong. Has anyone else had any success
> with this?
>
> Cheers, Isabel
>
> On 16/10/2018, Graham Armfield < = EMAIL ADDRESS REMOVED = > wrote:
>> Andre, I know your were maybe just using a particular keystroke as an
>> example, but Ctrl+P on Windows machines triggers the Print dialogue. Or
>> is
>> that what you meant to do?
>>
>> Regards
>> Graham Armfield
>>
>> coolfields.co.uk <http://www.coolfields.co.uk/>;
>> M:07905 590026
>> T: 01483 856613
>> @coolfields <https://twitter.com/coolfields>
>> >> >> >> >>
> > > > >
> > > > >