E-mail List Archives

Search E-mail List Archives for

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

From: Birkir R. Gunnarsson
Date: Mon, Nov 11 2013 7:24PM
Subject: Indicating an active element, is there something more elegant than off-screen text?
No previous message | Next message →

Greetings wise ones.

It is increasingly common that websites visually indicate the active
element in a set of elements.
This could be the current/active step in a process, visually
highlighting the currently active link in a list of links or similar.
<a href="http://semantic-ui.com/elements/step.html">See the semantic
UI definition of a setp</a>

This is usually done via a CSS class assigned to the active element.
Initially, a long time ago, I was hoping we had one brilliant and
simple solution for this, i.e. aria, but the <a
href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-selected">aria-selected</a>
property only works with tabs, gridcells, options or rows, i.e. only
works within more complex widgets, it cannot be repurposed for simple
chores.
Is there currentlyany more elegant way than off-screen text to
programmatically or textually indicate the active element in a set of
elements?
Have there been any discussions on widening the scope of certain aria
roles or creating new ones to help solve this problem or other more
mundane problems (I could name a few)?
Just furiously curious.
Cheers
-Birkir
Accessibility SME | Deque Systems

From: Bryan Garaventa
Date: Tue, Nov 12 2013 12:33AM
Subject: Re: Indicating an active element, is there something more elegant than off-screen text?
← Previous message | Next message →

For step indicators, I've used ARIA in the past by marking up the active
elements as ARIA Toggles that include aria-expanded.

E.G

<a href="#" class="step selected" role="button" aria-pressed="true"
aria-expanded="true"> Step One </a>
<a href="#" class="step" role="button" aria-pressed="false"
aria-expanded="false"> Step Two </a>
Etc.

You can also add aria-disabled="true" and tabindex="-1" to indicate that
previously completed steps are disabled.

For non-ARIA implementations, without using offscreen text to convey this
information, I don't know of any other reliable way of doing this.

----- Original Message -----
From: "Birkir R. Gunnarsson" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Monday, November 11, 2013 6:24 PM
Subject: [WebAIM] Indicating an active element, is there something more
elegant than off-screen text?


> Greetings wise ones.
>
> It is increasingly common that websites visually indicate the active
> element in a set of elements.
> This could be the current/active step in a process, visually
> highlighting the currently active link in a list of links or similar.
> <a href="http://semantic-ui.com/elements/step.html">See the semantic
> UI definition of a setp</a>
>
> This is usually done via a CSS class assigned to the active element.
> Initially, a long time ago, I was hoping we had one brilliant and
> simple solution for this, i.e. aria, but the <a
> href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-selected">aria-selected</a>
> property only works with tabs, gridcells, options or rows, i.e. only
> works within more complex widgets, it cannot be repurposed for simple
> chores.
> Is there currentlyany more elegant way than off-screen text to
> programmatically or textually indicate the active element in a set of
> elements?
> Have there been any discussions on widening the scope of certain aria
> roles or creating new ones to help solve this problem or other more
> mundane problems (I could name a few)?
> Just furiously curious.
> Cheers
> -Birkir
> Accessibility SME | Deque Systems
> > >

From: Léonie Watson
Date: Tue, Nov 12 2013 2:49AM
Subject: Re: Indicating an active element, is there something more elegant than off-screen text?
← Previous message | Next message →

Birkir R. Gunnarsson wrote:
"It is increasingly common that websites visually indicate the active
element in a set of elements. This could be the current/active step in a
process, visually highlighting the currently active link in a list of links
or similar."

There is a proposal on the W3C PF list for a new ARIA attribute:
http://tinyurl.com/o2dh3qf

The original suggestion was to use aria-selected, but (as you point out)
that isn't practical. The suggestion is now to add a new attribute, called
perhaps aria-current or aria-active.

Léonie.

From: Sailesh Panchang
Date: Tue, Nov 12 2013 10:42AM
Subject: Re: Indicating an active element, is there something more elegant than off-screen text?
← Previous message | No next message

Sometimes it is not an accessibility problem:
- when the link in a set of left nav links that is active is visually
distinguished
- or the active step in a multi step process is visually distinguished
... provided the page title or h1 text conveys that.
If the elements for the steps are a set of images or have images of
checkmark next to them, then the good old alt works too.
Regards,
Sailesh


On 11/12/13, Léonie Watson < = EMAIL ADDRESS REMOVED = > wrote:
> Birkir R. Gunnarsson wrote:
> "It is increasingly common that websites visually indicate the active
> element in a set of elements. This could be the current/active step in a
> process, visually highlighting the currently active link in a list of links
> or similar."
>
> There is a proposal on the W3C PF list for a new ARIA attribute:
> http://tinyurl.com/o2dh3qf
>
> The original suggestion was to use aria-selected, but (as you point out)
> that isn't practical. The suggestion is now to add a new attribute, called
> perhaps aria-current or aria-active.
>
> Léonie.
>
>
>
> > > >