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

[starwatcher]

.
Okay, you're talking to someone who knows only very basic code - [i, [b, [u, [p, [br and [a href. Everything else, I have to save in a cheat sheet and copy/paste when I need it. I know nothing about CSS, including what it stands for.

Now, I can copy and code <span style="font-style: italic">italic text goes here</span> (thank you for that); but that mean spoken-emphasis italics, or non-spoken-emphasis italics?

And [div] does... replaces the [span] above? Under what circumstances?

I truly appreciate the help, but I need teeny-tiny baby-explanations, if you're willing to invest the time in helping me learn.
.

[pne]

Now, I can copy and code <span style="font-style: italic">italic text goes here</span> (thank you for that); but that mean spoken-emphasis italics, or non-spoken-emphasis italics?

It means just "format this text as italics"; "span" is a tag that has no meaning by itself, so you're saying more-or-less-explicitly that there is no meaning attached to the font-style change. (Much as I interpret the "i" tag: italics, but with no specific meaning - emphasis, book title, quotation - attached explicitly, as opposed to "em", which has an explicit meaning attached; though as we've found out, apparently some screen readers handle them identically.)

And [div] does... replaces the [span] above? Under what circumstances?

Yes, replace "span" with "div" in both opening and closing tag (but keep the rest the same).

Technically, "div" is a "block-level element" (like "p" or "h1" or "hr"), and "span" is an "inline element" (like "i" or "img" or "a").

Put very simply, block-level elements are blocks (roughly, paragraphs) of their own, whereas inline elements are contained inside blocks.

So, for example, if you want to have three italicised paragraphs, you would have to use <p><i>This is the first paragraph</i></p> <p><i>This is the second paragraph</i></p> <p><i>This is the third paragraph</i></p>. You have to use three separate "i" tags because they can only exist inside a block-level element like "p" and can't "escape" outside of their containing block to continue across multiple block-level elements. (In practice, browsers will let you get away with it and will italicise everything until the closing </i> tag, even if it's in a separate paragraph, but that's not valid HTML.)

"span" is like "i" in that respect; it's contained inside a block-level element such as a paragraph.

"div", on the other hand, starts its own block, so you can't use inside a paragraph. It can contain other block-level elements, though: so you can have, for example, <div style="font-style: italic"><h2>The Wizard of Oz</h2></div> -- or make three italicised paragraphs like this: <div style="font-style: italic"><p>This is the first paragraph</p> <p>This is the second paragraph</p> <p>This is the third paragraph</p></div>.

The italicised heading in the example you could also have written with span, since it was just one block: <h2><span style="font-style: italic">The Wizard of Oz</span></h2>. Note that the "span" goes inside the h2 element while the "div" goes around it.

Does that make some sense?

Finally, you can also add style="font-style: italic" to any other tag; I sometimes do so when quoting somebody in connection with the "blockquote" tag: <blockquote style="font-style: italic"><p>This is the first paragraph</p> <p>This is the second paragraph</p> <p>This is the third paragraph</p></blockquote>. That way, I don't have the meaningless tag "div" surrounding my three quoted paragraphs but the meaningful one "blockquote" (which means, roughly, "this is a block-level quotation (containing one or more paragraphs)"), but I attach some (meaningless) styling (italics, in this case) to it. (In most visual browsers, "blockquote" will result in a wider left margin for the quoted text.)

[starwatcher]

.
Thank you so much. You explain very clearly, and I really appreciate all the extra coding you had to do so that the actual coding was rendered. I'll save this and refer to it often. Maybe - eventually - <span> and <div> will be as easy for me as <i> and <b>.
.