RE: Image Galleries, Alt vs caption.

At 08:46 PM 12/5/2004 -0500, Andrew Kirkpatrick wrote:

> > caption and alt serve two different purposes, caption is more
> > like title.
> > alt is replacement.
>
>B.K. is talking about a caption for the image, not using the HTML caption
>element.
>
>The best way to go is to do what was suggested earlier - make the image and
>the text all part of the same link and make the alt text null.  This reduces
>the overall verbosity of the page and reduces redundant tabbing for keyboard
>and screen reader users.

So I went ahead and played away with the accessible HTML Image gallery and 
due to the CSS, the captions are displayed inline instead of below the 
relevant image and properly spaced. My CSS foo is failing because I can't 
figure out how I need to change it to get this to work:

http://www.accessibility1st.com.au/tutorials/image_gallery.html

I've just been throwing in a <br /> element but maybe there needs to be 
some sort of <div> element that changes the display style attribute?

><style>
>.gallery {
>  list-style: none;
>  margin: 0;
>  padding: 0;
>}
>.gallery li {
>  display: inline;
>}
>a:link img {
>  border: 1px solid #000;
>}
>a:hover img {
>  border: 1px solid #c33;
>}
>a:visited img {
>  border: 1px solid #51BA39;
>}
></style>
></head>
>
><body>
><ul class="gallery">
>         <li>
>                 <a href="image1.html" onclick="window.open(this.href);return
>                 false;" onkeypress="window.open(this.href)" title="view 
> larger
>                 version of image 1"><img 
> src="/tutorials/media/image1.gif" alt="image
>                 one" width="100" height="100" /></a>
>         </li>
>         <li>
>                 <a href="image2.html" onclick="window.open(this.href);return
>                 false;" onkeypress="window.open(this.href)" title="view 
> larger
>                 version of image 2"><img 
> src="/tutorials/media/image2.gif" alt="image
>                 two" width="100" height="100" /></a>
>         </li>
>         <li>
>                 <a href="image3.html" onclick="window.open(this.href);return
>                 false;" onkeypress="window.open(this.href)" title="view 
> larger
>                 version of image 3"><img 
> src="/tutorials/media/image3.gif" alt="image
>                 three" width="100" height="100" /> <br /> Test 2</a>
>         </li>
>         <li>
>                 <a href="image4.html" onclick="window.open(this.href);return
>                 false;" onkeypress="window.open(this.href)" title="view 
> larger
>                 version of image 4"><img 
> src="/tutorials/media/image4.gif" alt="image
>                 four"width="100" height="100" /><br />This is a test of a 
> caption.</a></li>
>         <p>&nbsp;</p>
></ul>



--
B.K. DeLong
bkdelong@pobox.com
+1.617.797.2472

http://bkdelong.mit.edu                       Work.
http://www.brain-stream.com               Play.
http://www.the-leaky-cauldron.org        Potter.
http://www.city-of-doors.com               Sigil.
http://www.hackerfoundation.org          Future.
http://www.osvdb.org/                         Security.
http://www.wkdelong.org           Son.


PGP Fingerprint:
38D4 D4D4 5819 8667 DFD5  A62D AF61 15FF 297D 67FE

FOAF:
http://foaf.brain-stream.org

Received on Tuesday, 21 December 2004 22:27:56 UTC