First of all, let's see what an accessible website is. An accessible website provides alternative means of understandnig its content. This implies that to everything that an impaired visitor can't see, a text alternative should be presented. This makes navigating and understanding the site much easier, for sighted visitors as well.
The benefits of website accessibility, then are:
This means that with an accessible website you not only increase your target audience and thus advance way far over your competitors among people with disabilities, but also gain a boost in the search engine traffic for the ordinary visitors as well.
Speaking of search engine visibility. Recently, Google launched Google Accessible Search for people with disabilities. The search is intended to grant special value to accessible websites. To put simply, this is a vehicle to make the above benefits more real.
Also, website accessibility has long become a legal requirement in US, UK (PDF) and will be legal in Europe. Not that every person that is disgusted by your site accessibility will sue you, but the possibility remains if you are a popular website or provide something that everyone (even the poor-sighted people) can and will use.
Here are a couple of quotes from the Google Accessible Search FAQ:
It tends to favor pages that degrade gracefully --- pages with few visual distractions and pages that are likely to render well with images turned off.
Broadly, Google defines accessible websites and pages as content that the blind and visually challenged can use and consume using standard online technology...
Currently we take into account several factors, including a given page's simplicity, how much visual imagery it carries and whether or not it's primary purpose is immediately viable with keyboard navigation
Judging from the quotes above, and from Web Content Accessibility Guidelines, here is what you can do to improve your site accessibility:
Generally, a good website usability analysis will make a website accessibile (Priority 1 or Section 508 compliant, for instance). However, if you want your site to be absolutely accessible for people with disabilities, you'd rather get someone specifically just for this mission.
]]>One of the most important things to understand about fonts is that not everyone has the same ones installed on their computer. The only way you can absolutely be sure your visitors will see the font you choose is to make your text an image. There are many reasons though, why this isn't a good idea and you should limit the amount of images you use to display text. It's ok for your logo. It's very bad for your main copy.
The web is about flexibility and your choice in which families of fonts you use should take advantage of this flexibility. Ideally you should provide options for which font your visitors will see. I like to offer an ideal font, followed by a common font, and then offer a generic font to capture all those who don't have either of the first two fonts installed. If you were coding your font famil in CSS it might look something like:
font-family: "ideal, common, generic";
font-family: "franklin gothic, verdana, sans-serif"
Browsers will display the first one they encounter on the list that's installed, so if a visitor does have your ideal font they will see it. If not they may still have the common font you specified, and if all else fails they should be able to see your generic option. It's also ok to use a different list of fonts for different elements in your design, but try to limit it.
It can become very distracting to see every heading in a different font, your navigation links in another, and your body copy in yet another font. Best practice would be to keep the total number of fonts on the page to three.
Serifs are the small decorations you'll find at the end of letters. Serif fonts are generally easier to read in print, but the situation is just the opposite on a computer monitor. At smaller size serif fonts can become unreadable and a sans-serif font is preferred. The font you are seeing now is a serif font, but to give you a comparison here is a serif font against a sans-serif font.
You should generally stick to a sans-serif font for your main body copy. It will be much easier for your visitors to read. You can use other font types for page headings or in your logo, but the bulk of your text should really use a sans-serif font. Other types of font you may encounter are decorative and script fonts. Both can be used, but as with serif fonts they are best left to only some page elements and the text in those elements should be larger enough to make the font readable.
Perhaps the biggest accessibility issue with font is the size. Pesonanlly I'm most comfortable reading text at 14px, but that may not be the case with everyone. Your best bet is to use a relative measurement like 'em' when specifying the size of your font.
Using a relative measurement will allow your visitors to more easily adjust the size to whatever works best for them. If you think 12px is a great size then use the equivalent em size. I can increase the font to see it at my preferred 14px (0.9em) or similar if I choose.
As we get older we typically have a harder time reading small text. Know your audience and if your audience is aging you probably want to use a larger default size. You may like that 12px font, but if your audience can't read anything below 16px (1.0em) make sure your default size is 16px or above. But remember to use the relative measurement instead of px.
Relative measurements can play havoc with your design, if you're not careful. You will need to code your site to account for the possibility of your font size being displayed at sizes other than the default you set. Most of the time this isn't too difficult to deal with, but it may be important for your font to remain the same size for your layout.
Your navigation might be a good example where using a fixed size might work better for your design. I will sometimes use absolute measurements for the font size of my navigation, but remember if you do to set it at a size that's larger enough for people to read. If it's too small, your visitors may never find your other pages.
Have you ever visited a site where the color of the text was so close to the color of the background behind it that you couldn't read the words no matter what size of font family was being used? I know I have. It's an example of poor contrast.
You want to use as much contrast as possible between the color of your text and the color of the background. Black text on a white background will be the easiest to read, followed by white text on a balck background. You can use other color combinations, but provide as much contrast as you can.
Remember too that just because you can read the text not everyone else will. Not everyone can discern your light blue text on your medium blue background. Make it as easy as possible for your visitors. No matter how great it looks if no one can read your text they're going to leave pretty fast and they probably won't be coming back.
Even when the colors contrast well the choice still may not be idea. Red text will usually stand out well against a green background. Unless of course you're one of the many people who suffer from red-green color blindness. In that case the two colors will likely look more alike than you'd like.
Remeber that as with many other aspects of your design flexibilty is important to help make your site more accessible to a variety of people. Keep in mind that not everyone has the same fonts installed and provide options for them. Know which types of fonts are easier to read and know too that people prefer different sizes. Provide as much contrast as you can, but remember that contrast or not there are still some combinations that will prove to be difficult for some people.
Here are additional resources about fonts and accessibility:
]]>The transformation of a website from a snake-infested inaccessible maze into a beautiful, airy reading room can include a huge variety of design changes from the barely noticeable to the fundamentally transforming. Making that first step into the maze requires you to balance a number of different issues:
]]>The transformation of a website from a snake-infested inaccessible maze into a beautiful, airy reading room can include a huge variety of design changes from the barely noticeable to the fundamentally transforming. Making that first step into the maze requires you to balance a number of different issues:
Obviously, transforming your site completely doesn't happen overnight. If you have a labyrinthine navigational structure with a monstrously complex table-ridden codebase then you have a lot of work to do.
However, there are usually steps you can take right away which will simply make your site easier to use, regardless of the base html code. Here, I'm providing a short list of useful accessibility changes you can make. They get harder as they go along!
alt attributesFirst steps first - let's fix those images. Just adding alt attributes can make a world of difference - but think carefully about how they should be used. The principle behind an alt attribute is that it should be presented to the user when the image is not available.
It should be a concise description of the picture. It should be something which would make sense when that image is not present. It should not distract the user from what's important on the page. Those spacer gifs? Give them an empty attribute: alt="". A quick checklist:
longdesc attribute.One of the biggest problems your visually impaired visitors or mobile visitors might find themselves dealing with is a long, tedious navigation system they need to scroll through or listen to in order to get what they want - your content. An easy way to save them this trouble is to provide, at the top of your code, a set of skip links.
What do they do? Merely provide a way to jump past the menu and get straight to the main course. They'll look like this: <a href="#content">Skip Navigation</a>. All you need to do is add this at the very beginning of your code and provide either a named anchor or an id at the beginning of your content and you've bypassed one hurdle. If you want more information about creating skip links, you may want to read Designing with Accessibility in Mind, at Cre8asiteForums.
Everybody seems to know about the most basic pseudo-class for links: a:hover. (If you're not providing a unique state for your links when a user's mouse is over them, you better get on that now. Go on - get to it.) However, the other pseudo-classes are much less used, though equally important. These are a:focus, a:active and a:visited.
:Focus provides the look for a link when a user has navigated to it using the keyboard. Letting users who are unable to use a mouse know where they are is a critical element for accessibility. (A word to the wise - although :active is technically a different state, Internet Explorer 6 uses :active to apply styling instead of :focus, so you should always set both.) Setting the :visited pseudo-class will give your users information about where they've been - always a useful piece of information.
Forms are basically the same issue - except, of course, for the fact that Internet Explorer 6 ignores the use of pseudo-classes for anything other than anchor tags. This will require that you make use of JavaScript in order to provide focus in IE.
Yes, I know that it's easy to write this sentence:
Click here to read more about my life as an astronaut!
Most websites.
But, really, you shouldn't. So rewrite it. Why? Because screen readers have this lovely feature which allows users to jump from link to link and have just the link text read to them. If what they hear is "Click Here," they will be very frustrated — they may have already read your content, and just want to find a particular link. Instead, they need to listen to the whole 10 minute diatribe again.
Give them better link text - wrap your link around "Read more about my life as an astronaut," or even just "my life as an astronaut." It won't be wasted effort - search engines will also very much appreciate those extra clues to what your pages are about.
Well, of course you're thinking about color. You're a web designer - you do graphic design for a living! Do I think you're not considering color? No. But I suspect you're not thinking about it in quite the same way I do.
When I think about color, I'm thinking about whether or not I'm requiring somebody to see colors in order to take action. For example, writing this sentence as instructions for a form:
Red asterisks (*) are required fields. Green asterisks (*) are optional.
If you're color blind, you're probably stuck at this point. You'll be filling in every field — even if it's irrelevant — because you can't distinguish red from green.
There are other issues, as well. Both very high contrasts and very low contrasts have their own risks. You need to balance your color choices carefully. People with dyslexia may suffer from sensitivity to high color contrasts (as may many others). The elderly or others with visual impairments may be unable to distinguish colors which are too similar.
Get a wide range of opinions on any color contrasts you're using - checking them with a tool such as Mel Pedley's color contrast analyzer, which warns about too high contrast settings as well as those which are too low can be useful.
This isn't going to give you that wonderful, relaxing reading room I talked about up above. But a lot of these things can be easily incorporated directly into your existing design - you don't necessarily need to start over or rebuild completely in order to create a better experience for your users. Moving forward one step at a time will still make the web a better place.
]]>