E-mail List Archives
Thread: A simple beginner's question
Number of posts in this thread: 11 (In chronological order)
From: Alexander Karelas
Date: Sun, May 22 2016 1:56PM
Subject: A simple beginner's question
No previous message | Next message →
Hello,
I'm creating a website without any AJAX, that I want to be accessible.
Should I use the aria-* attributes and rely on them? Or are aria-*
attributes only for AJAX websites?
Thank you.
From: Léonie Watson
Date: Sun, May 22 2016 2:21PM
Subject: Re: A simple beginner's question
← Previous message | Next message →
> From: WebAIM-Forum on Behalf Of Alexander Karelas
> Sent: 22 May 2016 20:57
> I'm creating a website without any AJAX, that I want to be accessible.
>
> Should I use the aria-* attributes and rely on them? Or are aria-* attributes
> only for AJAX websites?
If you use HTML elements for their intended purpose, there shouldn't be any need to use ARIA. ARIA is used when HTML isn't able to provide the semantic information you need.
For example if you use the <button> element, the browser knows it is a button. There is no need to use ARIA to tell the browser something it already knows. Putting role="button" on the <button> element is therefore redundant.
But there is no way in HTML to indicate when a button has been pressed. This is a time when ARIA can be used to fill in the gap. You can set aria-pressed="true" on a button to indicate when it has been pressed.
These notes on using ARIA in HTML might be helpful:
http://w3c.github.io/aria-in-html/
Léonie.
--
@LeonieWatson tink.uk Carpe diem
From: Alexander Karelas
Date: Sun, May 22 2016 2:32PM
Subject: Re: A simple beginner's question
← Previous message | Next message →
When a submitted form contains errors and re-appears to the user
together with the error messages, I need some way to co-relate each
error message with a text field. For this, I had thought of using the
aria-describedby property. Am I wrong? I read somewhere that I could do
that. if I don't use this aria attribute, as you say that I don't have
to, then how am I going to relate the error message to the field, so
that my user will know?
Do aria-* attributes apply to websites that don't have any AJAX?
Thanks,
On 22/05/16 23:21, Léonie Watson wrote:
>> From: WebAIM-Forum on Behalf Of Alexander Karelas
>> Sent: 22 May 2016 20:57
>> I'm creating a website without any AJAX, that I want to be accessible.
>>
>> Should I use the aria-* attributes and rely on them? Or are aria-* attributes
>> only for AJAX websites?
> If you use HTML elements for their intended purpose, there shouldn't be any need to use ARIA. ARIA is used when HTML isn't able to provide the semantic information you need.
>
> For example if you use the <button> element, the browser knows it is a button. There is no need to use ARIA to tell the browser something it already knows. Putting role="button" on the <button> element is therefore redundant.
>
> But there is no way in HTML to indicate when a button has been pressed. This is a time when ARIA can be used to fill in the gap. You can set aria-pressed="true" on a button to indicate when it has been pressed.
>
> These notes on using ARIA in HTML might be helpful:
> http://w3c.github.io/aria-in-html/
>
> Léonie.
>
From: Mike Barlow
Date: Sun, May 22 2016 2:46PM
Subject: Re: A simple beginner's question
← Previous message | Next message →
Alexander, the ARIA roles have nothing to do with AJAX. You could have an
entirely static (even no JavaScript potentially) web site and still make
use of ARIA roles (though turning on or off various roles would need to be
done with JavaScript).
And as for using ARIA to inform a user that an error has occurred on an
input field, I'd use the ARIA "role=alert" (or even aria-live=assertive) as
shown in the W3C page on identifying errors -
https://www.w3.org/TR/WCAG20-TECHS/ARIA19.html
*Mike Barlow*
Web Application Developer
Web Accessibility/Section 508 SME
Lancaster, Pa 17601
Office: 732.835-7557
Cell: 732.682.8226
e-mail: = EMAIL ADDRESS REMOVED =
On Sun, May 22, 2016 at 4:32 PM, Alexander Karelas < = EMAIL ADDRESS REMOVED = >
wrote:
> When a submitted form contains errors and re-appears to the user together
> with the error messages, I need some way to co-relate each error message
> with a text field. For this, I had thought of using the aria-describedby
> property. Am I wrong? I read somewhere that I could do that. if I don't use
> this aria attribute, as you say that I don't have to, then how am I going
> to relate the error message to the field, so that my user will know?
>
> Do aria-* attributes apply to websites that don't have any AJAX?
>
> Thanks,
>
>
>
> On 22/05/16 23:21, Léonie Watson wrote:
>
>> From: WebAIM-Forum on Behalf Of Alexander Karelas
>>> Sent: 22 May 2016 20:57
>>> I'm creating a website without any AJAX, that I want to be accessible.
>>>
>>> Should I use the aria-* attributes and rely on them? Or are aria-*
>>> attributes
>>> only for AJAX websites?
>>>
>> If you use HTML elements for their intended purpose, there shouldn't be
>> any need to use ARIA. ARIA is used when HTML isn't able to provide the
>> semantic information you need.
>>
>> For example if you use the <button> element, the browser knows it is a
>> button. There is no need to use ARIA to tell the browser something it
>> already knows. Putting role="button" on the <button> element is therefore
>> redundant.
>>
>> But there is no way in HTML to indicate when a button has been pressed.
>> This is a time when ARIA can be used to fill in the gap. You can set
>> aria-pressed="true" on a button to indicate when it has been pressed.
>>
>> These notes on using ARIA in HTML might be helpful:
>> http://w3c.github.io/aria-in-html/
>>
>> Léonie.
>>
>>
> > > > >
From: Chaals McCathie Nevile
Date: Mon, May 23 2016 3:40AM
Subject: Re: A simple beginner's question
← Previous message | Next message →
On Sun, 22 May 2016 20:32:04 -0000, Alexander Karelas
< = EMAIL ADDRESS REMOVED = > wrote:
> When a submitted form contains errors and re-appears to the user
> together with the error messages, I need some way to co-relate each
> error message with a text field.
In this case you could probably use the label element.
cheers
> For this, I had thought of using the aria-describedby property. Am I
> wrong? I read somewhere that I could do that. if I don't use this aria
> attribute, as you say that I don't have to, then how am I going to
> relate the error message to the field, so that my user will know?
>
> Do aria-* attributes apply to websites that don't have any AJAX?
>
> Thanks,
>
>
>
> On 22/05/16 23:21, Léonie Watson wrote:
>>> From: WebAIM-Forum on Behalf Of Alexander Karelas
>>> Sent: 22 May 2016 20:57
>>> I'm creating a website without any AJAX, that I want to be accessible.
>>>
>>> Should I use the aria-* attributes and rely on them? Or are aria-*
>>> attributes
>>> only for AJAX websites?
>> If you use HTML elements for their intended purpose, there shouldn't be
>> any need to use ARIA. ARIA is used when HTML isn't able to provide the
>> semantic information you need.
>>
>> For example if you use the <button> element, the browser knows it is a
>> button. There is no need to use ARIA to tell the browser something it
>> already knows. Putting role="button" on the <button> element is
>> therefore redundant.
>>
>> But there is no way in HTML to indicate when a button has been pressed.
>> This is a time when ARIA can be used to fill in the gap. You can set
>> aria-pressed="true" on a button to indicate when it has been pressed.
>>
>> These notes on using ARIA in HTML might be helpful:
>> http://w3c.github.io/aria-in-html/
>>
>> Léonie.
>>
>
> > > > --
Charles McCathie Nevile - web standards - CTO Office, Yandex
= EMAIL ADDRESS REMOVED = - - - Find more at http://yandex.com
From: Léonie Watson
Date: Mon, May 23 2016 1:53AM
Subject: Re: A simple beginner's question
← Previous message | Next message →
> From: Alexander Karelas [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: 22 May 2016 21:32
> When a submitted form contains errors and re-appears to the user together
> with the error messages, I need some way to co-relate each error message
> with a text field. For this, I had thought of using the aria-describedby
> property. Am I wrong? I read somewhere that I could do that. if I don't use
> this aria attribute, as you say that I don't have to, then how am I going to
> relate the error message to the field, so that my user will know?
You could use aria-describedby, yes. You don't need to though. You could just insert the error message into the <label> for the field that has the problem:
<label>Email
<input type="email">
<span class="error">You must enter an email address</span>
</label>
ARIA is designed to provide semantic information when it isn't available in the host language, in this case in HTML. That doesn't mean you shouldn't use ARIA, but generally speaking if you can do something in HTML without ARIA, that's the best bet.
Léonie.
--
@LeonieWatson tink.uk Carpe diem
From: Léonie Watson
Date: Mon, May 23 2016 2:22AM
Subject: Re: A simple beginner's question
← Previous message | Next message →
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ]
> On Behalf Of Mike Barlow
> Sent: 22 May 2016 21:47
> And as for using ARIA to inform a user that an error has occurred on an input
> field, I'd use the ARIA "role=alert" (or even aria-live=assertive) as shown in
> the W3C page on identifying errors - https://www.w3.org/TR/WCAG20-
> TECHS/ARIA19.html
>
This technique does not associate an error message with a particular form field, it only notifies the user when an error has occurred. It also requires client side form validation, so may not be suitable for Alexander's purposes.
Imagine a form with several fields. You move focus away from one field and an error occurs, this causes an error message to be injected into the live region and your screen reader announces it. You move focus back to the field in question, but there is no error message associated with the field - so no way to remind yourself of the error that needs correcting.
The live region uses ARIA to do something that isn't possible in HTML, but it's only useful when it complements something that can (and probably should) be done in HTML.
Léonie.
--
@LeonieWatson tink.uk Carpe diem
From: Birkir R. Gunnarsson
Date: Mon, May 23 2016 5:41AM
Subject: Re: A simple beginner's question
← Previous message | Next message →
aria-describedby is the best technique in my experience to relate
error messages to form fields
If your error checking happens when user submits the form you:
1. use aria-describedby to associate error message with form fields and
2. Move focus to the first form field with an associated error message.
Thing to keep in mind:
The target of aria-describedby is announced by screen readers even
when you hide it using display: none. This is by design and can be
useful, but is different from how html works in general.
Make sure you only add aria-describedby to the form field when the
error message is visible on the screen
Remove it when error message is no longer visible.
On 5/23/16, Léonie Watson < = EMAIL ADDRESS REMOVED = > wrote:
>> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ]
>> On Behalf Of Mike Barlow
>> Sent: 22 May 2016 21:47
>> And as for using ARIA to inform a user that an error has occurred on an
>> input
>> field, I'd use the ARIA "role=alert" (or even aria-live=assertive) as
>> shown in
>> the W3C page on identifying errors - https://www.w3.org/TR/WCAG20-
>> TECHS/ARIA19.html
>>
> This technique does not associate an error message with a particular form
> field, it only notifies the user when an error has occurred. It also
> requires client side form validation, so may not be suitable for Alexander's
> purposes.
>
> Imagine a form with several fields. You move focus away from one field and
> an error occurs, this causes an error message to be injected into the live
> region and your screen reader announces it. You move focus back to the field
> in question, but there is no error message associated with the field - so no
> way to remind yourself of the error that needs correcting.
>
> The live region uses ARIA to do something that isn't possible in HTML, but
> it's only useful when it complements something that can (and probably
> should) be done in HTML.
>
> Léonie.
>
> --
> @LeonieWatson tink.uk Carpe diem
>
>
>
> > > > >
--
Work hard. Have fun. Make history.
From: Léonie Watson
Date: Mon, May 23 2016 6:35AM
Subject: Re: A simple beginner's question
← Previous message | Next message →
> From: Birkir R. Gunnarsson [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: 23 May 2016 12:42
> aria-describedby is the best technique in my experience to relate error
> messages to form fields If your error checking happens when user submits
> the form you:
> 1. use aria-describedby to associate error message with form fields and 2.
> Move focus to the first form field with an associated error message.
You can do this, but if you're using aria-describedby to associate useful information with the field already, it can get messy. With something like an error, sticking to old-school HTML seems like the best option, if for no other reason than backwards compatibility.
Plenty of ways to "skin the cat" of course :)
Léonie.
--
@LeonieWatson tink.uk Carpe diem
From: Robert Fentress
Date: Mon, May 23 2016 10:50AM
Subject: Re: A simple beginner's question
← Previous message | Next message →
Another argument for where ARIA might be useful on pages that don't use
AJAX is when you want to signal to a user that a field is required but do
not want focus to be automatically moved to the required field should the
user attempt to submit the form without entering anything in that field.
For instance, you can signal that a field is required using
the HTML5 "required" attribute, but I believe that automatically moves
focus in most (all?) browsers, which could be viewed as disorienting. In
that instance, "aria-required" *might* be better, since it doesn't result
in this behavior, but still informs the screen reader user that the field
is required. Though I suppose you could accomplish much the same thing
using hidden text in the label, I like the idea of having this information
conveyed semantically somehow.
On Mon, May 23, 2016 at 8:35 AM, Léonie Watson < = EMAIL ADDRESS REMOVED = > wrote:
> > From: Birkir R. Gunnarsson [mailto: = EMAIL ADDRESS REMOVED = ]
> > Sent: 23 May 2016 12:42
> > aria-describedby is the best technique in my experience to relate error
> > messages to form fields If your error checking happens when user submits
> > the form you:
> > 1. use aria-describedby to associate error message with form fields and
> 2.
> > Move focus to the first form field with an associated error message.
>
> You can do this, but if you're using aria-describedby to associate useful
> information with the field already, it can get messy. With something like
> an error, sticking to old-school HTML seems like the best option, if for no
> other reason than backwards compatibility.
>
> Plenty of ways to "skin the cat" of course :)
>
>
>
> Léonie.
>
> --
> @LeonieWatson tink.uk Carpe diem
>
>
>
> > > > >
--
Robert Fentress
Senior Accessibility Solutions Designer
540.231.1255
Technology-enhanced Learning & Online Strategies
Assistive Technologies
1180 Torgersen Hall
620 Drillfield Drive (0434)
Blacksburg, Virginia 24061
From: Robert Fentress
Date: Mon, May 23 2016 12:47PM
Subject: Re: A simple beginner's question
← Previous message | No next message
Also, perhaps I'm misunderstanding the question, but aren't there a lot of
other instances where ARIA would be useful in a site that doesn't use AJAX,
beyond just remediation? I'm thinking widgets like trees, menus, dialogs,
etc., where the roles, states, and properties are not a part of the HTML
standard yet. Not using AJAX doesn't mean that you're not using dynamic
HTML.
On Mon, May 23, 2016 at 12:50 PM, Robert Fentress < = EMAIL ADDRESS REMOVED = > wrote:
> Another argument for where ARIA might be useful on pages that don't use
> AJAX is when you want to signal to a user that a field is required but do
> not want focus to be automatically moved to the required field should the
> user attempt to submit the form without entering anything in that field.
> For instance, you can signal that a field is required using
> the HTML5 "required" attribute, but I believe that automatically moves
> focus in most (all?) browsers, which could be viewed as disorienting. In
> that instance, "aria-required" *might* be better, since it doesn't result
> in this behavior, but still informs the screen reader user that the field
> is required. Though I suppose you could accomplish much the same thing
> using hidden text in the label, I like the idea of having this information
> conveyed semantically somehow.
>
> On Mon, May 23, 2016 at 8:35 AM, Léonie Watson < = EMAIL ADDRESS REMOVED = > wrote:
>
>> > From: Birkir R. Gunnarsson [mailto: = EMAIL ADDRESS REMOVED = ]
>> > Sent: 23 May 2016 12:42
>> > aria-describedby is the best technique in my experience to relate error
>> > messages to form fields If your error checking happens when user submits
>> > the form you:
>> > 1. use aria-describedby to associate error message with form fields and
>> 2.
>> > Move focus to the first form field with an associated error message.
>>
>> You can do this, but if you're using aria-describedby to associate useful
>> information with the field already, it can get messy. With something like
>> an error, sticking to old-school HTML seems like the best option, if for no
>> other reason than backwards compatibility.
>>
>> Plenty of ways to "skin the cat" of course :)
>>
>>
>>
>> Léonie.
>>
>> --
>> @LeonieWatson tink.uk Carpe diem
>>
>>
>>
>> >> >> >> >>
>
>
>
> --
> Robert Fentress
> Senior Accessibility Solutions Designer
> 540.231.1255
>
> Technology-enhanced Learning & Online Strategies
> Assistive Technologies
> 1180 Torgersen Hall
> 620 Drillfield Drive (0434)
> Blacksburg, Virginia 24061
>
--
Robert Fentress
Senior Accessibility Solutions Designer
540.231.1255
Technology-enhanced Learning & Online Strategies
Assistive Technologies
1180 Torgersen Hall
620 Drillfield Drive (0434)
Blacksburg, Virginia 24061