Accessible HTML for Knowbility

I’m doing a training session for Knowbility today. It’s a session on accessible HTML, training some trainers who work on various state of Texas sites. The people I’ll work with will be the ones who scatter through state agencies and make sure the people they train know how to write accessible HTML.

I can’t release the training materials because Knowbility is reserving them for the people attending the training. The aspects of HTML that I’ll talk about include headings, links, alt text, data tables, and forms.

I won’t have time to talk about video captioning, but I wanted to provide a reference for the trainers so they’d know where to look for information. Knowbility usually trains users in MAGpie for this. I wondered if YouTube did a decent job. I hadn’t seen anyone mention whether YouTube does a good job making video accessible with their new captioning service, so I asked Knowbility director Sharron Rush about YouTube’s service. She said that the service works great if you provide a transcript. It isn’t reliable if you depend on voice recognition.

I’ve been a supporter of Knowbility and what they do for a long time. This is the first time I’ve worked with them. I’m delighted to be officially associated with this wonderful organization, even in this small way.

In the mind of Copyblogger there’s a great HTML blog

You know Copyblogger, right? Copyblogger is Brian Clark, the genius writer with a kajillion followers who gives good advice to bloggers about how to get traffic and keep readers coming back.

I was playing a game in my head with some of the Copyblogger headlines, thinking that if people who wrote about HTML and CSS and stuff like web education used his headline techniques, there would be a lot more traffic to web dev blogs.

Here are some examples of how the game goes. Feel free to suggest more.

Copyblogger said: How to Find Thousands More Prospects for Your Business
I said: How to Find Thousands of Web Standards Tips

Copyblogger said: How to Develop an Endless Source of Ideas that Sell
I said: How to Develop an Endless Source of HTML Tutorials that Deliver

Copyblogger said: Want More Readers: Try Expanding Your Internet Universe
I said: Want More Semantic HTML? Try Developing Your List Elements

Copyblogger said: 7 Essential Steps to Creating Your Content Masterpiece
I said: 7 Essential Steps to Optimizing Your CSS

Copyblogger said: The Grateful Dead 4-Step Guide to the Magical Influence of Content Marketing
I said: The Grateful Dead 4-Step Guide to the Magical Influence of Accessible Forms

Copyblogger said: Improve Your Writing Overnight with the Rule of 24: Guaranteed
I said: Improve Your Code Overnight with the Rule of 24: Guaranteed

I need to start playing this game in real life.

10 Terrific Tech Blogs by Women

Tech tips, geeky how-tos, thoughtful analysis of issues, news about the latest gadgets, ideas for improving your blog—you’ll find it all in these 10 terrific tech and science blogs. They just happen to be written by women.

I. Hacker Chick

hacker chick graphic imageThe Hacker Chick Blog is a beautiful starting point. I say beautiful because the graphics on this blog are stunning: everything from the image representing the hacker chick (software developer Abby Fichtner) to the icons and images used as illustrations are visually outstanding. Hacker Chick writes about designing WordPress themes, agile computing, programming, social media, and business.

In Build Your Startup From the Heart, she said,

The world, it seems, is changing. If you ask Daniel Pink, he’ll say that our “left-brained” aptitudes — logical, analytical skills, the types of things schools reward us for — are no longer sufficient if we want to remain competitive. These are, after all, the very things being automated by computers and outsourced at rates we can’t compete with if we want to pay our mortgages, or, say, eat.

If we truly want to succeed, we need to pull in those right-brained skills that our schools & employers have tried so hard to beat out of us — artistry, empathy, play, and story telling.

You don’t find many programmers who think this way, or who can pull it together the way Hacker Chick does.

II. Pars3c

star trail from pars3cElizabeth Howell has her head in the stars with her blog Pars3c. The blog is pronounced “PAR-seck,” and astronomical term that gives you an idea of the topics you’ll find on the blog. This blog is about astronomy, spaceflight, science and telescopes. Big telescopes.

In 500 explosions, 500 reasons to love satellites, Elizabeth said,

I’ve said this before, and I’ll say it again — the greatest thing about space-borne observatories is they have 24-hour darkness to enjoy. This makes it easier to catch fleeting cosmic events, even explosions.

Like that moment last month when NASA’s Swift telescope saw its 500th gamma-ray burst.

III. Blogger Buster

blogger busterBlogger Buster is for Google Blogger users. It’s written by Amanda Kay. Blogger templates and tutorials are the heart of this blog.

For example, you can learn about 90 Related Posts with Thumbnails for Blogger – New Version by BloggerWidgets

Aneesh of Blogger Widgets has developed a new “Related Posts” script for Blogger which displays thumbnails of images in addition to linked post titles.

In appearance, this Blogger “add-on” is similar to the LinkWithin script. Each section is highlighted in a complementary colour when the mouse hovers over it, and the entire section is clickable, leading to the URL of the “related post” displayed.

IV. Girl Developer

girl developerGirl Developer is written by Sara, a software engineer. Her topics range among .net and WAN, tech events, software reviews, and life as a developer. There’s always a dash of style and humor in the mix. Recently she wrote about Meeting Wendy Friedlander, a fellow developer who is undergoing cancer treatment.

Meeting Wendy prompted her to put together a fund-raising dinner:

I put this dinner together because I think it would be wonderful if we could all help Wendy a little as a community. She’s one of our own and it really could be any one of us. We’re having a dinner for Wendy, and if you’re in the NYC area and can make it we’d love to have you. It will be a great time of fellowship with other developers and I’m looking forward to it. If you can’t make the dinner or aren’t from the area there is a paypal link here for donations.

V. Do it Myself Blog

do it myselfDo it Myself Blog is the work of Glenda Watson Hyatt, the left-thumb blogger—so called because she types only with her left thumb due to her cerebral palsy. Glenda writes about accessibility on the web and in life, about events she attends and speeches she gives with the help of her computer’s voice, about new technology, entrepreneurship, and trying to find an accessible bathroom while at tech events.

Lately Glenda has been searching for the perfect app for her iPad that will help her with chores like making hair appointments and ordering burgers. In The iPad as an Affordable Communicator: A Follow-up Review, she commented

While I was at the mall last Tuesday, i also made a hair appointment. In the old days I would have typed a note before leaving home. Or, I would have asked Darrell to call for an appointment.

Tuesday i pulled out my iPad, typed a message in the Proloquo2Go app and showed it to the receptionist. An appointment was made for the following day.

All is not golden with the Proloquo2Go app, however, as Glenda discovers when she tries to order food.

VI. Apophenia

danah boyd initialsApophenia is danah boyd’s blog. This blog deals with big ideas. It focuses on issues: trends, analysis, data about how young people use technology, and topics like privacy.

In “for the lolz”: 4chan is hacking the attention economy , danah explains what 4chan is with a “Newbie Note” before she begins her discussion of the site:

Newbie note: If you have never heard of 4chan, start with the Wikipedia entry and not the website itself. The site tends to offend many adults’ sensibilities. As one of my friends put it, loving LOLcats or rickrolling as outputs is like loving a tasty hamburger; visiting 4chan is like visiting the meat factory. At some point, it’d probably help to visit the meat factory, but that might make you go vegetarian.

danah boyd is quite possibly one the the smartest people on the planet, so running big ideas through her mind and getting to read the results of her thinking on her blog is a true privilege.

VII. The Female Perspective of Computer Science

female perspective of computer science logoThe Female Perspective of Computer Science is from Gail Carmichael, who is working on a doctorate in Computer Science. Her fields of study include educational entertainment and augmented reality, both of which get discussed on the blog. Other topics include visual computing, games, events, computer science, and women.

Recently she wrote about Getting the Hang of iPhone Development.

I needed to learn how to develop for the iPhone since the projects I want to work on next will be games for the device. This task was somewhat daunting, given that I hadn’t really even used a Mac before, let alone Objective-C or Xcode. Luckily, there are some really great resources out there that you should check out if you are also just getting started.

So far, the most invaluable resource for me has been the Stanford iTunes U lectures on iPhone development. After watching the lectures via iTunes, you can download all the course materials, including slides and assignments.

A free course from Standford so you can learn how to develop for iPhone? Dang, that’s great information!

VIII. Geek Feminism Blog

geek feminismGeek Feminism Blog has over a dozen writers, mostly women. A few male feminists in the mix is a good thing. The range of topics you find there is as wide and deep as the minds of its many contributors. The frequent linkspam posts are a great source for exploring the blogosphere on topics related to technology and women. Other topics you might find explored there are comics, conferences, gender, open source, programming, star trek, and just about anything else you can think of that interests geeks.

In July 6th is the last day for super early bird rate for Grace Hopper Celebration, Terri tells us,

If you haven’t heard of GHC before, it’s a really amazing conference for women involved in technology (especially geek feminists!). Not only does it tip the usual ratios on their heads (hello, >90% women! And yes, that means men are welcome.) it’s one of very few conferences where I can say that even the most technical talks are interesting and well-presented.

IX. CSS, JavaScript and XHTML Explained and Standardista

standardistaCSS, JavaScript and XHTML Explained is by Estele Weyl. The title is self-describing, but doesn’t completely cover the range of what you find there. You might learn about conferences, girl geeks, browser quirks, accessibility and other web development related topics. Estele has another blog called Standardista: CSS3, JavaScript and HTML5 Explained that is similar but devoted to newer technologies such as HTML5. As the technologies move forward, the newer blog may get the most additions.

Estele is great at putting things in an organized matrix to help you quickly see what is what with a topic. For example, in HTML5 Input Attributes & Browser Support, she created a handy table to show which browsers support which of the new HTML5 form elements.

X. MacTips

mac tipsI saved a great one for last: MacTips, the very helpful guide to Macs, iPhones and iPads from Miraz Jordan. The tips never end at MacTips. For example, Use Safari 5′s Reader for easier reading on the web and How to change app Preferences on an iPhone.

Miraz always has clear directions with informative illustrations and screen shots to guide you through all things Mac.

Cross-posted in slightly different form at BlogHer.

Use the scope attribute with table headers

Two simple steps that improve the accessibility of data tables are

  1. use table headers appropriately
  2. use the scope attribute with table headers

The table header tag is <th>. You can assign a <th> element to the any column or row in a table where appropriate. Any row or column with a <th> can be given the attribute scope, which defines whether the heading is associated with a row or a column.

Here is some abbreviated example code for a three column table. Each row would contain a chapter number, title, and author’s name:

<table>
<caption>InterACT with Web Standards Contents and Authors</caption>
<tr>
<th scope="col">Chapter Number</th>
<th scope="col">Chapter Title</th>
<th scope="col">Author's Name</th>
</tr>
<tr>
<th scope="row">1</th>
<td>InterACT</td>
<td>Leslie Jensen-Inman</td>
</tr>
. . .
</table>

CSS can be used to style <th> and <td> elements any way you want. The default browser style is bold and centered for <th>. More important than appearance, however, is the semantic meaning carried by the <th> element with a scope attribute. It provides additional information about the data in the table that clarifies its meaning and purpose. It associates the data in a row or column with the title in the row or column header.

If the example table were finished, it would contain 26 rows. In a long table such as that, strong semantic clues to meaning in the markup add important accessibility helps that benefit all users. I’m not saying this right—even in a small table, semantic markup is important.

Table headers with scope attributes are one piece of table accessibility best practice.

Useful Links: SVG, BAM, InterACT

Doug Shepers from the W3C put together a slideshow in SVG, HTML, CSS and JavaScript that is worth your time. It’s an SVG demo. Play with it. View it in the latest Firefox.

BAM or Blog Accessibility Mastermind is a six lesson course offered by Glenda Watson Hyatt of Do It Myself Blog. I haven’t looked inside the course, but I suspect it’s a good one.

Based on the interest and number of questions Derek Featherstone got during his accessibility presentation at the recent InterACT Summit, I’d say interest from educators about accessibility is very high right now. There’s a free online course from the Web Standards Project (WaSP) InterACT curriculum about accessibility. The course is a perfect resource for teachers. It’s a stand alone course. If you are teaching with InterACT with Web Standards and its chapters on accessibility, the online material a great time saver. Online materials such as exam questions, grading matrices, assignments, objectives, and resources go hand in hand with the material in the book.

Review: Web Standards Solutions: The Markup and Style Handbook


get this book at amazon.com

A review by Web Teacher of Web Standards Solutions: The Markup and Style Handbook, Special Edition (rating: 5 stars)

Web Standards Solutions: The Markup and Style Handbook, Special Edition by Dan Cedarholm is from Friends of ED (2009). This is an updated edition of Cedarholm’s 2004 book by the same name. When I reviewed the 2004 book, this is what I said.

The book grew out of Cederholm’s practice of asking his simplebits.com users to offer ideas on markup by asking questions such as, “What is the best way to markup such-and-such a page element with XHTML?” The responses were interesting and so is the book, which explores standards-based structural markup and CSS in a way that is fast and easy reading and provides very useful content.

Cederholm covers topics such as markup for lists, headings, tables, forms, and anchors. He looks at CSS for all those elements, plus print styles, CSS layouts, image replacement techniques, and body styles. He examines possible ways to do all these things and brings you gently to understand the way that best uses standards and semantic markup to accomplish the job.

Although this is not a book for beginners, students with basic knowledge of XHTML and CSS will like this book. It is quick to use, provides good examples and resources, and is written in an engaging and light-hearted style that is fun to read. Definitely recommended.

That review still tells the story of what this book is about. Much of the content is unchanged. A small amount of new content has been added. For example, in the chapter “Applying CSS” there is now a section on “Reset Styles.” With the 2009 edition, there are bonus materials available online from Friends of ED. These include the example files from the book, a couple of extra chapters (one by Ian Lloyd) and several appendix-type reference chapters.

Although the bonus materials are excellent, they may not be enough of an incentive to buy the new edition if you own the 2004 edition. If you don’t own the 2004 edition, this is a terrific book for anyone interested in semantic markup to own. It’s worth buying. You will learn much about the best markup solutions to most text formatting questions.

Summary: An updated classic about semantic markup and CSS.

Cross posted at Webuquerque.