E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: understanding ARIA syntax

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

From: Angela French
Date: Wed, Aug 15 2012 1:02PM
Subject: understanding ARIA syntax
No previous message | Next message →

Hello,
I am trying to learn about ARIA, though I haven't actually had any chance to implement it yet. While I generally understand the concepts, the syntax has me stymied. In particular the use of the tag in ways I have never seen it used before, as shown below in the example of a progress bar widget:

<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" />

Can someone please explain this use of the tag or steer me towards a tutorial that deals with, or includes a discussion of syntax?

Thank you,

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED =
http://www.checkoutacollege.com/

From: Scott González
Date: Wed, Aug 15 2012 1:16PM
Subject: Re: understanding ARIA syntax
← Previous message | Next message →

You're confused because that example is very much incorrect. Remove all of
the span tags and you'll have something that is valid:

<div id="percent-loaded" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" />

Where did you find that example?

On Wed, Aug 15, 2012 at 3:02 PM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:

> Hello,
> I am trying to learn about ARIA, though I haven't actually had any chance
> to implement it yet. While I generally understand the concepts, the syntax
> has me stymied. In particular the use of the tag in ways I have
> never seen it used before, as shown below in the example of a progress bar
> widget:
>
> <div id="percent-loaded" role="progressbar"
> aria-valuenow="75"
> aria-valuemin="0"
> aria-valuemax="100" />
>
> Can someone please explain this use of the tag or steer me towards
> a tutorial that deals with, or includes a discussion of syntax?
>
> Thank you,
>
>
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED =
> http://www.checkoutacollege.com/
>
> > > >

From: Angela French
Date: Wed, Aug 15 2012 1:22PM
Subject: Re: understanding ARIA syntax
← Previous message | Next message →

Here, under the heading "Can you show me an example of ARIA in action?"

https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ

>-----Original Message-----
>From: = EMAIL ADDRESS REMOVED = [mailto:webaim-forum-
> = EMAIL ADDRESS REMOVED = ] On Behalf Of Scott González
>Sent: Wednesday, August 15, 2012 12:17 PM
>To: WebAIM Discussion List
>Subject: Re: [WebAIM] understanding ARIA syntax
>
>You're confused because that example is very much incorrect. Remove all of
>the span tags and you'll have something that is valid:
>
><div id="percent-loaded" role="progressbar" aria-valuenow="75"
>aria-valuemin="0" aria-valuemax="100" />
>
>Where did you find that example?
>
>
>On Wed, Aug 15, 2012 at 3:02 PM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Hello,
>> I am trying to learn about ARIA, though I haven't actually had any
>> chance to implement it yet. While I generally understand the
>> concepts, the syntax has me stymied. In particular the use of the
>> tag in ways I have never seen it used before, as shown below in
>> the example of a progress bar
>> widget:
>>
>> <div id="percent-loaded" role="progressbar"
>> aria-valuenow="75"
>> aria-valuemin="0"
>> aria-valuemax="100" />
>>
>> Can someone please explain this use of the tag or steer me
>> towards a tutorial that deals with, or includes a discussion of syntax?
>>
>> Thank you,
>>
>>
>>
>> Angela French
>> Internet Specialist
>> State Board for Community and Technical Colleges
>> 360-704-4316
>> = EMAIL ADDRESS REMOVED =
>> http://www.checkoutacollege.com/
>>
>> >> >> list messages to = EMAIL ADDRESS REMOVED =
>>
>>>messages to = EMAIL ADDRESS REMOVED =

From: Ken Petri
Date: Wed, Aug 15 2012 1:26PM
Subject: Re: understanding ARIA syntax
← Previous message | Next message →

I'm not sure where you are getting this syntax but my bet is it was copied
from a web page code highlighter. The author must have accidentally
included the spans. If you remove all of the open and close span tags, then
you have a plain old DIV tag with a bunch of attributes. (The DIV tag is
internally closed, which you don't see much, but I believe is valid.)

ken
--
Ken Petri
Program Director, OSU Web Accessibility Center
102D Pomerene Hall, 1760 Neil Avenue, Columbus, Ohio 43210
Office: 614.292.1760 | Mobile: 614.218.1499 | Fax: 614.292.4190
http://wac.osu.edu | = EMAIL ADDRESS REMOVED =

On Wed, Aug 15, 2012 at 3:02 PM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:

> Hello,
> I am trying to learn about ARIA, though I haven't actually had any chance
> to implement it yet. While I generally understand the concepts, the syntax
> has me stymied. In particular the use of the tag in ways I have
> never seen it used before, as shown below in the example of a progress bar
> widget:
>
> <div id="percent-loaded" role="progressbar"
> aria-valuenow="75"
> aria-valuemin="0"
> aria-valuemax="100" />
>
> Can someone please explain this use of the tag or steer me towards
> a tutorial that deals with, or includes a discussion of syntax?
>
> Thank you,
>
>
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED =
> http://www.checkoutacollege.com/
>
> > > >

From: Brendan McKeon
Date: Wed, Aug 15 2012 1:47PM
Subject: Re: understanding ARIA syntax
← Previous message | Next message →

Yup, it's stray syntax highlighting code - the SPANs were in the underlying HTML, possibly left over from a cut-and-paste from elsewhere, then the syntax highlighting code in the mozilla page was turning them into visible text. I've edited the page to remove these stray tags, so if you reload it, you should see the correct syntax now.
https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ

- Brendan.

--
Brendan McKeon | = EMAIL ADDRESS REMOVED =

> From: = EMAIL ADDRESS REMOVED =
> Date: Wed, 15 Aug 2012 15:26:19 -0400
> To: = EMAIL ADDRESS REMOVED =
> Subject: Re: [WebAIM] understanding ARIA syntax
>
> I'm not sure where you are getting this syntax but my bet is it was copied
> from a web page code highlighter. The author must have accidentally
> included the spans. If you remove all of the open and close span tags, then
> you have a plain old DIV tag with a bunch of attributes. (The DIV tag is
> internally closed, which you don't see much, but I believe is valid.)
>
> ken
> --
> Ken Petri
> Program Director, OSU Web Accessibility Center
> 102D Pomerene Hall, 1760 Neil Avenue, Columbus, Ohio 43210
> Office: 614.292.1760 | Mobile: 614.218.1499 | Fax: 614.292.4190
> http://wac.osu.edu | = EMAIL ADDRESS REMOVED =
>
>
>
> On Wed, Aug 15, 2012 at 3:02 PM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
>
> > Hello,
> > I am trying to learn about ARIA, though I haven't actually had any chance
> > to implement it yet. While I generally understand the concepts, the syntax
> > has me stymied. In particular the use of the tag in ways I have
> > never seen it used before, as shown below in the example of a progress bar
> > widget:
> >
> > <div id="percent-loaded" role="progressbar"
> > aria-valuenow="75"
> > aria-valuemin="0"
> > aria-valuemax="100" />
> >
> > Can someone please explain this use of the tag or steer me towards
> > a tutorial that deals with, or includes a discussion of syntax?
> >
> > Thank you,
> >
> >
> >
> > Angela French
> > Internet Specialist
> > State Board for Community and Technical Colleges
> > 360-704-4316
> > = EMAIL ADDRESS REMOVED =
> > http://www.checkoutacollege.com/
> >
> > > > > > > >
> > >

From: Angela French
Date: Wed, Aug 15 2012 1:55PM
Subject: Re: understanding ARIA syntax
← Previous message | No next message

Whew! Thanks.

>Yup, it's stray syntax highlighting code - the SPANs were in the underlying
>HTML, possibly left over from a cut-and-paste from elsewhere, then the
>syntax highlighting code in the mozilla page was turning them into visible
>text. I've edited the page to remove these stray tags, so if you reload it, you
>should see the correct syntax now.
>https://developer.mozilla.org/en-
>US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ
>
>- Brendan.
>
>--
>Brendan McKeon | = EMAIL ADDRESS REMOVED =
>
>
>> From: = EMAIL ADDRESS REMOVED =
>> Date: Wed, 15 Aug 2012 15:26:19 -0400
>> To: = EMAIL ADDRESS REMOVED =
>> Subject: Re: [WebAIM] understanding ARIA syntax
>>
>> I'm not sure where you are getting this syntax but my bet is it was copied
>> from a web page code highlighter. The author must have accidentally
>> included the spans. If you remove all of the open and close span tags, then
>> you have a plain old DIV tag with a bunch of attributes. (The DIV tag is
>> internally closed, which you don't see much, but I believe is valid.)
>>
>> ken
>> --
>> Ken Petri
>> Program Director, OSU Web Accessibility Center
>> 102D Pomerene Hall, 1760 Neil Avenue, Columbus, Ohio 43210
>> Office: 614.292.1760 | Mobile: 614.218.1499 | Fax: 614.292.4190
>> http://wac.osu.edu | = EMAIL ADDRESS REMOVED =
>>
>>
>>
>> On Wed, Aug 15, 2012 at 3:02 PM, Angela French < = EMAIL ADDRESS REMOVED = >
>wrote:
>>
>> > Hello,
>> > I am trying to learn about ARIA, though I haven't actually had any chance
>> > to implement it yet. While I generally understand the concepts, the
>syntax
>> > has me stymied. In particular the use of the tag in ways I have
>> > never seen it used before, as shown below in the example of a progress
>bar
>> > widget:
>> >
>> > <div id="percent-loaded" role="progressbar"
>> > aria-valuenow="75"
>> > aria-valuemin="0"
>> > aria-valuemax="100" />
>> >
>> > Can someone please explain this use of the tag or steer me
>towards
>> > a tutorial that deals with, or includes a discussion of syntax?
>> >
>> > Thank you,
>> >
>> >
>> >
>> > Angela French
>> > Internet Specialist
>> > State Board for Community and Technical Colleges
>> > 360-704-4316
>> > = EMAIL ADDRESS REMOVED =
>> > http://www.checkoutacollege.com/
>> >
>> > >> > >> > >> >
>> >> >> >
>>>