WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Help Database Integration

for

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

From: Peter Shikli
Date: Tue, May 16 2017 3:34PM
Subject: Help Database Integration
No previous message | Next message →

As part of all our online applications, we have integrated HelpMeister, a
database we built of help records for each application. On our
applications, every field label on every form has a link to display a help
page about that field. Every such field label also has an onmouseover to
display an abridged tooltip version of the help record. The help record
content displayed can vary based on user preference settings like
proficiency and language.

We can do the standard accessibility fix using a label tag with for and id
attributes to connect an input to its field label, and onfocus with the
onmouseover, but we still have the field's help separate from the input,
for example:
<A HREF=HelpMeister ALT="Help for this field"><LABEL
FOR="Name">Name</LABEL></A>
<INPUT ID="Name" TYPE="TEXT" NAME="name" >

We use tabindex so sighted users tab from input to input entering data in
a table, mouse clicking on the left-hand field label's help as needed. If
we expand the tabindex to include the help links, we annoy sighted users
and the blind who don't need so much help.

I can think of some rather inelegant solutions, like designating a hot key
such as the Windows F1 help key to jump back (left) to the help link,
hoping the user is in an input when they click the F1 key. I'm hoping the
community has a better idea.
Sincerely,
Peter Shikli
= EMAIL ADDRESS REMOVED =
503-570-6831
FAX: 213-337-7029
Web4VI
29030 SW Town Center Loop East
Suite 202-187
Wilsonville, OR 97070
www.Web4VI.com
Prison inmates helping the blind

From: Jonathan Avila
Date: Tue, May 16 2017 7:19PM
Subject: Re: Help Database Integration
← Previous message | Next message →

> We can do the standard accessibility fix using a label tag with for and id attributes to connect an input to its field label, and onfocus with the onmouseover, but we still have the field's help separate from the input, for example:

Perhaps aria-describedby can be used to associate the field with the abbreviated tooltip.

Jonathan

Jonathan Avila
Chief Accessibility Officer
SSB BART Group 
= EMAIL ADDRESS REMOVED =
703.637.8957 (Office)

Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
Download our CSUN Presentations Here!

The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Peter Shikli
Sent: Tuesday, May 16, 2017 5:35 PM
To: WebAIM Forum
Subject: [WebAIM] Help Database Integration


As part of all our online applications, we have integrated HelpMeister, a database we built of help records for each application. On our applications, every field label on every form has a link to display a help page about that field. Every such field label also has an onmouseover to display an abridged tooltip version of the help record. The help record content displayed can vary based on user preference settings like proficiency and language.

We can do the standard accessibility fix using a label tag with for and id attributes to connect an input to its field label, and onfocus with the onmouseover, but we still have the field's help separate from the input, for example:
<A HREF=HelpMeister ALT="Help for this field"><LABEL FOR="Name">Name</LABEL></A> <INPUT ID="Name" TYPE="TEXT" NAME="name" >

We use tabindex so sighted users tab from input to input entering data in a table, mouse clicking on the left-hand field label's help as needed. If we expand the tabindex to include the help links, we annoy sighted users and the blind who don't need so much help.

I can think of some rather inelegant solutions, like designating a hot key such as the Windows F1 help key to jump back (left) to the help link, hoping the user is in an input when they click the F1 key. I'm hoping the community has a better idea.
Sincerely,
Peter Shikli
= EMAIL ADDRESS REMOVED =
503-570-6831
FAX: 213-337-7029
Web4VI
29030 SW Town Center Loop East
Suite 202-187
Wilsonville, OR 97070
www.Web4VI.com
Prison inmates helping the blind

From: Mallory
Date: Wed, May 17 2017 1:56AM
Subject: Re: Help Database Integration
← Previous message | No next message

The alt on the anchor makes little sense, is that even read out?

But what you've got is similar to a solution my old insurance forms
used. There was a span inside the label which, when the input got focus,
the span was positioned and styled nicely like a tooltip and became
visible.

The con of this approach does mean long, long labels for each input, so
it might make sense to have the main label name come first so skipping
from field to field can be skimmed.

I'm also curious about the tabindex. These things aren't just normally,
natively focusable? Is this not a web page?

cheers,
_mallory

On Wed, May 17, 2017, at 03:19 AM, Jonathan Avila wrote:
> > We can do the standard accessibility fix using a label tag with for and id attributes to connect an input to its field label, and onfocus with the onmouseover, but we still have the field's help separate from the input, for example:
>
> Perhaps aria-describedby can be used to associate the field with the
> abbreviated tooltip.
>
> Jonathan
>
> Jonathan Avila
> Chief Accessibility Officer
> SSB BART Group 
> = EMAIL ADDRESS REMOVED =
> 703.637.8957 (Office)
>
> Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
> Download our CSUN Presentations Here!
>
> The information contained in this transmission may be attorney privileged
> and/or confidential information intended for the use of the individual or
> entity named above. If the reader of this message is not the intended
> recipient, you are hereby notified that any use, dissemination,
> distribution or copying of this communication is strictly prohibited.
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Peter Shikli
> Sent: Tuesday, May 16, 2017 5:35 PM
> To: WebAIM Forum
> Subject: [WebAIM] Help Database Integration
>
>
> As part of all our online applications, we have integrated HelpMeister,
> a database we built of help records for each application. On our
> applications, every field label on every form has a link to display a
> help page about that field. Every such field label also has an
> onmouseover to display an abridged tooltip version of the help record.
> The help record content displayed can vary based on user preference
> settings like proficiency and language.
>
> We can do the standard accessibility fix using a label tag with for and
> id attributes to connect an input to its field label, and onfocus with
> the onmouseover, but we still have the field's help separate from the
> input, for example:
> <A HREF=HelpMeister ALT="Help for this field"><LABEL
> FOR="Name">Name</LABEL></A> <INPUT ID="Name" TYPE="TEXT" NAME="name" >
>
> We use tabindex so sighted users tab from input to input entering data
> in a table, mouse clicking on the left-hand field label's help as
> needed. If we expand the tabindex to include the help links, we annoy
> sighted users and the blind who don't need so much help.
>
> I can think of some rather inelegant solutions, like designating a hot
> key such as the Windows F1 help key to jump back (left) to the help
> link, hoping the user is in an input when they click the F1 key. I'm
> hoping the community has a better idea.
> Sincerely,
> Peter Shikli
> = EMAIL ADDRESS REMOVED =
> 503-570-6831
> FAX: 213-337-7029
> Web4VI
> 29030 SW Town Center Loop East
> Suite 202-187
> Wilsonville, OR 97070
> www.Web4VI.com
> Prison inmates helping the blind
>
>
> > > at http://webaim.org/discussion/archives
> > > > >