WebAIM announces updates to the WAVE tool

WebAIM announced several updates to the WAVE tool. I always spend time in my accessibility classes telling students about the importance of accessibility testing. The WAVE tool is generally at the top of my list.

About a year ago, I wrote How to Use the WAVE tool to Boost Site Accessibility. I don’t want to revamp that post, but I do want to call attention to the updates.

A number of the updates deal with “smarter ARIA and HTML5 evaluation logic.” This includes HTML5 structural elements and ARIA landmarks. There are improvements in support for aria-labelledby and aria-describedby including a new icon for broken ARIA references.

There are some scripting changes that allow evaluation of dynamically generated content. There’s a new indicator for skipped heading levels and for big blocks of justified text. The Firefox extension is going to go away, but the Chrome extension will still be supported.

Still the Same

Click on an alert icon to see a brief explanation of the accessibility issue identified by the WAVE tool
Click on an icon to see a brief explanation of the accessibility issue identified by the WAVE tool

Using the tool on the web remains basically the same. You enter your URL in the form at wave.webaim.org. The results of the evaluation are displayed over a representation of your page with icons indicating errors, alerts, features, structural elements, HTML5 and ARIA, and contrast errors. Clicking on an icon gives you a brief explanation of the meaning, with a link for more information.

Most importantly for web developers and web educators, the WAVE tool is still a valuable tool to help identify accessibility issues in sites.

 

Manage Convention Contacts with Twitter Lists and Feedly Categories

You’re going to a great conference. You’re going to do lots of networking. The stack of business cards you accumulate will be enormous. Here are a couple of tips to help you keep all those names, faces, Twitter handles, and URLs straight.

Twitter Lists

Twitter lists are easy to create. They provide a way to read Twitter feeds from people according to groupings or interests. You don’t even have to be following them. You might have a list of food bloggers or tech bloggers or some other category of Twitter users. When you view the list you see tweets only from the specific people you added to the list.

When someone hands you a business card at a conference, you can quickly add their Twitter handle to a list. That will help you keep names and faces organized.

You can create a list and add to it from a desktop browser or from a mobile Twitter app. Let’s step through creating a list with a desktop browser first.

Create a list with a desktop browser

Sign in to your Twitter account in a browser. Here’s mine as an example.

The Lists option is on your profile page

In the menu bar opposite your profile photo, click the Lists link. When the Lists page opens, you’ll see any lists you subscribe to (you can subscribe to any public list, including your own), any lists you’ve been added to as a member, and the invitation to create a new list. Once you have lists created, this is where you would find them in your desktop browser.

Create a new list button

Click Create new list, give the list a name, and you can begin adding Twitter accounts to it.

When you create a new list, you can make it public or keep it private. If it’s a public list, it has a URL and anyone who is interested can subscribe to it. For example, here’s one of my public lists: womeninwebeducation.

To add someone to a list, find their user profile. You can search for their name, or just click on their name if you see it on Twitter. When their Twitter profile opens, click the gear icon by the Follow button to see user options.

Select Add or remove from lists

Select Add or remove from lists. Your lists open up and you check or select the list you want to put the user in.

Create a List with the Twitter App

Open the Twitter app.

Click the Me icon

Touch the Me icon at the bottom of the screen to see your own profile.

Click the gear icon to see Lists

Touch the gear icon next to your profile image to see Lists on the menu. Touch Lists.

Touch the plus sign to add a new list

At the top of the Lists page, you see a plus (+) sign. Touch it to create a new list. Give the list a name and decide if it’s public or private.

Once you have lists built, this is where you would go in the mobile app to read the lists you’ve subscribed to. This is also where you can see lists you’ve been added to by someone else.

Next, add Twitter accounts to your list.

Touch the gear icon to see Add/remove from lists

When you’re viewing the Twitter profile of the account you want to add to a list, touch the gear icon to see Add/remove from lists. Press Add/remove from lists and select the list you want to use.

In addition to viewing lists from a browser or the mobile app, tools such as TweetDeck have options that allow you to add columns for lists to your display.

Organize Blogs with Feedly Categories

Feedly is an RSS feed reader. There are many such tools, and you may already be using one to keep track of blogs you want to follow. The reason I mention Feedly in particular is that it offers a way to organize blog feeds into categories. You create categories yourself, or you can use Feedly’s suggestions for categories such as Food, Fashion, Books, or whatever.

Feedly has both a mobile and a desktop version, which makes it easy for you to take those conference contacts you made and quickly add blog URLs to the proper categories. In addition, there’s a pro version of Feedly ($5 a month or $45 for a whole year) that connects to Evernote where you can write notes or save snippets from blog posts.

You can login to Feedly with your Google ID or your Facebook ID.

Using Feedly on a Desktop

I logged in and customized my view a bit, which explains the orange. Hope you like orange as much as I do.

The Home menu in Feedly

At the Home page, there’s a menu on the left. It shows you the 3 categories I have so far: Cinema, Culture and Pop Culture. So far I only have a few blogs in each category. When the home page opens, all the unread feeds from everything appears, but I can click on any one of the categories or blogs and see only that.

Feedly has many categories you can browse, or you can make your own. Feedly calls these Collections. To quickly add a specific blog, find the search box on the upper right. Type in the URL of the blog you want to add. I typed www.theculturemom.com.

The search brought up the culture mom feed

The search brought up the feed from The Culture Mom. Next to the name of the blog at the top you see a button with +Feedly. I click that to add this blog to one of my collections.

Add the blog to whatever collection you want

I select the collection I want. Or I can add a new category.

Using the Feedly App

On your mobile device, the Feedly app takes some practice to get used to the way it swipes, but you’ll get the hang of it quickly.

A menu at the top left shows your feeds

It opens with all your unread posts. A menu at the upper left reveals your specific collections and blogs, which you see opened above. At the upper right, there’s a magnifying glass. Touch that to quickly add a blog.

Search for the blog you want to add

The search box opens, where the URL of the blog you want, e.g. theculturemom.com, can be added. Feedly also suggests blogs it thinks you will like. When the search results appear, you see a plus (+) sign at the top near the name of the blog feed. Touch that plus sign and add the blog to the appropriate collection.

It only takes a few seconds to add the information from a business card to a Twitter list or Feedly collection. If you do it while the person who gave you the card is still fresh in your mind, it will help you remember who you’ve talked to, what their interests are, what their blog is about, and it will give you a way to keep an eye on their tweets. Then you can concentrate on having a great conversation with the next person you meet.

[NOTE: This post was syndicated in slightly different form on BlogHer.com.]

Review: Badass: Making Users Awesome


Badass: Making Users Awesome by Kathy Sierra is from O’Reilly (2015). This book is about motivation and skills and progress and brain science. It shows you how to use motivation and skill levels and learning progress by being badass, by modeling badass, and by giving you the badass version of learning how to be badass.

If you know who Kathy Sierra is and what she’s already done as a writer and programmer, you’ll recognize what she’s talking about in this book. It’s been her topic before and she’s come back to it with a powerful teaching device – this book. Kathy’s premise is you don’t just want a great product, you want great users. You want users who find it easy to learn to be experts with your product. Even when your product is complicated and hard to learn to use at an expert level, if you approach helping users the right way, they will reach the badass level as users.

The book if full of lively graphics, funny illustrations, and simple but powerful charts.

A chart showing how an upgrade to software can move users from competent back to feeling like they suck

This chart shows exactly how I feel about every new upgrade of Dreamweaver CC. Each time I open it, I go back into the suck zone on something. Getting the labels on form fields – oh, no, I suck. Creating a new selector in the style sheet – oh, no, I suck. Using the fucking fluid layout grid – oh, no, I suck. Kathy explains how to help users avoid that oh, no, I suck sensation with upgrades and with new skills mastery in general. The people at Adobe are definitely not using all of Kathy’s suggestions to help users move to badass with updates to their products.

A chart showing the good practice is in the zone between what your good at and what you are bad at

Even something as basic as practicing a skill to get better at it has brain science examples to help you design experiences for users that let them practice the right way. There are also chapters on how to help users filter out brain spam so they can concentrate on things that matter. Here’s the table of contents:

The table of contents for Badass: Making Users Awesome

Just looking at the table of contents tells you a lot about how this book works, and how Kathy Sierra uses her deep understanding of brain science and user experience to craft an experience for you that will leave you feeling badass.

If you want to learn how to create and market a product that your users will love using and will recommend to others, read this book. After you’ve read it, go back and look at how it was written. What were you asked to do as you read? How were you helped to understand the points made? How were you helped and supported as a reader to become an expert in making users awesome? What patterns and perceptions sneaked into your brain without you knowing how it happened?

Kathy Sierra has always been about creating awesome users, and this book can help you be about that, too.

Welcome back to the conversation, Kathy. You were missed.

A review by Virginia DeBolt of Badass: Making Users Awesome (rating: 5 stars)

Summary: Kathy Sierra shows you how to make your users keep coming back by helping them be badass at using your product.

Disclosure: I received a free copy of this book from the publisher for this review. Opinions are my own. Links to Amazon are affiliate links. Here is my review policy. .

Interactive Video: Think of the Possibilities for Education

Scene from Jack Black's "That Black Bat Licorice" video
Scene from Jack Black’s “That Black Bat Licorice” video

I’ve seen a couple of interactive videos recently. One was an version of Bob Dylan’s “Like a Rolling Stone.”

In the Bob Dylan video, you use up and down arrow keys to move between various visuals, all perfected coordinated with the song. I’m unable to embed the video here, but I urge you to check it out and play with the interactive elements.

The second, which is below, is by Jack Black for his song “That Black Bat Licorice.” In Jack Black’s video use the “3” or the “B” key for 3 different versions of the video. Again, play with the controls as you watch it.

What got me all worked up as I watched these two videos is the educational possibilities. HTML, CSS, JavaScript, apps like Dreamweaver and Photoshop – imagine how something like this could be used to teach those topics.

Tools and Resources for Interactive Video

The folks at PBS’s POV Filmmakers have a great resource list of tools and costs. For each tool in their list, they give examples of work and describe what the tool does. Finding the best tool is also a topic of discussion on Quora. You can do some interactive work with videos on YouTube.

I would certainly be interested in seeing someone experiment with interactive video as a teaching tool. If you’ve seen anything like that on the web, please mention it in the comments.

The Basics of Choosing and Obtaining a Domain Name

Thinking of starting a new website? Two preliminary steps are choosing a domain name for your new site and then buying that domain name. Let’s take a look at some of the basics involved in that process.

Choosing a Domain Name

A good domain name is easy to remember and easy to spell. A domain name that’s easy to spell shouldn’t have characters like hyphens between words. It you want more than one word in the name, run them together like alistapart.com or webstandardssherpa.com. It’s a bit awkward to read, but for someone typing the domain name for A List Apart or Web Standards Sherpa in the location bar of a browser, it makes perfect sense.

Are you starting a website for an established business? Try to make the name reflect the business name and the branding that is already in place for the business. This may be a bit hard if it’s a commonly used name. For example, a Denver floor tile company might have trouble getting the name mountaintile.com. But perhaps denvermountaintile.com might be available.

If it’s a personal website, try to use your name. Karen McGrane owns karenmcgrane.com. How simple is that?

If it’s a blog where you’ll be exploring a particular point of view, pick a domain name that reflects your point of view. A name like Mountain Poet or Lesbian Dad tells you a story about what you can expect from the website before you’ve even visited.

Before you seek out a place to purchase the domain name, it’s good to have a few ideas ready to go. Your first choice might not be available.

Obtaining a Domain Name

Okay, you’ve got some ideas for a great domain name. It’s time to see what’s available for purchase.

There are literally thousands of places where you can buy a domain name. I use the domain name services connected to the hosting company where I do business. I like having the domain name company and the web hosting company connected. But I know people who think this is a bad idea. I think the reasoning of the people who think it’s a bad idea is that if one company shuts down suddenly, at least the other one still operates. If you choose an established company with a good history, I don’t think it’s something you need to worry about.

If you search for domain names on Google you get 84,000,000 results. There are a lot of choices! I’ll just pick one to use as an example. This does not imply that I endorse this company, it’s just an example. Also, prices vary, so the prices you see in these examples may be different from other domain name sellers.

A typical domain name search form.
A typical domain name search form.

At domain.com, you see something similar to what you see on any site where you want to purchase a domain name. You enter the name you are hoping to purchase. The site will tell you if the name is available. If it’s not available exactly as you want it, the site will suggest alternatives that are close to what you want.

I searched for vdebolt.com, my own domain name. Here’s what the tool told me.

The .com is gone, but other top level domains for that name are available.
The .com is gone, but other top level domains for that name are available.

I can’t buy vdebolt.com (duh, I already own it) but other top level domain name types are available like vdebolt.net or vdebolt.org. (Domain names are cheap. Many people buy several variations and direct them all to one site.)

If the name you want isn’t available, choosing whether or not to go with a .net or .org or some other .whatever is an option.

If you don’t want the .org or .net or .whatever, the tools usually suggest variations of the name based on your original search. Here are a few suggested to me:

A few of the suggested variations on my domain name.
A few of the suggested variations on my domain name.

Even better, create your own variations like the denvermountaintile.com example and use the search tool to see if it is available.

If you can’t get a name close to what you originally wanted, go back to step one and brainstorm a new idea. Keep trying until you eventually find a name that will work and is available.

You can buy the name for 1 year or for several. You’ll probably save a few dollars if you buy several years at a time. Don’t forget to renew it on time, or you might lose it!

You’re all set. Go build something awesome.

[Note: This post was originally published on Blogher.com.]