What is preferred accessible and semantically correct method to code this type of data design?

views:

answers:

+1 Q:

What is preferred accessible and semantically correct method to code this type of data design?

Table
UL, LI
DIV,SPAN

For icons should i use for each place or i should is icon from CSS sprites? If we use css sprite here then how to code, and what will happen when images will be disabled ?

Every link will open in new window and I have to indicate about file size also for both sighted and blind users?

So what is the best method to make this design and what is best method to show icon and to indicate all type of users that file will open in new window and what is file size?

Content of table should be accessible and understandable in as good as possible manner in all conditions

For sighted user even if images are disabled
for screen user
for text browser user
and if css is disabled

And What is the role of Filenames of PDF, video, audio here?

alt text

+1 A:

Definitely a job for tables, hands down.

As for what kind of images to use, if you need to serve screen reader users then I'd say best use normal images, with "PDF" / "Audio" / "Video" as ALT texts. Those will show up in case images are disabled.

The file size could be in the title tag of the link pointing to the download IMO.

Pekka 2010-03-26 16:58:30

u mean css sprite method would not be good for screen reader users, while it will take less html code.

metal-gear-solid 2010-03-26 16:59:59

Yes. If screen readers are part of the intended audience, I'd not use sprites. A nice clean icon with an ALT text is way better. The performance gain using sprites would be minimal anyway, you would save two or three requests on first page load but nothing more.

Pekka 2010-03-26 17:01:26

isn't there any method to show alt text even if we are using css-sprite. and BTW What should be shown in a ALT text.

metal-gear-solid 2010-03-26 17:02:59

@jitendra not that I know of. The ALT text would show "PDF" / "Audio" etc. as an orientation to the screen reader user.

Pekka 2010-03-26 17:04:10

but how screen reader user will know what is PDF/Audio about?

metal-gear-solid 2010-03-26 17:06:14

and as u wrote "The file size could be in the title tag of the link pointing to the download IMO" screen reader doesn't read title text by default.

metal-gear-solid 2010-03-26 17:08:51

Well, you'd have to decide in that case whether you want to write it out next to the icon. I wouldn't, simply out of aesthetic considerations. Maybe add it to the ALT *and* title text? `PDF 5.5 MB` - for the screen reader it will be read, for the normal user it will pop up when they hover over it.

Pekka 2010-03-26 17:12:13

ok u mean to use same text in ALT and Title. ok, but how user will know for example PDF 5.5 MB, Video 20 MB are related to "Event 1"?

metal-gear-solid 2010-03-26 17:15:24

Pekka 2010-03-26 17:18:05

Ok thanks for link. suppose if i want to show icons using css-sprites then how to do? while all icons are links also

metal-gear-solid 2010-03-26 17:19:50

@jitendra you could have an empty `<a>` element with a fixed height/width and a `background-image/background-position` I suppose. Sounds really bad for screen readers though, as there is no alternative text.

Pekka 2010-03-26 17:22:49

not remember now but i read somewhere long sometime ago that we can use a transparent gif image to show alt text even in css sprites

metal-gear-solid 2010-03-26 18:02:16

found it here http://stackoverflow.com/questions/1504264/how-to-give-alt-text-to-link-if-we-use-csssprites

metal-gear-solid 2010-03-26 18:09:14

@jitendra yes, but it's horribly hacky. Is it really worth going through all that just to save two measly http requests? Doesn't sound right to me, especially seeing as those link icons are definitely content (and should be included when printed, for example).

Pekka 2010-03-26 18:11:06

ok you mean css background images never comes in print.

metal-gear-solid 2010-03-27 01:15:28

@jitendra yes, they're disabled by default.

Pekka 2010-03-27 08:21:08

".....seeing as those link icons are definitely conten" but icon images are not a part of content part of content are linked files and link itself not icons.

metal-gear-solid 2010-03-27 13:53:12

@jitendra they are totally content IMO, because if they were gone, there would be no link.

Pekka 2010-03-27 14:59:23

ok. there is another way if we can use hidden text text-indent then icon would be additional thing. what you think on this?

metal-gear-solid 2010-03-27 17:21:04

@jitendra I really don't see the point. Why not just use normal images?

Pekka 2010-03-27 17:29:54

ansaurus

tags:

views:

answers:

What is preferred accessible and semantically correct method to code this type of data design?

related questions