E-mail List Archives
Thread: no paragraphs in divs
Number of posts in this thread: 12 (In chronological order)
From: Angela French
Date: Fri, Jul 24 2015 2:37PM
Subject: no paragraphs in divs
No previous message | Next message →
Hello Listers,
I would value your opinion on an aspect of a page design in our new site that we are building.
Here is the link to a sample page: https://dev.sbctc.edu/our-colleges/explore-our-colleges/bellevue.aspx
We have one of these sample pages for each of the 34 colleges in our community and technical college system in Washington State.
You will notice that following the "Unique facts" heading are three items of text , each in a decorative div. I'm wondering about the fact that this text is not in a <p> tag. To me this seems wrong and that without the paragraph indicator, they are just run on sentences to a screen reader user. Am I correct? Does the lack of the <p> make facts less understandable?
Thanks,
Angela French
Internet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.checkoutacollege.com<;http://www.checkoutacollege.com/>;
www.sbctc.edu<;http://www.sbctc.edu/>;
From: Dale Cruse
Date: Fri, Jul 24 2015 2:45PM
Subject: Re: no paragraphs in divs
← Previous message | Next message →
Rather than a <div> or a <p> element, that context suggests to me three
<li> elements inside a <ul> wrapper. After all, that appears to be a list
of Unique Facts, right?
Dale
On Fri, Jul 24, 2015 at 4:37 PM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> Hello Listers,
> I would value your opinion on an aspect of a page design in our new site
> that we are building.
>
> Here is the link to a sample page:
> https://dev.sbctc.edu/our-colleges/explore-our-colleges/bellevue.aspx
>
> We have one of these sample pages for each of the 34 colleges in our
> community and technical college system in Washington State.
>
> You will notice that following the "Unique facts" heading are three items
> of text , each in a decorative div. I'm wondering about the fact that
> this text is not in a <p> tag. To me this seems wrong and that without the
> paragraph indicator, they are just run on sentences to a screen reader
> user. Am I correct? Does the lack of the <p> make facts less
> understandable?
>
> Thanks,
>
>
>
> Angela French
> Internet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.checkoutacollege.com<;http://www.checkoutacollege.com/>;
> www.sbctc.edu<;http://www.sbctc.edu/>;
>
> > > > >
From: Angela French
Date: Fri, Jul 24 2015 3:02PM
Subject: Re: no paragraphs in divs
← Previous message | Next message →
Yes, I should have thought of that. But does it read a three run on sentences in its current format.?
From: Guy Hickling
Date: Sat, Jul 25 2015 3:04PM
Subject: Re: no paragraphs in divs
← Previous message | Next message →
As Dale has said, your actual content should be in a ul/li list. But to
answer your last comment (and original question), yes, as you guessed, if
these 3 items had been totally unrelated (and therefore not suitable for a
list) then they should have been placed in p elements, not divs.
Divs are only for layout and styling purposes, they have no semantic value.
Whereas paragraph elements indicate the separate stages of logical thought
contained in the text - they are semantic. Assistive technology reacts to
paragraphs (eg screen readers may pause very slightly, and/or change
inflexion, at the end of a paragraph, but they don't do that for divs. Your
3 sentances would have been run together.
âGuy
â
From: Patrick H. Lauke
Date: Sat, Jul 25 2015 4:02PM
Subject: Re: no paragraphs in divs
← Previous message | Next message →
On 25/07/2015 22:04, Guy Hickling wrote:
> Assistive technology reacts to
> paragraphs (eg screen readers may pause very slightly, and/or change
> inflexion, at the end of a paragraph, but they don't do that for divs. Your
> 3 sentances would have been run together.
Just doing some very cursory testing, this isn't quite accurate.
Doing a simple "read all" with NVDA and JAWS in Firefox and IE,
<div>foo</div>
<div>bar</div>
is read out exactly the same (same pause, inflection) as
<p>foo</p>
<p>bar</p>
For what it's worth, a notable inflection (to denote the end of a
sentence) isn't caused by the presence or absence of a <p> element, but
rather punctuation. Again
<div>foo.</div>
<div>bar.</div>
and
<p>foo.</p>
<p>bar.</p>
are announced the same, now both with a lowering/inflection to signify
the end of a sentence.
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Jonathan Avila
Date: Sun, Jul 26 2015 1:32PM
Subject: Re: no paragraphs in divs
← Previous message | Next message →
> Divs are only for layout and styling purposes, they have no semantic value.
While I agree that the div element has no specific meaning and paragraph should be used, I do not believe this has been identified as a sufficient technique or failure of WCAG. Divs generally work the same way and commands such as control+up and down arrow treat them as container-like paragraphs. Screen readers seem to vary in how they handle this. Some screen readers/speech synthesizers put blank lines between paragraphs when arrowing between p elements. Others don't and simply rely on punctuation for pausing.
Jonathan
--
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
= EMAIL ADDRESS REMOVED =
703-637-8957 (o)
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
From: _mallory
Date: Mon, Jul 27 2015 12:15AM
Subject: Re: no paragraphs in divs
← Previous message | Next message →
On Sat, Jul 25, 2015 at 11:02:28PM +0100, Patrick H. Lauke wrote:
I've noticed NVDA will treat text that is broken into multiple lines
is treated as separate lines. Which kinda sucks when you have something
like a button where the text wrapped to two lines; sometimes it sounds
like two separate links/buttons when it's in fact one.
_mallory
> On 25/07/2015 22:04, Guy Hickling wrote:
> >Assistive technology reacts to
> >paragraphs (eg screen readers may pause very slightly, and/or change
> >inflexion, at the end of a paragraph, but they don't do that for divs. Your
> >3 sentances would have been run together.
>
> Just doing some very cursory testing, this isn't quite accurate.
>
> Doing a simple "read all" with NVDA and JAWS in Firefox and IE,
>
> <div>foo</div>
> <div>bar</div>
>
> is read out exactly the same (same pause, inflection) as
>
> <p>foo</p>
> <p>bar</p>
>
> For what it's worth, a notable inflection (to denote the end of a
> sentence) isn't caused by the presence or absence of a <p> element,
> but rather punctuation. Again
>
> <div>foo.</div>
> <div>bar.</div>
>
> and
>
> <p>foo.</p>
> <p>bar.</p>
>
> are announced the same, now both with a lowering/inflection to
> signify the end of a sentence.
>
> P
> --
> Patrick H. Lauke
From: _mallory
Date: Mon, Jul 27 2015 12:16AM
Subject: Re: no paragraphs in divs
← Previous message | Next message →
Hm, I see I've screwed up some of the mail order, sorry!
On Mon, Jul 27, 2015 at 08:15:30AM +0200, _mallory wrote:
> I've noticed NVDA will treat text that is broken into multiple lines
> is treated as separate lines. Which kinda sucks when you have something
> like a button where the text wrapped to two lines; sometimes it sounds
> like two separate links/buttons when it's in fact one.
>
> _mallory
>
> > On 25/07/2015 22:04, Guy Hickling wrote:
> > >Assistive technology reacts to
> > >paragraphs (eg screen readers may pause very slightly, and/or change
> > >inflexion, at the end of a paragraph, but they don't do that for divs. Your
> > >3 sentances would have been run together.
> On Sat, Jul 25, 2015 at 11:02:28PM +0100, Patrick H. Lauke wrote:
> >
> > Just doing some very cursory testing, this isn't quite accurate.
> >
> > Doing a simple "read all" with NVDA and JAWS in Firefox and IE,
> >
> > <div>foo</div>
> > <div>bar</div>
> >
> > is read out exactly the same (same pause, inflection) as
> >
> > <p>foo</p>
> > <p>bar</p>
> >
> > For what it's worth, a notable inflection (to denote the end of a
> > sentence) isn't caused by the presence or absence of a <p> element,
> > but rather punctuation. Again
> >
> > <div>foo.</div>
> > <div>bar.</div>
> >
> > and
> >
> > <p>foo.</p>
> > <p>bar.</p>
> >
> > are announced the same, now both with a lowering/inflection to
> > signify the end of a sentence.
> >
> > P
> > --
> > Patrick H. Lauke
> > > >
From: Bo Nilsson
Date: Mon, Jul 27 2015 2:44AM
Subject: Re: no paragraphs in divs
← Previous message | Next message →
Hi folks!
As a Jaws-user for many years I Wish to argue for the use of paragraphs and other tags htat works like paragraphs in a screenreader. Tis because, in my opinion, paragraph navigation is by far the most effective way to listen to or skim a content. Ctrl+Down/Up arrow is my favourite keystroke in both web-pages and word-documents and also in well tagged pdf.
Perhaps, and unfortunately, some assistive devices d'ont fully support this type of navigation. Jaws, in any case, treats <div>, <p>, <li>, and perhaps some more, all as paragraphs from a user perspective and I think it is in most cases very efficient.
Bo Nilsson
Swedish list member
-----Ursprungligt meddelande-----
Från: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] För Jonathan Avila
Skickat: den 26 juli 2015 21:33
Till: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Ãmne: Re: [WebAIM] no paragraphs in divs
> Divs are only for layout and styling purposes, they have no semantic value.
While I agree that the div element has no specific meaning and paragraph should be used, I do not believe this has been identified as a sufficient technique or failure of WCAG. Divs generally work the same way and commands such as control+up and down arrow treat them as container-like paragraphs. Screen readers seem to vary in how they handle this. Some screen readers/speech synthesizers put blank lines between paragraphs when arrowing between p elements. Others don't and simply rely on punctuation for pausing.
Jonathan
--
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
= EMAIL ADDRESS REMOVED =
703-637-8957 (o)
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
From: Subhash Chhetri
Date: Mon, Jul 27 2015 6:32AM
Subject: Re: no paragraphs in divs
← Previous message | Next message →
Hi Angela,
Whether you put content inside <div or <p tag, it does not make any difference in reading experience
Of JAWS and NVDA both.
Both JAWS and NVDA treat content inside div exactly as paragraph content, means using control+down/up arrow key, it is properly readable and navigable. JAWS user can also navigate to div content with quick navigation key "P".
Further more, I have verified your page with JAWS and NVDA both in IE and FF.
Although, I haven't tested it with talkback and voiceover, and any other screen reader.
Best Regards,
Subhash Chhetri
Software Accessibility QA Engineer
--------------------------------------------
On Mon, 27/7/15, Bo Nilsson < = EMAIL ADDRESS REMOVED = > wrote:
Subject: Re: [WebAIM] no paragraphs in divs
To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
Date: Monday, 27 July, 2015, 2:14 PM
Hi folks!
As a Jaws-user for many years I Wish to argue
for the use of paragraphs and other tags htat works like
paragraphs in a screenreader. Tis because, in my opinion,Â
paragraph navigation is by far the most effective way to
listen to or skim a content. Ctrl+Down/Up arrow is my
favourite keystroke in both web-pages and word-documents and
also in well tagged pdf.
Perhaps, and
unfortunately, some assistive devices d'ont fully
support this type of navigation. Jaws, in any case, treats
<div>, <p>, <li>, and perhaps some more,Â
all as paragraphs from a user perspective and I think it is
in most cases very efficient.
Bo Nilsson
Swedish list member
-----Ursprungligt meddelande-----
Från: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ]
För Jonathan Avila
Skickat: den 26 juli
2015 21:33
Till: WebAIM Discussion List
< = EMAIL ADDRESS REMOVED = >
Ãmne: Re: [WebAIM] no paragraphs in divs
> Divs are only for layout
and styling purposes, they have no semantic value.
While I agree that the div
element has no specific meaning and paragraph should be
used, I do not believe this has been identified as a
sufficient technique or failure of WCAG.   Divs
generally work the same way and commands such as control+up
and down arrow treat them as container-like paragraphs. Â
Screen readers seem to vary in how they handle this. Some
screen readers/speech synthesizers put blank lines between
paragraphs when arrowing between p elements. Others
don't and simply rely on punctuation for pausing.
Jonathan
--
Jonathan Avila
Chief Accessibility Officer
SSB
BART Group
= EMAIL ADDRESS REMOVED =
703-637-8957 (o)
Follow us: Facebook | Twitter | LinkedIn | Blog
| Newsletter
From: Subhash Chhetri
Date: Mon, Jul 27 2015 6:56AM
Subject: Re: no paragraphs in divs
← Previous message | Next message →
Ya, Patrick is right that inflection is cause by punctuation.
Best Regards,
Subhash Chhetri
Software Accessibility QA Engineer
--------------------------------------------
On Mon, 27/7/15, Subhash Chhetri < = EMAIL ADDRESS REMOVED = > wrote:
Subject: Re: [WebAIM] no paragraphs in divs
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Date: Monday, 27 July, 2015, 6:02 PM
Hi Angela,
Whether you put content inside
<div or <p tag, it does not make any difference in
reading experience
Of JAWS and NVDA
both.
Both JAWS and NVDA
treat content inside div exactly as paragraph content, means
using control+down/up arrow key, it is properly readable and
navigable. JAWS user can also navigate to div content with
quick navigation key "P".
Further more, I have verified your page with
JAWS and NVDA both in IE and FF.
Although, I haven't tested it with talkback
and voiceover, and any other screen reader.
Best Regards,
Subhash
Chhetri
Software Accessibility QA
Engineer
--------------------------------------------
On Mon, 27/7/15, Bo Nilsson < = EMAIL ADDRESS REMOVED = >
wrote:
Subject: Re:
[WebAIM] no paragraphs in divs
To:
"'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
Date: Monday, 27 July, 2015, 2:14 PM
Hi folks!
As a Jaws-user for many years I Wish to argue
for the use of paragraphs and other tags htat
works like
paragraphs in a screenreader.
Tis because, in my opinion,Â
paragraph
navigation is by far the most effective way to
listen to or skim a content. Ctrl+Down/Up
arrow is my
favourite keystroke in both
web-pages and word-documents and
also in
well tagged pdf.
Perhaps, and
unfortunately, some assistive devices
d'ont fully
support this type of
navigation. Jaws, in any case, treats
<div>, <p>, <li>, and perhaps some
more,Â
all as paragraphs from a user
perspective and I think it is
in most cases
very efficient.
Bo Nilsson
Swedish list member
-----Ursprungligt
meddelande-----
Från: WebAIM-Forum
[mailto: = EMAIL ADDRESS REMOVED = ]
För Jonathan Avila
Skickat:
den 26 juli
2015 21:33
Till: WebAIM Discussion List
< = EMAIL ADDRESS REMOVED = >
Ãmne: Re: [WebAIM] no paragraphs in divs
> Divs are only for
layout
and styling purposes, they have no
semantic value.
While I
agree that the div
element has no specific
meaning and paragraph should be
used, I do
not believe this has been identified as a
sufficient technique or failure of WCAG.   Divs
generally work the same way and commands such
as control+up
and down arrow treat them as
container-like paragraphs. Â
Screen
readers seem to vary in how they handle this. Some
screen readers/speech synthesizers put blank
lines between
paragraphs when arrowing
between p elements. Others
don't and
simply rely on punctuation for pausing.
Jonathan
--
Jonathan Avila
Chief
Accessibility Officer
SSB
BART Group
= EMAIL ADDRESS REMOVED =
703-637-8957 (o)
Follow us: Facebook | Twitter | LinkedIn |
Blog
| Newsletter
-----Original
Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ]
On Behalf Of Guy Hickling
Sent: Saturday,
July 25, 2015 5:04 PM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] no paragraphs in divs
As Dale has said, your
actual
content should be in a ul/li list.
But to answer your last
comment (and
original question), yes, as you guessed, if
these 3 items had been totally unrelated (and therefore
not
suitable for a
list)
then they should have
been placed in p
elements, not divs.
Divs
are only for layout and styling purposes,
they have no semantic value.
Whereas
paragraph elements indicate the separate
stages of logical
thought contained in the
text - they are semantic. Assistive
technology reacts to paragraphs (eg screen readers may
pause
very slightly, and/or change
inflexion, at the end of a
paragraph, but
they don't do that for divs. Your
3
sentances would have been run together.
âGuy
â
at
http://webaim.org/discussion/archives
From: Jonathan Avila
Date: Mon, Jul 27 2015 7:54AM
Subject: Re: no paragraphs in divs
← Previous message | No next message
> I've noticed NVDA will treat text that is broken into multiple lines is treated as separate lines. Which kinda sucks when you have something like a button where the text wrapped to two lines; sometimes it sounds like two separate links/buttons when it's in fact one.
This can happen with JAWS to for links and headings when they become very long. But I suspect NVDA is more prone to this because it puts text and interactive controls on the same line until there is a block level element like a div or paragraph to break the content. I like how JAWS separate out interactive controls on separates lines with the arrow keys. While this may not be semantically accurate it is much easier to hear, select, and interact with the control.
Jonathan
--
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
= EMAIL ADDRESS REMOVED =
703-637-8957 (o)
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter