WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: How to generate automatically accessible footnotes using ARIA

for

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

From: Bryan Garaventa
Date: Wed, Nov 09 2011 12:21AM
Subject: How to generate automatically accessible footnotes using ARIA
No previous message | Next message →

Hi,
A while back, someone asked about standards for accessible footnotes. So, thinking about it, I figured ARIA could be used to do this.

Since I'm a big fan of making things work by themselves, I automated the accessibility so that, to add footnotes, you just use an object literal to declare each footnote (including markup), then put a span tag around the word or phrase that applies to that footnote.

E.G.

var footnotes = {
f1: 'Footnote 1 text. <a href="url">Reference</a>',
f2: 'Footnote 2 text. <a href="url">Reference</a>'
};

Then, in the body:

This text is part of a
<span id="f1" class="footer">paragraph</span>
in the
<span id="f2" class="footer">page body</span>
content.

The span ID attributes match the declared footnotes in the object literal, which is how the match is made at runtime. Plus embedded A tags are relocated automatically to prevent the nesting of active elements.

Instructions:
1) Using the mouse, click on a footnote to jump to the referenced material,
then click the footnote to jump back to your original location.
2) Using the keyboard, Tab to or Arrow to a footnote, then press Enter to jump to the selected footnote,
then press Enter on the footnote to jump back to your original location.

Demo: http://whatsock.com/modules/aria_footnote_generator_module/demo.htm

All the best,
Bryan

From: Jared Smith
Date: Wed, Nov 09 2011 8:09AM
Subject: Re: How to generate automatically accessible footnotes using ARIA
← Previous message | Next message →

Bryan-

This is a very interesting approach. I can't get it to work with the
keyboard in Firefox. Pressing Enter does not set focus to the
footnote. I think these elements will probably need to be set as links
or other scripting implemented to provide true keyboard accessibility.

Jared

From: deborah.kaplan@suberic.net
Date: Wed, Nov 09 2011 8:54AM
Subject: Re: How to generate automatically accessible footnotes using ARIA
← Previous message | Next message →

Bryan Garaventa posted his WAI-ARIA-only footnotes example, and
somebody (Jared?) said it didn't work with Firefox. So I tried it
out in Opera 11.52 (where it worked great), and then I tried it
out myself in Firefox 7.01. What I found interesting in Firefox
is that while it didn't work natively in Firefox with tab/enter,
it worked perfectly with the Firefox add-on Mouseless Browsing.

I really need to learn more about what that add-on actually does,
so I can have a better understanding of what things function with
it and what don't. (Particularly, some very rare drop down menus
will actually let Mouseless Browsing expand the menu in a useful
fashion. I wonder if it is also WAI-ARIA -- does the extension
do a better job with understanding way areas in the browser does
natively?)

This was a keyboard-only test; I was not testing with any kind of
screenreader at the time.

-Deborah

From: deborah.kaplan@suberic.net
Date: Wed, Nov 09 2011 9:00AM
Subject: Re: How to generate automatically accessible footnotes using ARIA
← Previous message | Next message →

I wrote;

> does the extensiondo a better job with understanding way areas in the browser does

Er, sorry. Usually I am better about proofreading dictation
errors befor I send my e-mails. This should have been me asking
if the extension does a better job understanding WAI-ARIA then
the browser does.

-Deborah

From: Jim Allan
Date: Wed, Nov 09 2011 9:27AM
Subject: Re: How to generate automatically accessible footnotes using ARIA
← Previous message | Next message →

Small css issue, the mouse cursor should change to a pointer (hand) to
indicate that the item is clickable.

On Wed, Nov 9, 2011 at 9:58 AM, < = EMAIL ADDRESS REMOVED = > wrote:

> I wrote;
>
> > does the extensiondo a better job with understanding way areas in the
> browser does
>
> Er, sorry. Usually I am better about proofreading dictation
> errors befor I send my e-mails. This should have been me asking
> if the extension does a better job understanding WAI-ARIA then
> the browser does.
>
> -Deborah
>

From: Bryan Garaventa
Date: Wed, Nov 09 2011 11:03AM
Subject: Re: How to generate automatically accessible footnotesusing ARIA
← Previous message | Next message →

That is strange. It may have something to do with the ARIA mapping, since I
tested it using JAWS12-13 in FF and NVDA as well as IE. Since I'm blind
though I didn't test it without these. It uses role=link but has no keyboard
assignments. It's interesting to see which browsers support this
automatically.

Adding a keypress handler should fix this without a problem though. I'll
update this later tonight with the change. Thanks :)

----- Original Message -----
From: "Jared Smith" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Wednesday, November 09, 2011 7:12 AM
Subject: Re: [WebAIM] How to generate automatically accessible
footnotesusing ARIA


> Bryan-
>
> This is a very interesting approach. I can't get it to work with the
> keyboard in Firefox. Pressing Enter does not set focus to the
> footnote. I think these elements will probably need to be set as links
> or other scripting implemented to provide true keyboard accessibility.
>
> Jared
>

From: Bryan Garaventa
Date: Wed, Nov 09 2011 11:09AM
Subject: Re: How to generate automatically accessible footnotesusing ARIA
← Previous message | Next message →

Good catch, thanks, I'll addd this tonight as well.

----- Original Message -----
From: "Jim Allan" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Wednesday, November 09, 2011 8:26 AM
Subject: Re: [WebAIM] How to generate automatically accessible
footnotesusing ARIA


> Small css issue, the mouse cursor should change to a pointer (hand) to
> indicate that the item is clickable.
>
> On Wed, Nov 9, 2011 at 9:58 AM, < = EMAIL ADDRESS REMOVED = > wrote:
>
>> I wrote;
>>
>> > does the extensiondo a better job with understanding way areas in the
>> browser does
>>
>> Er, sorry. Usually I am better about proofreading dictation
>> errors befor I send my e-mails. This should have been me asking
>> if the extension does a better job understanding WAI-ARIA then
>> the browser does.
>>
>> -Deborah
>>

From: Jim Allan
Date: Wed, Nov 09 2011 12:15PM
Subject: Re: How to generate automatically accessible footnotesusing ARIA
← Previous message | Next message →

also, at least with JAWS you can activate something with space, enter, and
leftmouse click on the number pad (desktop keyboard)

On Wed, Nov 9, 2011 at 1:16 PM, Jim Allan < = EMAIL ADDRESS REMOVED = > wrote:

> Jaws or screenreader keyboard action/behavior is different from browser
> keyboard behavior. It needs to work both places to ensure access for
> screenreader users and all those users who just use the keyboard without a
> screenreader.
>
> Look forward to testing the updated version
>
>
> On Wed, Nov 9, 2011 at 12:06 PM, Bryan Garaventa <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>> Good catch, thanks, I'll addd this tonight as well.
>>
>> ----- Original Message -----
>> From: "Jim Allan" < = EMAIL ADDRESS REMOVED = >
>> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>> Sent: Wednesday, November 09, 2011 8:26 AM
>> Subject: Re: [WebAIM] How to generate automatically accessible
>> footnotesusing ARIA
>>
>>
>> > Small css issue, the mouse cursor should change to a pointer (hand) to
>> > indicate that the item is clickable.
>> >
>> > On Wed, Nov 9, 2011 at 9:58 AM, < = EMAIL ADDRESS REMOVED = > wrote:
>> >
>> >> I wrote;
>> >>
>> >> > does the extensiondo a better job with understanding way areas in the
>> >> browser does
>> >>
>> >> Er, sorry. Usually I am better about proofreading dictation
>> >> errors befor I send my e-mails. This should have been me asking
>> >> if the extension does a better job understanding WAI-ARIA then
>> >> the browser does.
>> >>
>> >> -Deborah
>> >>

From: Jim Allan
Date: Wed, Nov 09 2011 12:24PM
Subject: Re: How to generate automatically accessible footnotesusing ARIA
← Previous message | Next message →

Jaws or screenreader keyboard action/behavior is different from browser
keyboard behavior. It needs to work both places to ensure access for
screenreader users and all those users who just use the keyboard without a
screenreader.

Look forward to testing the updated version

On Wed, Nov 9, 2011 at 12:06 PM, Bryan Garaventa <
= EMAIL ADDRESS REMOVED = > wrote:

> Good catch, thanks, I'll addd this tonight as well.
>
> ----- Original Message -----
> From: "Jim Allan" < = EMAIL ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
> Sent: Wednesday, November 09, 2011 8:26 AM
> Subject: Re: [WebAIM] How to generate automatically accessible
> footnotesusing ARIA
>
>
> > Small css issue, the mouse cursor should change to a pointer (hand) to
> > indicate that the item is clickable.
> >
> > On Wed, Nov 9, 2011 at 9:58 AM, < = EMAIL ADDRESS REMOVED = > wrote:
> >
> >> I wrote;
> >>
> >> > does the extensiondo a better job with understanding way areas in the
> >> browser does
> >>
> >> Er, sorry. Usually I am better about proofreading dictation
> >> errors befor I send my e-mails. This should have been me asking
> >> if the extension does a better job understanding WAI-ARIA then
> >> the browser does.
> >>
> >> -Deborah
> >>

From: Kevin Chao
Date: Wed, Nov 09 2011 3:00PM
Subject: Re: How to generate automatically accessible footnotes using ARIA
← Previous message | Next message →

Excellent job! Thanks! Works beautifully with Firefox 10pre (Nightly
and NVDA 2012.1 Snapshot and iOS 5, Safari, and VoiceOver.

Kevin

On 11/9/11, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
> Hi,
> A while back, someone asked about standards for accessible footnotes. So,
> thinking about it, I figured ARIA could be used to do this.
>
> Since I'm a big fan of making things work by themselves, I automated the
> accessibility so that, to add footnotes, you just use an object literal to
> declare each footnote (including markup), then put a span tag around the
> word or phrase that applies to that footnote.
>
> E.G.
>
> var footnotes = {
> f1: 'Footnote 1 text. <a href="url">Reference</a>',
> f2: 'Footnote 2 text. <a href="url">Reference</a>'
> };
>
> Then, in the body:
>
> This text is part of a
> <span id="f1" class="footer">paragraph</span>
> in the
> <span id="f2" class="footer">page body</span>
> content.
>
> The span ID attributes match the declared footnotes in the object literal,
> which is how the match is made at runtime. Plus embedded A tags are
> relocated automatically to prevent the nesting of active elements.
>
> Instructions:
> 1) Using the mouse, click on a footnote to jump to the referenced material,
> then click the footnote to jump back to your original location.
> 2) Using the keyboard, Tab to or Arrow to a footnote, then press Enter to
> jump to the selected footnote,
> then press Enter on the footnote to jump back to your original location.
>
> Demo: http://whatsock.com/modules/aria_footnote_generator_module/demo.htm
>
> All the best,
> Bryan
>

From: Bryan Garaventa
Date: Thu, Nov 10 2011 8:09AM
Subject: Re: How to generate automatically accessible footnotesusing ARIA
← Previous message | Next message →

Got it. The oversight was a simple one, I blame programming at 2am :)

So now you can tab through each footnote and press Enter or Spacebar to jump
to and from each footnote, with or without a screen reader. I also updated
the instructions to reflect this, and cursor:pointer is now included in the
CSS to indicate that footnotes are clickable.

Plus something extra, I added the ability for screen reader users to tab to
a footnote and press the ` key (above the Tab key) to have the footnote text
automatically announced without moving keyboard focus, which is nice if you
don't want to jump around. You do need to tab to it first though.

Modified:
http://whatsock.com/modules/aria_footnote_generator_module/demo.htm

Yay,
Bryan

----- Original Message -----
From: "Jared Smith" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Wednesday, November 09, 2011 7:12 AM
Subject: Re: [WebAIM] How to generate automatically accessible
footnotesusing ARIA


> Bryan-
>
> This is a very interesting approach. I can't get it to work with the
> keyboard in Firefox. Pressing Enter does not set focus to the
> footnote. I think these elements will probably need to be set as links
> or other scripting implemented to provide true keyboard accessibility.
>
> Jared
>

From: Kevin Chao
Date: Thu, Nov 10 2011 8:15AM
Subject: Re: How to generate automatically accessible footnotesusing ARIA
← Previous message | Next message →

Wow! Brian, this is excellent. The addition of pressing the ` key to
have the footnote automatically read without having focus
moved/changed is brilliant.
Firefox 11.0Pre (Nightly and NVDA 2012.1 Snapshot.

Kevin

On 11/9/11, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
> Got it. The oversight was a simple one, I blame programming at 2am :)
>
> So now you can tab through each footnote and press Enter or Spacebar to jump
> to and from each footnote, with or without a screen reader. I also updated
> the instructions to reflect this, and cursor:pointer is now included in the
> CSS to indicate that footnotes are clickable.
>
> Plus something extra, I added the ability for screen reader users to tab to
> a footnote and press the ` key (above the Tab key) to have the footnote text
> automatically announced without moving keyboard focus, which is nice if you
> don't want to jump around. You do need to tab to it first though.
>
> Modified:
> http://whatsock.com/modules/aria_footnote_generator_module/demo.htm
>
> Yay,
> Bryan
>
> ----- Original Message -----
> From: "Jared Smith" < = EMAIL ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
> Sent: Wednesday, November 09, 2011 7:12 AM
> Subject: Re: [WebAIM] How to generate automatically accessible
> footnotesusing ARIA
>
>
>> Bryan-
>>
>> This is a very interesting approach. I can't get it to work with the
>> keyboard in Firefox. Pressing Enter does not set focus to the
>> footnote. I think these elements will probably need to be set as links
>> or other scripting implemented to provide true keyboard accessibility.
>>
>> Jared
>>

From: Birkir R. Gunnarsson
Date: Thu, Nov 10 2011 8:27AM
Subject: Re: How to generate automatically accessible footnotesusing ARIA
← Previous message | Next message →

Cool.

This demo works in IE9 with Jaws 13 (on Windows 7, 32-bit).
The enter key works for jumping to and from foot notes and the grav
key works as well.
One note here, however:
For international users, who use a different keyboard configuration
this does not work, it appars the functionality is attached to the
expected input symbol, not to the key being pressed.
Perhaps assigning this functionality to "0" on the top row might be
more international in nature (most letter and numbers 1 through 6 are
taken up by the screen reader, most of the other keys such as - =
(which I use shift and 0 to produce in Icelandic keyboard) and >
(these key combinations produce ; and : with Icelandic keyboard), are
assigned different symbols in other languages.
Not necessarily anything we can do much about (is it possible to tie
the functionality to the actual physical location of the key, rather
than the expected input symbol?) but perhaps the instructions should
mention this, and give the user an easy way to assign a different key
for reading foot notes.
That being said, it is one of the cooler demoes I have seen recently,
keep it up.
Cheers
-B

On 11/10/11, Kevin Chao < = EMAIL ADDRESS REMOVED = > wrote:
> Wow! Brian, this is excellent. The addition of pressing the ` key to
> have the footnote automatically read without having focus
> moved/changed is brilliant.
> Firefox 11.0Pre (Nightly and NVDA 2012.1 Snapshot.
>
> Kevin
>
> On 11/9/11, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
>> Got it. The oversight was a simple one, I blame programming at 2am :)
>>
>> So now you can tab through each footnote and press Enter or Spacebar to
>> jump
>> to and from each footnote, with or without a screen reader. I also updated
>> the instructions to reflect this, and cursor:pointer is now included in
>> the
>> CSS to indicate that footnotes are clickable.
>>
>> Plus something extra, I added the ability for screen reader users to tab
>> to
>> a footnote and press the ` key (above the Tab key) to have the footnote
>> text
>> automatically announced without moving keyboard focus, which is nice if
>> you
>> don't want to jump around. You do need to tab to it first though.
>>
>> Modified:
>> http://whatsock.com/modules/aria_footnote_generator_module/demo.htm
>>
>> Yay,
>> Bryan
>>
>> ----- Original Message -----
>> From: "Jared Smith" < = EMAIL ADDRESS REMOVED = >
>> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>> Sent: Wednesday, November 09, 2011 7:12 AM
>> Subject: Re: [WebAIM] How to generate automatically accessible
>> footnotesusing ARIA
>>
>>
>>> Bryan-
>>>
>>> This is a very interesting approach. I can't get it to work with the
>>> keyboard in Firefox. Pressing Enter does not set focus to the
>>> footnote. I think these elements will probably need to be set as links
>>> or other scripting implemented to provide true keyboard accessibility.
>>>
>>> Jared
>>>

From: Bryan Garaventa
Date: Thu, Nov 10 2011 9:48AM
Subject: Re: How to generate automatically accessiblefootnotesusing ARIA
← Previous message | Next message →

No problem :)

The line of code for this is:
} else if (k == 96){
$A.announce(n);
in the file:
http://whatsock.com/modules/aria_footnote_generator_module/js/setup.js

Where 96 refers to the keyCode value for the hotkey you want to use for
announcing the relevant footnote.

You can try out different combinations by modifying the code directly and
running the page localy if you like. The download is at
http://whatsock.com/modules/aria_footnote_generator_module.zip

All the best,
Bryan

----- Original Message -----
From: "Birkir R. Gunnarsson" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, November 10, 2011 7:16 AM
Subject: Re: [WebAIM] How to generate automatically accessiblefootnotesusing
ARIA


> Cool.
>
> This demo works in IE9 with Jaws 13 (on Windows 7, 32-bit).
> The enter key works for jumping to and from foot notes and the grav
> key works as well.
> One note here, however:
> For international users, who use a different keyboard configuration
> this does not work, it appars the functionality is attached to the
> expected input symbol, not to the key being pressed.
> Perhaps assigning this functionality to "0" on the top row might be
> more international in nature (most letter and numbers 1 through 6 are
> taken up by the screen reader, most of the other keys such as - =
> (which I use shift and 0 to produce in Icelandic keyboard) and >
> (these key combinations produce ; and : with Icelandic keyboard), are
> assigned different symbols in other languages.
> Not necessarily anything we can do much about (is it possible to tie
> the functionality to the actual physical location of the key, rather
> than the expected input symbol?) but perhaps the instructions should
> mention this, and give the user an easy way to assign a different key
> for reading foot notes.
> That being said, it is one of the cooler demoes I have seen recently,
> keep it up.
> Cheers
> -B
>
> On 11/10/11, Kevin Chao < = EMAIL ADDRESS REMOVED = > wrote:
>> Wow! Brian, this is excellent. The addition of pressing the ` key to
>> have the footnote automatically read without having focus
>> moved/changed is brilliant.
>> Firefox 11.0Pre (Nightly and NVDA 2012.1 Snapshot.
>>
>> Kevin
>>
>> On 11/9/11, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
>>> Got it. The oversight was a simple one, I blame programming at 2am :)
>>>
>>> So now you can tab through each footnote and press Enter or Spacebar to
>>> jump
>>> to and from each footnote, with or without a screen reader. I also
>>> updated
>>> the instructions to reflect this, and cursor:pointer is now included in
>>> the
>>> CSS to indicate that footnotes are clickable.
>>>
>>> Plus something extra, I added the ability for screen reader users to tab
>>> to
>>> a footnote and press the ` key (above the Tab key) to have the footnote
>>> text
>>> automatically announced without moving keyboard focus, which is nice if
>>> you
>>> don't want to jump around. You do need to tab to it first though.
>>>
>>> Modified:
>>> http://whatsock.com/modules/aria_footnote_generator_module/demo.htm
>>>
>>> Yay,
>>> Bryan
>>>
>>> ----- Original Message -----
>>> From: "Jared Smith" < = EMAIL ADDRESS REMOVED = >
>>> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>>> Sent: Wednesday, November 09, 2011 7:12 AM
>>> Subject: Re: [WebAIM] How to generate automatically accessible
>>> footnotesusing ARIA
>>>
>>>
>>>> Bryan-
>>>>
>>>> This is a very interesting approach. I can't get it to work with the
>>>> keyboard in Firefox. Pressing Enter does not set focus to the
>>>> footnote. I think these elements will probably need to be set as links
>>>> or other scripting implemented to provide true keyboard accessibility.
>>>>
>>>> Jared
>>>>

From: Birkir R. Gunnarsson
Date: Thu, Nov 10 2011 9:54AM
Subject: Re: How to generate automatically accessiblefootnotesusing ARIA
← Previous message | Next message →

Thanks Bryan :)

Could we include a feature on this page that would allow a user to
assign a new hotkey through the webpage itself to use for announcing
foot notes
(if you with to use a different key to read foot notes, please press
it here and then the "confirm button" .. followed by an edit field and
a button).
May be I can contribute this functionality to the project as part of
practicing my Javascript, it might be a neat additional feature.
Thanks
-B

On 11/10/11, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
> No problem :)
>
> The line of code for this is:
> } else if (k == 96){
> $A.announce(n);
> in the file:
> http://whatsock.com/modules/aria_footnote_generator_module/js/setup.js
>
> Where 96 refers to the keyCode value for the hotkey you want to use for
> announcing the relevant footnote.
>
> You can try out different combinations by modifying the code directly and
> running the page localy if you like. The download is at
> http://whatsock.com/modules/aria_footnote_generator_module.zip
>
> All the best,
> Bryan
>
> ----- Original Message -----
> From: "Birkir R. Gunnarsson" < = EMAIL ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
> Sent: Thursday, November 10, 2011 7:16 AM
> Subject: Re: [WebAIM] How to generate automatically accessiblefootnotesusing
> ARIA
>
>
>> Cool.
>>
>> This demo works in IE9 with Jaws 13 (on Windows 7, 32-bit).
>> The enter key works for jumping to and from foot notes and the grav
>> key works as well.
>> One note here, however:
>> For international users, who use a different keyboard configuration
>> this does not work, it appars the functionality is attached to the
>> expected input symbol, not to the key being pressed.
>> Perhaps assigning this functionality to "0" on the top row might be
>> more international in nature (most letter and numbers 1 through 6 are
>> taken up by the screen reader, most of the other keys such as - =
>> (which I use shift and 0 to produce in Icelandic keyboard) and >
>> (these key combinations produce ; and : with Icelandic keyboard), are
>> assigned different symbols in other languages.
>> Not necessarily anything we can do much about (is it possible to tie
>> the functionality to the actual physical location of the key, rather
>> than the expected input symbol?) but perhaps the instructions should
>> mention this, and give the user an easy way to assign a different key
>> for reading foot notes.
>> That being said, it is one of the cooler demoes I have seen recently,
>> keep it up.
>> Cheers
>> -B
>>
>> On 11/10/11, Kevin Chao < = EMAIL ADDRESS REMOVED = > wrote:
>>> Wow! Brian, this is excellent. The addition of pressing the ` key to
>>> have the footnote automatically read without having focus
>>> moved/changed is brilliant.
>>> Firefox 11.0Pre (Nightly and NVDA 2012.1 Snapshot.
>>>
>>> Kevin
>>>
>>> On 11/9/11, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
>>>> Got it. The oversight was a simple one, I blame programming at 2am :)
>>>>
>>>> So now you can tab through each footnote and press Enter or Spacebar to
>>>> jump
>>>> to and from each footnote, with or without a screen reader. I also
>>>> updated
>>>> the instructions to reflect this, and cursor:pointer is now included in
>>>> the
>>>> CSS to indicate that footnotes are clickable.
>>>>
>>>> Plus something extra, I added the ability for screen reader users to tab
>>>> to
>>>> a footnote and press the ` key (above the Tab key) to have the footnote
>>>> text
>>>> automatically announced without moving keyboard focus, which is nice if
>>>> you
>>>> don't want to jump around. You do need to tab to it first though.
>>>>
>>>> Modified:
>>>> http://whatsock.com/modules/aria_footnote_generator_module/demo.htm
>>>>
>>>> Yay,
>>>> Bryan
>>>>
>>>> ----- Original Message -----
>>>> From: "Jared Smith" < = EMAIL ADDRESS REMOVED = >
>>>> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>>>> Sent: Wednesday, November 09, 2011 7:12 AM
>>>> Subject: Re: [WebAIM] How to generate automatically accessible
>>>> footnotesusing ARIA
>>>>
>>>>
>>>>> Bryan-
>>>>>
>>>>> This is a very interesting approach. I can't get it to work with the
>>>>> keyboard in Firefox. Pressing Enter does not set focus to the
>>>>> footnote. I think these elements will probably need to be set as links
>>>>> or other scripting implemented to provide true keyboard accessibility.
>>>>>
>>>>> Jared
>>>>>

From: Bryan Garaventa
Date: Thu, Nov 10 2011 10:39AM
Subject: Re: How to generate automatically accessiblefootnotesusingARIA
← Previous message | Next message →

No worries, I'll take care of it later, if not tonight then over the
weekend. It's actually pretty easy to add.

----- Original Message -----
From: "Birkir R. Gunnarsson" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, November 10, 2011 8:53 AM
Subject: Re: [WebAIM] How to generate automatically
accessiblefootnotesusingARIA


> Thanks Bryan :)
>
> Could we include a feature on this page that would allow a user to
> assign a new hotkey through the webpage itself to use for announcing
> foot notes
> (if you with to use a different key to read foot notes, please press
> it here and then the "confirm button" .. followed by an edit field and
> a button).
> May be I can contribute this functionality to the project as part of
> practicing my Javascript, it might be a neat additional feature.
> Thanks
> -B
>
> On 11/10/11, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
>> No problem :)
>>
>> The line of code for this is:
>> } else if (k == 96){
>> $A.announce(n);
>> in the file:
>> http://whatsock.com/modules/aria_footnote_generator_module/js/setup.js
>>
>> Where 96 refers to the keyCode value for the hotkey you want to use for
>> announcing the relevant footnote.
>>
>> You can try out different combinations by modifying the code directly and
>> running the page localy if you like. The download is at
>> http://whatsock.com/modules/aria_footnote_generator_module.zip
>>
>> All the best,
>> Bryan
>>
>> ----- Original Message -----
>> From: "Birkir R. Gunnarsson" < = EMAIL ADDRESS REMOVED = >
>> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>> Sent: Thursday, November 10, 2011 7:16 AM
>> Subject: Re: [WebAIM] How to generate automatically
>> accessiblefootnotesusing
>> ARIA
>>
>>
>>> Cool.
>>>
>>> This demo works in IE9 with Jaws 13 (on Windows 7, 32-bit).
>>> The enter key works for jumping to and from foot notes and the grav
>>> key works as well.
>>> One note here, however:
>>> For international users, who use a different keyboard configuration
>>> this does not work, it appars the functionality is attached to the
>>> expected input symbol, not to the key being pressed.
>>> Perhaps assigning this functionality to "0" on the top row might be
>>> more international in nature (most letter and numbers 1 through 6 are
>>> taken up by the screen reader, most of the other keys such as - =
>>> (which I use shift and 0 to produce in Icelandic keyboard) and >
>>> (these key combinations produce ; and : with Icelandic keyboard), are
>>> assigned different symbols in other languages.
>>> Not necessarily anything we can do much about (is it possible to tie
>>> the functionality to the actual physical location of the key, rather
>>> than the expected input symbol?) but perhaps the instructions should
>>> mention this, and give the user an easy way to assign a different key
>>> for reading foot notes.
>>> That being said, it is one of the cooler demoes I have seen recently,
>>> keep it up.
>>> Cheers
>>> -B
>>>
>>> On 11/10/11, Kevin Chao < = EMAIL ADDRESS REMOVED = > wrote:
>>>> Wow! Brian, this is excellent. The addition of pressing the ` key to
>>>> have the footnote automatically read without having focus
>>>> moved/changed is brilliant.
>>>> Firefox 11.0Pre (Nightly and NVDA 2012.1 Snapshot.
>>>>
>>>> Kevin
>>>>
>>>> On 11/9/11, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
>>>>> Got it. The oversight was a simple one, I blame programming at 2am :)
>>>>>
>>>>> So now you can tab through each footnote and press Enter or Spacebar
>>>>> to
>>>>> jump
>>>>> to and from each footnote, with or without a screen reader. I also
>>>>> updated
>>>>> the instructions to reflect this, and cursor:pointer is now included
>>>>> in
>>>>> the
>>>>> CSS to indicate that footnotes are clickable.
>>>>>
>>>>> Plus something extra, I added the ability for screen reader users to
>>>>> tab
>>>>> to
>>>>> a footnote and press the ` key (above the Tab key) to have the
>>>>> footnote
>>>>> text
>>>>> automatically announced without moving keyboard focus, which is nice
>>>>> if
>>>>> you
>>>>> don't want to jump around. You do need to tab to it first though.
>>>>>
>>>>> Modified:
>>>>> http://whatsock.com/modules/aria_footnote_generator_module/demo.htm
>>>>>
>>>>> Yay,
>>>>> Bryan
>>>>>
>>>>> ----- Original Message -----
>>>>> From: "Jared Smith" < = EMAIL ADDRESS REMOVED = >
>>>>> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>>>>> Sent: Wednesday, November 09, 2011 7:12 AM
>>>>> Subject: Re: [WebAIM] How to generate automatically accessible
>>>>> footnotesusing ARIA
>>>>>
>>>>>
>>>>>> Bryan-
>>>>>>
>>>>>> This is a very interesting approach. I can't get it to work with the
>>>>>> keyboard in Firefox. Pressing Enter does not set focus to the
>>>>>> footnote. I think these elements will probably need to be set as
>>>>>> links
>>>>>> or other scripting implemented to provide true keyboard
>>>>>> accessibility.
>>>>>>
>>>>>> Jared
>>>>>>

From: Bryan Garaventa
Date: Thu, Nov 10 2011 7:24PM
Subject: Re: How to generate automaticallyaccessiblefootnotesusingARIA
← Previous message | Next message →

There you go, I added a button to change the hotkey assignment on the fly.
Well, technically it's an A tag with role=button, but you know what I mean.
Modifyer keys are supported as well.

I also added a dynamic tooltip to allow simultaneous visual and auditory
feedback for sighted and screen reader users .

Updated code:
http://whatsock.com/modules/aria_footnote_generator_module/js/setup.js
Demo: http://whatsock.com/modules/aria_footnote_generator_module/demo.htm

Best wishes,
Bryan

----- Original Message -----
From: "Bryan Garaventa" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, November 10, 2011 9:39 AM
Subject: Re: [WebAIM] How to generate
automaticallyaccessiblefootnotesusingARIA


> No worries, I'll take care of it later, if not tonight then over the
> weekend. It's actually pretty easy to add.
>
> ----- Original Message -----
> From: "Birkir R. Gunnarsson" < = EMAIL ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
> Sent: Thursday, November 10, 2011 8:53 AM
> Subject: Re: [WebAIM] How to generate automatically
> accessiblefootnotesusingARIA
>
>
>> Thanks Bryan :)
>>
>> Could we include a feature on this page that would allow a user to
>> assign a new hotkey through the webpage itself to use for announcing
>> foot notes
>> (if you with to use a different key to read foot notes, please press
>> it here and then the "confirm button" .. followed by an edit field and
>> a button).
>> May be I can contribute this functionality to the project as part of
>> practicing my Javascript, it might be a neat additional feature.
>> Thanks
>> -B
>>
>> On 11/10/11, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
>>> No problem :)
>>>
>>> The line of code for this is:
>>> } else if (k == 96){
>>> $A.announce(n);
>>> in the file:
>>> http://whatsock.com/modules/aria_footnote_generator_module/js/setup.js
>>>
>>> Where 96 refers to the keyCode value for the hotkey you want to use for
>>> announcing the relevant footnote.
>>>
>>> You can try out different combinations by modifying the code directly
>>> and
>>> running the page localy if you like. The download is at
>>> http://whatsock.com/modules/aria_footnote_generator_module.zip
>>>
>>> All the best,
>>> Bryan
>>>
>>> ----- Original Message -----
>>> From: "Birkir R. Gunnarsson" < = EMAIL ADDRESS REMOVED = >
>>> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>>> Sent: Thursday, November 10, 2011 7:16 AM
>>> Subject: Re: [WebAIM] How to generate automatically
>>> accessiblefootnotesusing
>>> ARIA
>>>
>>>
>>>> Cool.
>>>>
>>>> This demo works in IE9 with Jaws 13 (on Windows 7, 32-bit).
>>>> The enter key works for jumping to and from foot notes and the grav
>>>> key works as well.
>>>> One note here, however:
>>>> For international users, who use a different keyboard configuration
>>>> this does not work, it appars the functionality is attached to the
>>>> expected input symbol, not to the key being pressed.
>>>> Perhaps assigning this functionality to "0" on the top row might be
>>>> more international in nature (most letter and numbers 1 through 6 are
>>>> taken up by the screen reader, most of the other keys such as - =
>>>> (which I use shift and 0 to produce in Icelandic keyboard) and >
>>>> (these key combinations produce ; and : with Icelandic keyboard), are
>>>> assigned different symbols in other languages.
>>>> Not necessarily anything we can do much about (is it possible to tie
>>>> the functionality to the actual physical location of the key, rather
>>>> than the expected input symbol?) but perhaps the instructions should
>>>> mention this, and give the user an easy way to assign a different key
>>>> for reading foot notes.
>>>> That being said, it is one of the cooler demoes I have seen recently,
>>>> keep it up.
>>>> Cheers
>>>> -B
>>>>
>>>> On 11/10/11, Kevin Chao < = EMAIL ADDRESS REMOVED = > wrote:
>>>>> Wow! Brian, this is excellent. The addition of pressing the ` key to
>>>>> have the footnote automatically read without having focus
>>>>> moved/changed is brilliant.
>>>>> Firefox 11.0Pre (Nightly and NVDA 2012.1 Snapshot.
>>>>>
>>>>> Kevin
>>>>>
>>>>> On 11/9/11, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
>>>>>> Got it. The oversight was a simple one, I blame programming at 2am :)
>>>>>>
>>>>>> So now you can tab through each footnote and press Enter or Spacebar
>>>>>> to
>>>>>> jump
>>>>>> to and from each footnote, with or without a screen reader. I also
>>>>>> updated
>>>>>> the instructions to reflect this, and cursor:pointer is now included
>>>>>> in
>>>>>> the
>>>>>> CSS to indicate that footnotes are clickable.
>>>>>>
>>>>>> Plus something extra, I added the ability for screen reader users to
>>>>>> tab
>>>>>> to
>>>>>> a footnote and press the ` key (above the Tab key) to have the
>>>>>> footnote
>>>>>> text
>>>>>> automatically announced without moving keyboard focus, which is nice
>>>>>> if
>>>>>> you
>>>>>> don't want to jump around. You do need to tab to it first though.
>>>>>>
>>>>>> Modified:
>>>>>> http://whatsock.com/modules/aria_footnote_generator_module/demo.htm
>>>>>>
>>>>>> Yay,
>>>>>> Bryan
>>>>>>
>>>>>> ----- Original Message -----
>>>>>> From: "Jared Smith" < = EMAIL ADDRESS REMOVED = >
>>>>>> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>>>>>> Sent: Wednesday, November 09, 2011 7:12 AM
>>>>>> Subject: Re: [WebAIM] How to generate automatically accessible
>>>>>> footnotesusing ARIA
>>>>>>
>>>>>>
>>>>>>> Bryan-
>>>>>>>
>>>>>>> This is a very interesting approach. I can't get it to work with the
>>>>>>> keyboard in Firefox. Pressing Enter does not set focus to the
>>>>>>> footnote. I think these elements will probably need to be set as
>>>>>>> links
>>>>>>> or other scripting implemented to provide true keyboard
>>>>>>> accessibility.
>>>>>>>
>>>>>>> Jared
>>>>>>>

From: Kevin Chao
Date: Thu, Nov 10 2011 7:33PM
Subject: Re: How to generate automaticallyaccessiblefootnotesusingARIA
← Previous message | Next message →

Hi Brian,

Wow! Excellent.
Change hotkey button is working great with Chrome 17 Canary and
Firefox 11.0Pre (Nightly) with NVDA 2012.1 Snapshot.

Kevin

On 11/10/11, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
> There you go, I added a button to change the hotkey assignment on the fly.
> Well, technically it's an A tag with role=button, but you know what I mean.
> Modifyer keys are supported as well.
>
> I also added a dynamic tooltip to allow simultaneous visual and auditory
> feedback for sighted and screen reader users .
>
> Updated code:
> http://whatsock.com/modules/aria_footnote_generator_module/js/setup.js
> Demo: http://whatsock.com/modules/aria_footnote_generator_module/demo.htm
>
> Best wishes,
> Bryan
>
> ----- Original Message -----
> From: "Bryan Garaventa" < = EMAIL ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
> Sent: Thursday, November 10, 2011 9:39 AM
> Subject: Re: [WebAIM] How to generate
> automaticallyaccessiblefootnotesusingARIA
>
>
>> No worries, I'll take care of it later, if not tonight then over the
>> weekend. It's actually pretty easy to add.
>>
>> ----- Original Message -----
>> From: "Birkir R. Gunnarsson" < = EMAIL ADDRESS REMOVED = >
>> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>> Sent: Thursday, November 10, 2011 8:53 AM
>> Subject: Re: [WebAIM] How to generate automatically
>> accessiblefootnotesusingARIA
>>
>>
>>> Thanks Bryan :)
>>>
>>> Could we include a feature on this page that would allow a user to
>>> assign a new hotkey through the webpage itself to use for announcing
>>> foot notes
>>> (if you with to use a different key to read foot notes, please press
>>> it here and then the "confirm button" .. followed by an edit field and
>>> a button).
>>> May be I can contribute this functionality to the project as part of
>>> practicing my Javascript, it might be a neat additional feature.
>>> Thanks
>>> -B
>>>
>>> On 11/10/11, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
>>>> No problem :)
>>>>
>>>> The line of code for this is:
>>>> } else if (k == 96){
>>>> $A.announce(n);
>>>> in the file:
>>>> http://whatsock.com/modules/aria_footnote_generator_module/js/setup.js
>>>>
>>>> Where 96 refers to the keyCode value for the hotkey you want to use for
>>>> announcing the relevant footnote.
>>>>
>>>> You can try out different combinations by modifying the code directly
>>>> and
>>>> running the page localy if you like. The download is at
>>>> http://whatsock.com/modules/aria_footnote_generator_module.zip
>>>>
>>>> All the best,
>>>> Bryan
>>>>
>>>> ----- Original Message -----
>>>> From: "Birkir R. Gunnarsson" < = EMAIL ADDRESS REMOVED = >
>>>> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>>>> Sent: Thursday, November 10, 2011 7:16 AM
>>>> Subject: Re: [WebAIM] How to generate automatically
>>>> accessiblefootnotesusing
>>>> ARIA
>>>>
>>>>
>>>>> Cool.
>>>>>
>>>>> This demo works in IE9 with Jaws 13 (on Windows 7, 32-bit).
>>>>> The enter key works for jumping to and from foot notes and the grav
>>>>> key works as well.
>>>>> One note here, however:
>>>>> For international users, who use a different keyboard configuration
>>>>> this does not work, it appars the functionality is attached to the
>>>>> expected input symbol, not to the key being pressed.
>>>>> Perhaps assigning this functionality to "0" on the top row might be
>>>>> more international in nature (most letter and numbers 1 through 6 are
>>>>> taken up by the screen reader, most of the other keys such as - =
>>>>> (which I use shift and 0 to produce in Icelandic keyboard) and >
>>>>> (these key combinations produce ; and : with Icelandic keyboard), are
>>>>> assigned different symbols in other languages.
>>>>> Not necessarily anything we can do much about (is it possible to tie
>>>>> the functionality to the actual physical location of the key, rather
>>>>> than the expected input symbol?) but perhaps the instructions should
>>>>> mention this, and give the user an easy way to assign a different key
>>>>> for reading foot notes.
>>>>> That being said, it is one of the cooler demoes I have seen recently,
>>>>> keep it up.
>>>>> Cheers
>>>>> -B
>>>>>
>>>>> On 11/10/11, Kevin Chao < = EMAIL ADDRESS REMOVED = > wrote:
>>>>>> Wow! Brian, this is excellent. The addition of pressing the ` key to
>>>>>> have the footnote automatically read without having focus
>>>>>> moved/changed is brilliant.
>>>>>> Firefox 11.0Pre (Nightly and NVDA 2012.1 Snapshot.
>>>>>>
>>>>>> Kevin
>>>>>>
>>>>>> On 11/9/11, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
>>>>>>> Got it. The oversight was a simple one, I blame programming at 2am :)
>>>>>>>
>>>>>>> So now you can tab through each footnote and press Enter or Spacebar
>>>>>>> to
>>>>>>> jump
>>>>>>> to and from each footnote, with or without a screen reader. I also
>>>>>>> updated
>>>>>>> the instructions to reflect this, and cursor:pointer is now included
>>>>>>> in
>>>>>>> the
>>>>>>> CSS to indicate that footnotes are clickable.
>>>>>>>
>>>>>>> Plus something extra, I added the ability for screen reader users to
>>>>>>> tab
>>>>>>> to
>>>>>>> a footnote and press the ` key (above the Tab key) to have the
>>>>>>> footnote
>>>>>>> text
>>>>>>> automatically announced without moving keyboard focus, which is nice
>>>>>>> if
>>>>>>> you
>>>>>>> don't want to jump around. You do need to tab to it first though.
>>>>>>>
>>>>>>> Modified:
>>>>>>> http://whatsock.com/modules/aria_footnote_generator_module/demo.htm
>>>>>>>
>>>>>>> Yay,
>>>>>>> Bryan
>>>>>>>
>>>>>>> ----- Original Message -----
>>>>>>> From: "Jared Smith" < = EMAIL ADDRESS REMOVED = >
>>>>>>> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>>>>>>> Sent: Wednesday, November 09, 2011 7:12 AM
>>>>>>> Subject: Re: [WebAIM] How to generate automatically accessible
>>>>>>> footnotesusing ARIA
>>>>>>>
>>>>>>>
>>>>>>>> Bryan-
>>>>>>>>
>>>>>>>> This is a very interesting approach. I can't get it to work with the
>>>>>>>> keyboard in Firefox. Pressing Enter does not set focus to the
>>>>>>>> footnote. I think these elements will probably need to be set as
>>>>>>>> links
>>>>>>>> or other scripting implemented to provide true keyboard
>>>>>>>> accessibility.
>>>>>>>>
>>>>>>>> Jared
>>>>>>>>

From: Priti
Date: Sun, Nov 13 2011 4:39AM
Subject: Re: How to generate automatically accessible footnotesusing ARIA
← Previous message | No next message

Hi Bryan,

Brilliant piece of demo yet again!

I tried it a bit late but no regrets as usual great work!

Thanks for sharing it with the list:)


Thanks & Regards,
Priti Rohra
Accessibility Consultant
Twitter: http://www.twitter.com/pritirohra
Linkedin: http://www.linkedin.com/pub/priti-rohra/10/8a6/788


-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Thursday, November 10, 2011 8:11 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] How to generate automatically accessible
footnotesusing ARIA

Got it. The oversight was a simple one, I blame programming at 2am :)

So now you can tab through each footnote and press Enter or Spacebar to jump

to and from each footnote, with or without a screen reader. I also updated
the instructions to reflect this, and cursor:pointer is now included in the
CSS to indicate that footnotes are clickable.

Plus something extra, I added the ability for screen reader users to tab to
a footnote and press the ` key (above the Tab key) to have the footnote text

automatically announced without moving keyboard focus, which is nice if you
don't want to jump around. You do need to tab to it first though.

Modified:
http://whatsock.com/modules/aria_footnote_generator_module/demo.htm

Yay,
Bryan

----- Original Message -----
From: "Jared Smith" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Wednesday, November 09, 2011 7:12 AM
Subject: Re: [WebAIM] How to generate automatically accessible
footnotesusing ARIA


> Bryan-
>
> This is a very interesting approach. I can't get it to work with the
> keyboard in Firefox. Pressing Enter does not set focus to the
> footnote. I think these elements will probably need to be set as links
> or other scripting implemented to provide true keyboard accessibility.
>
> Jared
>