Category: WebTeacherTips

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.

Optimize your writing for users with impaired vision

Users with screen reader devices will scan and skim your web page in a manner somewhat similar to the way a visual user will. Screen readers can be programmed to read only headings, subheadings and links. When something of interest pops out from this “skimming” process, the user can stop and have all the information in a particular section of the page read completely.

The first step is to write meaningful headings and subheadings that contain important words and phrases. The first paragraph under each heading should clarify what the section of the page content is about.

Next, make sure that link text is informative. Link text should give users some idea what they will find when they click. Link text like “here” or “click here” is not informative. The link text in this example is descriptive and informative: Google is trying a similar thing with HTML5 Rocks. It’s obvious that a click will take the user to HTML5 Rocks.

Finally, write alt text that gives an alternative description of the content or function of an image. For example, in book reviews such as the recent one of Mobile Design and Development, the alt text for the image of the book cover is “get Mobile Design and Development at Amazon.” While it does not say that the image is a book cover, it does tell the user what happens if the image is clicked–functional alt text.

These tips are best practice for all users. Optimizing your writing for users who are surfing your page with their ears will improve your page for users who are scanning the page visually, too. Like many practices that have been adopted as accessibility requirements, good writing benefits all users, not just those with visual impairments.

Required form fields in HTML5

One of many changes in forms that HTML5 is promising involves required form fields. In HTML 4 or XHTML, some scripting is needed to create a required form field.

With HTML5, there is a new attribute available for required form controls. The attribute is required. The browser or user agent will check on this and notify the user if the requirement is not met.

Here’s an example using an input element.

<label>Name: <input name="name" required></label>

Easy, right?

In HTML5, there is no need to use the syntax required="required". Dare I say it? In HTML5, all that’s required is required.

Make Rounded Corners with CSS3

There’s a new version of Cascading Style Sheets (CSS) in the works—CSS3. With this new set of rules for styling your blogs and web pages, you can do things that previously could only be done with images.

One bit of magic that you can do with a CSS style rule now is make rounded corners. You can apply rounded corners to borders, fieldsets, or anything that has a border line around it.

Everything on a web page is in a box. Every paragraph, heading or image you stick on a web page is bounded by a box. Usually you aren’t aware of the box, because you don’t see the borders—the boundaries of the box are not visible. If you put borders on the box, the edges of the box are made visible. Borders frame the element on the page and help separate one sort of content from another. The default borders create square cornered rectangles.

I’ve used rounded corners in several places on this blog. Here’s a specific example. I have a slideshow from Flickr in my sidebar. I put a border around the heading and the slideshow to separate that particular bit of content on my page into a unique element. I made the border have rounded corners.

The Rounded Corner How To

Find the relevant rule in your stylesheet. Every part of your page probably already has some style rules in place. If there’s already a border rule, change it. If it doesn’t have a border rule yet, add it. Here’s what I did in the part of my stylesheet where I styled the slideshow:

#womenintechslides {
border: solid 1px #3CF;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}

I’ll explain the rule. I added the slideshow to my HTML page using a div with the ID “womenintechslides.” The rule styles that div. First I set the border itself. I made it solid. I made it 1px in width. I made it an aqua color represented by the code #3CF. That much alone would add a border, but the border would have square corners.

The CSS3 property that rounds corners is border-radius. For that property, give a value in pixels to set how curved you want the corner to be. If you go beyond about 18px for the radius, it starts to look bad (pixelated), but try various numbers to find what you like.

CSS3 isn’t set in stone yet. The various browsers are adopting bits of it at different rates. You have to add a couple of redundant border-radius declarations aimed at different browsers, at least for now. The -webkit-border-radius declaration is meant for webkit browsers like Safari and Chrome. The -moz-border-radius one is for mozilla browsers like Firefox. If you put the standards rule—border-radius—last, it will be the one used when all browsers finally get CSS3 implemented using the same rules. By that time, you’ll only need the border-radius rule and the others can be dropped.

That’s the whole magic trick: border-radius. Go round something off.

How to Look Like a Wiz with RGBa

Show your wizard skills by learning to use the RGBa color specification in CSS3.

I’ll show you how to create a partially transparent background behind a paragraph using RGBa. The result will look like this:

the red color displayed with .5 opacity

You get control over the alpha channel with RGBa. The RGB represents red, green, blue. The A represents alpha transparency, or degree of opacity. In this color specification, there is no hexadecimal notation, the only allowed values are integers  (0-255) or percentages (0%-100%). Here’s an example.

p {color: rgba(0,0,255,0.5)}

The rule creates a paragraph that is a semi-transparent solid blue. The four integers in the declaration mean there is 0 red, 0 green, 255 (or 100%) blue, with an alpha transparency value of 0.5.  The values for the A can range from 0.0 which is completely transparent, to 1, which is complete opaque.

em {color: rgba(255,0,0,0.25)}
p {color: rgba(100%,50%,0%,0.8)}

The first rule creates an emphasized element that is solid red and very transparent with the value 0.25. The second rule styles a paragraph with percentage values. It would display as a slightly transparent orange.

Here’s how I created the strawberry example you see above. The HTML is

<div id="ex">
<p>Strawberries </p>
</div>

The CSS is

#ex {
width: 542px;
height: 80px;
background: url(img/strawberry-bg.jpg) no-repeat;
border: 2px solid #999;
}
p {text-align:center;
font-size: 2em;
background-color: rgba(255,0,0,.5);}

You can use RGBa in CSS anywhere you use color: a background, a border, a heading, etc. To control what is shown in IE8 and older, give a normal RGB declaration, followed by and RGBa declaration. Non-compliant browsers will simply ignore the rule they don’t support. Compliant browsers will use the last rule in the cascade. If you quit worrying about IE8 and older long ago, just use the rgba rule – all modern browsers support it.

color: rgb(255, 255, 255,);
color: rgba(255, 255, 255, 0.5);

With pseudo elements like a:hover, the degree of opacity can be used to create beautiful and informative effects.

Note: Updated October 5, 2014 with current information.

Burning Questions about Twitter: Answered!

Bonggamom says there are Things About Twitter I’d Like to Know. Since one person’s questions are usually lurking in the minds of others, I thought the answers might be helpful to share.

Bonggamom’s first question is “Is there anywhere in the blogosphere that lists down upcoming Twitter parties?” The answer is yes, with limits. Many Twitter meetups are organized through Twitter.Meetup.com. If you don’t find one near you, then use Meetup to start your own. Meetups are also organized and run through Twitmit. Twitmit meetups are scheduled via Twitter, Facebook and by email. Both of these tools allow you to search for meetups by location.

Bonggamom asks, “Does anyone know of any twitter tool that counts how many tweets occurred with a certain hashtag between a specific start and end date?” A number of solutions I found suggested (but not implemented) for this idea involved using the Twitter API to glean your information. I think Bonggamom is looking for someone who’s already done that part. Tweetreach can do the job, including meeting the requirement to limit the data to certain dates. SWIX tracks Twitter data. SWIX is a complete social media tracking tool—and not free. (I’ll be writing more about it next week. You know the drill—stay tuned.)

For the mobile user, Bonggamom wants to know, “If you don’t have a smart phone, what are some good Twitter apps to use?” NOT a smart phone. Ouch, that’s a hard one. But doable, according to The Best Mobile Applications for Twitter.

Just associate your Twitter account with Posterous and then you’ll be able to post updates on Twitter by sending emails to twitter@posterous.com. Whatever you put in the email subject will be converted into your Twitter status.

According to 20 ways to use Twitter from your mobile phone, any phone with SMS capability can use Twitter.

First see: How to activate your phone for Twitter

Then text your update to:

  • In the US, use 40404.
  • In Canada, use 21212.
  • In India, use 5566511.
  • Anywhere else, use +44 7624 801423

Bonggamom wants to know, “How do you insert all those special characters like notes and hearts and smileys into your tweets?” Like these . . .

•*¨*•.¸♥.❀*¨`*♥.¸.•*¨`*¸♥•*SWEET DREAMS¨*•.¸♥.❀*¨`*♥.¸.•*¨`*¸ .•*¨•*¨♥.¸.❄•*•*¨`*♥.❀•*¨•*¨EVERYONE♥.¸✻.•*¨`*¸.♥❀.•*¨•*¨♥.Sat May 15 03:03:41 via Twaitterdimeotane
dimeotane

I use Twhirl by Seesmic on my desktop, and there are special characters in the Edit menu. For using Twitter in your browser, Next Web has a bookmarklet that provides special characters. Twitter Symbols is also a browser bookmarklet. You can add on the Greasemonkey scripts to Firefox, specifically the Tweetsymbols script, which allows you to drag symbols in to your Tweet input box. I looked around in the Twitterific app I use for Twitter on my iPhone and couldn’t find a way to insert special characters there.

Next, Bonggamom is burning to know, “Is there any tool around for effectively managing your Twitter followers, i.e. be able to sort them alphabetically, by age, by location, be able to search for a specific follower, etc?” I couldn’t find any online way to sort followers aphabetically. Like Bonggamom, I wish there was a way to do this. I find it really hard to search among my followers when I’m looking for someone in particular whose Twitter name I’m not 100% sure I remember correctly. It’s much faster to use Twitter’s Find People search and look for their name.

Foller.me will put all your followers’ locations on a Google map. You can search your follower’s bios with TweepSearch. Many bios mention location. A bio search might reveal age, but I don’t often see age mentioned in many Twitter profiles.

It was fun for me to find all this information. To Bonggamom, I can only say thanks for asking.

Cross-posted at BlogHer.

CSS3 Transitions: The basics

The current CSS3 Transitions module says, “CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.” The following properties are used to create rules for transitions:

  • transition-property—the CSS property to which the transition will apply
  • transition-duration—the length of time the transition will take, given in seconds
  • transition-timing-function—allows transitions to “ease-in” or “ease-out” through intermediate stages
  • transition-delay—allows the start of a transition to be delayed, values given in seconds

There is a shorthand syntax for applying all four of the transition properties in one rule.

Not all browsers support CSS3 at the current time, which means that the transition effect will only work on certain browsers or when webkit and moz and Opera workarounds are added to the rule. So, you can get transitioning to work in some browsers with rules like:

a:hover {
color:#666;
-webkit-transition:color .5s ease-in;
-moz-transition:color .5s ease-in;
-o-transition:color .5s ease-in;
transition:color .5s ease-in;
}

That rule demonstrates the shorthand syntax. In order, the properties set in shorthand are the property to be transitioned (color), the duration of the transition (.5 second), and the type of transition (ease-in). Without the webkit, moz, and o declarations, the full rule (not in shorthand) would be:

a:hover {
color:#666;
transition-property:color;
transition-duration:.5s;
transition-timing-function:ease-in;
}

Of the CSS3 properties, the following can have transitions applied. These are the animatable properties.

Property Name Type
background-color color
background-image only gradients
background-position percentage, length
border-bottom-color color
border-bottom-width length
border-color color
border-left-color color
border-left-width length
border-right-color color
border-right-width length
border-spacing length
border-top-color color
border-top-width length
border-width length
bottom length, percentage
color color
crop rectangle
font-size length, percentage
font-weight number
grid-* various
height length, percentage
left length, percentage
letter-spacing length
line-height number, length, percentage
margin-bottom length
margin-left length
margin-right length
margin-top length
max-height length, percentage
max-width length, percentage
min-height length, percentage
min-width length, percentage
opacity number
outline-color color
outline-offset integer
outline-width length
padding-bottom length
padding-left length
padding-right length
padding-top length
right length, percentage
text-indent length, percentage
text-shadow shadow
top length, percentage
vertical-align keywords, length, percentage
visibility visibility
width length, percentage
word-spacing length, percentage
z-index integer
zoom number

Some examples you might enjoy playing with can be found in the following articles. You must view these with one of the supporting browsers to see anything happen.