98 posts tagged “html”
2002
Accessible headers
Mark’s latest accessibility tip concerns header tags (<h1> through <h6>). Mark explains that using headers in the right order helps screen readers to interpret the structure of your pages, and shows how to use CSS to effectively style headers. Mark once again demonstrates the comment hack as a way of bringing Netscape 4 in line with other browsers, a technique that has been criticised by the More Like This Weblog as unnecessary encouragement for NS4 users. Incidentally, Johannes Koch has an excellent summary of CSS hiding techniques.
Final table tip
A final table tip from Mark: Providing a summary for tables. Mark explains the summary attribute which should be attached to every <table> tag to summarise the purpose of the table. Tables used for layout should include an empty summary attribute to show they are layout tables (in a similar way to empty alt tags for layout images). The summary attribute is only used by text to speech browsers, so I’m slightly confused as to why it should be included for layout tables—surely if the attribute is empty a speech browser will skip tstraight over it as if it wasn’t there?
Accessible tables
Mark has been educating us on the accessible way of marking up tables, with particular reference to calendar tables on blogs. My blog doesn’t have a calendar (yet, I’m considering adding one) but Mark’s articles have brought up some interesting things that I was previously unaware of. Giving your calendar a real caption explains the <caption> tag, which can provide a useful (and easily styled) caption for any table. Using real table headers explains how <th> tags are interpreted by speech browsers and shows how they can be used in conjunction with the abbr attribute to create more accessible table columns.
Additional navigational links
Today’s accessibility tip: Providing additional navigation aids. Mark explains the concept of “relative” links using the <link> tag, which can be used to provide shortcuts to the next and previous page in a sequence as well as links to a site’s homepage. He also provides instructions for implementing them in Moveable Type, and asks for suggestions as to how it could be done in Radio. These links are not rendered in the actual body of a page but can be used by many browsers to provide additional navigation aids. My blog has these already but only as shortcuts to my categories and a link back to the home page—I haven’t yet implemented them for next/previous buttons while browsing the archives (which is arguably their most useful ability). Time to get hacking...
Day 6: Doctypes
Mark Pilgrim starts his series of weblog accessibility tips today with tutorial on adding a doctype to a blog.
Styling <hr>
Interesting thread today on css-discuss about styling <hr> elements. I had tried this before with no luck, but the thread provided some useful tips. Marek Prokop provided this tutorial, and Kevin W responded with these tips on styling <hr> in Opera. Michael Guitton suggested that setting width: 100%; could help fix problems with Netscape 6.
Mark explains all
Over at diveintomark Mark Pilgrim has explained the aims of his Accessibility series:
[... 208 words]