How to Use the WAVE tool to Test and Boost Site Accessibility

Did you hear? A website should be accessible to everyone who comes to visit. Yeah, I’m sure you’ve heard that. But how do you know if you have an accessible site? There are all sorts of rules and checks involved in accessibility, but if you’re working with a WordPress blogger who just wants to do the best with limited knowledge, there’s one tool that can be a big help. It’s the WAVE tool from WebAIM.

How to use the WAVE tool to test and boost site accessibility

The WAVE tool tests accessibility. Many other tools do the same thing, but this one is particularly user friendly and helpful.

Start by entering your URL in the opening screen.

The WAVE tool URL entry form

The tool churns away for a while, and finally posts a shot of your blog with icons all over it. Each icon tells a story about some accessibility feature of your blog.

The WAVE tool results show icons on various parts of your blog

The default results page shows you a summary in the sidebar. It lists errors (red icons), alerts (yellow icons), features (green icons), structural elements (blue icons), HTML5 and ARIA elements (lavender icons), and contrast errors (which don’t show up as icons). Above the summary results are buttons to let you look at the page with no styles, or to view only the contrast errors. To the left of the summary panel, you can opt to see details, documentation, or an outline of the page structure.

Click on any WAVE tool icon for more information

On the right, where your web site is pictured, you can click on any icon to get a brief explanation and a link to more information. In this image, the yellow alert icon is telling me that the link in the date goes to the same place as the link in the H1 heading just before it. This isn’t great, but it also is something about WordPress that I cannot change easily. I’ll get into what you can and cannot fix easily in just a bit.

You can look at the code for the items the icons mention if you click the “code” tab at the bottom.

The code panel shows you the code related to any icon you click on the page of WAVE tool results

When you click the “code” panel, you go right to the code for any icon you click.

Fixes: Dealing with Content

The easy fixes for WAVE tool errors and alerts all deal with the content of your page. This is the stuff you control when you enter a new post.

  • WAVE looks for alt text on images. The WordPress image uploader always wants to add title text—you don’t need that. You do need alt text that describes what your image is and how it functions as part of your content.
  • The WAVE tool checks for structural elements like headings and lists. Headings are important in terms of organization, structure, and information hierarchy. These should be real headings made from tags that begin with “h,” like h1 or h2 or h3, and not some words that you’ve made bold. Headings also help with navigation for users on assistive devices like screen readers.

If you don’t have these two features on your page, you need to change your habits as you write your content. Add the alt text as you embed images, and make headings using the formatting tools in the tool bar as you write your post.

Fixes: Dealing with CSS

You may have errors that relate not to how you enter content, but to the CSS for your blog. Perhaps your color scheme lacks enough contrast for certain users. In How (and When and Why) to Set Up a Child Theme in WordPress, I explained how to change the CSS in your blog with a child theme. If you need to increase color contrast or make other changes involving styles, a child theme is the way to do it.

Fixes: Dealing with Code

Some errors and alerts come out of the code that comes from WordPress. Sometimes errors like these are easy to fix; sometimes they are not. I pointed out a case above where duplicate links were shown in an alert. That’s just going to be that way on my blog.

The WAVE tools error for a lack of label on a form field.

There’s an error on my blog because the select menu for my categories doesn’t have a label. The category menu is a widget. There’s no way to get into the code for this widget. Knowing about the error made me do the best I can with the heading right before the select menu. I hope the heading helps, but this error is just going to stay an error.

The WAVE tool looks for ARIA landmark roles

The WAVE tool looks for ARIA landmark roles. If your theme is missing them—that’s a code problem that’s easy to fix. The fix uses a child theme. In Think about ARIA roles when choosing a WordPress theme, I explain how to insert ARIA landmark roles in your code. It’s easier than it sounds.

Getting started with accessibility can be daunting because there are so many details involved, but the WAVE tool can guide you on your way. Run your blog through it. Fix any errors and alerts you can fix. If you absolutely cannot fix something, so be it. But if you can correct an error with a simple change of habit—or by implementing a few easy changes —it will make a huge difference to your users.

Go back to the WAVE tool every once in a while, and retest yourself to make sure you’re still on track.

GoDaddy Managed WordPress is built from the ground up for maximum performance, security and ease of use. Click here to experience the difference.

How (and When and Why) to Set Up a Child Theme in WordPress

If you aren’t quite up to creating your own WordPress theme from scratch, but you know some CSS, you can still customize a WordPress theme. The secret is using a child theme.

How

Besides knowing a bit of CSS to customize your theme, you also need to know how to create a folder and add a file to it on your server. You can do this with FTP, or you can sign in to your server and use the control panel to do it.

Pick a Theme

What kind of theme do you want? You might be looking for a responsive design that will work on any device, you might want a certain number of columns or a certain layout. It’s often easy to find something that’s almost what you want. Maybe you don’t like the colors or want different fonts, but it comes close to what you want. That kind of theme is a perfect candidate to customize with a child theme.

Get your almost-perfect theme installed in WordPress and make it the active theme. Now you’re ready to start working on the child theme.

Create up the Child Theme Folder

For the examples, I’m going to assume you picked the WordPress theme twentyeleven. Everything I say about twentyeleven should be changed to reflect the name of the theme you actually use instead.

In your themes directory, create a new folder. If the theme you’re using is twentyeleven, the folder for the child theme would be twentyeleven-child. That’s the theme name, a hyphen, and the word child. Here’s an example of how it might look.

a child theme folder in the directory structure

Add the new Style Rules

The only file that has to be placed in the new child theme folder is a style.css file. Any changes you make to the CSS for the theme will be saved in the style.css file in the child theme folder and will overrule the CSS in the parent theme once you’ve set it all up.

The style.css document you put in the child theme folder must start with specific information. Of course, you change it to match your particular names.


/*
 Theme Name:   Twenty Eleven Child
 Description:  Twenty Eleven Child Theme
 Author:       Jane Doe
 Author URI:   http://example.com
 Template:     twentyeleven
*/

@import url("../twentyeleven/style.css");

/* =Theme customization starts here------------ */

You don’t have to have all that. The only required lines are the Theme Name, the Template, and the ‘@import url’ line. The @import line brings in all the style rules from the parent theme.

Under the line where it says “Theme customization starts here,” put any new style rules you need. The rules you’ll need are things you want to be different from the way they are in the parent theme.

Activate Your Child Theme

Even before you add any CSS rules to the child theme stylesheet, you can activate the theme. Log in to your WordPress site’s dashboard. Go to Administration Panels > Appearance > Themes. You will see your child theme listed there. Click Activate.

When you look at your blog in the browser, it will look exactly like the parent theme, but as you add new rules to the child theme style.css file, you will see your customizations taking shape.

Find the Selectors and Write New Styles

If you see something you want to customize, you need to look for it in the style.css file for the parent theme. Once you’ve found the rule in the parent stylesheet, you know what selectors to use to make changes in the child stylesheet.

For example, on one of my blogs, I didn’t like the way the h3 headings in the parent theme looked. I found the rule for the the h3 headings. In my parent theme, it looked like this:


.entry-content h3,
.comment-content h3 {
	font-size: 10px;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	text-transform: uppercase;
}

I didn’t like the size, or the line height, and I didn’t like the uppercase. To overrule that, I used the same selectors, but I put a new rule for those selectors in the style.css file in the child theme folder.


.entry-content h3,
.comment-content h3 {
	font-size: 16px;
	font-weight:bold;
	line-height: 1.6em;
	text-transform: none;
}

I got bigger, bolder, headings that weren’t all uppercase! Just what I wanted.

More Advanced Customizations

Other parts of your theme can be customized as well. You might want to add something to the header.php file or the functions.php file. This can be done by adding the changed files to the child theme folder. If the parent theme is updated, none of your changes in the child theme folder will be lost. The WordPress Codex has more information to help you to move to the advanced level.

Note that a child theme can only be used when a blog has WordPress installed on its own domain. Child themes won’t work for themes hosted on wordpress.com.

GoDaddy Managed WordPress is built from the ground up for maximum performance, security and ease of use. Click here to experience the difference.

Good News for Bloggers from Getty Images

Getty Images Embed Tool

Getty Images Embed Tool

Getty Images announced a new embed feature that gives free, legal access to many images to bloggers for noncommercial use.

If you find an image on the Getty site, look for an embed icon(</>) from the search results or image detail page. Click that and you’ll get the HTML code to embed that image on your site.

Getty has images from news, entertainment, sports, archival and creative imagery content. This new embed tool takes the rights of its content contributors and partners into account, because images will include photographer attribution and, when clicked, will link back to gettyimages.com where the image can be licensed for commercial use.

For a look at the dark side of what this means in terms of advertising and to photographers, see Getty did what?

4 Tips for Safeguarding Your WordPress Install

4 tips for safeguarding your wordpress install

The increasing popularity of WordPress – now the most prolific content management system used for websites, stimulates interest among hackers, who’d love to exploit such a widely used platform.  Millions of users, however, count on WordPress security to get their messages out, so a great deal of attention is paid keeping WordPress resources protected.

If you are not an IT professional, unsure of exactly where to start protecting your WordPress install, lean on basic, proven approaches to stay safe.  Dialing your security efforts back to square-one lays the groundwork for continued success, reinforcing barriers against hacker intrusions.  Use these tips to keep your WordPress install out of harm’s way.

Secure Logins and Passwords Furnish First Line of Defense

Login information is a primary barrier against attacks, so maintaining reasonable password and login values is essential for ongoing security.  Pre-loaded words, like Admin, for your administrator account should be changed immediately, since they make obvious targets for hackers looking to infiltrate your website.

Secure passwords consist of multiple characters – at least eight, and should be made-up of a variety of different types of icons.  Both lower and upper case letters should be integrated into your password for the highest levels of safety, as well as numbers and symbols which interrupt identifiable patterns recognized by hackers.

Each person requiring WordPress access should be set-up as an individual user, so there is never a need to share your login information with others.

Updates Keep you Protected

Essential to combating emerging threats, updates should be routine parts of your WordPress management strategy.  WordPress versions should be updated themselves, as well as plugins and themes you use with your install.

In addition to CMS updates, designers add new features periodically and install fixes against the latest hacker attacks. If you are not up-to-date, it becomes easier to breach the security of your outdated version of WordPress.  Updating is simple; just follow instructions given in WordPress, taking care to back-up your files before you proceed.

In case you are not sure whether or not you are current, WordPress clues you in with a yellow banner across the top of your installation, reminding you to update soon.

Use Secure Connections to Access WordPress

Wi-Fi connections leave you vulnerable to hacker attacks, which can glean login data and other sensitive information.  To keep your WordPress safe, connect only from wired sources and trusted home connections with data encryption.

As a periodic safety check, look at the IP addresses of logged-in users to your WordPress site. Unfamiliar entries tip you off to unauthorized activity, requiring immediate password changes.  As an additional measure, hide the version of WordPress installed on your site from users, giving hackers as little information as possible to use against you.

Security Plugins and Backups

Plugins furnish added security against attacks, targeting spam comments and other exploits. Askimet is one free example, preloaded to WordPress installations.  To activate, visit this site to get a WordPress key, which launches basic coverage.  Additional paid services are available upon request.

Regular backups provide assurances your vital website data will not be lost, even when problems do occur.  For the best results, store backups remotely, so they are not caught-up when server difficulties arise.

Safeguarding WordPress starts with basic precautions like using secure passwords, and stays on track with frequent updates and security plugins.

Guest blogger Sarah Brooks is from Freepeoplesearch.org. She is a Houston based freelance writer and blogger. Questions and comments can be sent to brooks.sarah23 @ gmail.com.

Web Teacher’s Top 10 Posts of the Year

Here’s what hit the sweet spot with readers on Web Teacher this year.

  1. Tip: Styling the label element with CSS
  2. Style a fieldset with rounded corners using CSS
  3. 10 Quotes All Graphic Designers Should Know By Heart
  4. Style Fieldsets like a Pro
  5. ARIA Roles 101
  6. Tip: What is a Wrapper Div?
  7. Three examples of fieldsets styled with CSS
  8. How to make HTML5 semantic elements more accessible
  9. Best 5 WordPress Plugins for Managing Multiple Blogs
  10. CSS3 Transitions: The basics

Thanks for reading!

Useful links: School of Webcraft, Affordable Blogging Tools, Creativity

Have you looked at Mozilla’s School of Webcraft? If you have worked your way through these courses, I’d really like to hear about your experience.

5 Affordable Image Creation Tools that I use In My Blogging is from ProBlogger.

There are some interesting ideas on creativity from Minh Tran in Comic Con and Creativity.

7 Things to Consider Before Starting Your Blog

There may not be a Nobel Prize for Bloggers, but there are plenty of prizes to be won if your blog reaches people, offers great advice and insights and affects lives. Those are, after all, the goals of an effective blog. If you can find a niche, and get specific, chances are that you can develop a winning formula. If you are thinking about starting a blog, here are seven considerations to ensure that your efforts are not wasted:

Passion, Purpose, Personality

While the three “Ps” of blogging might seem obvious, they are perhaps the most important concepts for a beginning blogger to grasp. The mechanics of writing a blog post can be mastered; but your basic reason for blogging must be born of your passion for the subject, your “obsession” with your topic. You will attract readers because you have something of value to offer them. You will keep them returning to your blog because they can relate, they learn something useful, and they recognize that you offer a unique perspective.

Choose Your Name Carefully

Spend some time choosing your domain name, and select your blog name carefully. No matter how cute or clever it is, if it has no relationship to your subject matter, it will not be effective. Your name need not be an award-winner. It should, however, be “good enough” as Henri Junttila of www.WakeUpCloud.com says. The best names are unique, concise, memorable and easy to spell.

Web Hosting

A lot has been written about the relative advantages of free sites and paid sites. The truth is that, unless you simply enjoy seeing your words in print, a blog is an investment. You are investing your time, your energy and your money in a venture that you hope will return benefits to you. If your ultimate goal is to earn a living as a blogger, you may employ different tactics from those of a hobby blogger. Only you can make those decisions.

If, indeed, you intend to make blogging your business, you must first develop a business plan and define your goals. Be clear about them. Gather all the information you can. A good source for comparing hosting sites is www.WhoIsHostingThis.com. When you have the facts, you can make an informed decision, and launch your blog.

Who is hosting this?

Who is hosting this?

Investing In Your Blog

There are myriad ways of investing: Time, energy and money are only a few. But, make no mistake about the facts. Creating a successful blog requires a multi-faceted investment of your talents, commitment that will test your limits, an ongoing effort that may be all-consuming, and time. No successful blogger has ever been an overnight success. And, no successful blogger retains that success without continuing effort.

If you have the grit to succeed in this field, you will continue to learn every day. You will continue to seek out and implement better methods of utilizing your time, being consistent, refining your design, monitoring results, testing reader response, effectively monetizing your blog, and employing social media marketing to expand your reach.

None of it is easy. All of it requires analysis. Much of it requires time, either yours or time you pay for. Some of it requires money, too.

Analytics — Getting Answers

There is an old expression about trying various strategies to see what works: It has to do with throwing strands of spaghetti at the wall to see what sticks. That is one way to analyze results, to be sure. A better way, however, is to employ proven analytics, institute A/B testing procedures, utilize measurable techniques and monitor the results. If your end goal is to monetize your blog, you need to know what attracts readers, what your readers like, what prompts them to action, what they find exciting and what causes a response, whether positive or negative.

Google Analytics

Google Analytics  Image Credit: Beth Kanter

There are services you can use to track all this information; take www.Moz.com or Google Analytics. It is an essential part of the blogging success that you seek. Otherwise, you could be just writing on the wind. Neil Patel speaks of three ways to increase and retain readership on your blog. They are worth consideration; they are:

  • Survey your readership to determine what they like (or don’t like)
  • Build a community, by making your readers feel a part of something larger
  • Collect emails, to increase your return visitor count

Be Consistent to Build a Following

Most blog analysts mention consistency as a key component of success. Readers, particularly those who are looking for useful information or advice, appreciate routine. If your readers come to expect a recipe every Wednesday, be sure they get one every Wednesday. Likewise, if a popular feature of your blog is a Q&A forum on the second and fourth Fridays of each month, don’t disappoint them. If you publish new posts three times each week, and suddenly miss two weeks in a row because you go on vacation, you may lose loyal readers.

Outreach, Community, Expectations

Remember, that your blog is not all about you. It is, and should be, very much about your readers. It is their needs, their concerns and their actions that have a direct effect on your success. While it is your passion that drives it and your personality that defines it, your blog represents a community of interested participants — or, it should. The best and most successful blogs have an active group of commenters, “sharers” and responders who all have a stake in the continuing success of the venture.

That is what makes starting a blog so exciting. Just as the digital world will continue to change and develop, so will your blog. You will respond to changing times, and to the evolving needs of your visitors and subscribers. Maintain ties with other bloggers in your field; write guest posts; link occasionally to others. Be interested, and interesting. Be involved. Be successful.

Guest author M-J loves blogging and reading other blogs. She is currently studying business part-time and has two children.