E-mail List Archives
Thread: images as page headings
Number of posts in this thread: 8 (In chronological order)
From: Anthony Webster
Date: Fri, Oct 24 2003 3:52AM
Subject: images as page headings
No previous message | Next message →
Hi,
I have headings on a page that are actually images (because my client's marketing dept wants the headings in their particular corporate font). From searching the list archives I have seen someone suggest:
<h1><img src="welcome.gif" width="200" height="30" alt="Welcome" border="0"></h1>
Is this helpful to users of screen readers, or should I leave out the h1 tags?
Thanks
Ant
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: Jukka K. Korpela
Date: Fri, Oct 24 2003 4:56AM
Subject: Re: images as page headings
← Previous message | Next message →
On Fri, 24 Oct 2003, Anthony Webster wrote:
> I have headings on a page that are actually images (because my client's
> marketing dept wants the headings in their particular corporate font).
The WAI guidelines tell us to "avoid using images to represent text
-- use text and style sheets instead" (under checkpoint 3.1).
But there's a change to this in the "Errata" at
http://www.w3.org/WAI/GL/WAI-WEBCONTENT-ERRATA
which restricts the rule to raster-based images (but other considerations
of course make this restriction rather irrelevant at present) and also
says:
"You may use text in images when:
- the text does not convey its literal meaning but has a more graphical
function, such as a logo and
- the effect can not be achieved with CSS and
- you have provided a text equivalent for the image."
If the client keeps wanting the headings in their corporate font, and if
Web fonts are not a feasible solution to this, it's probably not that
serious to accessibility, when adequate precautions are taken.
Hopefully the text in the images is readable to all, including people with
low vision or with color-blindness.
From searching the list archives I have seen someone suggest:
>
> <h1><img src="welcome.gif" width="200" height="30" alt="Welcome"
> border="0"></h1>
(The border attribute is pointless here, since the image is not a link.)
Wait a minute... "Welcome"? Is it really a _heading_? Is it good food for
indexing robots, and does it make sense in a browser-generated list of all
headings?
I'm not sure whether "Welcome" is a good idea in the first place on a Web
page - it sounds somewhat amateurish and not as polite as it may sound.
Getting to the point might be more polite.
But assuming there is a _greeting_, I would not regard it as a _heading_.
Rather, I would use just <div> markup around the <img>. You might still
use CSS to try and make it look different from normal text, maybe in
bigger font, imitating the presentation in the image. This would help
people who see it on an advanced graphic browser with display of images
disabled. It's marginally an accessibility issue too, since it may help
to distinguish different types of messages by their visual appearance,
especially if you have cognitive problems.
If an image is really used as a heading for a page, say "New products from
Acme", then <h1> is the adequate markup. It helps search engines, it helps
people viewing the page on a graphic browser without images (since it
greatly helps them to recognize the text as a heading), and it helps
people using speech browsers which recognize h1 markup and present the
text e.g. in a slower and lower voice and with a clear pause after it
(or whatever they do in order to convey the idea of a heading).
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: julian.rickards@ndm.gov.on.ca
Date: Fri, Oct 24 2003 6:53AM
Subject: RE: images as page headings
← Previous message | Next message →
I agree with Jukka's points, all of them including the one I was going to
make about whether Welcome should be given the rank of <h1>. <h1> is the top
level heading and essentially, the title for the page which generally is not
the case for "Welcome". Think of a book, it is not likely that the title of
the first chapter is welcome, if welcome is used, it often is part of a
forward, not the main material. I would ask you to examine the rest of the
material on the "Welcome" page and create another title or <h1> that
describes the rest of the material on the page such as Mission Statement.
---------------------------------------------------------
Julian Rickards
Digital Publications Distribution Coordinator
Publications Services Section
Ontario Ministry of Northern Development and Mines
Phone: (705) 670-5608
Fax: (705) 670-5690
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: Nancy Swenson
Date: Fri, Oct 24 2003 6:54AM
Subject: RE: images as page headings
← Previous message | Next message →
Hello,
I am in IDL6543 today and will not be available. I will be back in the
office on Monday and will reply to your e-mail at that time.
Thank you,
Nancy
Nancy Swenson
Instructional Designer
Course Development and Web Services
University of Central Florida
4000 Central Florida Blvd.
Library Rm 107
Orlando, FL 32816-2810
407-823-4270
FAX: 407-823-3511
Email: = EMAIL ADDRESS REMOVED =
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: Anthony Webster
Date: Fri, Oct 24 2003 7:24AM
Subject: RE: images as page headings
← Previous message | Next message →
ok thanks. The font size is nice and big and there is plenty of contrast so I will leave it as it is for now.
> The WAI guidelines tell us to "avoid using images to represent text
> -- use text and style sheets instead" (under checkpoint 3.1).
> But there's a change to this in the "Errata" at
> http://www.w3.org/WAI/GL/WAI-WEBCONTENT-ERRATA
> which restricts the rule to raster-based images (but other
> considerations
> of course make this restriction rather irrelevant at present) and also
> says:
> "You may use text in images when:
> - the text does not convey its literal meaning but has a more
> graphical
> function, such as a logo and
> - the effect can not be achieved with CSS and
> - you have provided a text equivalent for the image."
>
> If the client keeps wanting the headings in their corporate
> font, and if
> Web fonts are not a feasible solution to this, it's probably not that
> serious to accessibility, when adequate precautions are taken.
> Hopefully the text in the images is readable to all,
> including people with
> low vision or with color-blindness.>
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: John Foliot - WATS.ca
Date: Fri, Oct 24 2003 12:42PM
Subject: RE: images as page headings
← Previous message | Next message →
Ant,
I have had occasion to do this as well, and after some testing found that
the following worked best:
<h2 title="Wedding Resources"><a name="links"><img
src="images/wedding_resources.jpg" width="450" height="80" border="0"
alt="Wedding Resources"></a></h2>
(source: http://www.allseasonsweddings.com/resources.html)
I found that by adding the Title attribute to the <h> element ensured that
the structural and semantic logic remained intact when images were disabled
or when viewed in a text only browser (Lynx). Thus, screen reading
technologies too will access the structural meaning of the header.
Another method suggested (and favoured by Zeldman et al) is known as the FIR
(Fahrner Image Replacement) method. However Joe Clark has apparently
documented problems with this method on the latest ALA report, and while I
have not read all of it, it's on my list of things to do. Apparently YMMV.
(http://www.alistapart.com/articles/fir/)
HTH
JF
--
John Foliot = EMAIL ADDRESS REMOVED =
Web Accessibility Specialist / Co-founder of WATS.ca
Web Accessibility Testing and Services
http://www.wats.ca 1.866.932.4878 (North America)
> -----Original Message-----
> From: Anthony Webster [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: Friday, October 24, 2003 5:43 AM
> To: = EMAIL ADDRESS REMOVED =
> Subject: images as page headings
>
>
> Hi,
>
> I have headings on a page that are actually images (because my
> client's marketing dept wants the headings in their particular
> corporate font). From searching the list archives I have seen
> someone suggest:
>
> <h1><img src="welcome.gif" width="200" height="30" alt="Welcome"
> border="0"></h1>
>
> Is this helpful to users of screen readers, or should I leave out
> the h1 tags?
>
> Thanks
>
> Ant
>
>
> ----
> To subscribe, unsubscribe, suspend, or view list archives,
> visit http://www.webaim.org/discussion/
>
>
>
>
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: julian.rickards@ndm.gov.on.ca
Date: Fri, Oct 24 2003 12:46PM
Subject: RE: images as page headings
← Previous message | Next message →
Regarding Joe Clark's assessment of the FIR, changes in the implementation
of the FIR technique have been quite rapid and other techniques which may
prove to be more accessible have been devised. Don't forget to read the
comments about these alternate implementations of the FIR technique.
---------------------------------------------------------
Julian Rickards
Digital Publications Distribution Coordinator
Publications Services Section
Ontario Ministry of Northern Development and Mines
Phone: (705) 670-5608
Fax: (705) 670-5690
> -----Original Message-----
> From: John Foliot - WATS.ca [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: Friday, October 24, 2003 2:36 PM
> To: = EMAIL ADDRESS REMOVED =
> Subject: RE: images as page headings
>
>
> Ant,
>
> I have had occasion to do this as well, and after some
> testing found that
> the following worked best:
>
> <h2 title="Wedding Resources"><a name="links"><img
> src="images/wedding_resources.jpg" width="450" height="80" border="0"
> alt="Wedding Resources"></a></h2>
> (source: http://www.allseasonsweddings.com/resources.html)
>
> I found that by adding the Title attribute to the <h> element
> ensured that
> the structural and semantic logic remained intact when images
> were disabled
> or when viewed in a text only browser (Lynx). Thus, screen reading
> technologies too will access the structural meaning of the header.
>
> Another method suggested (and favoured by Zeldman et al) is
> known as the FIR
> (Fahrner Image Replacement) method. However Joe Clark has apparently
> documented problems with this method on the latest ALA
> report, and while I
> have not read all of it, it's on my list of things to do.
> Apparently YMMV.
> (http://www.alistapart.com/articles/fir/)
>
> HTH
>
> JF
> --
> John Foliot = EMAIL ADDRESS REMOVED =
> Web Accessibility Specialist / Co-founder of WATS.ca
> Web Accessibility Testing and Services
> http://www.wats.ca 1.866.932.4878 (North America)
>
>
>
>
> > -----Original Message-----
> > From: Anthony Webster [mailto: = EMAIL ADDRESS REMOVED = ]
> > Sent: Friday, October 24, 2003 5:43 AM
> > To: = EMAIL ADDRESS REMOVED =
> > Subject: images as page headings
> >
> >
> > Hi,
> >
> > I have headings on a page that are actually images (because my
> > client's marketing dept wants the headings in their particular
> > corporate font). From searching the list archives I have seen
> > someone suggest:
> >
> > <h1><img src="welcome.gif" width="200" height="30" alt="Welcome"
> > border="0"></h1>
> >
> > Is this helpful to users of screen readers, or should I leave out
> > the h1 tags?
> >
> > Thanks
> >
> > Ant
> >
> >
> > ----
> > To subscribe, unsubscribe, suspend, or view list archives,
> > visit http://www.webaim.org/discussion/
> >
> >
> >
> >
>
>
>
> ----
> To subscribe, unsubscribe, suspend, or view list archives,
> visit http://www.webaim.org/discussion/
>
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: Ineke van der Maat
Date: Fri, Oct 24 2003 1:58PM
Subject: Re: images as page headings
← Previous message | No next message
Hello John,
http://www.allseasonsweddings.com/resources.html
<h2 title="Wedding Resources"><a name="links"><img
> src="images/wedding_resources.jpg" width="450" height="80" border="0"
> alt="Wedding Resources"></a></h2>
> (source: http://www.allseasonsweddings.com/resources.html)
I thought that alt text must replace the image but I cannot read the
complete text that is in the image. ("All sesons wedding ceremonies" is
not what I can read/see as sighted visitor).
Because this image retuns on every page, I should do this <p
class="Logo"><img src="... /></p>
and <h1>Prayers, readings and vows</h1> but to get a logical textorder,
you need to change the text a bit.
Besides Opera 7 only shows a big white desert.
greetings
Ineke van der Maat
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/