Accessibility question

[starwatcher]

I will soon be moving my fanfic to Archive of Our Own, and to a Dreamwidth fic-site. When moving the fics, I'd like to ensure that my code is accessible for screen-readers. I know some things, but have questions about others. I asked the questions in a post at my Studio, but have had no responses; apparently no one in my reading circle uses a screen-reader.

If you do, I'd appreciate it if you could drop by and educate me. Or perhaps point me toward a site that has the answers. Feel free to pass the link on to anyone who might know the answers. After I've learned what I need to know, I'll make a new post to share with my friends, and anyone else who needs or wants the information.

Thank you.

Comments

[pne]

I'll need to learn the alt tag (?) to describe pictures

The alt attribute of the img tag, as in <img src="http://www.example.com/image.jpg" alt="A white knight sitting on a horse" width="640" height="480"> (or something like that).

Use HTML headers instead of bolded text to separate sections.

This I don't understand; can you explain further?

If you have named sections (chapters, days in a diary, or the like), you can use HTML headers - <h1> to <h6> - to mark them up.

In my experience, h1 typically only occurs once; it'll be the title of the entire page. h2 is "beneath" that (chapter?), h3 even lower (section?), then h4 (subsection?) and so on. The exact meaning of each level, as well as how many levels deep you want to go, is up to you, of course. (For example, you may just need one kind of section, in which case h2 might be the way to go.)

In a visual browser, the font size typically gets smaller as you go from h1 down to h6, to mark increasingly-smaller units of text.

[starwatcher]

.
Thank you for the alt code; I'll save it. I can understand why the description, but is width and height necessary? Will the code fail without that information? It doesn't seem like anything a reader or listener would need to know.

I'll remember the headers code, too; thank you again. But I usually only use line-divider, such as <hr size="2" width="50%">, but I can't find anyone who knows whether or not a screen-reader makes a pause for [hr]. I've planned what to do if I need something more than [hr], but don't want to use both if it will cause a "stutter" in the reading. Have you read anything about the effectiveness (or not) of [hr]?
.

[kyrielle]

The width/height won't matter to screen readers as far as I know, but adding them is best-practice for visually-rendering browsers because it allows them to reserve space for the image on the screen before it downloads, which means the page doesn't jerk around and realign when the image finishes downloading. This is especially appreciated when the image file is large (file size, not visual display) or when there are lots of images on one page.

[starwatcher]

.
it allows them to reserve space for the image on the screen

Cool! I'm learning so much. Thank you.

Fortunately, I see that half of the "copy/paste this code to put the picture on another site" from Flickr is the <img description. I just need to change my alt from "Meeting" to "two horses in field, touching noses".

width and height in images

[pne]

kyrielle already talked about width and height in images; I'll add that I usually add them in LiveJournal entries because some people have the option to use placeholders for images larger than a certain size (in pixels, not KB) -- and that only works if width and height are given in the HTML code (images without those attributes will always be replaced by placeholders, even if the image turns out to be 10×10, because the HTML filter can't know that).

I presume that Dreamwidth code acts similarly.

So, yeah. Rule of thumb: they're not necessary, but can be useful in some circumstances.

Re: width and height in images

[starwatcher]

.
I've been experimenting in my DW. Turns out, the Flickr code includes all that (I never noticed), so I've been semi-compliant without knowing. (I load all the pics I want to show on Flickr, and use their version of "paste this code on another page".)

But Flickr's TOS ask that pics on another site lead back to the original. I assume that it's the first part of this code -

<a href="http://www.flickr.com/photos/starwatcher307/4127388572/" title="Meeting by StarWatcher307, on Flickr"><img src="http://farm3.static.flickr.com/2592/4127388572_4f25718715_m.jpg" width="240" height="171" alt="two horses in field, touching noses" /></a>

So, is the <a href part of the code still compatible with screen readers? (I would expect so, but unwarranted assumptions can kick us in the ass.)

Your earlier example showed the alt description first, with size following. Flickr has it reversed. Both versions show the correct visual image on the page but, again, will it make a difference to the screen reader?
.

Re: width and height in images

[pne]

Flickr's TOS ask that pics on another site lead back to the original. I assume that it's the first part of this code

Yes -- the "a" tag surrounding the "img" tag makes the image into a link.

So, is the <a href part of the code still compatible with screen readers? (I would expect so, but unwarranted assumptions can kick us in the ass.)

I would also expect so, but I have no real idea.

Your earlier example showed the alt description first, with size following. Flickr has it reversed. Both versions show the correct visual image on the page but, again, will it make a difference to the screen reader?

I would expect not -- as I understand it, attributes may occur in any order inside a tag, so any halfway-decent HTML parser should be just fine with them rearranged. (So you could even have "alt" in between "width" and "height" if you wanted.) But again, I don't know for sure.