starwatcher: Western windmill, clouds in background, trees around base. (Default)
StarWatcher ([personal profile] starwatcher) wrote in [community profile] accessibility_fail2010-04-01 09:53 am
Entry tags:

Accessibility question

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.
pne: A picture of a plush toy, halfway between a duck and a platypus, with a green body and a yellow bill and feet. (Default)

[personal profile] pne 2010-04-03 09:21 pm (UTC)(link)
Are you saying that <cite will italicize on the page without spoken emphasis? Cool! That'll be much easier for me to remember (and code) than the <span code that another commenter suggested.

I thought you were going to use semantic mark-up?

Please don't go back to 1990's HTML coding where people used whichever tag got them the appearance they wanted, regardless of what the tag was supposed to mean!

Use the tag that describes what you're doing.

But what's the difference between <q> and <cite>?

"q" is for quotations; "cite" is for citations or references to other sources (links are to the HTML specification).

"q" is easy enough to understand: you can use it to indicate that something is a quotation from somewhere else. (You can even indicate the source URL if you want: Joe Smith said, <q cite="http://www.example.com/page.html">I could do with a beer</q>.) It's an inline element, so it's probably better for shorter quotations.

Longer ones (a paragraph or more) are probably better expressed with "blockquote" (which also has the optional "cite" attribute if you want to provide a source URL). That one's a block-level element, so you can wrap one or more "p" elements inside it.

Note that some browsers (e.g. Opera), but not all, enclose "q" quotations in quotation marks -- so if you add quotation marks yourself, you'll have two pairs in some browsers, but if you leave them out, then browsers which don't add quotation marks won't show where the quotation starts and ends. What I usually do is italicise the quotation with <q style="font-style: italic">...quotation goes here...</q>.

The visual browsers I'm familiar with don't apply any particular font style to "q" quotations (or to "blockquote" ones, though they usually indent them).

I find "cite" hard to pin down the exact use of; the spec merely says that "the usual meaning" is "contains a citation or a reference to other sources", and the examples given are: As <CITE>Harry S. Truman said, <Q lang="en-us">The buck stops here.</Q> and More information can be found in <CITE>[ISO-0000]</CITE>.

So I suppose it's reasonable mark-up for book titles, but not (for example) for quoting someone or representing the voice on the other end of a telephone or thoughts, even if those are things you might want to mark up with italics and even if <cite> is often rendered as italics in visual browsers. Other than book titles, I'm not sure what the "cite" tag can properly be used for. (If you're going to use it improperly, then in my opinion you might as well go ahead and use the "i" tag, which at least doesn't even claim to indicate any particular meaning.)
lim: baby Spock peeks over the bottom of the icon (Default)

[personal profile] lim 2010-04-03 10:08 pm (UTC)(link)
Semantic in this case means meaningful. *g* Semantics is the study of the meanings of words, phrases, texts. When web developers talk about "semantic markup", we mean using tags in a consistent way to give meaning to web pages. So h1 has a specific, particular meaning (of 'first heading') and we always use it in that way, just like words have meanings.

If we used words just because they sounded nice, or similar to the word we really meant, or completely without reason, it would be even harder to understand each other than it is already. The internet for a long time has been coded in this way, and it has caused a lot of problems. That is what pne is talking about, I would guess; for web developers it is a very frustrating situation.

susanreads: my avatar, a white woman with brown hair and glasses (Default)

[personal profile] susanreads 2010-04-04 01:24 pm (UTC)(link)
Note that some browsers (e.g. Opera), but not all, enclose "q" quotations in quotation marks -- so if you add quotation marks yourself, you'll have two pairs in some browsers, but if you leave them out, then browsers which don't add quotation marks won't show where the quotation starts and ends. It doesn't just vary from browser to browser, but from style to style, even within Dwth. I started using <q> for quoting the OP or another comment, and found that there was no marker of it being a quote at all in, iirc, the site-style comment page. I've used <q> here, so I'll see what it does ...

In Comment Preview, it shows up in italics (no added quotation marks). I've a suspicion the italics disappeared when I posted such a comment before, but that might be something that's been fixed. Here goes!
susanreads: my avatar, a white woman with brown hair and glasses (Default)

[personal profile] susanreads 2010-04-04 01:26 pm (UTC)(link)
And, it looks OK to me (so I guess that was a bug that's been fixed, or somebody's style that's not doing it right). I wonder what screen-readers make of it?
susanreads: my avatar, a white woman with brown hair and glasses (Default)

[personal profile] susanreads 2010-04-06 05:18 pm (UTC)(link)
Oh, I just saw in [community profile] changelog_digest
Make styling for the <q> tag consistent across all styles and site schemes
Consistently display the <q> tag as italics.

so on Dreamwidth, you could use that and it'll work, after the next code push.