WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: How to generate automaticallyaccessiblefootnotesusingARIA

for

From: Bryan Garaventa
Date: Nov 10, 2011 7:24PM

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 REMOVED> >
To: "WebAIM Discussion List" < <EMAIL 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 REMOVED> >
> To: "WebAIM Discussion List" < <EMAIL 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 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 REMOVED> >
>>> To: "WebAIM Discussion List" < <EMAIL 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 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 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 REMOVED> >
>>>>>> To: "WebAIM Discussion List" < <EMAIL 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
>>>>>>>