WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: proper use of the division <DIV> tag

for

From: Chagnon | PubCom
Date: Aug 15, 2013 3:49PM

Susie Stanzel wrote:
"I usually ask JAWS to tell me all the divisions on an unfamiliar page."

As a web developer, I can say that you're going to get a lot more than you
ever wanted to hear if you read all the <DIV> tags on a page!

The <DIV> is a wrapper that surrounds a portion of content so that we
developers can do something to it through programming, the HTML, or the CSS
stylesheets. Here are common uses of <DIV> tags, whether the website is
accessible or not:

1. To position a portion of content somewhere on the page. Example: the
content in the <DIV> tag with an ID of "header" can be controlled by the CSS
so that its content is positioned at the top of the screen.

2. To control the visual appearance of the content. Example: through the
CSS, the content in the <DIV> tag ID=mainstory will format H1 tags in large
type, but the same H1 tag in a different <DIV>, such as <DIV> ID=sidebar,
will format H1 in much smaller type.

3. To control the layout of different sections of content so that they don't
run on top of each other or render off screen or exhibit many other crazy
layout problems. This usually involves one "<DIV> ID=wrapper" holding 2 or
more other <DIV> tags, essentially nesting the other DIVs inside the wrapper
DIV. This is to control the visual layout on the screen.

4. To hold programming hooks that trigger a particular process or function
to happen. Example: "<DIV ID=footer>" is programmed for an "include" where
the server populates that div with footer information when the page is
viewed. Also Pop-up menus are usually in <DIV> tags and controlled through
JavaScript.

5. To add ARIA landmarks to portions of the webpage. "<DIV> ID=menu
role=menu" identifies a group of items in a menu.

Some things you should know:

<DIV> tags may have ID names on them, and maybe not. Depends upon what the
web developer needs.

There are no standard ID names for them. I could have named the examples
above blue_juju_bees or bevi_loves_chocolate or ns2 or numbered them 1, 2,
3, etc. But most serious web developers will give a DVI an ID that most
people can figure out, like left_nav or rt_sidebar.

Susie asked: "What is the proper use for divisions?"

Answer: it depends.

If I'm installing a widget on my webpage to perform a certain function, the
widget will require a <DIV> with a particular ID and content.

If I'm adding ARIA landmarks, the WAI guidelines have their guidelines and
standards. I don't know of any other "proper uses" of <DIV> tags. Maybe
others will chime in. I now job-out my website development to others with
better skills (and more time) than me, so my detailed knowledge isn't what
it used to be.

-Bevi Chagnon
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - -
www.PubCom.com - Trainers, Consultants, Designers, Developers.
Print, Web, Acrobat, XML, eBooks, and U.S. Federal Section 508
Accessibility.
New Sec. 508 Workshop & EPUBs Tour in 2013 - www.Workshop.Pubcom.com

-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Stanzel, Susan -
FSA, Kansas City, MO
Sent: Thursday, August 15, 2013 10:11 AM
To: WebAIM Discussion List
Subject: [WebAIM] proper use of the division <DIV> tag

I have always thought of divisions as giving a general layout of an
unfamiliar page. Here at the United States Department of Agriculture it
appears to me they are used similarly to actual links on the page. What is
the proper use for divisions? I usually ask JAWS to tell me all the
divisions on an unfamiliar page.

Susie Stanzel