E-mail List Archives
Thread: Help deciding on text to provide context to a tabstrip
Number of posts in this thread: 3 (In chronological order)
From: E.J. Zufelt
Date: Sat, Aug 14 2010 10:30PM
Subject: Help deciding on text to provide context to a tabstrip
No previous message | Next message →
Good evening all,
I'm looking for some help figuring out helpful and meaningful text for a user interface control in Drupal.
On some pages we have what is functionally a tabstrip. It is structured as an unordered list of links, with the currently active tab being indicated with the text (active tab).
Example code:
<ul>
<li><a href="/1">View</a></li>
<li><a href="/2">Edit (active tab)</a></li>
<li><a href="/3">Track Changes</a></li>
</ul>
It would be read as
View link
Edit (active tab) link
Track changes link
I am certain that for some new users the (active tab) text alone will not be sufficient to indicate that this is a tabstrip (where one and only one item can be selected). Additionally, there can sometimes be a secondary tabstrip, with tabs that are related to the active tab in the primary tabstrip.
I am wondering if you have any suggestions for what additional text we can use before the list of primary and secondary tabs to better provide meaningful context for the purpose of the two lists of tab links?
Thanks in advance,
Everett Zufelt
http://zufelt.ca
Follow me on Twitter
http://twitter.com/ezufelt
View my LinkedIn Profile
http://www.linkedin.com/in/ezufelt
From: Jason Kiss
Date: Sun, Aug 15 2010 12:39AM
Subject: Re: Help deciding on text to provide context to a tabstrip
← Previous message | Next message →
Hi Everett,
I have previously introduced a set of tab controls with the following
text, which was hidden visually but left available to assistive
technologies:
"Note: Below are three tab links. To navigate them, use the TAB key. To
select a tab, press the ENTER key."
I'm sure there's something better, especially with the use of the word
"tab" referring both to the type of links and to the keyboard key, but
this is what I settled on for a simple, single level of tab controls.
Also, regarding the "active tab" text, I decided to try and mimic to
some degree what JAWS and NVDA do with ARIA-enabled tab panels. That is,
I appended the word "tab" to each tab link, and the words "tab selected"
to the active tab. This way screen readers would read them as "link View
tab, link Edit tab selected, link Track Changes tab".
Hope this helps,
Jason Kiss
http://www.accessibleculture.org/
twitter: @jkiss
On 15/08/10 16:27, E.J. Zufelt wrote:
> Good evening all,
>
> I'm looking for some help figuring out helpful and meaningful text for a user interface control in Drupal.
>
> On some pages we have what is functionally a tabstrip. It is structured as an unordered list of links, with the currently active tab being indicated with the text (active tab).
>
> Example code:
>
> <ul>
> <li><a href="/1">View</a></li>
> <li><a href="/2">Edit (active tab)</a></li>
> <li><a href="/3">Track Changes</a></li>
> </ul>
>
> It would be read as
> View link
> Edit (active tab) link
> Track changes link
>
> I am certain that for some new users the (active tab) text alone will not be sufficient to indicate that this is a tabstrip (where one and only one item can be selected). Additionally, there can sometimes be a secondary tabstrip, with tabs that are related to the active tab in the primary tabstrip.
>
> I am wondering if you have any suggestions for what additional text we can use before the list of primary and secondary tabs to better provide meaningful context for the purpose of the two lists of tab links?
>
> Thanks in advance,
> Everett Zufelt
> http://zufelt.ca
>
> Follow me on Twitter
> http://twitter.com/ezufelt
>
> View my LinkedIn Profile
> http://www.linkedin.com/in/ezufelt
>
>
>
From: E.J. Zufelt
Date: Sun, Aug 15 2010 12:48AM
Subject: Re: Help deciding on text to provide context to a tabstrip
← Previous message | No next message
On 2010-08-15, at 2:36 AM, Jason Kiss wrote:
> Hi Everett,
Hi and thanks for the response.
>
> I have previously introduced a set of tab controls with the following
> text, which was hidden visually but left available to assistive
> technologies:
>
> "Note: Below are three tab links. To navigate them, use the TAB key. To
> select a tab, press the ENTER key."
>
That is very clear, sadly I don't think I could get something that verbose into Drupal. It does give me a place to start from.
> I'm sure there's something better, especially with the use of the word
> "tab" referring both to the type of links and to the keyboard key, but
> this is what I settled on for a simple, single level of tab controls.
>
> Also, regarding the "active tab" text, I decided to try and mimic to
> some degree what JAWS and NVDA do with ARIA-enabled tab panels. That is,
> I appended the word "tab" to each tab link, and the words "tab selected"
> to the active tab. This way screen readers would read them as "link View
> tab, link Edit tab selected, link Track Changes tab".
>
I don't recall why we didn't append "tab" to the unselected tabs. I'm not sure if there was a problem, or if the idea didn't make it from my head to the keyboard. I like this idea because it provides an additional textual affordance that the list of links is indeed a list of tabs
Thanks again
> Hope this helps,
>
> Jason Kiss
>
> http://www.accessibleculture.org/
> twitter: @jkiss
>
> On 15/08/10 16:27, E.J. Zufelt wrote:
>> Good evening all,
>>
>> I'm looking for some help figuring out helpful and meaningful text for a user interface control in Drupal.
>>
>> On some pages we have what is functionally a tabstrip. It is structured as an unordered list of links, with the currently active tab being indicated with the text (active tab).
>>
>> Example code:
>>
>> <ul>
>> <li><a href="/1">View</a></li>
>> <li><a href="/2">Edit (active tab)</a></li>
>> <li><a href="/3">Track Changes</a></li>
>> </ul>
>>
>> It would be read as
>> View link
>> Edit (active tab) link
>> Track changes link
>>
>> I am certain that for some new users the (active tab) text alone will not be sufficient to indicate that this is a tabstrip (where one and only one item can be selected). Additionally, there can sometimes be a secondary tabstrip, with tabs that are related to the active tab in the primary tabstrip.
>>
>> I am wondering if you have any suggestions for what additional text we can use before the list of primary and secondary tabs to better provide meaningful context for the purpose of the two lists of tab links?
>>
>> Thanks in advance,
>> Everett Zufelt
>> http://zufelt.ca
>>
>> Follow me on Twitter
>> http://twitter.com/ezufelt
>>
>> View my LinkedIn Profile
>> http://www.linkedin.com/in/ezufelt
>>
>>
>>