WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Help deciding on text to provide context to a tabstrip

for

From: E.J. Zufelt
Date: Aug 15, 2010 12:48AM

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
>>
>>
>>