E-mail List Archives
Re: Indicating an active element, is there something more elegant than off-screen text?
From: Bryan Garaventa
Date: Nov 12, 2013 12:33AM
- Next message: Léonie Watson: "Re: Indicating an active element, is there something more elegant than off-screen text?"
- Previous message: Birkir R. Gunnarsson: "Indicating an active element, is there something more elegant than off-screen text?"
- Next message in Thread: Léonie Watson: "Re: Indicating an active element, is there something more elegant than off-screen text?"
- Previous message in Thread: Birkir R. Gunnarsson: "Indicating an active element, is there something more elegant than off-screen text?"
- View all messages in this Thread
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 REMOVED> >
To: "WebAIM Discussion List" < <EMAIL 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
> > >
- Next message: Léonie Watson: "Re: Indicating an active element, is there something more elegant than off-screen text?"
- Previous message: Birkir R. Gunnarsson: "Indicating an active element, is there something more elegant than off-screen text?"
- Next message in Thread: Léonie Watson: "Re: Indicating an active element, is there something more elegant than off-screen text?"
- Previous message in Thread: Birkir R. Gunnarsson: "Indicating an active element, is there something more elegant than off-screen text?"
- View all messages in this Thread