E-mail List Archives
Thread: Empty tags (divs, p and strong) in the code?
Number of posts in this thread: 8 (In chronological order)
From: Rabab Gomaa
Date: Fri, Aug 17 2012 9:56AM
Subject: Empty tags (divs, p and strong) in the code?
No previous message | Next message →
Hello,
I am wondering if using empty tags can cause any accessibility failures.
Example:
- <div class="hrline"> </div>
This class is used to have a decorative horizontal line.
- <strong></strong>
- <p> </p>
This is sometimes a miss during markup.
I searched in the archived and found an older post about empty anchors http://webaim.org/discussion/mail_thread?thread=5172 but my question is about divs, p and strong elements with or without spaces like .
Thank you,
Rabab
From: Ramya Sethuraman
Date: Fri, Aug 17 2012 10:12AM
Subject: Re: Empty tags (divs, p and strong) in the code?
← Previous message | Next message →
Would it make sense to use a role="presentation" on these elements?
On Fri, Aug 17, 2012 at 11:56 AM, Rabab Gomaa
< = EMAIL ADDRESS REMOVED = >wrote:
> Hello,
>
> I am wondering if using empty tags can cause any accessibility failures.
> Example:
> - <div class="hrline"> </div>
> This class is used to have a decorative horizontal line.
>
> - <strong></strong>
> - <p> </p>
> This is sometimes a miss during markup.
>
> I searched in the archived and found an older post about empty anchors
> http://webaim.org/discussion/mail_thread?threadQ72 but my question is
> about divs, p and strong elements with or without spaces like .
>
> Thank you,
> Rabab
>
>
>
>
> > > >
>
--
From: Bryan Garaventa
Date: Fri, Aug 17 2012 10:20AM
Subject: Re: Empty tags (divs, p and strong) in the code?
← Previous message | Next message →
There's no need, empty static elements have no accessibility issues.
The problem with empty tags is in regard to active elements like links,
where feedback is necessary to convey the meaning of the element. Decorative
tags like lines or spacer images have no value for screen reader users, so
are best ignored.
One exception to this is when you use an empty element like a div tag that
uses a background image to convey meaning, like an arrow to convey that
clicking the image will navigate somewhere else. ARIA can then be used to
make this accessible with the correct event handlers attached.
----- Original Message -----
From: "Ramya Sethuraman" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Friday, August 17, 2012 9:12 AM
Subject: Re: [WebAIM] Empty tags (divs, p and strong) in the code?
> Would it make sense to use a role="presentation" on these elements?
>
> On Fri, Aug 17, 2012 at 11:56 AM, Rabab Gomaa
> < = EMAIL ADDRESS REMOVED = >wrote:
>
>> Hello,
>>
>> I am wondering if using empty tags can cause any accessibility failures.
>> Example:
>> - <div class="hrline"> </div>
>> This class is used to have a decorative horizontal line.
>>
>> - <strong></strong>
>> - <p> </p>
>> This is sometimes a miss during markup.
>>
>> I searched in the archived and found an older post about empty anchors
>> http://webaim.org/discussion/mail_thread?threadQ72 but my question is
>> about divs, p and strong elements with or without spaces like .
>>
>> Thank you,
>> Rabab
>>
>>
>>
>>
>> >> >> >>
>>
>
>
> --
> > >
From: Ramya Sethuraman
Date: Fri, Aug 17 2012 10:21AM
Subject: Re: Empty tags (divs, p and strong) in the code?
← Previous message | Next message →
Interesting. Would an empty header cause a problem?
On Fri, Aug 17, 2012 at 12:20 PM, Bryan Garaventa <
= EMAIL ADDRESS REMOVED = > wrote:
> There's no need, empty static elements have no accessibility issues.
>
> The problem with empty tags is in regard to active elements like links,
> where feedback is necessary to convey the meaning of the element.
> Decorative
> tags like lines or spacer images have no value for screen reader users, so
> are best ignored.
>
> One exception to this is when you use an empty element like a div tag that
> uses a background image to convey meaning, like an arrow to convey that
> clicking the image will navigate somewhere else. ARIA can then be used to
> make this accessible with the correct event handlers attached.
>
>
> ----- Original Message -----
> From: "Ramya Sethuraman" < = EMAIL ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
> Sent: Friday, August 17, 2012 9:12 AM
> Subject: Re: [WebAIM] Empty tags (divs, p and strong) in the code?
>
>
> > Would it make sense to use a role="presentation" on these elements?
> >
> > On Fri, Aug 17, 2012 at 11:56 AM, Rabab Gomaa
> > < = EMAIL ADDRESS REMOVED = >wrote:
> >
> >> Hello,
> >>
> >> I am wondering if using empty tags can cause any accessibility failures.
> >> Example:
> >> - <div class="hrline"> </div>
> >> This class is used to have a decorative horizontal line.
> >>
> >> - <strong></strong>
> >> - <p> </p>
> >> This is sometimes a miss during markup.
> >>
> >> I searched in the archived and found an older post about empty anchors
> >> http://webaim.org/discussion/mail_thread?threadQ72 but my question is
> >> about divs, p and strong elements with or without spaces like .
> >>
> >> Thank you,
> >> Rabab
> >>
> >>
> >>
> >>
> >> > >> > >> > >>
> >>
> >
> >
> > --
> > > > > > >
> > > >
--
*I also exist @: http://www.ramyasethuraman.com*
From: Bryan Garaventa
Date: Fri, Aug 17 2012 10:36AM
Subject: Re: Empty tags (divs, p and strong) in the code?
← Previous message | Next message →
That is a grey area, in that headings are pseudo active in that you can use
'h' and 'shift+h' to navigate to them, even if they are empty.
The use of role=presentation should prevent this from occurring however.
----- Original Message -----
From: "Ramya Sethuraman" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Friday, August 17, 2012 9:21 AM
Subject: Re: [WebAIM] Empty tags (divs, p and strong) in the code?
> Interesting. Would an empty header cause a problem?
>
>
> On Fri, Aug 17, 2012 at 12:20 PM, Bryan Garaventa <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>> There's no need, empty static elements have no accessibility issues.
>>
>> The problem with empty tags is in regard to active elements like links,
>> where feedback is necessary to convey the meaning of the element.
>> Decorative
>> tags like lines or spacer images have no value for screen reader users,
>> so
>> are best ignored.
>>
>> One exception to this is when you use an empty element like a div tag
>> that
>> uses a background image to convey meaning, like an arrow to convey that
>> clicking the image will navigate somewhere else. ARIA can then be used to
>> make this accessible with the correct event handlers attached.
>>
>>
>> ----- Original Message -----
>> From: "Ramya Sethuraman" < = EMAIL ADDRESS REMOVED = >
>> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>> Sent: Friday, August 17, 2012 9:12 AM
>> Subject: Re: [WebAIM] Empty tags (divs, p and strong) in the code?
>>
>>
>> > Would it make sense to use a role="presentation" on these elements?
>> >
>> > On Fri, Aug 17, 2012 at 11:56 AM, Rabab Gomaa
>> > < = EMAIL ADDRESS REMOVED = >wrote:
>> >
>> >> Hello,
>> >>
>> >> I am wondering if using empty tags can cause any accessibility
>> >> failures.
>> >> Example:
>> >> - <div class="hrline"> </div>
>> >> This class is used to have a decorative horizontal line.
>> >>
>> >> - <strong></strong>
>> >> - <p> </p>
>> >> This is sometimes a miss during markup.
>> >>
>> >> I searched in the archived and found an older post about empty
>> >> anchors
>> >> http://webaim.org/discussion/mail_thread?threadQ72 but my question
>> >> is
>> >> about divs, p and strong elements with or without spaces like .
>> >>
>> >> Thank you,
>> >> Rabab
>> >>
>> >>
>> >>
>> >>
>> >> >> >> >> >> >> >>
>> >>
>> >
>> >
>> > --
>> > >> > >> > >>
>> >> >> >>
>
>
>
> --
> *I also exist @: http://www.ramyasethuraman.com*
> > >
From: Ramya Sethuraman
Date: Fri, Aug 17 2012 10:44AM
Subject: Re: Empty tags (divs, p and strong) in the code?
← Previous message | Next message →
Would aria-hidden make sense in this case?
On Fri, Aug 17, 2012 at 12:36 PM, Bryan Garaventa <
= EMAIL ADDRESS REMOVED = > wrote:
> That is a grey area, in that headings are pseudo active in that you can use
> 'h' and 'shift+h' to navigate to them, even if they are empty.
>
> The use of role=presentation should prevent this from occurring however.
>
> ----- Original Message -----
> From: "Ramya Sethuraman" < = EMAIL ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
> Sent: Friday, August 17, 2012 9:21 AM
> Subject: Re: [WebAIM] Empty tags (divs, p and strong) in the code?
>
>
> > Interesting. Would an empty header cause a problem?
> >
> >
> > On Fri, Aug 17, 2012 at 12:20 PM, Bryan Garaventa <
> > = EMAIL ADDRESS REMOVED = > wrote:
> >
> >> There's no need, empty static elements have no accessibility issues.
> >>
> >> The problem with empty tags is in regard to active elements like links,
> >> where feedback is necessary to convey the meaning of the element.
> >> Decorative
> >> tags like lines or spacer images have no value for screen reader users,
> >> so
> >> are best ignored.
> >>
> >> One exception to this is when you use an empty element like a div tag
> >> that
> >> uses a background image to convey meaning, like an arrow to convey that
> >> clicking the image will navigate somewhere else. ARIA can then be used
> to
> >> make this accessible with the correct event handlers attached.
> >>
> >>
> >> ----- Original Message -----
> >> From: "Ramya Sethuraman" < = EMAIL ADDRESS REMOVED = >
> >> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
> >> Sent: Friday, August 17, 2012 9:12 AM
> >> Subject: Re: [WebAIM] Empty tags (divs, p and strong) in the code?
> >>
> >>
> >> > Would it make sense to use a role="presentation" on these elements?
> >> >
> >> > On Fri, Aug 17, 2012 at 11:56 AM, Rabab Gomaa
> >> > < = EMAIL ADDRESS REMOVED = >wrote:
> >> >
> >> >> Hello,
> >> >>
> >> >> I am wondering if using empty tags can cause any accessibility
> >> >> failures.
> >> >> Example:
> >> >> - <div class="hrline"> </div>
> >> >> This class is used to have a decorative horizontal line.
> >> >>
> >> >> - <strong></strong>
> >> >> - <p> </p>
> >> >> This is sometimes a miss during markup.
> >> >>
> >> >> I searched in the archived and found an older post about empty
> >> >> anchors
> >> >> http://webaim.org/discussion/mail_thread?threadQ72 but my question
> >> >> is
> >> >> about divs, p and strong elements with or without spaces like .
> >> >>
> >> >> Thank you,
> >> >> Rabab
> >> >>
> >> >>
> >> >>
> >> >>
> >> >> > >> >> > >> >> > >> >>
> >> >>
> >> >
> >> >
> >> > --
> >> > > >> > > >> > > >>
> >> > >> > >> > >>
> >
> >
> >
> > --
> > *I also exist @: http://www.ramyasethuraman.com*
> > > > > > >
> > > >
--
*I also exist @: http://www.ramyasethuraman.com*
From: Patrick H. Lauke
Date: Fri, Aug 17 2012 10:46AM
Subject: Re: Empty tags (divs, p and strong) in the code?
← Previous message | Next message →
On 17/08/2012 17:44, Ramya Sethuraman wrote:
> Would aria-hidden make sense in this case?
How about actually cleaning up the code? Or is that not an option? FWIW
if a developer is using empty divs to make a styled horizontal rule,
they've kind of misunderstood how CSS works...
P
--
Patrick H. Lauke
From: Bryan Garaventa
Date: Fri, Aug 17 2012 11:07AM
Subject: Re: Empty tags (divs, p and strong) in the code?
← Previous message | No next message
I agree, it's best to use comprehensive structural markup before resorting
to ARIA to modify feedback.
That said, you can use both role=presentation and aria-hidden on a
particular element without harm, especially since it has no content anyway.
Even so, it's probably best to remove it or convert it to a plain static
element like a div or span.