WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: image with alt as H1 content?

for

From: Vincent Young
Date: Nov 14, 2011 10:48PM

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 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 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 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 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 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
> > > >>