E-mail List Archives
Thread: Headings
Number of posts in this thread: 62 (In chronological order)
From: Geof Collis
Date: Mon, Dec 21 2009 10:18AM
Subject: Headings
No previous message | Next message →
Hi All
Perhaps someone could help me, I've been criticized by someone that
the following site http://www.ccecnfb.org/ is missing headings, I'm
assuming they mean my navigation areas. Is this correct?
cheers
Geof
Editor
Accessibility News
www.accessibilitynews.ca
Accessibility News International
www.accessibilitynewsinternational.com
From: Don Mauck
Date: Mon, Dec 21 2009 10:39AM
Subject: Re: Headings
← Previous message | Next message →
Geof,
This site is not missing headings so I don't know what they mean. My take would be that they thought it was missing HTML headings but its not.
Regards,
Don
Oracle
Don Mauck | Accessibility Evangelist
Oracle Corporate Architecture Group
7700 Technology Way
Denver CO 80237
Phone (303) 334-4184
Email = EMAIL ADDRESS REMOVED =
Green Oracle
Oracle is committed to developing practices and products that help protect the environment
From: Julie Romanowski
Date: Mon, Dec 21 2009 10:54AM
Subject: Re: Headings
← Previous message | Next message →
I believe people may be referring to the navigation sections. "Main
Menu" and "Categories" look like they should be section headings, but
are coded as simple text.
From: Geof Collis
Date: Mon, Dec 21 2009 10:57AM
Subject: Re: Headings
← Previous message | Next message →
Hi Don
Thanks, I'm scratching my head wondering what they mean as well.
cheers
Geof
At 12:39 PM 12/21/2009, you wrote:
>Geof,
>This site is not missing headings so I don't know what they
>mean. My take would be that they thought it was missing HTML
>headings but its not.
>
>
>Regards,
> Don
>
>Oracle
>Don Mauck | Accessibility Evangelist
>Oracle Corporate Architecture Group
>7700 Technology Way
>Denver CO 80237
>Phone (303) 334-4184
>Email = EMAIL ADDRESS REMOVED =
>
>
>Green Oracle
>
>Oracle is committed to developing practices and products that help
>protect the environment
>
>
>
>
>
>
>
From: Don Mauck
Date: Mon, Dec 21 2009 11:00AM
Subject: Re: Headings
← Previous message | Next message →
Well, that's not quite true at least in Fire Fox, they show up as landmarks.
Regards,
Don
Oracle
Don Mauck | Accessibility Evangelist
Oracle Corporate Architecture Group
7700 Technology Way
Denver CO 80237
Phone (303) 334-4184
Email = EMAIL ADDRESS REMOVED =
Green Oracle
Oracle is committed to developing practices and products that help protect the environment
From: Geof Collis
Date: Mon, Dec 21 2009 11:03AM
Subject: Re: Headings
← Previous message | Next message →
They are, but is it an WCAG issue if they aren't coded as headings?
At 12:54 PM 12/21/2009, you wrote:
>I believe people may be referring to the navigation sections. "Main
>Menu" and "Categories" look like they should be section headings, but
>are coded as simple text.
>
>
From: Tim Harshbarger
Date: Mon, Dec 21 2009 11:57AM
Subject: Re: Headings
← Previous message | Next message →
> They are, but is it an WCAG issue if they aren't coded as headings?
Looking at the sufficient techniques for WCAG 2.0 4.1.2 (http://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html), I would think that they should be marked up as headings.
Tim
From: Geof Collis
Date: Mon, Dec 21 2009 12:03PM
Subject: Re: Headings
← Previous message | Next message →
But I want the first heading to be the main content, I have skip
links, they are marked up as lists and I use role landmarks, is that
not enough?
At 01:55 PM 12/21/2009, you wrote:
> > They are, but is it an WCAG issue if they aren't coded as headings?
>
>Looking at the sufficient techniques for WCAG 2.0 4.1.2
>(http://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html),
>I would think that they should be marked up as headings.
>
>Tim
>
From: Wayne Dick
Date: Mon, Dec 21 2009 1:30PM
Subject: Re: Headings
← Previous message | Next message →
I had little trouble navigating this page with
headings (mechanically). It would pass the test
Tom Jewett and I developed using the accessibility
tool bar.
Wayne
From: Geof Collis
Date: Mon, Dec 21 2009 1:45PM
Subject: Re: Headings
← Previous message | Next message →
Thanks!
At 03:28 PM 12/21/2009, you wrote:
>I had little trouble navigating this page with
>headings (mechanically). It would pass the test
>Tom Jewett and I developed using the accessibility
>tool bar.
>
>Wayne
>
From: Moore,Michael (DARS)
Date: Mon, Dec 21 2009 1:48PM
Subject: Re: Headings
← Previous message | Next message →
My own personal warped opinion is that if it visibly looks like a heading then it should be coded as a heading. Why would you want headings for sighted users that are not available for screen reader users? As far as the heading order goes, you can control that through the code order with CSS and/or make the main heading an h1 and the other headings lower heading. If I want to get to the main heading using a screen reader I can just whack the key for that heading level - the "1" key in JAWS.
Mike Moore
(512) 424-4159
From: Andrew Kirkpatrick
Date: Mon, Dec 21 2009 2:00PM
Subject: Re: Headings
← Previous message | Next message →
Geof,
Maybe you already fixed it, but when I look at the code I see one <h1> and two <h2> elements, and in my book those count as headings.
Thanks,
AWK
Andrew Kirkpatrick
Senior Product Manager, Accessibility
Adobe Systems
= EMAIL ADDRESS REMOVED =
From: Moore,Michael (DARS)
Date: Mon, Dec 21 2009 2:03PM
Subject: Re: Headings
← Previous message | Next message →
Headings exist, my point is just that the coded structure does not match the visual structure. There are 3 coded headings and 5 visual headings.
Mike Moore
(512) 424-4159
From: Geof Collis
Date: Mon, Dec 21 2009 2:06PM
Subject: Re: Headings
← Previous message | Next message →
Hi Andrew
I think the argument here is that my navigation are supposed to be
headings, but I dont see it that way, navigation is navigation and
then there is content. I dont see a need to use headings as I have
said before, all I have is bold text to signify that it is a mainn
navigation and categories, if I chose not to put any text then there
would be no need to put headings at all.
cheers
Geof
At 03:59 PM 12/21/2009, you wrote:
>Geof,
>Maybe you already fixed it, but when I look at the code I see one
><h1> and two <h2> elements, and in my book those count as headings.
>
>Thanks,
>AWK
>
>Andrew Kirkpatrick
>
>Senior Product Manager, Accessibility
>
>Adobe Systems
>
> = EMAIL ADDRESS REMOVED =
>
>
>
From: Andrew Kirkpatrick
Date: Mon, Dec 21 2009 2:09PM
Subject: Re: Headings
← Previous message | Next message →
Right, but it sounded like Geof was being told that he had no headings the original complaint he received.
Thanks,
AWK
Andrew Kirkpatrick
Senior Product Manager, Accessibility
Adobe Systems
= EMAIL ADDRESS REMOVED =
From: jfoliot
Date: Mon, Dec 21 2009 2:12PM
Subject: Re: Headings
← Previous message | Next message →
Geof,
What *really* needs to be determined is the structured logic behind
your page; today only a human brain can make that final assesment.
Toolbars and other mechanical test can assist the evaluator in this
process, but they are but aids in that testing. ARIA landmark roles
and other newer techniques have limited implementation, and some
mechanical checkers might miss them as well.
If the content will benefit by adding (or modifying) text, then it is
worth considering, however if there is little to no real value, then
an informed judgement call is the bottom line.
John Foliot
(Sent from my mobile)
Stanford Online Accessibility Program
http://soap.stanford.edu
On Dec 21, 2009, at 12:29 PM, Wayne Dick < = EMAIL ADDRESS REMOVED = > wrote:
> I had little trouble navigating this page with
> headings (mechanically). It would pass the test
> Tom Jewett and I developed using the accessibility
> tool bar.
>
> Wayne
>
From: Geof Collis
Date: Mon, Dec 21 2009 2:15PM
Subject: Re: Headings
← Previous message | Next message →
Hi Mike
They are not there to look like headings for the sighted. If you
follow the skip links it will read out that it is a main menu and categories.
As for the main heading, I dont believe a navigation is a main
heading, the main heading is the start of the main content and if I
start moving the menus further down the page then it will have to
come after all the content and cause problems for other users and I
dont believe in slapping navigation into my content just to get the
headings nested correctly.
cheers
Geof
At 03:48 PM 12/21/2009, you wrote:
>My own personal warped opinion is that if it visibly looks like a
>heading then it should be coded as a heading. Why would you want
>headings for sighted users that are not available for screen reader
>users? As far as the heading order goes, you can control that
>through the code order with CSS and/or make the main heading an h1
>and the other headings lower heading. If I want to get to the main
>heading using a screen reader I can just whack the key for that
>heading level - the "1" key in JAWS.
>
>Mike Moore
>(512) 424-4159
>
>
>
From: Geof Collis
Date: Mon, Dec 21 2009 2:21PM
Subject: Re: Headings
← Previous message | Next message →
Hi John
That was my thinking behind my design, I could have put headings but
as I said, there are enough ways to get to the navigation without
throwing headings in that would add 2 extra keystrokes to get to the
main content and that would be 2 for every page.
cheers
Geof
At 04:11 PM 12/21/2009, you wrote:
>Geof,
>What *really* needs to be determined is the structured logic behind
>your page; today only a human brain can make that final assesment.
>Toolbars and other mechanical test can assist the evaluator in this
>process, but they are but aids in that testing. ARIA landmark roles
>and other newer techniques have limited implementation, and some
>mechanical checkers might miss them as well.
>
>If the content will benefit by adding (or modifying) text, then it is
>worth considering, however if there is little to no real value, then
>an informed judgement call is the bottom line.
>
>John Foliot
>(Sent from my mobile)
>Stanford Online Accessibility Program
>http://soap.stanford.edu
>
>On Dec 21, 2009, at 12:29 PM, Wayne Dick < = EMAIL ADDRESS REMOVED = > wrote:
>
> > I had little trouble navigating this page with
> > headings (mechanically). It would pass the test
> > Tom Jewett and I developed using the accessibility
> > tool bar.
> >
> > Wayne
> >
From: Margit Link-Rodrigue
Date: Mon, Dec 21 2009 2:33PM
Subject: Re: Headings
← Previous message | Next message →
Geof,
I would make Main Menu, Categories, and Search this Site <h2> headings and
apply a style class so that you can keep the look you have. This would still
allow you to keep your heading 1 where you have it now - to mark up the
start of your main content. I think this is in line with WCAG 2
recommendation, take a look at http://www.w3.org/TR/WCAG-TECHS/H42.html. I
like to have as much structural markup as possible, I think of headings a
little bit like the outline for a table of contents just like in a Word
document.
On another note, the Default Colors link in your Main Menu goes to a page
that doesn't load the stylesheet correctly. It loads as all white text on
white background for me, not sure if you are aware of that.
Margit
On Mon, Dec 21, 2009 at 3:06 PM, Geof Collis < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Andrew
>
> I think the argument here is that my navigation are supposed to be
> headings, but I dont see it that way, navigation is navigation and
> then there is content. I dont see a need to use headings as I have
> said before, all I have is bold text to signify that it is a mainn
> navigation and categories, if I chose not to put any text then there
> would be no need to put headings at all.
>
> cheers
>
> Geof
>
>
>
> At 03:59 PM 12/21/2009, you wrote:
> >Geof,
> >Maybe you already fixed it, but when I look at the code I see one
> ><h1> and two <h2> elements, and in my book those count as headings.
> >
> >Thanks,
> >AWK
> >
> >Andrew Kirkpatrick
> >
> >Senior Product Manager, Accessibility
> >
> >Adobe Systems
> >
> > = EMAIL ADDRESS REMOVED =
> >
> >
> >
From: Wayne Dick
Date: Mon, Dec 21 2009 2:54PM
Subject: Re: Headings
← Previous message | Next message →
The only text I found that did not get a heading
was the "ACCESSIBILITY" section title.
Here is a style sheet I use to see headings. I
can see, it may not help you.
@charset "utf-8" !important;
/* CSS Document */
/* Deconstructive Style Sheet
High Contrast with Deconstruction
Wayne Dick (c) 2007 */
/* Deconstruction Reset Phase ---
To nullify the author's isual bias
set the property values to W3C
defaults */
/* Background Properties */
* {background-attachment: scroll !important;
background-color: transparent !important;
background-image: none !important;
background-position: 0% 0% !important;
background-repeat: repeat !important;}
/* border-properties */
table, inline-table
{ border-collapse: separate !important;
border-spacing: 0 !important;}
* {border-color: transparent !important;
border-style: none !important;
border-width: medium !important;}
/* Bottom starts positions */
* {bottom: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;}
/* Caption style for tables*/
caption
{caption-side: top !important;}
/*clear for float */
address, blockquote, center, dir, div, dl,
fieldset,
form, h1, h2, h3, h4, h5, h6, hr, isindex,
menu, noframe,
noscript, ol, p , pre, table, ul, dd, dt,
frame, li,
tbody, td,
tfoot, th, thead, tr
{clear: none !important;}
/* clip */
* { clip: auto !important;}
/* Color for font */
* { color: #EEEEEE !important; }
/* content */
* { content: normal !important; }
/* cursor */
* { cursor: auto !important;}
/* direction */
* { direction: ltr !important; }
/* Default display */
address, blockquote, center, dir, div, dl,
fieldset, form,
h1, h2, h3, h4, h5, h6, hr, isindex, menu,
noframe,
noscript, ol, p, table, ul, dd, dt, frame
{ display: block !important; }
li , dd { display: list-item !important;}
head { display: none !important;}
table { display: table !important;}
tr { display: table-row !important;}
thead { display: table-header-group
!important;}
tbody { display: table-row-group
!important;}
tfoot { display: table-footer-group
!important;}
col { display: table-column
!important;}
colgroup { display: table-column-group
!important;}
td, th { display: table-cell !important;}
caption { display: table-caption
!important;}
/*empty-cells in tables */
td, th { empty-cells: show !important;}
/*float moves blocks up if they fit */
* { float: none !important;}
/* font-family, size, style, varient, weight - These
accomodations make some genreally useful
setting defaults
for many people with low vision. Always keep in
mind
these
are generallly useful not universally useful. */
* {font-family: Tahoma, Verdana, Arial,
Helvetica,
sans-serif !important;
font-size: 36px !important;
font-style: normal !important;
font-variant: normal !important;
font-weight: 500 !important;}
/* height - override the author's fixed heights */
address, blockquote, center, dir, div, dl,
fieldset, form,
h1, h2, h3, h4, h5, h6, hr, isindex, menu,
noframe,
noscript, ol, p, pre, table, ul, dd, dt,
frame, li, tbody,
td,
tfoot, th, thead, tr { height: auto !important;}
/* 'left' is set above with 'bottom'*/
/* letter-spacing a little small, but better than
normal.*/
* {letter-spacing: 0.03em !important;}
/* line-height' - average effective line spacing
for low
vision. */
* {line-height: 1.3 !important;}
/* list-style-image - this is fairly unimportant
for people
with low vision.*/
li {list-style-image: none !important;}
/* list-style-position - this is standard...It is
visible.*/
li {list-style-position: outside !important;}
/* list-style-type - keep it simple - stay
consistent with
author */
ul>li, dl>li { list-style-type: disc
!important; }
ol>li { list-style-type: decimal !important;}
/* margin parameters - table cells with margin
settings
cause problems
for IE 6 and 7 */
address, body, blockquote, center, dir, div,
dl, fieldset,
form, h1, h2, h3, h4, h5, h6, hr, isindex, menu,
noframe, noscript, ol, p, pre, table, ul, dd, dt,
frame,
frameset, li, tbody, /*td*/ tfoot, /*th*/ thead, tr
{ margin: 0 !important; }
/* max-height , max-width, min-height, min-width
- useful when they work */
address, blockquote, center, dir, div, dl,
fieldset, form,
h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframe,
noscript, ol, p, pre, table, ul, dd, dt, frame, li,
tbody,
td, tfoot, th, thead, tr
{ max-height: none !important;
max-width: none !important;
min-height: 0 !important;
min-width: 0 !important;}
/* orphans */
address, blockquote, center, dir, div, dl,
fieldset, form,
h1, h2, h3, h4, h5, h6, hr, isindex, menu,
noframe,
noscript, ol, p, pre, table, ul, dd, dt, frame, li,
tbody, td,
tfoot, th, thead, tr
{ orphans: 2 !important;}
/* outline-color, styl3, width */
* {outline-color: transparent !important;
outline-style: none !important;
outline-width: thin !important;}
/* overflow */
address, blockquote, center, dir, div, dl,
fieldset, form,
h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframe,
noscript, ol, p, pre, table, ul, dd, dt, frame, li,
tbody,
td, tfoot, th, thead, tr
{ overflow: visible !important;}
/* padding - similar problems like margin with IE */
address, blockquote, body, center, dir, div,
dl, fieldset,
form, h1, h2, h3, h4, h5, h6, hr, isindex, menu,
noframe,
noscript, ol, p, pre, table, ul, dd, dt, frame,
frameset, li,
tbody, td, tfoot, th, thead, tr
{padding: 0 !important;}
/*'page-break-after' and page-break-before,
page-break-
inside*/
address, blockquote, center, dir, div, dl,
fieldset, form,
h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframe,
noscript, ol, p, pre, table, ul, dd, dt, frame, li,
tbody,
td, tfoot, th, thead, tr
{page-break-after: auto !important;
page-break-before: auto !important;
page-break-inside: auto !important;}
/* position */
* {position: static !important;}
/* quotes' */
* {quotes: '"' '"' "'" "'" !important;}
/* right - set with other position parameters at
'bottom' */
/* table-layout' - */
table, inline-table {table-layout: auto
!important;}
/* text-align, text-decoration, text-transform - */
* {text-align: left !important;
text-decoration: none !important;
text-transform: none !important;}
/* text-indent' */
address, blockquote, center, dir, div, dl,
fieldset, form,
h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframe,
noscript,
ol, p, pre, table, ul, dd, dt, frame, li, tbody, td,
tfoot, th,
thead, tr
{ text-indent: 0 !important;}
/* top is defined with other position parameters -
starting
with bottom. */
/*'unicode-bidi' */
* {unicode-bidi: normal !important;}
/*'vertical-align' - within the line height */
a, abbr, acronym, b, bdo, big, br, cite,
code, dfn, em,
font , i, img, input, kbd, label, q, s, sample,
select, small,
span, strike, strong, sub, sup, textarea, tt, u, var
{vertical-align: baseline !important;}
/* visibility */
* {visibility: visible !important;}
/* white-space - space squeezing and word-wrapping*/
address, blockquote, center, dir, div, dl,
fieldset, form,
h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframe,
noscript,
ol, p, pre, table, ul, dd, dt, frame, li, tbody, td,
tfoot, th,
thead, tr {white-space: normal !important;}
/* widows */
address, blockquote, center, dir, div, dl,
fieldset, form,
h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframe,
noscript,
ol, p, pre, table, ul, dd, dt, frame, li, tbody, td,
tfoot, th,
thead, tr { widows: 2 !important;}
/* width - this does work and it is useful */
* {width: auto !important;}
/* word-spacing */
* {word-spacing: 0.035em !important;}
/* z-index */
address, blockquote, center, dir, div, dl,
fieldset, form,
h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframe,
noscript,
ol, p, pre, table, ul, dd, dt, frame, li, tbody, td,
tfoot, th,
thead, tr { z-index: auto !important;}
/*****************************************************
Custom Style Section
******************************************************/
/* Very general preferences */
* {background-color:#000000 !important;
color: ##EEEEEE !important; }
/* Body Dimensions*/
body, frameset
{width 100% !important;
padding: 10px 5% 10px 5px !important; }
/* Normal elements that contain text*/
p, li, ol, ul, dl, dd, dt, span {
/* font */
font-family: tahoma, arial, sans-serif
!important;
font-size: 40px !important;
font-variant: normal !important;
font-weight: 500 !important;
/* Box */
padding-left: 5px !important;
padding-right: 5px !important;
padding-bottom: 3px !important;
padding-top: 2px !important;
margin-left: 5px !important;
margin-right: 5px !important;
margin-bottom: 3px !important;
margin-top: 2px !important;
/* Leading */
line-height: 1.4 !important;
letter-spacing: 0.05em !important;
word-spacing: 0.08em !important;
/* Text Flow */
white-space: normal !important;
}
/* headings */
h1,h2,h3,h4,h5,h6{
margin: 4px 0 6px 0 !important;
padding: 6px 5% 4px 5% !important;
text-align: left !important;
width: 90% !important;
background-color: transparent !important; }
h1, h2, h3, h4, h5, h6, h1 *,h2 *,h3 *,h4 *,h5
*,h6 * {
font-family: verdana, arial, helvetica,
"sans serif "
!important;
font-weight: 800 !important;
line-height: 1.4 !important;
letter-spacing: 0.04em !important;
word-spacing: 0.06em !important;}
h1 {
border-style: solid !important;
border-width: medium !important;
border-color: #BB66FF !important;
font-size: 30px !important;
font-variant: small-caps !important;
color: #BB66FF !important; }
h2 {
border-style: solid !important;
border-width: medium !important;
border-color: #6699FF !important;
font-size: 30px !important;
font-variant: small-caps !important;
font-style: italic !important;
color: #6699FF !important;}
h3 {
border-style:double !important;
border-width: thin !important;
border-color: #cc99ff !important;
font-size: 28px !important;
color: #CC99FF !important; }
h4 {
border-style: solid !important;
border-width: thin !important;
border-color: #66CCCC !important;
font-size: 28px !important;
font-style: italic !important;
color: #66cccc !important; }
h5 {
border-style: solid !important;
border-width: thin !important;
border-color: #CCCC66 !important;
font-size: 26pt !important;
color: #cccc66 !important;}
h6 {
border-style: solid !important;
border-width: thin !important;
border-color: #99CCCC !important;
font-size: 24px !important;
font-style: italic !important;
color: #99cccc !important; }
/* hyperlinks */
a, a * {
font-family: "Courier New", Courier,
monospace !
important;
font-size: 36px !important;
font-weight: 700 !important;
overflow: auto !important;
word-spacing: 0.02em !important;
letter-spacing: 0.01em !important; }
a:link { color:#3399FF !important;}
a:visited { color: #eeAA33 !important; }
a:focus { border-style: solid !important;
border-width: thin !important;
border-color: #770033 !
important;
background-color: #A0B0B0 !
important;
color: #770033 !important;
padding: 2px 3px 2px 3px !
important;
margin: 1px !important;}
h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 a {
color: inherit !important; }
a:hover {color: #33eeff !important;}
/* pre formatting */
pre {
font-family: "Arial Narrow" !important;
font-size: 28px !important;
font-weight: 700 !important;
border-width: medium !important;
border-style: solid !important;
border-color: #CC9966 !important;
width: 97% !important;
padding: 10px !important;
margin: 5px 2px 5px 8px !important;
white-space: pre !important;}
pre * {font-size: inherit !important;}
/* Form Elements */
form, form*, button, input, textarea,
select, option, optgroup
{ font-size: 32px !important;
font-family: "Arial Narrow" !important;
border-style: solid !important; }
input , button {
border-style: solid !important;
border-width: medium !important;
border-color: #FF6633 !important;
width: auto !important;
height: auto !important;
padding: 3px !important;
line-height: normal !important;
vertical-align: bottom !important; }
input img, button img {clip: auto !important;}
input[type="hidden"] {display: none !important; }
input { height: auto px !important;
padding: 3px !important;}
form, fieldset {
width: 95% !important;
border-style: solid !important;
border-color: #22BB88 !important;
border-width: medium !important;
}
textarea {
width: 50% !important;
border-style: double !important;
border-color: #006666 !important;
border-width: medium !important;}
ul, ol, dl
{
border-left-style: solid !important;
border-left-color: rgb(128, 128, 255)
!important;
border-left-width: thin !important;
padding-left: 48px !important;
width: 95% !important;
}
ul, dl {
list-style-type: none !important;
list-style-image: none !important;}
dt {
border-style: solid !important;
border-color: rgb(128, 255, 128) !important;
border-width: medium !important;
border-collapse: separate !important;
margin: 5px !important;
padding: 5px !important;
}
dd {
width: 90% !important;
margin: 2.5% !important;
padding: 5px !important;
border-color: rgb(64, 128, 64) !important;
border-style: solid !important;
border-width: thin !important;
border-collapse: separate !important; }
li {
border-top-style: solid !important;
border-top-color: #CC9999 !important;
border-top-width: thin !important;
display: list-item !important;
width:90% !important;
margin-left: 40px !important;
margin-top: 8px !important;
vertical-align: text-top !important; }
ul > li {
list-style-image: none !important;
list-style-type: none !important;}
p {
width: 100% !important;
margin-top: 10px !important;
padding: 8px !important;
border-style: solid !important;
border-color: rgb(176, 124, 88) !important;
border-width: thin !important; }
table {
border-style: solid !important;
border-color: rgb(96, 120, 176) !important;
border-width:thin !important;
width: 100% !important;
padding: 5px !important; }
td, th {
border-style: solid !important;
border-color: rgb(196, 140, 110) !important;
border-width: thin !important;
width: auto !important;
padding: 5px !important;}
th{ font-weight: bold !important;
text-align: center }
div {
width: 95% !important;
padding: 5px 5% 5px 2.5% !important;}
div div {
width: 100% !important;
padding: 5px !important;
}
font {
font-family: "Arial Narrow" !important;
font-weight: 600 !important;
font-size: 32px !important;
}
center { width:100% !important;
text-align: left !important;}
img {width: auto !important;
padding: 0 !important;}
strong, sample { font-weight: 700 !important; }
emphasis, cite, variable, sample { font-style:
italic !
important;}
code, teletype, keyboard, variable {
font-family: "Courier New", Courier, monospace
!important;
font-weight: 900 !important;
}
tt , i , b , big , small, em , strong , dfn ,
code , samp,
kbd, var, cite, abbr, acronym, sub, sup, span, bdo {
color: inherit !important;
font-size: inherit !important;
background-color: inherit !important;
}
body > * p{ border-style: none !important;}
From: Geof Collis
Date: Mon, Dec 21 2009 3:00PM
Subject: Re: Headings
← Previous message | Next message →
Hi Margit
Thanks but I find people are going heading crazy. :O)
Thanks also for the style sheet, seems I spelled color with a "u" for
the content section, gonna have to go through other ones to see if I
made the same mistake.
cheers
Geof
At 04:31 PM 12/21/2009, you wrote:
>Geof,
>
>I would make Main Menu, Categories, and Search this Site <h2> headings and
>apply a style class so that you can keep the look you have. This would still
>allow you to keep your heading 1 where you have it now - to mark up the
>start of your main content. I think this is in line with WCAG 2
>recommendation, take a look at http://www.w3.org/TR/WCAG-TECHS/H42.html. I
>like to have as much structural markup as possible, I think of headings a
>little bit like the outline for a table of contents just like in a Word
>document.
>
>On another note, the Default Colors link in your Main Menu goes to a page
>that doesn't load the stylesheet correctly. It loads as all white text on
>white background for me, not sure if you are aware of that.
>
>Margit
>
>
>On Mon, Dec 21, 2009 at 3:06 PM, Geof Collis < = EMAIL ADDRESS REMOVED = > wrote:
>
> > Hi Andrew
> >
> > I think the argument here is that my navigation are supposed to be
> > headings, but I dont see it that way, navigation is navigation and
> > then there is content. I dont see a need to use headings as I have
> > said before, all I have is bold text to signify that it is a mainn
> > navigation and categories, if I chose not to put any text then there
> > would be no need to put headings at all.
> >
> > cheers
> >
> > Geof
> >
> >
> >
> > At 03:59 PM 12/21/2009, you wrote:
> > >Geof,
> > >Maybe you already fixed it, but when I look at the code I see one
> > ><h1> and two <h2> elements, and in my book those count as headings.
> > >
> > >Thanks,
> > >AWK
> > >
> > >Andrew Kirkpatrick
> > >
> > >Senior Product Manager, Accessibility
> > >
> > >Adobe Systems
> > >
> > > = EMAIL ADDRESS REMOVED =
> > >
> > >
> > >
From: Geof Collis
Date: Mon, Dec 21 2009 3:15PM
Subject: Re: Headings
← Previous message | Next message →
Hi Wayne
What accessibility section doesn't have a heading?
What is the purpose of your style sheet?
cheers
Geof
At 04:54 PM 12/21/2009, you wrote:
>The only text I found that did not get a heading
>was the "ACCESSIBILITY" section title.
>
>Here is a style sheet I use to see headings. I
>can see, it may not help you.
>
>@charset "utf-8" !important;
>/* CSS Document */
>
>/* Deconstructive Style Sheet
> High Contrast with Deconstruction
> Wayne Dick (c) 2007 */
>
>/* Deconstruction Reset Phase ---
> To nullify the author's isual bias
> set the property values to W3C
>defaults */
>
>/* Background Properties */
> * {background-attachment: scroll !important;
> background-color: transparent !important;
> background-image: none !important;
> background-position: 0% 0% !important;
> background-repeat: repeat !important;}
>
>/* border-properties */
> table, inline-table
> { border-collapse: separate !important;
> border-spacing: 0 !important;}
> * {border-color: transparent !important;
> border-style: none !important;
> border-width: medium !important;}
>
>/* Bottom starts positions */
> * {bottom: auto !important;
> left: auto !important;
> right: auto !important;
> top: auto !important;}
>
>/* Caption style for tables*/
> caption
> {caption-side: top !important;}
>
>/*clear for float */
> address, blockquote, center, dir, div, dl,
>fieldset,
> form, h1, h2, h3, h4, h5, h6, hr, isindex,
>menu, noframe,
> noscript, ol, p , pre, table, ul, dd, dt,
>frame, li,
>
>tbody, td,
> tfoot, th, thead, tr
> {clear: none !important;}
>
>/* clip */
> * { clip: auto !important;}
>
>/* Color for font */
> * { color: #EEEEEE !important; }
>
>/* content */
> * { content: normal !important; }
>
>/* cursor */
> * { cursor: auto !important;}
>
>/* direction */
> * { direction: ltr !important; }
>
>/* Default display */
> address, blockquote, center, dir, div, dl,
>fieldset, form,
> h1, h2, h3, h4, h5, h6, hr, isindex, menu,
>noframe,
> noscript, ol, p, table, ul, dd, dt, frame
> { display: block !important; }
> li , dd { display: list-item !important;}
> head { display: none !important;}
> table { display: table !important;}
> tr { display: table-row !important;}
> thead { display: table-header-group
>!important;}
> tbody { display: table-row-group
>!important;}
> tfoot { display: table-footer-group
>!important;}
> col { display: table-column
>!important;}
> colgroup { display: table-column-group
>!important;}
> td, th { display: table-cell !important;}
> caption { display: table-caption
>!important;}
>
>/*empty-cells in tables */
> td, th { empty-cells: show !important;}
>
>/*float moves blocks up if they fit */
> * { float: none !important;}
>
>/* font-family, size, style, varient, weight - These
> accomodations make some genreally useful
>setting defaults
> for many people with low vision. Always keep in
>mind
>
>these
> are generallly useful not universally useful. */
> * {font-family: Tahoma, Verdana, Arial,
>Helvetica,
> sans-serif !important;
> font-size: 36px !important;
> font-style: normal !important;
> font-variant: normal !important;
> font-weight: 500 !important;}
>
>/* height - override the author's fixed heights */
> address, blockquote, center, dir, div, dl,
>fieldset, form,
> h1, h2, h3, h4, h5, h6, hr, isindex, menu,
>noframe,
> noscript, ol, p, pre, table, ul, dd, dt,
>frame, li, tbody,
>
>td,
> tfoot, th, thead, tr { height: auto !important;}
>
>/* 'left' is set above with 'bottom'*/
>
>/* letter-spacing a little small, but better than
>normal.*/
> * {letter-spacing: 0.03em !important;}
>
>/* line-height' - average effective line spacing
>for low
>
>vision. */
> * {line-height: 1.3 !important;}
>
>/* list-style-image - this is fairly unimportant
>for people
> with low vision.*/
> li {list-style-image: none !important;}
>
>/* list-style-position - this is standard...It is
>visible.*/
> li {list-style-position: outside !important;}
>
>/* list-style-type - keep it simple - stay
>consistent with
>
>author */
> ul>li, dl>li { list-style-type: disc
>!important; }
> ol>li { list-style-type: decimal !important;}
>
>/* margin parameters - table cells with margin
>settings
> cause problems
> for IE 6 and 7 */
> address, body, blockquote, center, dir, div,
>dl, fieldset,
> form, h1, h2, h3, h4, h5, h6, hr, isindex, menu,
> noframe, noscript, ol, p, pre, table, ul, dd, dt,
>
>frame,
> frameset, li, tbody, /*td*/ tfoot, /*th*/ thead, tr
> { margin: 0 !important; }
>
>/* max-height , max-width, min-height, min-width
> - useful when they work */
> address, blockquote, center, dir, div, dl,
>fieldset, form,
> h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframe,
> noscript, ol, p, pre, table, ul, dd, dt, frame, li,
>
>tbody,
> td, tfoot, th, thead, tr
> { max-height: none !important;
> max-width: none !important;
> min-height: 0 !important;
> min-width: 0 !important;}
>
>/* orphans */
> address, blockquote, center, dir, div, dl,
>fieldset, form,
> h1, h2, h3, h4, h5, h6, hr, isindex, menu,
>
>noframe,
> noscript, ol, p, pre, table, ul, dd, dt, frame, li,
>
>tbody, td,
> tfoot, th, thead, tr
> { orphans: 2 !important;}
>
>/* outline-color, styl3, width */
> * {outline-color: transparent !important;
> outline-style: none !important;
> outline-width: thin !important;}
>
>/* overflow */
> address, blockquote, center, dir, div, dl,
>fieldset, form,
> h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframe,
> noscript, ol, p, pre, table, ul, dd, dt, frame, li,
>
>tbody,
> td, tfoot, th, thead, tr
> { overflow: visible !important;}
>
>/* padding - similar problems like margin with IE */
> address, blockquote, body, center, dir, div,
>dl, fieldset,
> form, h1, h2, h3, h4, h5, h6, hr, isindex, menu,
>
>noframe,
> noscript, ol, p, pre, table, ul, dd, dt, frame,
>
>frameset, li,
> tbody, td, tfoot, th, thead, tr
> {padding: 0 !important;}
>
>/*'page-break-after' and page-break-before,
>page-break-
>
>inside*/
> address, blockquote, center, dir, div, dl,
>fieldset, form,
> h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframe,
> noscript, ol, p, pre, table, ul, dd, dt, frame, li,
>
>tbody,
> td, tfoot, th, thead, tr
> {page-break-after: auto !important;
> page-break-before: auto !important;
> page-break-inside: auto !important;}
>
>/* position */
> * {position: static !important;}
>
>/* quotes' */
> * {quotes: '"' '"' "'" "'" !important;}
>
>/* right - set with other position parameters at
>'bottom' */
>
>/* table-layout' - */
> table, inline-table {table-layout: auto
>!important;}
>
>/* text-align, text-decoration, text-transform - */
> * {text-align: left !important;
> text-decoration: none !important;
> text-transform: none !important;}
>
>/* text-indent' */
> address, blockquote, center, dir, div, dl,
>fieldset, form,
> h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframe,
>
>noscript,
> ol, p, pre, table, ul, dd, dt, frame, li, tbody, td,
>
>tfoot, th,
> thead, tr
> { text-indent: 0 !important;}
>
>/* top is defined with other position parameters -
>starting
>
>with bottom. */
>
>/*'unicode-bidi' */
> * {unicode-bidi: normal !important;}
>
>/*'vertical-align' - within the line height */
> a, abbr, acronym, b, bdo, big, br, cite,
>code, dfn, em,
> font , i, img, input, kbd, label, q, s, sample,
>
>select, small,
> span, strike, strong, sub, sup, textarea, tt, u, var
> {vertical-align: baseline !important;}
>
>/* visibility */
> * {visibility: visible !important;}
>
>/* white-space - space squeezing and word-wrapping*/
> address, blockquote, center, dir, div, dl,
>fieldset, form,
> h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframe,
>
>noscript,
> ol, p, pre, table, ul, dd, dt, frame, li, tbody, td,
>
>tfoot, th,
> thead, tr {white-space: normal !important;}
>
>/* widows */
> address, blockquote, center, dir, div, dl,
>fieldset, form,
> h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframe,
>
>noscript,
> ol, p, pre, table, ul, dd, dt, frame, li, tbody, td,
>
>tfoot, th,
> thead, tr { widows: 2 !important;}
>
>/* width - this does work and it is useful */
> * {width: auto !important;}
>
>/* word-spacing */
> * {word-spacing: 0.035em !important;}
>
>/* z-index */
> address, blockquote, center, dir, div, dl,
>fieldset, form,
> h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframe,
>
>noscript,
> ol, p, pre, table, ul, dd, dt, frame, li, tbody, td,
>
>tfoot, th,
> thead, tr { z-index: auto !important;}
>
>/*****************************************************
> Custom Style Section
>******************************************************/
>
>
>/* Very general preferences */
> * {background-color:#000000 !important;
> color: ##EEEEEE !important; }
>
>/* Body Dimensions*/
> body, frameset
> {width 100% !important;
> padding: 10px 5% 10px 5px !important; }
>
>/* Normal elements that contain text*/
> p, li, ol, ul, dl, dd, dt, span {
> /* font */
> font-family: tahoma, arial, sans-serif
>!important;
> font-size: 40px !important;
> font-variant: normal !important;
> font-weight: 500 !important;
> /* Box */
> padding-left: 5px !important;
> padding-right: 5px !important;
> padding-bottom: 3px !important;
> padding-top: 2px !important;
> margin-left: 5px !important;
> margin-right: 5px !important;
> margin-bottom: 3px !important;
> margin-top: 2px !important;
> /* Leading */
> line-height: 1.4 !important;
> letter-spacing: 0.05em !important;
> word-spacing: 0.08em !important;
> /* Text Flow */
> white-space: normal !important;
> }
>
>
>/* headings */
> h1,h2,h3,h4,h5,h6{
> margin: 4px 0 6px 0 !important;
> padding: 6px 5% 4px 5% !important;
> text-align: left !important;
> width: 90% !important;
> background-color: transparent !important; }
>
> h1, h2, h3, h4, h5, h6, h1 *,h2 *,h3 *,h4 *,h5
>*,h6 * {
> font-family: verdana, arial, helvetica,
>"sans serif "
>
>!important;
> font-weight: 800 !important;
> line-height: 1.4 !important;
> letter-spacing: 0.04em !important;
> word-spacing: 0.06em !important;}
>
> h1 {
> border-style: solid !important;
> border-width: medium !important;
> border-color: #BB66FF !important;
> font-size: 30px !important;
> font-variant: small-caps !important;
> color: #BB66FF !important; }
>
> h2 {
> border-style: solid !important;
> border-width: medium !important;
> border-color: #6699FF !important;
> font-size: 30px !important;
> font-variant: small-caps !important;
> font-style: italic !important;
> color: #6699FF !important;}
>
> h3 {
> border-style:double !important;
> border-width: thin !important;
> border-color: #cc99ff !important;
> font-size: 28px !important;
> color: #CC99FF !important; }
>
> h4 {
> border-style: solid !important;
> border-width: thin !important;
> border-color: #66CCCC !important;
> font-size: 28px !important;
> font-style: italic !important;
> color: #66cccc !important; }
>
> h5 {
> border-style: solid !important;
> border-width: thin !important;
> border-color: #CCCC66 !important;
> font-size: 26pt !important;
> color: #cccc66 !important;}
>
> h6 {
> border-style: solid !important;
> border-width: thin !important;
> border-color: #99CCCC !important;
> font-size: 24px !important;
> font-style: italic !important;
> color: #99cccc !important; }
>
>/* hyperlinks */
>
> a, a * {
> font-family: "Courier New", Courier,
>monospace !
>
>important;
> font-size: 36px !important;
> font-weight: 700 !important;
> overflow: auto !important;
> word-spacing: 0.02em !important;
> letter-spacing: 0.01em !important; }
>
> a:link { color:#3399FF !important;}
> a:visited { color: #eeAA33 !important; }
> a:focus { border-style: solid !important;
> border-width: thin !important;
> border-color: #770033 !
>
>important;
> background-color: #A0B0B0 !
>
>important;
> color: #770033 !important;
> padding: 2px 3px 2px 3px !
>
>important;
> margin: 1px !important;}
>
>
>
> h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 a {
> color: inherit !important; }
> a:hover {color: #33eeff !important;}
>
>/* pre formatting */
> pre {
> font-family: "Arial Narrow" !important;
> font-size: 28px !important;
> font-weight: 700 !important;
> border-width: medium !important;
> border-style: solid !important;
> border-color: #CC9966 !important;
> width: 97% !important;
> padding: 10px !important;
> margin: 5px 2px 5px 8px !important;
> white-space: pre !important;}
>
> pre * {font-size: inherit !important;}
>
>/* Form Elements */
> form, form*, button, input, textarea,
> select, option, optgroup
> { font-size: 32px !important;
> font-family: "Arial Narrow" !important;
> border-style: solid !important; }
>
> input , button {
> border-style: solid !important;
> border-width: medium !important;
> border-color: #FF6633 !important;
> width: auto !important;
> height: auto !important;
> padding: 3px !important;
> line-height: normal !important;
> vertical-align: bottom !important; }
> input img, button img {clip: auto !important;}
> input[type="hidden"] {display: none !important; }
> input { height: auto px !important;
> padding: 3px !important;}
> form, fieldset {
> width: 95% !important;
> border-style: solid !important;
> border-color: #22BB88 !important;
> border-width: medium !important;
> }
> textarea {
> width: 50% !important;
> border-style: double !important;
> border-color: #006666 !important;
> border-width: medium !important;}
>
> ul, ol, dl
>{
> border-left-style: solid !important;
> border-left-color: rgb(128, 128, 255)
>!important;
> border-left-width: thin !important;
> padding-left: 48px !important;
> width: 95% !important;
> }
>
>ul, dl {
> list-style-type: none !important;
> list-style-image: none !important;}
>
>dt {
> border-style: solid !important;
> border-color: rgb(128, 255, 128) !important;
> border-width: medium !important;
> border-collapse: separate !important;
> margin: 5px !important;
> padding: 5px !important;
> }
>
>dd {
> width: 90% !important;
> margin: 2.5% !important;
> padding: 5px !important;
> border-color: rgb(64, 128, 64) !important;
> border-style: solid !important;
> border-width: thin !important;
> border-collapse: separate !important; }
>
> li {
> border-top-style: solid !important;
> border-top-color: #CC9999 !important;
> border-top-width: thin !important;
> display: list-item !important;
> width:90% !important;
> margin-left: 40px !important;
> margin-top: 8px !important;
> vertical-align: text-top !important; }
>
> ul > li {
> list-style-image: none !important;
> list-style-type: none !important;}
>
> p {
> width: 100% !important;
> margin-top: 10px !important;
> padding: 8px !important;
> border-style: solid !important;
> border-color: rgb(176, 124, 88) !important;
> border-width: thin !important; }
>
> table {
> border-style: solid !important;
> border-color: rgb(96, 120, 176) !important;
> border-width:thin !important;
> width: 100% !important;
> padding: 5px !important; }
>
> td, th {
> border-style: solid !important;
> border-color: rgb(196, 140, 110) !important;
> border-width: thin !important;
> width: auto !important;
> padding: 5px !important;}
>
> th{ font-weight: bold !important;
>text-align: center }
>
>div {
> width: 95% !important;
> padding: 5px 5% 5px 2.5% !important;}
>
>div div {
> width: 100% !important;
> padding: 5px !important;
> }
>
> font {
> font-family: "Arial Narrow" !important;
> font-weight: 600 !important;
> font-size: 32px !important;
> }
>
>center { width:100% !important;
> text-align: left !important;}
>
>img {width: auto !important;
> padding: 0 !important;}
>
>strong, sample { font-weight: 700 !important; }
>
>emphasis, cite, variable, sample { font-style:
>italic !
>
>important;}
>
>code, teletype, keyboard, variable {
> font-family: "Courier New", Courier, monospace
> !important;
> font-weight: 900 !important;
> }
>
> tt , i , b , big , small, em , strong , dfn ,
>code , samp,
>
>kbd, var, cite, abbr, acronym, sub, sup, span, bdo {
> color: inherit !important;
> font-size: inherit !important;
> background-color: inherit !important;
> }
>
>
>body > * p{ border-style: none !important;}
>
From: Tim Harshbarger
Date: Mon, Dec 21 2009 3:21PM
Subject: Re: Headings
← Previous message | Next message →
> I dont see a need to use headings as I have
> said before, all I have is bold text to signify that it is a mainn
> navigation and categories, if I chose not to put any text then there
> would be no need to put headings at all.
If they are not necessary, maybe you should just remove them?
I think the issue is less about navigation and more about meaning. SC 4.1.2 is about exposing the role and state of an element programmatically. The way the page is encoded now that information is not programmatically available--although it is visually apparent.
Its possible that users may be able to determine the meaning accurately from the page context. However, since there is a way to use mark-up to ensure the meaning is clear, it still could be beneficial to add the heading elements.
You could make the section headings for main menu, categories, and search h2 elements--and make the first heading of your main content an h1.
Tim
From: Mike Osborne - AccEase
Date: Mon, Dec 21 2009 3:36PM
Subject: Re: Headings
← Previous message | Next message →
Hi Geof
Call me heading crazy - but I agree with Margit.
Visually Main Menu" and "Categories" perform the function of being headings
for the "content" that follows - little matter that "content" is navigation.
If a screen reader chooses to scope the page by listening to all headings
first up they will miss those sections - which may be where they want to go
- yes, you've got them covered by links, but no harm in covering all bases.
Semantically, Main Menu and Categories are not paragraphs - so what are
they?
"ACCESSIBILITY" presumably should also be a heading - it's clearly not a
paragraph.
Couple of other observations - on first look I didn't realise the site was a
blog or had a blog and "Categories" seemed meaningless, perhaps the more
explicit "Blog Categories" might be better.
I presume that the white on black style as default is for
accessibility/legibility purposes rather than stylistic ones (?) - in which
case I find it interesting that highlights are shown as black text on white
which would be harder to read for people who prefer white on black. Wouldn't
a highlighting mechanism that fits the white on black style be more
appropriate?
Strongly applaud your styling of link focus so that tabbing really stands
out - not done often enough!
Why is Search not where you'd expect it to be - top right?
I tried changing Accessibility Options to my preferred black on white - but
results were mixed and then couldn't get back to white on black.
When I click "High Contrast" not sure what changed or what style I'm
currently in. If the choices are one of Default colours, High Contrast and
Mobile - which I'm now guessing they might be - perhaps radio buttons would
make that clearer?
Regards
Mike Osborne
AccEase Ltd
p. 04 934 2821
m. 021 675 010
e. = EMAIL ADDRESS REMOVED =
w. www.AccEase.com
From: Geof Collis
Date: Mon, Dec 21 2009 4:03PM
Subject: Re: Headings
← Previous message | Next message →
Hi Tim
I'm thinking that I might just remove them. I can just as easily get
to the search and navigation using other JAWS commands as I can the
heading one.
cheers
Geof
At 05:21 PM 12/21/2009, you wrote:
> > I dont see a need to use headings as I have
> > said before, all I have is bold text to signify that it is a mainn
> > navigation and categories, if I chose not to put any text then there
> > would be no need to put headings at all.
>
>If they are not necessary, maybe you should just remove them?
>
>I think the issue is less about navigation and more about
>meaning. SC 4.1.2 is about exposing the role and state of an
>element programmatically. The way the page is encoded now that
>information is not programmatically available--although it is
>visually apparent.
>
>Its possible that users may be able to determine the meaning
>accurately from the page context. However, since there is a way to
>use mark-up to ensure the meaning is clear, it still could be
>beneficial to add the heading elements.
>
>You could make the section headings for main menu, categories, and
>search h2 elements--and make the first heading of your main content an h1.
>
>Tim
>
>
>
From: Cliff Tyllick
Date: Mon, Dec 21 2009 5:15PM
Subject: Re: Headings
← Previous message | Next message →
Tim Harshbarger said:
Looking at the sufficient techniques for WCAG 2.0 4.1.2 (http://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html), I would think that they should be marked up as headings.
Cliff replied:
Let's not confuse "sufficient" and "necessary." In other words, I understand a "sufficient" technique for complying with one of the guidelines to be *one* way to comply, not *the only* way to comply.
So they *could* be marked up as headings, and that does happen to be the way I would do it. But that doesn't necessarily mean it's the only way. I remain open to further innovation, and I understand the WAI to do so, too.
Cliff Tyllick
Web development coordinator
Agency Communications Division
Texas Commission on Environmental Quality
512/239-4516
= EMAIL ADDRESS REMOVED =
From: Geof Collis
Date: Mon, Dec 21 2009 5:33PM
Subject: Re: Headings
← Previous message | Next message →
Hi Mike
Finally figured out the Accessibility thing, I'm not responsible
for site content so I wasn't aware of that but changed it anyway.
I've also fixed the paragraph issue with the main menu and categories
Not sure of the highlighting issue, but if you mean roll overs on the
links, I just want it to be apparent that they've found the link.
I see the problem with colour choices, I'm still in the process of
building the site and haven't uploaded any other choices other than
the 3 main ones at the top.
thanks for the feedback. :O)
cheers
Geof
At 05:36 PM 12/21/2009, you wrote:
>Hi Geof
>
>Call me heading crazy - but I agree with Margit.
>
>Visually Main Menu" and "Categories" perform the function of being headings
>for the "content" that follows - little matter that "content" is navigation.
>
>If a screen reader chooses to scope the page by listening to all headings
>first up they will miss those sections - which may be where they want to go
>- yes, you've got them covered by links, but no harm in covering all bases.
>
>Semantically, Main Menu and Categories are not paragraphs - so what are
>they?
>
>"ACCESSIBILITY" presumably should also be a heading - it's clearly not a
>paragraph.
>
>Couple of other observations - on first look I didn't realise the site was a
>blog or had a blog and "Categories" seemed meaningless, perhaps the more
>explicit "Blog Categories" might be better.
>
>I presume that the white on black style as default is for
>accessibility/legibility purposes rather than stylistic ones (?) - in which
>case I find it interesting that highlights are shown as black text on white
>which would be harder to read for people who prefer white on black. Wouldn't
>a highlighting mechanism that fits the white on black style be more
>appropriate?
>
>Strongly applaud your styling of link focus so that tabbing really stands
>out - not done often enough!
>
>Why is Search not where you'd expect it to be - top right?
>
>I tried changing Accessibility Options to my preferred black on white - but
>results were mixed and then couldn't get back to white on black.
>
>When I click "High Contrast" not sure what changed or what style I'm
>currently in. If the choices are one of Default colours, High Contrast and
>Mobile - which I'm now guessing they might be - perhaps radio buttons would
>make that clearer?
>
>
>
>Regards
>Mike Osborne
>
>AccEase Ltd
>p. 04 934 2821
>m. 021 675 010
>e. = EMAIL ADDRESS REMOVED =
>w. www.AccEase.com
>
From: Tim Harshbarger
Date: Tue, Dec 22 2009 6:30AM
Subject: Re: Headings
← Previous message | Next message →
Cliff wrote:
Let's not confuse "sufficient" and "necessary." In other words, I understand a "sufficient" technique for complying with one of the guidelines to be *one* way to comply, not *the only* way to comply.
Tim replies:
That is a most excellent point. It might be an interesting exercise to try to come up with a list of techniques using HTML and CSS that conform to that success criteria without repeating one of the sufficient techniques.
From: Bevi Chagnon | PubCom
Date: Tue, Dec 22 2009 8:09AM
Subject: Re: Headings
← Previous message | Next message →
Tim wrote:
| It might be an interesting exercise to try to come up with a list of
techniques using HTML and CSS that conform to that success criteria without
repeating one of the sufficient techniques. |
As an instructor for 508, I'd love to see someone put together a reference
list like that!
I'd also love to see techniques for PDFs and Office documents, too. That's
where 508 really takes a hit.
--Bevi Chagnon
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . .
Bevi Chagnon | = EMAIL ADDRESS REMOVED = | www.PubCom.com
Consultants + Trainers + Designers | for print, web, marketing, Acrobat, &
508
PublishingDC Group Co-Moderator |
http://groups.yahoo.com/group/PublishingDC
. . . . . . . . . . . . . . . . . . . . . . . . . .
. .
Sign up for PubCom's Twitter & Facebook pages and get last-minute notices
for class discounts.
www.pubcom.com/twitterface-deals.html
. . . . . . . . . . . . . . . . . . . . . . . . . .
. .
From: Randall Pope
Date: Tue, Dec 22 2009 12:51PM
Subject: Re: Headings
← Previous message | Next message →
I too would like to see a reference list. At least we all won't be going
around in circles, trying to figure what apply what.
With Warm Regards,
Randall "Randy" Pope
American Association of the Deaf-Blind
Website: http://www.aadb.org
301 495-4402 VP/TTY
301 495-4403 Voice
301 495-4404 Fax
AIM: RandyAADB
Want to keep up with the latest news in the Deaf-Blind Community? Consider
subscribing to the monthly newsletter, "AADB Today" at http://aadb.org. It's
free and AADB membership is not required.
From: Cliff Tyllick
Date: Tue, Dec 22 2009 1:51PM
Subject: Re: Headings
← Previous message | Next message →
Tim Harshbarger mentioned:
It might be an interesting exercise to try to come up with a list of techniques using HTML and CSS that conform to that success criteria without repeating one of the sufficient techniques.
Cliff replies:
Isn't that WAI's intent with the sufficient techniques — that they be a living collection, and that anyone who comes up with a new technique submit it as an additional example?
Cliff Tyllick
Web development coordinator
Agency Communications Division
Texas Commission on Environmental Quality
512/239-4516
= EMAIL ADDRESS REMOVED =
From: Bevi Chagnon | PubCom
Date: Tue, Dec 22 2009 1:54PM
Subject: Re: Headings
← Previous message | Next message →
As a govt contractor & consultant, it would be great if the blind, deaf,
disabled, etc. associations came together and drew up a reference list of
techniques that we developers could use. It sure would help us give the
community better websites, PDFs, and electronic documents.
And it would help me cite specific techniques and recommendations when
teaching or writing up best practices for my clients.
Maybe an umbrella group could facilitate this, sort of how the W3C works.
Randy, given that you head up AADB, I think this might be right up your
alley!
--Bevi
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . .
Bevi Chagnon | = EMAIL ADDRESS REMOVED = | www.PubCom.com
Consultants + Trainers + Designers | for print, web, marketing, Acrobat, &
508
PublishingDC Group Co-Moderator |
http://groups.yahoo.com/group/PublishingDC
. . . . . . . . . . . . . . . . . . . . . . . . . .
. .
Sign up for PubCom's Twitter & Facebook pages and get last-minute notices
for class discounts.
www.pubcom.com/twitterface-deals.html
. . . . . . . . . . . . . . . . . . . . . . . . . .
. .
From: Hoffman, Allen
Date: Wed, Dec 23 2009 1:00PM
Subject: Re: Headings
← Previous message | Next message →
Hello:
See http://section508.gov/irscourse for one example of solid references
for "software". it's a bit dated, but is a good format for such work.
On the other hand, I'm not sure that disabilities advocacy organizations
are the most qualified to write such material, as technical writing, and
analysis is a different ball of wax than advocating for equality.
To compliment "sufficient techniques" solid test protocols must also be
widely distributed, and expected to be documented prior to acceptance.
to complement existing user-agent functionality tests, an "Acid test"
for assistive technologies interpreting user-agents would be great too!
W3C's sufficient techniques could be organized on a WIKI, and then at
some point someone could make a nice chart mapping them to other
standards.
Several books are out that do a pretty good job of this, but it does
seem to me that if we want this to be adopted more regularly that people
need to include accessibility and standards compliance in more than
"nice to have" business requirements. Vendors need to be expected to
meet customer requirements, and accessibility needs to be more than
"nice-to-have".
From: Wayne Dick
Date: Wed, Dec 23 2009 4:27PM
Subject: Re: Headings
← Previous message | Next message →
The w3c and the US Government have come up with
Standards. 508 is dated, but WCAG 2.0 Level AA is
straight forward and modern.
The idea that "blind, deaf,disabled, etc.
associations came together and drew up a reference
list of techniques that we developers could use"
misses the point that they already have. WCAG 2.0
Level AA is the result.
It is not easy reading, but developers read all
kinds of other technical references without
blinking. It is no harder or easier to learn WCAG
2.0 than it is to learn Flash, Ajax or XML. If
your are going to develop accessible content, you
need to understand accessibility at that technical
level. It's an important technical part of being a
competent modern developer.
Wayne
Bevi Chagnon | PubCom wrote:
> As a govt contractor & consultant, it would be great if the blind, deaf,
> disabled, etc. associations came together and drew up a reference list of
> techniques that we developers could use. It sure would help us give the
> community better websites, PDFs, and electronic documents.
>
> And it would help me cite specific techniques and recommendations when
> teaching or writing up best practices for my clients.
>
> Maybe an umbrella group could facilitate this, sort of how the W3C works.
>
> Randy, given that you head up AADB, I think this might be right up your
> alley!
>
> --Bevi
> . . . . . . . . . . . . . . . . . . . . . . . . . .
> . . .
> Bevi Chagnon | = EMAIL ADDRESS REMOVED = | www.PubCom.com
> Consultants + Trainers + Designers | for print, web, marketing, Acrobat, &
> 508
> PublishingDC Group Co-Moderator |
> http://groups.yahoo.com/group/PublishingDC
> . . . . . . . . . . . . . . . . . . . . . . . . . .
> . .
> Sign up for PubCom's Twitter & Facebook pages and get last-minute notices
> for class discounts.
> www.pubcom.com/twitterface-deals.html
> . . . . . . . . . . . . . . . . . . . . . . . . . .
> . .
>
>
>
From: John Foliot
Date: Wed, Dec 23 2009 9:24PM
Subject: Re: Headings
← Previous message | Next message →
Wayne Dick wrote:
>
> It is not easy reading, but developers read all
> kinds of other technical references without
> blinking. It is no harder or easier to learn WCAG
> 2.0 than it is to learn Flash, Ajax or XML. If
> your are going to develop accessible content, you
> need to understand accessibility at that technical
> level. It's an important technical part of being a
> competent modern developer.
While I cannot disagree with Wayne, understanding the technical
requirements and techniques is but one part of accessible web design:
understanding the needs and ramifications of the developer choices (and
user expectations and user-experience) are equally if not more important.
The one thing that WCAG2 grappled with and I believe has addressed is the
need to avoid a menu of tick-boxes that result in technical 'conformance'
while at the same time creating a poor user experience for the audience
that the tick-boxes seeks to address - the single largest shortcoming with
the now dated Section 508 spec. Many of us have encountered the
proto-typical page that meets all the ticks but is still inaccessible.
For example, if a web sites pages have a 'skip nav' link, immediately
followed by a persistent unordered list of links, and that list also has
the ARIA landmark role="navigation" then one really needs to ask whether
adding an <h2>Navigation</h2> is truly needed. Some might suggest yes,
but other would argue no - it is not a clear-cut 'tick-box' decision or
discussion. The real question that needs to be asked is: is this
navigation block easily discoverable, and does the user-experience
facilitate (or at least accommodate) non-visual users? Other factors, such
as design considerations must also be addressed and accounted for; boxing
ourselves into a series of "must does" can harm the larger goal, as less
informed developers will simply abandon all accessibility techniques if
they are seen as too restrictive.
So yes, understand the technical but also 'human' requirements, and inform
yourselves of the different existing success techniques; but at the same
time do not fear to try new implementations and techniques (backed with
appropriate user-testing) and if you come up with something new, by all
means share it back to the WAI Success Criteria Techniques documents. The
W3C has provided a means of doing just that via the form found at:
http://www.w3.org/WAI/GL/WCAG20/TECHS-SUBMIT/
From that page:
When submitting a technique, please be sure that you check it against the
following list:
1. The write-up follows the instructions and guidelines [provided] for
each section.
2. The write-up does not include the words "required," "must," or
"shall."
3. The technique is written to be descriptive, not imperative. That is,
the sentences say "with this technique you xyz" not "do xyz". The only
exception to this is the tests section, where the steps in the procedure
should be imperative.
4. No comment about sufficiency or advisory, etc. should be in the
technique document. Again, the information should be at the Understanding
WCAG 2.0 level instead. There are several reasons for this. First, it is
confusing to say that the technique is sufficient for a success criteria
for one technique but the same technique is not sufficient for another
(because it might only be sufficient to use a combination of techniques).
Also, some techniques may be sufficient in one place and advisory in
another. Finally, you can end up with something where the techniques
document differs from the understanding document which makes it difficult
for people to review and to make sure they have things correct when the
information is in multiple places and is not exactly the same.
Cheers and Seasons Best,
JF
From: Geof Collis
Date: Thu, Dec 24 2009 6:48AM
Subject: Re: Headings
← Previous message | Next message →
Hi John
Fantastic!! Well said.
I spend a lot of time researching sites for articles for my
Newsletter and websites, I know what I like in a site layout and
slapping a heading on anything that looks like it might be a
sufficient technique is not one of them.
When I visit a site for research I want to be able to get to the
source as quickly as possible that is why I like the first heading to
be what I am looking for. As I have said before too many sites have
it buried 5 and 6 headings down with my carpal tunnel problem the
less clicks I have to deal with the better.
If I go to a site for leasure thenI will start at the top and tab
down one click at a time to get a feel for the site. Once I have the
feel of the navigation and it is consistent and uses other semantic
markup like unordered lists then I know that if I go to another page
on the site and need anything in the menu thenI can just as easily
use my JAWS list command or even the drop down menu to find it. Now
that I have the feel I can go to any page hit the h key once and I am
at the content.
Furthermore if I want the search box I just need to hit the f key, if
it is placed properly I'm there in one click, no different than
hitting the h key for headings and if my technology allows I can use
the role landmarks
While I might be mistaken the WebAim survey did not ask how many or
what should be a heading only that headings are used by the majority
of us screen reader users.
Finally my website is built for a chapter of the National Federation
of the Blind, the majority of them are screen readers users and they
are very happy with the site.
cheers
Geof
From: Langum, Michael J
Date: Thu, Dec 24 2009 7:45AM
Subject: Re: Headings
← Previous message | Next message →
Geof wrote:
"Now that I have the feel I can go to any page hit the h key once and I am
at the content."
Mike asks:
Do you think is appropriate to put heading tags around titles located within site-wide banners (which usually precede main content)?
-- Mike
From: Geof Collis
Date: Thu, Dec 24 2009 7:57AM
Subject: Re: Headings
← Previous message | Next message →
Sorry I dont understand, can you give an example?
Geof
At 09:43 AM 12/24/2009, you wrote:
>Geof wrote:
>"Now that I have the feel I can go to any page hit the h key once and I am
>at the content."
>
>Mike asks:
>Do you think is appropriate to put heading tags around titles
>located within site-wide banners (which usually precede main content)?
>
>-- Mike
>
>
From: Langum, Michael J
Date: Thu, Dec 24 2009 8:39AM
Subject: Re: Headings
← Previous message | Next message →
Geof wrote:
"Sorry I dont understand, can you give an example?"
Mike responds:
Our site template begin with a block for the agency wide banner. That banner contains the site-wide title (within <h1> tags) and some site-wide links ("Subject Index," "Home," "Contact Us," etc.), and the "search" tool. Below the agency-level banner there is a subsite banner that indicates what sub-section of our site you are in. This is in an <h2> tag. Below that is the sub-site wide navigation (done with unordered lists and css).
Only after the above do you get to the unique content for a specific page. The title here is an <h1> tag.
My question relates to the usefulness of heading tags in the site-wide, or sub-site banners. This text is logically a "title," but it is not the unique title for a page.
-- Mike
From: Langum, Michael J
Date: Thu, Dec 24 2009 9:27AM
Subject: Re: Headings
← Previous message | Next message →
Here's another "headings" question.
When JAWS reads "headings", will it read ALL headings regardless of level, or can I tell JAWS to read only the <h1> and not the lower levels. Or only <h1> and <h2> but not lower levels?
I expect that this would make it much easier to "scan" a well structured document.
-- Mike
From: Geof Collis
Date: Thu, Dec 24 2009 9:39AM
Subject: Re: Headings
← Previous message | Next message →
Hi Mike
If I understand it correctly then it is the same question I
originally asked and I would not do it in my design, but that is my
own personal choice just so long as it doesn't flatout violate WCAG
2.0 and so far I haven't heard an argument that it is.
cheers
Geof
At 10:37 AM 12/24/2009, you wrote:
>Geof wrote:
>"Sorry I dont understand, can you give an example?"
>
>Mike responds:
>Our site template begin with a block for the agency wide
>banner. That banner contains the site-wide title (within <h1> tags)
>and some site-wide links ("Subject Index," "Home," "Contact Us,"
>etc.), and the "search" tool. Below the agency-level banner there
>is a subsite banner that indicates what sub-section of our site you
>are in. This is in an <h2> tag. Below that is the sub-site wide
>navigation (done with unordered lists and css).
>
>Only after the above do you get to the unique content for a specific
>page. The title here is an <h1> tag.
>
>My question relates to the usefulness of heading tags in the
>site-wide, or sub-site banners. This text is logically a "title,"
>but it is not the unique title for a page.
>
>-- Mike
>
From: Geof Collis
Date: Thu, Dec 24 2009 9:45AM
Subject: Re: Headings
← Previous message | Next message →
Hi Mike
I'm not aware if JAWS can pick and choose headings but I wouldn't
want it to pick only H1's there are times when I need to get to a
certain part of an article that might be a H2 or H3 and I rarely
use the JAWS Heading command, of course this is my personal choice.
And yes it does make for easy scanning if it is well structured.
cheers
Geof
At 11:25 AM 12/24/2009, you wrote:
>Here's another "headings" question.
>
>When JAWS reads "headings", will it read ALL headings regardless of
>level, or can I tell JAWS to read only the <h1> and not the lower
>levels. Or only <h1> and <h2> but not lower levels?
>
>I expect that this would make it much easier to "scan" a well
>structured document.
>
>-- Mike
>
From: John Foliot
Date: Thu, Dec 24 2009 11:27AM
Subject: Re: Headings
← Previous message | Next message →
Geof Collis wrote:
>
> I'm not aware if JAWS can pick and choose headings but I wouldn't
> want it to pick only H1's there are times when I need to get to a
> certain part of an article that might be a H2 or H3 and I rarely
> use the JAWS Heading command, of course this is my personal choice.
NOTE: I am not a daily JAWS user!
However it is my understanding that navigating headings in JAWS allows you
to focus in on a heading level by pressing H the required number of times
- for example to get to level 2 headings press H twice, level 3 headings
press 3 times, etc. Once you get to that level you can press the
associated number key to browse through all headings at that level.
As well, the Headings dialog box can sort a pages headings either
alphabetically or in tab order; I am not sure if it can sort by heading
level however.
Freedom Scientific's online notes on page navigation can be found at:
http://www.freedomscientific.com/training/Surfs-Up/Navigating.htm
HTH
JF
From: Mackenzie, Hamish
Date: Thu, Dec 24 2009 11:51AM
Subject: Re: Headings
← Previous message | Next message →
Hi
There are at least three ways to look at headings with Jaws.
Firstly hitting the letter H will jump from heading to heading as you
progress down the page and it will announce the heading level.
Secondly you can bring up a list of headings with Jaws key and F6 and
from this list you can see all the headings on the page including their
level and navigate to one by hitting enter on it.
If you specifically want to jump through headings of a certain level
then just hit the corresponding number key above the qwerty keys so for
level 1 headings you would keep pressing 1 and for level 2 you would
press 2 to jump to the next heading of that same type .
HTH
Hamish
From: Geof Collis
Date: Thu, Dec 24 2009 11:57AM
Subject: Re: Headings
← Previous message | Next message →
Hi John
I tried to hit the key for the number of times for the heading level
but I couldn't get it to work, it just took me down as many headings
as I clicked which works for me since I go to the same sites a lot
and know how many headings are there before the main content. I
actually hold down the h key rather than tabbing as there is
less stress on my carpal tunnel.
cheers
Geof
At 01:26 PM 12/24/2009, you wrote:
>Geof Collis wrote:
> >
> > I'm not aware if JAWS can pick and choose headings but I wouldn't
> > want it to pick only H1's there are times when I need to get to a
> > certain part of an article that might be a H2 or H3 and I rarely
> > use the JAWS Heading command, of course this is my personal choice.
>
>NOTE: I am not a daily JAWS user!
>
>However it is my understanding that navigating headings in JAWS allows you
>to focus in on a heading level by pressing H the required number of times
>- for example to get to level 2 headings press H twice, level 3 headings
>press 3 times, etc. Once you get to that level you can press the
>associated number key to browse through all headings at that level.
>
>As well, the Headings dialog box can sort a pages headings either
>alphabetically or in tab order; I am not sure if it can sort by heading
>level however.
>
>Freedom Scientific's online notes on page navigation can be found at:
>http://www.freedomscientific.com/training/Surfs-Up/Navigating.htm
>
>HTH
>
>JF
>
>
>
>
From: Travis Roth
Date: Thu, Dec 24 2009 12:00PM
Subject: Re: Headings
← Previous message | Next message →
"When JAWS reads "headings", will it read ALL headings regardless of level,
or can I tell JAWS to read only the <h1> and not the lower levels. Or only
<h1> and <h2> but not lower levels?"
If just doing a say-all, JAWS will read everything.
If you use the quick letter navigation key h it will move from heading to
heading. This will move to the next heading in a document regardless of
level.
You can use the numbers 1-9 to move to that level of heading, e.g., press 1
to move to the next heading 1. JAWS will not always skip over higher-level
headings when doing this. For example, if you have a document that has a H1,
H2, H3, H3, H3, H2, H3. And you press 3 to move among the H3 headings, JAWS
will not (usually) jump over the H2 to get to the last H3.
You can also press the quick navigation key s to move to similar elements.
So if currently focused on a H2, pressing s looks for the next H2. This does
seem to skip over higher-level headings unlike the discussion above.
However, I've not tested thoroughly between JAWS versions, and it seems to
me the skipping and not skipping rules change a bit from release to release.
This should be enough to get you started.
From: Pratik Patel
Date: Thu, Dec 24 2009 12:09PM
Subject: Re: Headings
← Previous message | Next message →
You wrote:
I tried to hit the key for the number of times for the heading level
but I couldn't get it to work, it just took me down as many headings
as I clicked which works for me since I go to the same sites a lot
and know how many headings are there before the main content. I
actually hold down the h key rather than tabbing as there is
less stress on my carpal tunnel.
Look at the method described by Hamish Mackenzie in this thread for
navigating through headings. There is a bug in at least JAWS 10 and 11
where JAWS misreports the number of headings in both Internet Explorer 7 and
8 as well as Firefox 3.x. Sometimes, JAWS says that there are no headings
on a page even though the page summary reports multiple headings. Other
times, the summary underreports the number of headings on a page. The usual
way to get around the bug is to use the ctrl+end keystroke to go to the end
of the page and start back up at the top by pressing ctrl+home. This
appears to reset whatever the reporting issue is. There are times when this
does not work. So far, I've not been able to discern any patterns to this
behavior.
Regards,
Pratik
From: Geof Collis
Date: Thu, Dec 24 2009 12:27PM
Subject: Re: Headings
← Previous message | Next message →
Hi Pratik
I'm noticed the same thing,I just put it down to the page not having
loaded completely before I start hitting keys and use the same
technique to start over.
cheers
Geof
From: ckrugman
Date: Thu, Dec 24 2009 4:39PM
Subject: Re: Headings
← Previous message | Next message →
It is generally up to the JAWS user to determine what and how it reads
content.
Chuck
----- Original Message -----
From: "Langum, Michael J" < = EMAIL ADDRESS REMOVED = >
To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, December 24, 2009 8:25 AM
Subject: Re: [WebAIM] Headings
> Here's another "headings" question.
>
> When JAWS reads "headings", will it read ALL headings regardless of level,
> or can I tell JAWS to read only the <h1> and not the lower levels. Or
> only <h1> and <h2> but not lower levels?
>
> I expect that this would make it much easier to "scan" a well structured
> document.
>
> -- Mike
>
From: Geof Collis
Date: Fri, Dec 25 2009 10:27AM
Subject: Headings
← Previous message | Next message →
Hi All
Unless I've read this wrong, Guideline
2.4.1Bypass Blocks allows me to use the layout I
have chosen for my Clients site see
http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html.
Bypass Blocks: A mechanism is available to bypass
blocks of content that are repeated on multiple Web pages. (Level A)
Creating links to skip blocks of repeated
material using one of the following techniques:
· G1: Adding a link at the top of each page
that goes directly to the main content area
· G123: Adding a link at the beginning of a
block of repeated content to go to the end of the block
· G124: Adding links at the top of the page to each area of the content
and
Grouping blocks of repeated material in a way
that can be skipped, using one of the following techniques:
H69: Providing heading elements at the beginning
of each section of content (HTML)
H50: Using structural elements to group links (HTML) (ie lists)
Notice that it says "one of the following" and not "all of the following"
cheers
Geof
Editor
Accessibility News
www.accessibilitynews.ca
Accessibility News International
www.accessibilitynewsinternational.com
From: Wayne Dick
Date: Fri, Dec 25 2009 2:39PM
Subject: Re: Headings
← Previous message | Next message →
I always use heading navigation. I don't include
skip links. I take as my cue, the 508 site of the
US Access Board:
http://www.access-board.gov/508.htm
The Access Board actually uses links and headings,
but to me it's like wearing a belt and suspenders.
Wayne
From: Geof Collis
Date: Fri, Dec 25 2009 4:03PM
Subject: Re: Headings
← Previous message | Next message →
Hi Wayne
I dont wear a belt and suspenders, I have hips to hold my pants up. :O)
What I smell here is a WebAim survey to discoverhow screen readrs
prefer their headings laid out, whether they like to tab endlessly
until they find the content or if they like the first heading to be
the main content. I dont want this confused with the idea that the
main content be at the top of the page followed by everything else,
I'm no fan of that either.
Sure we hacve choices in whether we put a heading on a section or
not but as I have said, I dont like having to tab 5 and 6 headings
deep to find the content and it would be nice to know from screen
reader users if I am the only one and if it is well meaning sighted
people reading guidelines who feel they need to follow them to the letter.
Some on this list have suggested that they would put headings on the
search box and the navigation but they left out the "translate"
section so all of a sudden we now have 4 headings before we reach the
actual content.
cheers
Geof
At 04:37 PM 12/25/2009, you wrote:
>I always use heading navigation. I don't include
>skip links. I take as my cue, the 508 site of the
>US Access Board:
>
>http://www.access-board.gov/508.htm
>
>The Access Board actually uses links and headings,
>but to me it's like wearing a belt and suspenders.
>
>Wayne
>
From: Geof Collis
Date: Fri, Dec 25 2009 6:09PM
Subject: Re: Headings
← Previous message | Next message →
Hi wayne
Further to your post saying you dont use skip
linkds I submit the following from
http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html
Specific Benefits of Success Criterion 2.4.1:
· When this Success Criterion is not
satisfied, it may be difficult for people with
some disabilities to reach the main content of a Web page quickly and easily.
· Screen reader users who visit several
pages on the same site can avoid having to hear
all heading graphics and dozens of navigation
links on every page before the main content is spoken.
· People who use only the keyboard or a
keyboard interface can reach content with fewer
keystrokes. Otherwise, they might have to make
dozens of keystrokes before reaching a link in
the main content area. This can take a long time
and may cause severe physical pain for some users.
· People who use screen magnifiers do not
have to search through the same headings or other
blocks of information to find where the content
begins each time they enter a new page.
· People with cognitive limitations as well
as people who use screen readers may benefit when links are grouped into lists
cheers
Geof
From: David Andrews
Date: Fri, Dec 25 2009 6:45PM
Subject: Re: Headings
← Previous message | Next message →
The h command jumps to the next head, from your current position,
despite the level. So pressing h 3 times wouldn't jump to a level 3
heading -- it would jump to the third heading below where you are.
The numbers, 1 2 3 ... jump to the first heading corresponding to
that number, given that there isn't a lower level heading first. Say
there are some headings, in this order 4 5 3 4
and you are before the first 4. If you hit 4, it will go to the
first 4. If you then hit 3 it will jump to the 3. If you were,
instead to hit 4 again, it would say not found, because a 3, lower
level heading, was between. You would have to hit 3, then 4.
Hope that all makes sense.
Dave
At 12:26 PM 12/24/2009, you wrote:
>Geof Collis wrote:
> >
> > I'm not aware if JAWS can pick and choose headings but I wouldn't
> > want it to pick only H1's there are times when I need to get to a
> > certain part of an article that might be a H2 or H3 and I rarely
> > use the JAWS Heading command, of course this is my personal choice.
>
>NOTE: I am not a daily JAWS user!
>
>However it is my understanding that navigating headings in JAWS allows you
>to focus in on a heading level by pressing H the required number of times
>- for example to get to level 2 headings press H twice, level 3 headings
>press 3 times, etc. Once you get to that level you can press the
>associated number key to browse through all headings at that level.
>
>As well, the Headings dialog box can sort a pages headings either
>alphabetically or in tab order; I am not sure if it can sort by heading
>level however.
>
>Freedom Scientific's online notes on page navigation can be found at:
>http://www.freedomscientific.com/training/Surfs-Up/Navigating.htm
>
>HTH
>
>JF
From: Jorge Fernandes
Date: Mon, Jan 04 2010 12:06PM
Subject: Re: Headings
← Previous message | Next message →
Hi,
According to WCAG2.0 seems me that Geoff is right: hierarchy headings
are to apply in main content of the page and not to navigation titles
that surround it.
But semantically, what is a navigation title?
In a navigation scheme my thought is that we are semantically in
presence of a definition term, where "main navigation" is the <dt>
(definition term) and the options are the <dd> (definition data). So,
something like:
<dl>
<dt>Main menu</dt>
<dd>
<ul>
<li>option 1</li>
<li>option n</li>
</ul>
</dd>
</dl>
In that way the user agent always "know" that are in "option n" of
"main menu". This kind of semantic structure give context to the user
agent.
What do you think about this construct?
Regards,
Jorge Fernandes
++início do rodapé
Jorge Fernandes | = EMAIL ADDRESS REMOVED =
UniversalAccess.blogspot.com
On 21 Dec 2009, at 21:06, Geof Collis wrote:
> Hi Andrew
>
> I think the argument here is that my navigation are supposed to be
> headings, but I dont see it that way, navigation is navigation and
> then there is content. I dont see a need to use headings as I have
> said before, all I have is bold text to signify that it is a mainn
> navigation and categories, if I chose not to put any text then there
> would be no need to put headings at all.
>
> cheers
>
> Geof
>
>
>
> At 03:59 PM 12/21/2009, you wrote:
>> Geof,
>> Maybe you already fixed it, but when I look at the code I see one
>> <h1> and two <h2> elements, and in my book those count as headings.
>>
>> Thanks,
>> AWK
>>
>> Andrew Kirkpatrick
>>
>> Senior Product Manager, Accessibility
>>
>> Adobe Systems
>>
>> = EMAIL ADDRESS REMOVED =
>>
>>
>>
From: Geof Collis
Date: Mon, Jan 04 2010 12:18PM
Subject: Re: Headings
← Previous message | Next message →
Hi George
Interesting idea. :O)
cheers
Geof
At 02:05 PM 1/4/2010, you wrote:
>Hi,
>
>According to WCAG2.0 seems me that Geoff is right: hierarchy headings
>are to apply in main content of the page and not to navigation titles
>that surround it.
>
>But semantically, what is a navigation title?
>
>In a navigation scheme my thought is that we are semantically in
>presence of a definition term, where "main navigation" is the <dt>
>(definition term) and the options are the <dd> (definition data). So,
>something like:
>
><dl>
><dt>Main menu</dt>
><dd>
><ul>
><li>option 1</li>
><li>option n</li>
></ul>
></dd>
></dl>
>
>In that way the user agent always "know" that are in "option n" of
>"main menu". This kind of semantic structure give context to the user
>agent.
>
>What do you think about this construct?
>
>Regards,
>Jorge Fernandes
>
>++início do rodapé
>Jorge Fernandes | = EMAIL ADDRESS REMOVED =
>UniversalAccess.blogspot.com
>
>
>On 21 Dec 2009, at 21:06, Geof Collis wrote:
>
> > Hi Andrew
> >
> > I think the argument here is that my navigation are supposed to be
> > headings, but I dont see it that way, navigation is navigation and
> > then there is content. I dont see a need to use headings as I have
> > said before, all I have is bold text to signify that it is a mainn
> > navigation and categories, if I chose not to put any text then there
> > would be no need to put headings at all.
> >
> > cheers
> >
> > Geof
> >
> >
> >
> > At 03:59 PM 12/21/2009, you wrote:
> >> Geof,
> >> Maybe you already fixed it, but when I look at the code I see one
> >> <h1> and two <h2> elements, and in my book those count as headings.
> >>
> >> Thanks,
> >> AWK
> >>
> >> Andrew Kirkpatrick
> >>
> >> Senior Product Manager, Accessibility
> >>
> >> Adobe Systems
> >>
> >> = EMAIL ADDRESS REMOVED =
> >>
> >>
> >>
From: Geof Collis
Date: Mon, Jan 04 2010 7:09PM
Subject: Re: Headings
← Previous message | Next message →
Hi All
I kind of like Georges' example and have put it
into practice on my local server, it works well
but I'm not very familiar with definition lists
and wonder if it is the proper use and
construction? Will it pass WCAG? The example I
cited a while back only said ul and ol were accepted.
cheers
Geof
At 02:05 PM 1/4/2010, you wrote:
>Hi,
>
>According to WCAG2.0 seems me that Geoff is right: hierarchy headings
>are to apply in main content of the page and not to navigation titles
>that surround it.
>
>But semantically, what is a navigation title?
>
>In a navigation scheme my thought is that we are semantically in
>presence of a definition term, where "main navigation" is the <dt>
>(definition term) and the options are the <dd> (definition data). So,
>something like:
>
><dl>
><dt>Main menu</dt>
><dd>
><ul>
><li>option 1</li>
><li>option n</li>
></ul>
></dd>
></dl>
>
>In that way the user agent always "know" that are in "option n" of
>"main menu". This kind of semantic structure give context to the user
>agent.
>
>What do you think about this construct?
>
>Regards,
>Jorge Fernandes
>
>++início do rodapé
>Jorge Fernandes | = EMAIL ADDRESS REMOVED =
>UniversalAccess.blogspot.com
>
>
>On 21 Dec 2009, at 21:06, Geof Collis wrote:
>
> > Hi Andrew
> >
> > I think the argument here is that my navigation are supposed to be
> > headings, but I dont see it that way, navigation is navigation and
> > then there is content. I dont see a need to use headings as I have
> > said before, all I have is bold text to signify that it is a mainn
> > navigation and categories, if I chose not to put any text then there
> > would be no need to put headings at all.
> >
> > cheers
> >
> > Geof
> >
> >
> >
> > At 03:59 PM 12/21/2009, you wrote:
> >> Geof,
> >> Maybe you already fixed it, but when I look at the code I see one
> >> <h1> and two <h2> elements, and in my book those count as headings.
> >>
> >> Thanks,
> >> AWK
> >>
> >> Andrew Kirkpatrick
> >>
> >> Senior Product Manager, Accessibility
> >>
> >> Adobe Systems
> >>
> >> = EMAIL ADDRESS REMOVED =
> >>
> >>
> >>
From: Jorge Fernandes
Date: Tue, Jan 05 2010 4:42AM
Subject: Re: Headings
← Previous message | Next message →
Hi Geof,
You could see an example at: www.acapo.pt (portuguese blind
association).
--jorge fernandes
++início do rodapé
Jorge Fernandes | = EMAIL ADDRESS REMOVED =
UniversalAccess.blogspot.com
On 5 Jan 2010, at 01:45, Geof Collis wrote:
> Hi All
>
> I kind of like Georges' example and have put it
> into practice on my local server, it works well
> but I'm not very familiar with definition lists
> and wonder if it is the proper use and
> construction? Will it pass WCAG? The example I
> cited a while back only said ul and ol were accepted.
>
> cheers
>
> Geof
>
>
>
> At 02:05 PM 1/4/2010, you wrote:
>> Hi,
>>
>> According to WCAG2.0 seems me that Geoff is right: hierarchy headings
>> are to apply in main content of the page and not to navigation titles
>> that surround it.
>>
>> But semantically, what is a navigation title?
>>
>> In a navigation scheme my thought is that we are semantically in
>> presence of a definition term, where "main navigation" is the <dt>
>> (definition term) and the options are the <dd> (definition data). So,
>> something like:
>>
>> <dl>
>> <dt>Main menu</dt>
>> <dd>
>> <ul>
>> <li>option 1</li>
>> <li>option n</li>
>> </ul>
>> </dd>
>> </dl>
>>
>> In that way the user agent always "know" that are in "option n" of
>> "main menu". This kind of semantic structure give context to the user
>> agent.
>>
>> What do you think about this construct?
>>
>> Regards,
>> Jorge Fernandes
>>
>> ++início do rodapé
>> Jorge Fernandes | = EMAIL ADDRESS REMOVED =
>> UniversalAccess.blogspot.com
>>
>>
>> On 21 Dec 2009, at 21:06, Geof Collis wrote:
>>
>>> Hi Andrew
>>>
>>> I think the argument here is that my navigation are supposed to be
>>> headings, but I dont see it that way, navigation is navigation and
>>> then there is content. I dont see a need to use headings as I have
>>> said before, all I have is bold text to signify that it is a mainn
>>> navigation and categories, if I chose not to put any text then
>>> there
>>> would be no need to put headings at all.
>>>
>>> cheers
>>>
>>> Geof
>>>
>>>
>>>
>>> At 03:59 PM 12/21/2009, you wrote:
>>>> Geof,
>>>> Maybe you already fixed it, but when I look at the code I see one
>>>> <h1> and two <h2> elements, and in my book those count as headings.
>>>>
>>>> Thanks,
>>>> AWK
>>>>
>>>> Andrew Kirkpatrick
>>>>
>>>> Senior Product Manager, Accessibility
>>>>
>>>> Adobe Systems
>>>>
>>>> = EMAIL ADDRESS REMOVED =
>>>>
>>>>
>>>>
From: Geof Collis
Date: Tue, Jan 05 2010 5:36AM
Subject: Re: Headings
← Previous message | Next message →
Hi George
Dont understand the language but I get the drift
of it, works like the dummy one I set up on my
computer. I like it because I just hit my list
command, JAWS tells me it's a definition list and
one tab later tells me it is the main menu.
cheers
Geof
At 06:42 AM 1/5/2010, you wrote:
>Hi Geof,
>
>You could see an example at: www.acapo.pt (portuguese blind
>association).
>
>--jorge fernandes
>
>++início do rodapé
>Jorge Fernandes | = EMAIL ADDRESS REMOVED =
>UniversalAccess.blogspot.com
>
>
>On 5 Jan 2010, at 01:45, Geof Collis wrote:
>
> > Hi All
> >
> > I kind of like Georges' example and have put it
> > into practice on my local server, it works well
> > but I'm not very familiar with definition lists
> > and wonder if it is the proper use and
> > construction? Will it pass WCAG? The example I
> > cited a while back only said ul and ol were accepted.
> >
> > cheers
> >
> > Geof
> >
> >
> >
> > At 02:05 PM 1/4/2010, you wrote:
> >> Hi,
> >>
> >> According to WCAG2.0 seems me that Geoff is right: hierarchy headings
> >> are to apply in main content of the page and not to navigation titles
> >> that surround it.
> >>
> >> But semantically, what is a navigation title?
> >>
> >> In a navigation scheme my thought is that we are semantically in
> >> presence of a definition term, where "main navigation" is the <dt>
> >> (definition term) and the options are the <dd> (definition data). So,
> >> something like:
> >>
> >> <dl>
> >> <dt>Main menu</dt>
> >> <dd>
> >> <ul>
> >> <li>option 1</li>
> >> <li>option n</li>
> >> </ul>
> >> </dd>
> >> </dl>
> >>
> >> In that way the user agent always "know" that are in "option n" of
> >> "main menu". This kind of semantic structure give context to the user
> >> agent.
> >>
> >> What do you think about this construct?
> >>
> >> Regards,
> >> Jorge Fernandes
> >>
> >> ++início do rodapé
> >> Jorge Fernandes | = EMAIL ADDRESS REMOVED =
> >> UniversalAccess.blogspot.com
> >>
> >>
> >> On 21 Dec 2009, at 21:06, Geof Collis wrote:
> >>
> >>> Hi Andrew
> >>>
> >>> I think the argument here is that my navigation are supposed to be
> >>> headings, but I dont see it that way, navigation is navigation and
> >>> then there is content. I dont see a need to use headings as I have
> >>> said before, all I have is bold text to signify that it is a mainn
> >>> navigation and categories, if I chose not to put any text then
> >>> there
> >>> would be no need to put headings at all.
> >>>
> >>> cheers
> >>>
> >>> Geof
> >>>
> >>>
> >>>
> >>> At 03:59 PM 12/21/2009, you wrote:
> >>>> Geof,
> >>>> Maybe you already fixed it, but when I look at the code I see one
> >>>> <h1> and two <h2> elements, and in my book those count as headings.
> >>>>
> >>>> Thanks,
> >>>> AWK
> >>>>
> >>>> Andrew Kirkpatrick
> >>>>
> >>>> Senior Product Manager, Accessibility
> >>>>
> >>>> Adobe Systems
> >>>>
> >>>> = EMAIL ADDRESS REMOVED =
> >>>>
> >>>>
> >>>>
From: Chris Hoffman
Date: Tue, Jan 05 2010 7:06PM
Subject: Re: Headings
← Previous message | Next message →
On Mon, Jan 4, 2010 at 2:05 PM, Jorge Fernandes < = EMAIL ADDRESS REMOVED = > wrote:
> In a navigation scheme my thought is that we are semantically in
> presence of a definition term, where "main navigation" is the <dt>
> (definition term) and the options are the <dd> (definition data).
I can't help but feel a little uncomfortable using definition lists
like this. A list of links does not define the term "main menu". On a
close reading of the HTML spec, it turns out that H1, H2, H3, etc.
headings are very similar to DT elements. Both types of elements, for
example, contain inline content that gets associated with the
block-level content underneath it. The primary difference is in the
_direction_ of that association. Here's what the HTML 4.01 spec says
about headings:
"A heading element briefly describes the topic of the section it introduces."
And here is what it says about definition lists:
"Definition lists vary only slightly from other types of lists in that
list items consist of two parts: a term and a description."
So a heading element describes the content that follows it, while a DT
_is described by_ the content that follows it. Ergo, since the term
"main menu" describes the list of links that follows it, it should be
a heading and not a DT.
In short, I think it's dangerous to stretch the semantics of elements
in order to overcome problems with user agents.
--Chris
From: Geof Collis
Date: Wed, Jan 06 2010 7:18AM
Subject: Re: Headings
← Previous message | Next message →
Hi Chris
Thanks for this! I dont like using markup for anything but its
intended use, even though I like the idea and it works well.
cheers
Geof
From: Jorge Fernandes
Date: Thu, Jan 07 2010 2:51PM
Subject: Re: Headings
← Previous message | No next message
On 6 Jan 2010, at 02:04, Chris Hoffman wrote:
> So a heading element describes the content that follows it, while a DT
> _is described by_ the content that follows it. Ergo, since the term
> "main menu" describes the list of links that follows it, it should be
> a heading and not a DT.
I get the point, but...
Why "main menu" couldn't be _described by_ the content that follows?
It is either usual we found some styles that present only the words
"main menu" with options avoided. The options only appear when we
click/enter/ask what is "main menu". "Main menu" seems me more
something that need a definition than a describe.
I'm doubt. Here www.acesso.umic.pt I'm using only headings.
Thanks,
--Jorge Fernandes