E-mail List Archives
Thread: Inline Images and ALT text
Number of posts in this thread: 5 (In chronological order)
From: Janet Sylvia
Date: Tue, Jan 13 2009 2:10PM
Subject: Inline Images and ALT text
No previous message | Next message →
Greetings,
One of our web designers asked the following question about inline images and ALT text. Does anyone have thoughts on this?
"It seems that if an image is placed within a paragraph of text and aligned so that the text wraps around it, the image's alt text will interrupt the text flow when read by a screen-reader. This can be a bigger problem when adding multiple images to a page and moving them to accommodate the visual design.
Is there a standard for embedding images in paragraphs? For instance, only embed images before/after sentences, with contextual clues, etc.
Also, if the image is described in the adjacent text, would the ALT text for the image be null?
Has this situation been considered by other organizations and what would be the solution to accommodate both visual and aural design?"
Thanks for your help.
Janet Sylvia
University of Georgia
From: Jared Smith
Date: Tue, Jan 13 2009 2:30PM
Subject: Re: Inline Images and ALT text
← Previous message | Next message →
On Tue, Jan 13, 2009 at 2:09 PM, Janet Sylvia < = EMAIL ADDRESS REMOVED = > wrote:
> Is there a standard for embedding images in paragraphs? For instance, only embed images before/after sentences, with contextual clues, etc.
If the image is being used inline in the middle of a sentence, the
content of that image should be provided in alt text and should make
perfect sense inline. I can't think of a case where an in-sentence
image would have alternative text that is out of the context of that
sentence - even if it is positioned elsewhere (floated, etc.).
For floated images, I typically place the image at the place that it
makes the most sense in context - typically at the beginning of the
section it is floated by - and then use CSS to position it where it
needs to go, if necessary. Of note, I find that *most* floated images
are either decorative to the content itself or the content of the
floated image is presented in the text - they *usually* should be
given null alt text.
> Also, if the image is described in the adjacent text, would the ALT text for the image be null?
Typically, yes. See http://webaim.org/techniques/alttext/ for several examples.
> Has this situation been considered by other organizations and what would be the solution to accommodate both visual and aural design?"
I think standard HTML and CSS give enough flexibility to maintain the
visual design while keeping the aural flow logical and accessible.
Jared Smith
WebAIM.org
From: John Foliot
Date: Tue, Jan 13 2009 2:45PM
Subject: Re: Inline Images and ALT text
← Previous message | Next message →
Jared Smith wrote:
>
> On Tue, Jan 13, 2009 at 2:09 PM, Janet Sylvia < = EMAIL ADDRESS REMOVED = > wrote:
>
> > Is there a standard for embedding images in paragraphs? For instance,
only
> embed images before/after sentences, with contextual clues, etc.
>
> If the image is being used inline in the middle of a sentence, the
> content of that image should be provided in alt text and should make
> perfect sense inline. I can't think of a case where an in-sentence
> image would have alternative text that is out of the context of that
> sentence - even if it is positioned elsewhere (floated, etc.).
>
I have encountered this "issue" once or twice, and while it is (should be)
rare, it does happen (often mid-paragraph).
One thing I have done as a best practices is enclosed my alt text values
inside of square brackets [], and further indicated the "type" of imagery
being displayed. Limited testing/feedback has not returned any negative
comments, and a few positive remarks, so while it is by no means a
"standard", it *is* something that I do as a matter of course in my
personal dev work.
Examples: <img src="path_to_file" alt="[Photo - Jared Smith]" />, <img
src="path_to_file" alt="[icon - PDF]" />, <img src="path_to_file"
alt="[illustration - Pie chart showing user statistics]" />.
As an added bonus, it cleanly segregates the alternative text on text-only
browsers, and to my mind helps further isolate the text for even less
ambiguity.
Contrast: "Jared Smith, M.S., is the Associate Director for WebAIM. Jared
Smith" vs. "Jared Smith, M.S., is the Associate Director for WebAIM.
[Photo - Jared Smith]" Most screen readers, unless configured for maximum
verbosity, tend to ignore/not voice the square brackets, and so would say
aloud: "Jared Smith, M.S., is the Associate Director for WebAIM. Image -
Photo - Jared Smith". All-in-all I believe this is a win for most (the
down side is that some screen readers *will* announce the square brackets,
but I believe that the minimal "noise" generated even then is not a major
barrier/issue).
FWIW
JF
From: Benjamin Hawkes-Lewis
Date: Tue, Jan 13 2009 2:55PM
Subject: Re: Inline Images and ALT text
← Previous message | Next message →
On 13/1/09 21:09, Janet Sylvia wrote:
> Is there a standard for embedding images in paragraphs? For instance, only embed images before/after sentences, with contextual clues, etc.
The visual positioning (controlled by CSS) can be anything.
The markup/DOM position is determined entirely by the alternative text.
Ignore the image and ask if the alternative text makes sense in situ.
> Also, if the image is described in the adjacent text, would the ALT text for the image be null?
That can be a somewhat controversial topic.
If the image is a control (e.g. a button or link) and the alternative
text is the only source of text for the control, then it's generally
agreed the "alt" attribute should describe the action or destination of
the control.
If the image is important in its own right (e.g. a graph), I believe
it's sometimes useful to provide a short "alt" text to distinguish it
from all the other images on the page and allow them to manipulate (e.g.
download, link to) the image. Others argue that such use-cases are rare
and it's more important to exclude repetitive information.
Otherwise, go with "alt='".
For further reading see the guidance I've bookmarked at:
http://delicious.com/benjaminhawkeslewis/%28X%29HTML%3Aalt+guidance
--
Benjamin Hawkes-Lewis
From: Patrick H. Lauke
Date: Wed, Jan 14 2009 11:15AM
Subject: Re: Inline Images and ALT text
← Previous message | No next message
John Foliot wrote:
> Contrast: "Jared Smith, M.S., is the Associate Director for WebAIM. Jared
> Smith" vs. "Jared Smith, M.S., is the Associate Director for WebAIM.
> [Photo - Jared Smith]" Most screen readers, unless configured for maximum
> verbosity, tend to ignore/not voice the square brackets, and so would say
> aloud: "Jared Smith, M.S., is the Associate Director for WebAIM. Image -
> Photo - Jared Smith".
In this case, even better: "Jared Smith, M.S., is the Associate Director
for WebAIM." and a nice alt="" in the image?
P
--
Patrick H. Lauke