Archive for the ‘accessibility’ Category

4 Essential Tests Before Beginning a New Website

Friday, March 23rd, 2012

Thinking of embarking on a website redesign? The smartest place to start is by asking the people who use the site what they want. Now is a perfect time to embark on a new project, while you’ve got spring cleaning on the brain. Check out our series on how to spring clean your website for a fresh start.

Here are four tests and surveys you should conduct before you launch new project.

User Needs Survey

Set up a questionnaire survey to find out what your audience thinks is most important about your website. Take their comments into consideration for your needs assessment process. What those survey questions will be largely depend on your own organization’s directives. But a question like this might help you get started.

Please rate the value of each of these features, with 1 being extremely important and 4 being extremely unimportant.

  • Ability to log on to access premium material
  • A blog
  • Video clips that demonstrate how we work

You can request a free quick and easy survey template if you don’t feel like writing your own. Make sure to leave a comments space so people can add features they think might be valuable. This is also a good time to evaluate some of your current processes, like asking people how long it took them to receive feedback or how easy it is to make a donation or pay for an item.

Web Content Test

Having an appealing design is one thing, but having readable copy is another. (Be honest: how much jargon are you using?). The web design industry magazine A List Apart puts it this way:

Whether the purpose of your site is to convince people to do something, to buy something, or simply to inform, testing only whether they can find information or complete transactions is a missed opportunity: Is the content appropriate for the audience? Can they read and understand what you’ve written?

ALA gives helpful instructions on how to test the effectiveness of your content. Examples: try some readability software like Added Bytes, Juicy Studio, and Edit Central (or even Microsoft Word’s built-in Flesch Reading Ease check), or host a moderated reading test.

Accessibility Review

A website is only useful if everyone can use it. Paying attention to accessibility is good practice for all organizations–especially since good accessibility equals good SEO–and it’s a must if you’re a government agency. You can start with these Essential Tips for Making Websites Accessible, and then you might begin a “preliminary review.”

The W3C’s Web Accessibility Initiative provides instructions for conducting a preliminary review of your website’s accessibility. In short, they recommend selecting a representative sampling of high profile pages (e.g., the welcome page) and those with different layouts and functionality, and testing just a few of those to see how well you’re measuring up.

SEO Audit

Making your website more friendly to search engines is a large but critical undertaking. The good news is any improvement you make is a good one. Schedule a search engine optimization (SEO) audit of your website with a few key goals in mind:

  • Are you using heading tags correctly?
  • Do you have a sitemap?
  • Is your content skimpy?

Check out the 9-Point SEO Checklist for more tips.

Digesting All That Alphabet Soup

Tuesday, July 19th, 2011

[This appeared in our July newsletter. Subscribe now so you get monthly tasty tech tidbits and special deals.]

Alphabet Soup

Alphabet Soup

Anyone who works in the non-profit world knows it’s lousy with acronyms (although there are plenty of for-profit violators too). It seems that every charity that has a full name in English that everyone understands, yet they insist on using an acronym that no one outside their office recognizes.

If all you are doing is distributing documents internally, by all means go nuts with your abbreviations. But if those obscure references are headed for your website, think again.

Why? Because websites are intended for the public. Nearly every one of Talance’s clients claims that the aim of their website is to reach more and more people and make their information easier to use. One of the first barriers to friendly, accessible information is to go overboard on the acronyms.

It doesn’t have to be that way, however. Here are a few tips on dealing with letter overload online:

  • Spell out the acronyms on first reference (e.g., “The World Wide Web Consortium (W3C) offers useful tips on creating better websites”).
  • Use the <acronym> tag. This lets users hover their cursor over each acronym to see what it stands for.
  • If a descriptive term is better, always use it instead of the acronym.

Meanwhile, read more about how to make your website all-around more accessible.

John Rochford Talks About Accessibility

Wednesday, May 18th, 2011

Some people think having accessible websites is like having a swimming pool. Nice to have, but too expensive and too much upkeep. Unlike a swimming pool, however, an accessible website means that anyone can view it whatever their limitation, ranging from a physical limitation like limited or no eyesight, to having a handheld device with small display.

John Rochford, Director of Technology at New England INDEX a project of UMass Medical School, is one of those people who takes accessibility seriously and makes websites better for everyone. Talance has been working with Rochford and his team on the online training component for an initiative called Patient-Centered Medical Home (PCMH). It’s a major undertaking that aims to streamline and coordinate how healthcare providers work with each other and patients.

Monique Cuvelier, Talance’s CEO, asked Rochford about his work in accessibility, his biggest headaches and his proudest moment.

Monique Cuvelier: I think a lot of people who care about accessibility have a compelling reason to do so. What’s the driving force behind your involvement in accessibility?

John Rochford: The driving force for me is the result of the combination and the evolution of two of my passions. One is for computer technology. The other is for helping people with intellectual disabilities. My professional career started in the mid-1980s with a succession of jobs serving people with intellectual disabilities. During that time, people shunned computer geeks like me. Yet the people I served embraced me. That they are such an open, friendly, and accepting people has always been heartwarming to me.

In the early 1990s, I sought a graduate degree at The Shriver Center for research, training and service related to intellectual disabilities. It has a project, New England INDEX, which provides free information about programs and services for people with disabilities residing in Massachusetts. All of the software INDEX designed at the time for that purpose was as accessible to people with disabilities as we could make it.

I started to extend our software to the web in the mid-1990s. Since then, I have designing websites as accessible as technology and funding have allowed, and as best as my developing expertise could make them.

MC: What does a typical accessibility test or process look like for you?

JR: We start by building accessible web applications. This makes it much less costly to fix accessibility issues, and much easier to test for related deficiencies. We use automated testing software to check for problems across a website. We have also used assistive technology products in our testing. A good example is that we make sure all our web sites are compatible with screen reader software for people who are blind. Most importantly, we have people with disabilities test our web sites.

MC: What kind of digital media are ignored the most with accessibility?

JR: All digital media (e.g., videos, music, etc.) are natively inaccessible. Only a tiny percentage of websites are helpful to people with disabilities by incorporating accessible media players and/or by providing alternative, accessible content. An accessible media player, for example, provides controls (e.g., play, pause) that work with screen readers so people who are blind can use them. Such controls are also good for people with physical disabilities who may not be able to use a mouse.

The National Center for Accessible Media is a good resource about accessible digital media. For many years, we have used on our websites its ccPlayer, an accessible media player, and its captioning services for our video content.

MC: What’s the single biggest rule people should follow to make pages accessible?

JR: Make sure people with disabilities test a website and every version of it.

MC: What’s your biggest accessibility headache?

JR: My most significant challenge is convincing people to make their websites accessible. I find it appalling that I have to work to convince the staff of organizations, which serve people with disabilities, to make their sites accessible. What people do not realize is that an accessible website is easier to use for everyone, which is always good for business.

MC: What was your proudest moment in accessibility?

JR: It occurred early in my career after I installed speech recognition software for a young woman. I was showing her how to use it instead of a keyboard and a mouse, which she could not use. She cried as she told me it was the first time she would be able to write a letter to her mother. I consider that achievement of hers to be the special one.

Essential Tips for Making Websites Accessible

Wednesday, March 23rd, 2011

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.

Welcome to Our Website! (Except for You)

Thursday, March 17th, 2011

[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.

Definitive Website Pre-Launch Checklist

Tuesday, January 11th, 2011

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

You’re Doing It All Wrong! How to Use Pictures on a Website

Friday, October 1st, 2010

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

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

KoalasThe 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

KoalasIntroduce 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.

3 Sites for Accessibility

Friday, September 25th, 2009

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.

Five Mistakes That Can Kill Your SEO

Friday, September 18th, 2009

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.

Your Homepage Isn’t the Only Way In

Tuesday, August 11th, 2009

Most organizations will spend most of their time designing and maintaining their website’s homepage. And that’s fine. You don’t want to neglect what’s there – the majority of your website’s visitors will see this page before any other.

But thanks to the social media functionality that makes it easy to share individual pages, such as to an event you’re putting on or the bio of someone on your site, it’s increasingly likely that a visitor might use Delicious, Digg, StumbleUpon or Facebook to sneak in around the homepage.

Make sure you think of every page as a potential entry point for website visitors. This means that you may have to adapt internal pages so they make sense to a visitor. From every page, make sure a visitor

  • Can access your menus
  • Can easily contact you
  • Knows they’re on your site – make every page harmonious with every other one

As a test, choose any page at random, and see if you can flow through your site without thinking too hard. Did you know what to do next? If not, jot down what confused you, and make sure you fix it.