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

[lim]

HAI :)

Don't worry! It's both much more and much less complicated than it sounds. You don't need to learn how all 500,000 browsers interpret markup to post well coded fanfic. The thing to remember when writing accessible fic is to use semantically valuable tags. Here's a short intro to semantic xhtml.

The AO3 helps you choose better code with a handy guide on the Post New Work page. I'll reproduce it here:

For headings, use heading tags: h1, h2, h3, h4, h5, h6

1. <h1>Title<h1>

2. <h2>Subtitle<h2>

3. <h3>Chapter title<h3>

4. <h4>Scene title<h4>

5. <h5>Subtitle<h5>

6. <h6>Footnote title<h6>

For emphasis, use emphasis tags em, strong

• <em>Rodney</em> McKay

• I will <strong>never</strong> understand you!

To quote poetry, phrases or titles use quote tags: blockquote, q, cite

• <blockquote>

  To quote a block of text

  </blockquote>

• Use q to <q>To quote a phrase</q>

• Try cite to cite <cite>a phrase or title</cite>

The AO3 is quite accessible already, but there is always more work to do of course. One of the things we are working on is more and better help. *g*

[starwatcher]

.
Thank you for weighing in. I was told that AO3 is pretty accessible, but I'm trying to make sure I do my part of the job.

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.

But what's the difference between <q> and <cite>? Is one more or less likely to be noticed by a screen-reader? If they do the same thing, <q> is even easier than <cite>... but I'm learning that my assumptions may leave me with egg all over my face.

Thanks for the link. Off to study.
.

[pne]

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.)

[starwatcher]

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

I'm obviously not getting the meaning you're trying to convey. I thought 'semantic' was a program that puts in bolds and italics for those who don't self-code in LJ.

But, yes, I want to be accessible-compliant. I'm just trying to figure out the easiest method of achieving that goal. If something is 'bad form', I won't do it, but I have to ask to learn.


Okay, I think I get what you're saying. But when I read fanfiction, I don't pay attention to whether something is a 'cite' or a 'quote'. It's irrelevant to the story, and I don't expect other readers to care, either. (Although I can see where it would be important on an informational web-page.) So should I stick to the <span-code for non-emphasized italics, and <em> when I want the emphasis?

Thanks for the extra links; I'll add them to my study line-up.
.

[lim]

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]

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]

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?

[starwatcher]

.
Well, I thought [q] or [cite] might be an easier way to produce non-emphasized italics. But the answer seems to be, "Sometimes, maybe, but you can never be sure." So, since they're not something I'll need in posting comments or fanfic, I'll just ignore them, and work on memorizing the [span italics] string.
.

[susanreads]

Oh, I just saw in 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.

[starwatcher]

.
Thanks for the heads-up. But I think it's safest to figure out one way and stick to it, which is to use [em] and maybe [span:italic] as necessary. (I'm still researching that one.)
.

[lim]

So, the answer is to let go of what things look like, and concentrate on what things mean. q and cite are not about emphasis, they are ways to say "this sequence of words is a reference from or to another work". That could be a title of a book, or a line from a song, or a quote from a speech, or a number of other quotes or cites.

In some cases it is a judgment call, and don't get too tangled up in it. There's a reference page called Paragraphs, Lines, and Phrases, that you may find useful to check your decisions against.

In general it seems to me that you are focusing on what things look like - italicisation - but this way of communicating by manipulating typography, is purely sighted. It's not relevant to (most) users of screenreaders, just as it would not be meaningful in a radio play or a phone conversation. But these ways of conveying narratives are semantically rich, aye? So instead of thinking 'how can I make it look this way?', think 'what am I saying when I make it look like this?'.

If you can work out what you really mean, it is much easier to decide how to say it. This is as true with coding as anything else.

[starwatcher]

.
In general it seems to me that you are focusing on what things look like - italicisation - but this way of communicating by manipulating typography, is purely sighted. It's not relevant to (most) users of screenreaders,

True. When I post comments, most italics means emphasis, so [em] is appropriate. But when I post fanfic, about 50% of the italics I use means spoken emphasis, but the other 50% is a convention that is useful for sighted but would be very uncomfortable to listen to if it was all emphasized. This is why I'm trying to learn a way to make italics that the screen-reader will not emphasize. It seems that [i] is given emphasis in some screen-readers, so that can't be my difference. (Although I do use it for marking the part of comment I'm responding to - as above - just in case it works.) I'll memorize the [span italics] string and use that in my fanfic and, when I'm comfortable with it, in my comment-markers.

I'm trying to be aware of both groups of readers; I want the story to sound natural (spoken emphasis only on appropriate words in dialog), while at the same time giving unemphasized italics cues (book titles, dream sequences or flashbacks) to visual readers. This discussion branched out into other areas, but I've learned a lot. I'll never develop a website, but at least I'll use what's available a little more accessibly.
.

[starwatcher]

.
Oops. Within the linked article is: "Here are two PDFs: [html] [css] Print them out. They contain, on two A4 pages, everything you will ever need to know about HTML and CSS." But both links give me "Server not found." Do you have alternate links?
.

[pne]

HTML: http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/, CSS: http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/

That seems to be the current home of those files.

[starwatcher]

.
Thank you.
.

[lim]

Oh! Very useful, thanks! I'll change those links. :D