Slick web designs might impress the board, but what good does that do if your visitors can’t see? Making your website accessible is extremely important for people with visual or physical hindrances. Tiny fonts and low-contrast colors might look good in practice, but they’re useless if they can’t be read or used to navigate your website.

The upside to embracing accessibility is that your digital materials, be them websites, online courses or electronic documents, will be better used by everyone.

Here are nine tips that make a more accessible website.

[You can find an article about the importance of accessibility and helpful tools in the last issue of the newsletter. Subscribe to the newsletter.]

Graphics

Make sure you use images, icons and other visual elements consistently and appropriately.

Text equivalents

If you you’re using graphics, figures or illustrations, make sure you include a line of text or a longer description for people who can’t see them.

Headings

Use H tags to organize and structure your content rather than using larger fonts and different colors. This is a helpful article on H tags and best practices.

Remember PDFs

PDF documents are often neglected in an accessibility review. Make sure they’re accessible too.

Spell out abbreviations and acronyms

Screen readers have a hard time with acronyms – they think they’re full words. Either spell them out or use coding to make them readable. Look at the acronym in the previous paragraph to see an example.

Use tables appropriately

Not everything should be in a table; many contain information that’s more readable when they’re simply written out. If you do use a table, make sure you’re marking it up appropriately.

High contrast

When you use colors, make sure they stand out. I like to run websites through Vischeck to see how they display to people who are color blind.

Captions or scripts

If you’re using video or audio, use closed captioning or provide a script for people to read along.

Use descriptive links

No more “click here.” Use descriptive text around your hypertext.

[This appeared in our March newsletter. Wanna subscribe? Do it now!]

I’ve yet to work with a client who doesn’t use the word “welcoming” in some way to describe the website they want. No doubt that goes for just about anyone reading this article right now. In fact, most people will spend considerable thought and effort coming up with the best open-looking fonts, the friendliest text, the warmest colors when it comes to designing a website or online course, all in the service of being more appealing to their audience. For this, I commend them.

But you can’t really be selectively welcoming. “Welcome,” by definition means everybody, not cherry-picking the people who are the easiest to accommodate. It means you need to make your website accessible. It also happens to be a legal requirement for many states who have to comply with Section 508.

So your job – if you’re serious about welcoming – is to make sure your website appears for everybody, no matter if they’re using an iPad, have low vision or some other disability that prevents them from using your website as you intended.

Where to start? An accessibility evaluation is the best place. Talance works with many government clients who are required to follow Section 508 accessibility rules, so we can give your site a thorough evaluation. Contact us for information.

You can also improve your website’s accessibility by running it through one of these free tools. They’ll give you a handful of items you can fix yourself, as well as a solid notion of what to take to a web company to address. Try any or all of these:

Wave

Evaluating Web Sites for Accessibility

Functional Accessibility Evaluator

WebAIM Section 508 Checklist

Want more? Talance can provide expert web accessibility evaluation and consulting to pinpoint problems and provide specific recommendations. Contact us for information.

Websites can have as many moving parts as a jumbo jet, so it’s easy to lose track of something. That’s why checklists abound here at Talance HQ. They’re one of the best ways we know to make sure we don’t forget something while juggling all the building, writing and planning pieces. We know that when it comes time to launch, it’s particularly easy to forget something important.

Below is a list of top items that can make the launch of any website easier and more organized. We’ll keep adding if we think of anything new. Did we forget something? Add it in the comments, and we’ll update.

Also check out our 9-point SEO checklist to help you show up at the top of those search engine results.

[This appeared in our January newsletter. Wanna subscribe?]

Copy

• Spelling correct on every page
• Check for typos
• All pages reviewed and accounted for
• Outdated content removed
• Placeholder content removed
• Check for consistency in writing voice, tone and style (including first person vs. third person, singular and plural, eccentric capitalizations and words like “website” vs. “web site”)
• Non-spelling errors, such as old addresses, phone numbers, former employees, etc., corrected
• Stylistic inconsistencies fixed
• Terms of use updated
• Copyright updated
• Privacy policy updated
• Contact information accessible on every page
• All hidden copy checked (error messages, JavaScript functions, transcriptions)
• Jargon removed
• Content quality evaluated

Formatting

• Most important info listed at the top of the page
• Appropriate use of bold and bullets for easy scanning
• No written text within images
• Colors and typefaces consistent on every page
• Each page format uniform
• Images resized and consistent
• Menus not overloaded with too many items
• H tags used for headlines rather than bolds or size increases

Technical Quality Assurance

• Internal and external hyperlinks work
• Pages checked against WCAG guidelines
• Private data secure (passwords, contact info, etc.)
• Usability testing complete
• Sitemap updated
• Everything works
• Important pages print OK
• All old URLs point to new URLs

Accessibility

• “Alt” attributes used for all descriptive images
• Pages accessible
• High contrast color used everywhere
• Color and size used for critical information
• Tested on most common browsers
• Tested on mobile devices

Marketing

• PR releases written
• Social media launch campaign planned
• Off-line promotion planned
• Friends, colleagues notified
• E-newsletter notification written and ready to send
• Business cards, letterhead, envelopes and other printed material updated with new address
• Voice mail updated with new address
• Email signature updated with notification about launch
• Link submitted to directories and search engines
• Ads created
• Blog entries planned or written
• Marketing plan revised
• SEO checklist completed

Support

• Training completed
• Extra help on website support procured
• User feedback surveys written
• Maintenance and update schedule created
• Plan established in case of heavy traffic
• Databases set to backup in case of roll-back

We see some common mistakes on our web travels at Talance. We see a lot of them that have to do with image formatting on websites and blogs. No doubt that a gripping image can compel a visitor to spend more time with you or even give you money. But you can ruin the best photo with bad habits.

Here’s what people do all wrong with pictures on websites, and how you can learn from their mistakes.

Infraction: No ALT tag

Not every web browser can see every picture. Obviously, blind people can’t see pictures, but other people have pictures turned off, and some browsers restrict certain kinds of images (hello, Gmail and Outlook). That’s what the ALT attribute is for. It’s meant to be attached to each picture so there’s a text equivalent in case the picture can’t be displayed. At least someone can read a description of what the picture should be.

How to fix it

This one is easy. Every time you add a picture to your site, fill in the ALT text box or “image description” field. Almost every web editor prompts you for this information. Here’s what it might look like:

Where to add the ALT tag

Infraction: Huge image, small space

Many people know how to take an enormous web photo and make it look small. You can set the image to shrink it down to fit in a reasonable sized box on the page. This technique can squish the picture into a weird shape and also slow down the loading of your page.

How to fix it

What’s better is to make the picture smaller to begin with. Pick one of the hundreds of image resizing programs out there – we use Photoshop in the office – and crop it down. It will load fast and look right.

Infraction: No padding

The eye craves white space. When text is crammed up against a picture, there’s no white space, which makes the page look junky and makes it more difficult to read.

You can see I’ve added a picture here with no padding. See how the words are all mashed up against it? Makes it difficult to see the picture and read the text surrounding it.

How to fix it

Introduce yourself to padding. Padding puts a margin around your pictures, which helps break up text and helps the eye move more fluidly down the page. The best way to add padding is to ask whoever is in charge of building your site to add it directly to the CSS file. But you can add it manually too.

In your image tool on your web editor, look for Image Properties. Sometimes this is in the advanced settings. Look for fields called Vertical Space and Horizontal Space, and enter 10. That will give your picture a nice gutter to help it stand out. See how the same picture as above looks that much nicer just because I added a little breathing room around it? It gives a more polished look to the whole site.

Too many websites ignore accessibility. But the ability to let people with visual or other constraints (like people using iPhones who can’t see Flash) certainly notice when they can’t use a website. The upshot: they never return.

Here are three sites you can use to help make it easier for people to use your site:

Colour Contrast Check
“The Colour Contrast Check Tool allows to specify a foreground and a background colour and determine if they provide enough of a contrast “when viewed by someone having color deficits or when viewed on a black and white screen”

WAVE
“Rather than providing a complex technical report, WAVE shows the original web page with embedded icons and indicators that reveal the accessibility of that page.”

Browsershots
Browsershots makes screenshots of your web design in different browsers.

Considering that about half the people on the Internet find you through some kind of search engine query, it’s vitally important that you show up everywhere you should. Such are the intricacies of search engine optimization.

Improving your SEO is an on-going task, but here are five mistakes you can make to really kill your SEO strategy.

1. Use images for headings

Some people think regular old text is too boring for headings, so they use pictures instead. A major no-no. Search engines like header tags (< h1 >, < h2 >, etc.), so use these instead of graphics. You can always change the style of them through CSS if you don’t like the way they appear.

2. Leave image tags blank

This mistake is incredibly common, but it’s also incredibly easy to fix. Whenever you have an image display on a page, make sure you fill in the so-called “alt tag.” It’s a handy place to stash keywords (search engines figure anything you illustrate is important, so they pay attention), and it helps with overall accessibility.

3. Bad spelling

Search engines are skeptical of crummy spelling. Get a dictionary.

4. Flash only

Flash is, well, flashy, but it’s not incredibly usable. It’s hard for people to navigate, and also hard for search engines to catalog. Provide an HTML alternative so make everybody happy. As an added bonus, anybody using a hand-held device (like an iPhone) will have an easier time reading your site.

5. Ugly URLs

URLs with a string of nonsensical text does nothing for your site. They’re confusing, you can never type them into an address bar and search engines hate them. Instead, make sure you’re using real English in the address. Check out this article’s address for an example.