E-mail List Archives
Thread: image with alt as H1 content?
Number of posts in this thread: 7 (In chronological order)
From: Rick Hill
Date: Mon, Nov 14 2011 4:39PM
Subject: image with alt as H1 content?
No previous message | Next message →
Just checking. Is this syntax OK for compliance. Assuming we want an H1 at top of pages that display a graphic log that is a link but have a text fall back:
<h1><a href="index.html"><img src="logo.png" width="100" height="100" alt="Home page" /></a></h1>
I understand a "better" method might be to have a background image overlaying the h1 text, but this is more convenient for the purposes of deploying this in a CMS with many sites having different logos/headings …
–––––––––––––––––––––––––––––––––––––––
Rick
From: Ryan E. Benson
Date: Mon, Nov 14 2011 4:54PM
Subject: Re: image with alt as H1 content?
← Previous message | Next message →
I would take it a step further and deploy a method such as
http://pmob.co.uk/temp/headerreplacement3.htm or one listed at:
http://www.mezzoblue.com/tests/revised-image-replacement/
--
Ryan E. Benson
On Mon, Nov 14, 2011 at 6:52 PM, Vincent Young < = EMAIL ADDRESS REMOVED = > wrote:
> Syntax looks good to me. I think using an inline image is appropriate here
> because in high contrast mode the logo will be displayed which could help
> with general page/site orientation.
>
> On Mon, Nov 14, 2011 at 3:38 PM, Rick Hill < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Just checking. Is this syntax OK for compliance. Assuming we want an H1 at
>> top of pages that display a graphic log that is a link but have a text fall
>> back:
>>
>> <h1><a href="index.html"><img src="logo.png" width="100" height="100"
>> alt="Home page" /></a></h1>
>>
>> I understand a "better" method might be to have a background image
>> overlaying the h1 text, but this is more convenient for the purposes of
>> deploying this in a CMS with many sites having different logos/headings …
>> –––––––––––––––––––––––––––––––––––––––
>> Rick
>>
From: Vincent Young
Date: Mon, Nov 14 2011 5:00PM
Subject: Re: image with alt as H1 content?
← Previous message | Next message →
Syntax looks good to me. I think using an inline image is appropriate here
because in high contrast mode the logo will be displayed which could help
with general page/site orientation.
On Mon, Nov 14, 2011 at 3:38 PM, Rick Hill < = EMAIL ADDRESS REMOVED = > wrote:
> Just checking. Is this syntax OK for compliance. Assuming we want an H1 at
> top of pages that display a graphic log that is a link but have a text fall
> back:
>
> <h1><a href="index.html"><img src="logo.png" width="100" height="100"
> alt="Home page" /></a></h1>
>
> I understand a "better" method might be to have a background image
> overlaying the h1 text, but this is more convenient for the purposes of
> deploying this in a CMS with many sites having different logos/headings …
> –––––––––––––––––––––––––––––––––––––––
> Rick
>
From: Vincent Young
Date: Mon, Nov 14 2011 5:09PM
Subject: Re: image with alt as H1 content?
← Previous message | Next message →
Good techniques. As Rick stated, there are other techniques he is aware
of that involve background images, but I wouldn't stress over implementing
these techniques. What you're doing is sufficient for your particular CMS
situation.
On Mon, Nov 14, 2011 at 3:55 PM, Ryan E. Benson < = EMAIL ADDRESS REMOVED = >wrote:
> I would take it a step further and deploy a method such as
> http://pmob.co.uk/temp/headerreplacement3.htm or one listed at:
> http://www.mezzoblue.com/tests/revised-image-replacement/
>
> --
> Ryan E. Benson
>
>
>
> On Mon, Nov 14, 2011 at 6:52 PM, Vincent Young < = EMAIL ADDRESS REMOVED = >
> wrote:
> > Syntax looks good to me. I think using an inline image is appropriate
> here
> > because in high contrast mode the logo will be displayed which could help
> > with general page/site orientation.
> >
> > On Mon, Nov 14, 2011 at 3:38 PM, Rick Hill < = EMAIL ADDRESS REMOVED = > wrote:
> >
> >> Just checking. Is this syntax OK for compliance. Assuming we want an H1
> at
> >> top of pages that display a graphic log that is a link but have a text
> fall
> >> back:
> >>
> >> <h1><a href="index.html"><img src="logo.png" width="100" height="100"
> >> alt="Home page" /></a></h1>
> >>
> >> I understand a "better" method might be to have a background image
> >> overlaying the h1 text, but this is more convenient for the purposes of
> >> deploying this in a CMS with many sites having different logos/headings
> …
> >> –––––––––––––––––––––––––––––––––––––––
> >> Rick
> >>
From: Maraikayar Prem Nawaz
Date: Mon, Nov 14 2011 10:09PM
Subject: Re: image with alt as H1 content?
← Previous message | Next message →
Hi,
Fae rule set says
Each h1 element should have text content exclusive of the alt text of any
img elements it contains.
http://fae.cita.uiuc.edu/about/rules/
with the FAE FF add on, it would show a warning message as
Warning: The text content of an h1 element should not come solely from the
alt attribute of the img elements
Also wouldn't it be problematic for the outline logic by some screen
readers, where it would show the list of headings
For e.g. Jaws would announce "Home page Heading level 1 graphic"
Please clarify..
Regards
-Nawaz
On Tue, Nov 15, 2011 at 5:38 AM, Vincent Young < = EMAIL ADDRESS REMOVED = >wrote:
> Good techniques. As Rick stated, there are other techniques he is aware
> of that involve background images, but I wouldn't stress over implementing
> these techniques. What you're doing is sufficient for your particular CMS
> situation.
>
> On Mon, Nov 14, 2011 at 3:55 PM, Ryan E. Benson < = EMAIL ADDRESS REMOVED =
> >wrote:
>
> > I would take it a step further and deploy a method such as
> > http://pmob.co.uk/temp/headerreplacement3.htm or one listed at:
> > http://www.mezzoblue.com/tests/revised-image-replacement/
> >
> > --
> > Ryan E. Benson
> >
> >
> >
> > On Mon, Nov 14, 2011 at 6:52 PM, Vincent Young < = EMAIL ADDRESS REMOVED = >
> > wrote:
> > > Syntax looks good to me. I think using an inline image is appropriate
> > here
> > > because in high contrast mode the logo will be displayed which could
> help
> > > with general page/site orientation.
> > >
> > > On Mon, Nov 14, 2011 at 3:38 PM, Rick Hill < = EMAIL ADDRESS REMOVED = > wrote:
> > >
> > >> Just checking. Is this syntax OK for compliance. Assuming we want an
> H1
> > at
> > >> top of pages that display a graphic log that is a link but have a text
> > fall
> > >> back:
> > >>
> > >> <h1><a href="index.html"><img src="logo.png" width="100" height="100"
> > >> alt="Home page" /></a></h1>
> > >>
> > >> I understand a "better" method might be to have a background image
> > >> overlaying the h1 text, but this is more convenient for the purposes
> of
> > >> deploying this in a CMS with many sites having different
> logos/headings
> > …
> > >> –––––––––––––––––––––––––––––––––––––––
> > >> Rick
> > >>
From: Vincent Young
Date: Mon, Nov 14 2011 10:48PM
Subject: Re: image with alt as H1 content?
← Previous message | Next message →
I just ran
http://www.webhipster.com/testing/accessibility/heading/index.html through
the following AMP, WAVE, CynthiaSays, FireEyes and the mark-up passed.
Rick is asking about compliance and FAE is not reporting on compliance. I
think the important thing to remember is the original question:
Is this syntax OK for compliance. <h1><a href="index.html"><img
src="logo.png" width="100" height="100" alt="Home page" /></a></h1>
along with:
I understand a "better" method might be to have a background image
overlaying the h1 text, but this is more convenient for the purposes of
deploying this in a CMS with many sites having different logos/headings …
Rick seems to be aware of other techniques that might be better for
accessibility, but as he stated, this is not his only consideration. I'm
guessing the amount of work to implement these other techniques is not
worth it at the moment. Rick I think you are on the right track. Tackle
some bigger and more important fish with the CMS such as, titles, alt
images, forms, etc. but take note of this and come back to it when you have
the time and resources.
On Mon, Nov 14, 2011 at 9:08 PM, Maraikayar Prem Nawaz < = EMAIL ADDRESS REMOVED = >wrote:
> Hi,
> Fae rule set says
> Each h1 element should have text content exclusive of the alt text of any
> img elements it contains.
> http://fae.cita.uiuc.edu/about/rules/
> with the FAE FF add on, it would show a warning message as
> Warning: The text content of an h1 element should not come solely from the
> alt attribute of the img elements
>
> Also wouldn't it be problematic for the outline logic by some screen
> readers, where it would show the list of headings
> For e.g. Jaws would announce "Home page Heading level 1 graphic"
>
> Please clarify..
>
> Regards
> -Nawaz
>
> On Tue, Nov 15, 2011 at 5:38 AM, Vincent Young < = EMAIL ADDRESS REMOVED =
> >wrote:
>
> > Good techniques. As Rick stated, there are other techniques he is aware
> > of that involve background images, but I wouldn't stress over
> implementing
> > these techniques. What you're doing is sufficient for your particular
> CMS
> > situation.
> >
> > On Mon, Nov 14, 2011 at 3:55 PM, Ryan E. Benson < = EMAIL ADDRESS REMOVED =
> > >wrote:
> >
> > > I would take it a step further and deploy a method such as
> > > http://pmob.co.uk/temp/headerreplacement3.htm or one listed at:
> > > http://www.mezzoblue.com/tests/revised-image-replacement/
> > >
> > > --
> > > Ryan E. Benson
> > >
> > >
> > >
> > > On Mon, Nov 14, 2011 at 6:52 PM, Vincent Young < = EMAIL ADDRESS REMOVED = >
> > > wrote:
> > > > Syntax looks good to me. I think using an inline image is
> appropriate
> > > here
> > > > because in high contrast mode the logo will be displayed which could
> > help
> > > > with general page/site orientation.
> > > >
> > > > On Mon, Nov 14, 2011 at 3:38 PM, Rick Hill < = EMAIL ADDRESS REMOVED = >
> wrote:
> > > >
> > > >> Just checking. Is this syntax OK for compliance. Assuming we want an
> > H1
> > > at
> > > >> top of pages that display a graphic log that is a link but have a
> text
> > > fall
> > > >> back:
> > > >>
> > > >> <h1><a href="index.html"><img src="logo.png" width="100"
> height="100"
> > > >> alt="Home page" /></a></h1>
> > > >>
> > > >> I understand a "better" method might be to have a background image
> > > >> overlaying the h1 text, but this is more convenient for the purposes
> > of
> > > >> deploying this in a CMS with many sites having different
> > logos/headings
> > > …
> > > >> –––––––––––––––––––––––––––––––––––––––
> > > >> Rick
> > > >>
From: Jared Smith
Date: Mon, Nov 14 2011 10:57PM
Subject: Re: image with alt as H1 content?
← Previous message | No next message
On Mon, Nov 14, 2011 at 10:08 PM, Maraikayar Prem Nawaz
< = EMAIL ADDRESS REMOVED = > wrote:
> Hi,
> Fae rule set says
> Each h1 element should have text content exclusive of the alt text of any
> img elements it contains.
I'm not sure what the FAE tool is suggesting here, but this doesn't
make any sense to me. There's nothing wrong with images presenting
content whether within or outside a heading. You can ignore FAE here
as this certainly doesn't have an impact on accessibility that I'm
aware of. FAE also requires that the h1 be the same as the page title
- something that is clearly not a real accessibility issue.
> Also wouldn't it be problematic for the outline logic by some screen
> readers, where it would show the list of headings
> For e.g. Jaws would announce "Home page Heading level 1 graphic"
So long as the image has equivalent alternative text, I see no issue.
JAWS may identify the presence of the image within the heading, but
this would be no different than it identifying the presence of an
image anywhere else on the page.
Jared