hope: Art of a woman writing from tour poster (command key)
puddingsmith ([personal profile] hope) wrote2009-05-15 11:51 am
Entry tags:

Nerdy PSA: Accessibility tips for the casual coder

Most people know enough quick-and-dirty html to give their LJ posts a wee bit more formatting without having to work in the dreaded Rich Text Format.

But DID YOU KNOW that there's a right way and a wrong way to use these wee bits of formatting and functionality?

The main one I see most often is using <i> </i> for italics and <b> </b> for bold.

Yes, this will visually represent italics and bold in pretty much all browsers, but if you want to be accessibility friendly, you should:

use <em> </em> for italics, and
use <strong> </strong> for bold.

Visually, the result doesn't look any different - italics and bold! - however, the accessibility point here is that not everyone 'reads' information on web pages the same way (with their eyes on a screen displaying a browser). The 'em' and 'strong' tags are accessible to other technology such as screen readers, which provide an audio verbalisation of what is being displayed on the user's screen.

The screenreader technology interprets 'em' and 'strong' as requiring emphasis, and delivers them thus. It will not recognise 'i' and 'b', therefore not translating that bit of formatting to the user who is not accessing your post visually.

It may seem like a drag at first (I have to type 'strong' instead of just 'b'?? oh, man!), but really, you get used to it very fast with the added bonus of being a good netizen. After all, you *do* want more people reading your post/blog/story, right? Frankly, this way is just as quick-and-dirty, once you get in the habit of it.

Here are a few other tips for making your usual quick-and-dirty markup a bit more accessible. There is a lot more than I've listed here, but these are the ones I think come up most in your average blogger's usage, with the most important at the top.

  • Use 'alt' tags on your images.

    Know how sometimes when you mouseover an image a little flag with some text shows up? This is an alt tag. This text should provide a brief description of what the image is, again for the benefit of people with screen readers. They can't *see* the image, so the reader will tell them what it is using the text from your alt tag. This is especially important if you're using an image as a link - if the user can't see it, how are they going to even know it's a link or important part of the navigation? WITH THE ALT TAG, THAT'S HOW!

    alt tags just go into your img code, thus:
    <img src="http://www.url.com/yourimage.jpg" alt="A description of the image" />

    Note for Dreamwidth users: The "Description" field you see when managing icons is for text that will go into the alt tag of that icon.

  • Use 'title' tags on your hyperlinks (text links), or at least make sure the linked text is descriptive in itself.

    Similar to the alt tag for images is the title tag for links. Again, the way particular screen readers navigate the page for the user, title tags (which appear when you mouseover a text link) give the user more information, helping them to navigate the page.

    For example: Super-wiki

    Looks like:
    <a href="http://supernaturalwiki.com" title="Supernatural Wiki home page">Super-wiki</a>

    If you're too lazy to put a title tag in each hyperlink (as I generally am), at the very least you should make sure that the text that's being hyperlinked is descriptive in itself.

    For example, don't do this: Click here to go to the Super-wiki.

    do this: Go to the Super-wiki.

    Screen readers can tab from link to link on a page; reading out 'here' as a link is not very helpful to the user trying to navigate, whereas 'go to the super-wiki' is.

    ADDENDUM: The priority here is to make sure the text that's being hyperlinked is descriptive. Only use the 'title' tag if this is not possible, for whatever reason. It's better to simply have descriptive linked text instead of descriptive and titled.

  • Write valid code

    This one is good when you consider not just that some of your readers may be using assistive technology, but the fact that not everyone else is accessing your site using the latest version of Firefox on their Windows XP machine on broadband. In other words, the software and hardware may vary wildly from user to user, and you want to make sure that the coding you're doing has the same end result for everyone.

    Luckily there's a handy tool out there for responsible coders who want to make sure their code is 'valid' - that it not just looks fine to you, but will work across platforms and a not cause any problems: the W3C validator.

    The main two things easily tackleable that I can think of are:

    Always code in lowercase: <img src="etc" />, not <IMG SRC="etc" />

    Always close your tags.
    This one is obvious in the case of formatting and links, but it does actually apply to image tags, bullet points, and (if you're coding off lj) line and paragraph breaks.

    Paragraphs should be enclosed in <p> (start of para) and </p> (end of para).

    Each bullet point should start with <li> and end with </li>.

    Line breaks and image tags are self-closing tags. You may have noticed in the examples above that I left a / before the > at the end of the image tag. This is how it self-closes. The line break tag, which you may be familiar with as <br> should actually self-close as this: <br />

    NOTE: LJ automatically inserts valid paragraph and line breaks. You don't need to use <br /> or <p></p> on LJ. This is still good to know if you're coding your own website, though.

  • If doing something fancy, don't co-opt code made for another function; use the code made specifically for what you want to do. Even if that means you have to do some research and LEARN something new!


    - HTML tables are made for displaying data. For a page layout you generally should be using CSS. See the WCAG for how to make sure your data tables are used effectively, or just how to use them properly if you're determined to use them for layout.

    - Title tags are for links. If you want a mouseover message to show on text, don't trick the screenreaders by creating a dead link; use something like the acronym or abbreviation markup.

More info on all of the above can be found via the HTML Techniques for Web Content Accessibility Guidelines 1.0. If that's too intimidating to tackle, you might find some of the W3C's tutorials useful.

Alternatively, ask - your flist or someone who you think might know the answer. I don't mind being asked! Having read the WCAG myself, I am happy to put it to more use than just my own coding :D

And another note, because I know someone will ask! To display < and > instead of rendering the tags they're used in, I used the HTML symbol codes for them:

&lt; = <
&gt; = >

And yep, I used the ampersand symbol html code (&amp;) to *not* render the above html codes.

You can always find handy html symbols by just googling it. You're probably already familiar with &hearts;

Addendums to this post following comments

Using strike tags

Strikethrough tags (<s></s> & <strike></strike>) are technically not accessibility-friendly at all. Screen readers will not render it and it's possible the W3C validator won't validate with it in play. If the effect of the strike tag is intended to be solely visual, it's recommended you use CSS to display it as struck through.

The alternative to the strike tag is the del tag (<del></del>). It's purpose is to indicate changes made to the webpage - text that has been deleted from the document on display.

I think it's pretty reasonable to say that struckthrough text is a bit of coding that's been hijacked from its original use for fandom's lexicon. Your page may not validate if you use strike - it will technically validate if you use del - but in terms of making it screenreader friendly, I think your intentions will be missed on it regardless as it's quite a visual way of communicating your point.

I believe that screenreaders will still read out the text as if it wasn't struck through, though, so you're probably not causing any technical problems (just possible confusion of the user) by continuing to use it.

(Sources: Webdesignfromscratch.com, HTML Quick.com, W3C)

*Asterisks* and other ways of using punctuation to convey emphasis instead of code

Again, this seems largely a visual thing; and again, see above with regards to hijacking asterisks etc to convey actions rather than formatting.

According to Web Accessibility In Mind (WebAIM),
Screen readers read most punctuation by default, such as parentheses, dashes, asterisks, and so on, but not all screen readers choose to read the same pieces of punctuation. Some do not read asterisks by default, for example. Periods, commas, and colons are usually not read out loud, but screen readers generally pause after each. Users can set their preferences so that screen readers read every punctuation mark and character.

So the answer is: screen readers might read your action, *shrugs* as: "star shrugs star", "asterisk shrugs asterisk" or "shrugs".

A note on intended use of this PSA

This post does not set out to explore and explain the ins and outs of accessibility for people building websites from scratch. There are a range of resources on the web out there that'll do that for you.

My intention with this post is to provide a few easily-understood tips for people posting to services like LJ and Dreamwidth, who would like to know more about how to make their posts accessible, but don't necessarily have the technical confidence or knowledge to dive into the world of coding tutorials on the web.

Please be aware that the guidelines described above do not encompass the extent of accessible use for the tags - for example, use of the 'alt' tag in images can differ a lot depending on what the image is being used for. I've not gone into it here because I'm writing with the idea that the people reading will be solely using the img tag to post pictures to their blogs, rather than building websites that use graphics.

If you're serious about accessibility and are writing your own code off LJ/Dth, I strongly recommend reading up on more accessibility guides. The W3C is the hub for this; if you find it too dry or hard to get into, just google "accessible code" and browse through the results.

Feel free to correct me if any of the above needs correcting, or suggest any more tips I should have included. (With the understanding that I've tried to go with layman's terms here, for people without geeky motivators or expertise.)

[identity profile] slashfairy.livejournal.com 2009-05-15 11:10 am (UTC)(link)
Ahhh. Thank you! this answers questions and clarifies things, and is just lovely. bless you! *learns*


[identity profile] misswinterhill.livejournal.com 2009-05-15 11:17 am (UTC)(link)
Thanks for posting this; it's really interesting. I'd honestly never really considered how to make pages more accessible before. I only just discovered LJ Toys and I am really spun out by how many people visit my blog in a day, so I imagine that there will be someone - even one person - who might appreciate this if I get off my butt and do it!

[identity profile] astrothsknot.livejournal.com 2009-05-15 11:25 am (UTC)(link)
*luffs you quickly and dirtily*

[identity profile] sajee.livejournal.com 2009-05-15 11:27 am (UTC)(link)
Oooo, thanks!!!

[identity profile] wildcard-sej.livejournal.com 2009-05-15 01:32 pm (UTC)(link)
Ooh - thanks for this. *adds to memories* :)

[identity profile] capra-maritimus.livejournal.com 2009-05-15 02:52 pm (UTC)(link)
Thank you for this!! :D:D:D:D:D

I'd seen < strong > before but never had it been explained why it was in use instead of < b >. :D

(BTW, I can't seem to get the code for < or > to work properly. Help?

[identity profile] ithiliana.livejournal.com 2009-05-15 02:56 pm (UTC)(link)
Thank you thank you thank you thank you!

*copies and makes cheat sheet for self*


[identity profile] kohaku1977.livejournal.com 2009-05-15 04:12 pm (UTC)(link)
Ooooh, very nice! Thank you! Some things I didn't know and others I didn't consider, so thank you very much indeed!
linaelyn: (Default)

[personal profile] linaelyn 2009-05-15 06:11 pm (UTC)(link)
Oh, this is awesome. Thank you!

This will go into my links round-up this weekend, if that's cool with you?

[personal profile] dee 2009-05-15 11:11 pm (UTC)(link)
I think I love you (and your semantic markup). :3
frivol: (sonic (tryingtorevive LJ))

[personal profile] frivol 2009-05-16 04:33 am (UTC)(link)
Thank ye! I guess this answers my questions too, about cross posting & all.

AS you know, I am a VERY ignorant non-geek!
msilverstar: (corset)

[personal profile] msilverstar 2009-05-15 07:42 pm (UTC)(link)
As I understand it, screenreaders have adjusted to the wrongness that is lazy HTML. It's nice to do helpful things, but typing a title attribute for every link is not going to happen when I have to do it by hand :-/

[identity profile] laurenmitchell.livejournal.com 2009-05-16 12:20 am (UTC)(link)

[identity profile] daniel-bethany.livejournal.com 2009-05-16 12:18 pm (UTC)(link)
thanks! *saves for future reference*

See you in September!

[identity profile] nixwilliams.livejournal.com 2009-05-17 12:19 am (UTC)(link)
thank you.

*starts doing what you say*

[identity profile] too-shy.livejournal.com 2009-05-17 10:11 pm (UTC)(link)

Ooh, thank you!


em and strong, eh?

Geeky is hot, yaknow?

muccamukk: Rose half hiding behind her scarf, looking hopeful.Text: "Pretty please?" (DW: Please?)

[personal profile] muccamukk 2009-05-18 11:38 pm (UTC)(link)
Just wondering from somewhere Lin's link round up.

Thank you for the pointers, I do have a couple of questions though.

You mentioned "Paragraphs should be enclosed in

(start of para) and

(end of para)."

Do you mean every paragraph ever? Like, in posting this, should I have put them around each one? What about blank lines that visual-display readers use to break up the text?

Also, does putting dashes or little stars around actions mess things up, or read at all? (example: -gets up and looks for ice cream- or *gets up and looks for vodka*)

I am now wandering off to attach descriptions to icons.
order_of_chaos: Eridan Ampora from Homestuck as a dreamsheep dreaming of dreamwidth.  Blue stripy body, purple head, yellow horns. (Default)

[personal profile] order_of_chaos 2009-05-20 11:24 am (UTC)(link)
ext_2877: Long-time default (Default)

[identity profile] blackbird-song.livejournal.com 2009-05-19 04:19 pm (UTC)(link)
Thank you so much for posting this. As a non-tech person, I hadn't known about any of this until a very short time ago, and then I didn't really know where to look for more info. I doubt that I'll be able to go back and re-code all my entries, but I'll do what I can in the future, and I've added this post to Memories.

telesilla: black and white picture of telesilla (Default)

[personal profile] telesilla 2009-05-22 11:42 pm (UTC)(link)
Thank you! I know that the shift to em and strong happened, and I'm using them, but I didn't know why. The rest of it is all new to me, but it's worth learning, so yeah, thank you! :)
fiercynn: Isabella with a sword [from Galavant] (young photogenic artists of love!)

[personal profile] fiercynn 2009-05-23 06:46 pm (UTC)(link)
Oh wow, this is awesome. Thank you so much!
la_vie_noire: (Default)

[personal profile] la_vie_noire 2009-05-24 04:33 am (UTC)(link)
Thank you for this!
dmarley: Fingerpainting (Default)

[personal profile] dmarley 2009-05-24 04:42 am (UTC)(link)
Thank you so much for this. I'm embarrassed to admit that I haven't cracked an HTML guide in probably a decade, and I didn't realize that the em and strong tags had such an important function. I used to nag and nag people about using alt tags, but I'm embarrassed that I've allowed myself to slack off on learning about more of the newer accessibility options.

Thankfully, I have a text editor that does multi-file simultaneous search and replace. :) Thanks again for the post, it's extremely helpful.
eccentricweft: (Default)

[personal profile] eccentricweft 2009-05-24 04:53 am (UTC)(link)
Wonder if you might put in a bit about nesting tags properly? if indeed that's important in HTML? (As I recall XML is very strict about that.)

ETA: Oh and also, thanks for doing this! I rarely use anything but italics and bold, but I'll switch to the screenreader-friendly code.
Edited 2009-05-24 04:59 (UTC)
sophinisba: Frodo smiling (frodo happy by proverb)

[personal profile] sophinisba 2009-05-24 04:55 am (UTC)(link)
Thanks for this! I'd heard something about the em and strong tags before but hadn't made the switch myself and I do intend to now. Will try to be more conscientious about the links as well.

Page 1 of 3

<< [1] [2] [3] >>