Accessibility Teaching Materials: Free Download

Accessibility Teaching Resources

A free booklet for web educators

I prepared a booklet (PDF) of materials that I use to teach a short class in web accessibility. There really isn’t a great resource for a class in web accessibility that covers the basics in just a few hours. I took some of my handouts and made such a resource for you. It’s a free download.

Get Accessibility Teaching Resources now. Free!

When to use the null alt option for images

The standards set in WCAG 2.0 state:

Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

Among those text alternatives is where alt text (or alternative text) for an image is used.

The HTML5 specification states that all images must have an alt attribute. Here’s the fine print. All images must have an alt attribute, but there are times when the alt attribute can be empty or null. That is, the attribute has to be there, but there might be nothing in it. Like this:

<img src="image.png" alt="">

When is null alt text acceptable?

There are times when the text surrounding an image gives the alt text of the image. It’s part of the content. Therefore, to put the same information in an alt attribute becomes redundant and unnecessary.

Here’s an example from the blog Old Ain’t Dead in the section where the most popular posts are displayed. Alt text is shown using the tools in the Web Developer Toolbar.

An example of redundant alt text.

The alt text and the clickable link are the same

You can see that the alt text for the image is exactly the same as the link text that goes with it. On a screen reader, a user would have to listen to the same text read twice. It would be better if these images had null alt text because the function of the link is explained by the text accompanying it.

Look at how Twitter deals with null alt text.

Jeffrey Zeldman's Twitter image receives no alt text

An example of null alt text

If the alt text for Twitter avatars was not null, but in fact contained the name of the Twitter account, then the name would be spoken twice in a screen reader. In the example above, with null alt text, you would hear “Jeffrey Zeldman” spoken once only because of the null alt text.

Even if you couldn’t see the little profile image, you’d still know it was Jeffrey Zeldman’s twitter account.

What about when images are not loaded or otherwise not displayed by the browser?

If you consider the two examples already mentioned – the list of top posts and the Twitter avatars – in neither situation would null alt text on the image result in the user becoming confused. The information is there in text form and it’s all that is needed.

What if the text surrounding the image does not explain what the image is?

In that case, put a description in the alt attribute that explains the function of the image or provides the content of the image.

Feminist Lorem Ipsum

Photo of Gloria Steinem with the words "Feminist Lorem Ipsum" superimposed on her image.

I saw Samuel L. Ipsum thanks to this tweet from Chris Carfi. I checked out the Samuel L. Jackson version of lorem ipsum and thought it was clever. I realized that we need a feminist paragraph or two that can be used as filler by web designers.

I didn’t build it into a fancy lorem ipsum generator, but I did put together some random quotes that can be stuffed into a new layout while you’re in the design stages. It isn’t a widget, it’s old fashioned copy and paste, but here you go:

One Paragraph

Whisky, gambling and Ferraris are better than housework. -Françoise Sagan Women don’t get raped because they were drinking or took drugs. Women do not get raped because they weren’t careful enough. Women get raped because someone raped them. -Jessica Valenti I love being single. It’s almost like being rich. -Sue Grafton In fact, there is perhaps only one human being in a thousand who is passionately interested in his job for the job’s sake. The difference is that if that one person in a thousand is a man, we say, simply, that he is passionately keen on his job; if she is a woman, we say she is a freak. -Dorothy L. Sayers While falling in love is fun, it’s not everything, and it’s not the antidote to an unfulfilled life, despite what Reese Witherspoon movies may tell you. -Jessica Valenti There will be no mass-based feminist movement as long as feminist ideas are understood only by a well-educated few. -bell hooks

Two Paragraphs

Whisky, gambling and Ferraris are better than housework. -Françoise Sagan Women don’t get raped because they were drinking or took drugs. Women do not get raped because they weren’t careful enough. Women get raped because someone raped them. -Jessica Valenti I love being single. It’s almost like being rich. -Sue Grafton In fact, there is perhaps only one human being in a thousand who is passionately interested in his job for the job’s sake. The difference is that if that one person in a thousand is a man, we say, simply, that he is passionately keen on his job; if she is a woman, we say she is a freak. -Dorothy L. Sayers While falling in love is fun, it’s not everything, and it’s not the antidote to an unfulfilled life, despite what Reese Witherspoon movies may tell you. -Jessica Valenti There will be no mass-based feminist movement as long as feminist ideas are understood only by a well-educated few. -bell hooks

A woman without a man is like a fish without a bicycle. -Gloria Steinem I only know that people call me a feminist whenever I express sentiments that differentiate me from a doormat. -Rebecca West Feminism is the radical notion that women are human beings. -Cheris Kramarae There is no female mind. The brain is not an organ of sex. As well speak of a female liver. -Charlotte Perkins Gilman Men are from Earth, women are from Earth. Deal with it. -George Carlin No woman can call herself free who does not control her own body. -Margaret Sanger I cannot understand anti-abortion arguments that centre on the sanctity of life. As a species we’ve fairly comprehensively demonstrated that we don’t believe in the sanctity of life. The shrugging acceptance of war, famine, epidemic, pain and life-long poverty shows us that, whatever we tell ourselves, we’ve made only the most feeble of efforts to really treat human life as sacred. -Caitlin Moran

If someone wanted to take this idea and put it into a widget or app, that would be lovely.

President Obama on Net Neutrality

Four million average citizens have spoken out in favor of Net Neutrality. Now the most powerful man in the country shares his opinion.

All the petitions I’ve signed, all the letters I’ve sent off the of FCC on this topic do make a difference, of course. But I’m hoping the POTUS’s words will make a major difference.

See the text of this statement.

Using Clearfix to Clear Floats in a Layout

First, let’s review some of the older methods of clearing floats in a layout. In a CSS layout with two or more columns, there is generally some use of float to create the column structure. For the layout to include a footer at the bottom of the page, those floats need to be cleared.

A technique used some time back was to add some element – a br or a div – with a class attached that applied clear:both. This br or div was inserted immediately after the elements that needed clearing. This element added no content, it simply cleared the float (or floats). This works, but it does add an unnecessary element into the HTML content.

Another technique put a clear:both rule in the element following the float (or floats) preceding it. So a footer element might be set to clear:both to move it below any floated elements above it. This works. It puts the clear after the elements that need to be cleared.

Example code for this type of clearing in a two column layout.

<div class="container">
 <header>
 . . .
 </header>
 <main>
 . . .
 </main>
 <div class="sidebar">
 . . .
 </div>
 <footer><!--clear:both rule applied to footer-->
 . . .
 </footer>
</div>

Clearfix

The .clearfix difference is that the class is applied to the parent element containing the floats. The parent element becomes self-clearing.

An advantage of using .clearfix is that it makes the container div height equal to the tallest of the floated columns enclosed. This gives you options with borders, backgrounds and more, particularly when all of the contained elements are floated.

Using .clearfix generally will require the addition of another wrapper div to the HTML. Here’s a example similar to the one above, but designed for .clearfix. The header and footer elements are outside the wrapper div which contains the floated columns.

<div class="container">
<header>
. . .
</header>
 <div class="wrapper"><!--.clearfix class applied to wrapper-->
 <main>
 . . .
 </main>
 <div class="sidebar">
 . . .
 </div>
 </div><!--end wrapper div-->
<footer>
. . .
</footer>
</div><!--end of container div-->

The Clearfix Rule

The CSS for a .clearfix class rule is applied to the parent element containing the floats. It uses the pseudo class :after with no content. It declares the element as display:table.

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

That’s it.

WordPress Basics: Categories and Tags

Wordpress Categories and Tags

When new bloggers get started on WordPress, they need to understand the basics of what Categories and Tags are. Both can help people find the content they want on your blog, but they serve slightly different purposes.

Categories are big. Broad topics that will repeat again and again on your blog. For example, web education is a topic mentioned over and over again on this blog. It should be a Category.

Under the overarching Category of web education, however, there might be many specific ideas that would be used just once, or perhaps infrequently. For example, a post about web education could be something as specific as how to write good alt text or what ARIA roles are. These very specific topics should be added to the post as tags. Tags are also helpful to search engines in figuring out what a post is about.

Depending on your theme in WordPress, the categories may become part of the menu. For example, on my blog Old Ain’t Dead, I only have 5 categories. These categories are Movies, TV series, Web series, Streaming, and News. These categories are shown as a menu. On this blog, Web Teacher, I have dozens of categories and it would not be useful to list them as menu items. The categories are, however, shown in the sidebar in a pull-down menu.

Blogs can be searched by category. For example, if you select the category blogging from the list of categories on this blog, every post in that category shows up as a search result.

Tags are also searchable, for example a search on the tag alt text. The tag alt text might be used in posts in several Categories, so the search results for a tag would include posts from all those Categories.

Choose meaningful category names. Don’t create category names that convey nothing about your content. For example, category names like “This & That” or “Misc” are not helpful to your readers or to search engines.