According to the dictionary access means the right to enter, reach or gain access to. It can be applied to all types of users, whether it be someone with a visual disability or someone who is using a different browser.
It sounds a little daunting, and sure it can be pretentious to gloat about having an accessible site but the truth of the matter is that having an accessible website makes things easier for everyone, including the webmaster.
Usually an accessible website is a tidy website. The coding is neat and easy to follow, the design is flexible so all types of users on all types of browsers, machines, devices and resolutions can view the same page and navigate it with ease.
Since accessible design is mostly valid design the amount of time the site takes to load decreases substantially. Coding semantically is coding logically - a semantically coded website will still make sense without CSS. This in turn allows search engines to pick out key words easily.
However accessible design isn’t just about coding. For example, a large proportion of the population is colour blind. Some users pay for the amount of bandwidth they use so image heavy layouts may not appeal to them. Some workplaces have Flash or JavaScript disabled for security reasons.
Lesson one is don’t design like a knob, which should be obvious. This includes using tiny text, no contrast, minuscule layouts, heavy graphics, Flash for navigational purposes, yadda yadda. As obvious as these points are, it’s very easy to fall into these design traps.
Big fonts don’t mean you need to have everything set to 500%. If you can read the text from around two feet away on a high resolution without having to increase the size of the text, squint or cry in agony then that means it’s most likely accessible.
Colour is a very personal experience and it’s difficult to achieve consistency in a way that’s accessible. Ensure that there is enough contrast by creating a greyscale of your designs, and view colours through colour blind eyes with the accessiblity colour wheel.
Fixed designs are optimum if the width falls within the most common resolution used by visitors. However if the design is bigger than the common resolution, it may be worth coding a fluid layout. I recommend browsing fluid design galleries as it is a difficult look to achieve.
Most website layouts will not need to rely on image heavy designs to pull visitors. Evaluate the purpose of images and try text alternatives. Heavy graphics can be avoided by compressing them into JPG or GIF files. Layout images can then be placed within a stylesheet.
WebAIM states that Flash can be accessible and a useful tool to increase usability. However accessible Flash is not easily achieved so if you’re not familiar with it either a) use it lightly and make sure that image alternatives are set in place or b) avoid it like the plague.
What are the most common mistakes in front end web development? Not using a DocType, invalid coding, not coding semantically, using tables to make layouts, and other equally naughty things. Anyone willing to contribute to this list, please do since coding isn’t my forte.
A doctype is a code at the top of a web page that sets a standard for the browsers that access it. Without it a browser has to guess how to display a page which it doesn’t always do accurately - ensure the proper doctype is used to render the design correctly.
Adopt a good coding ethic. Close all tags, nest tags properly, code in lower case and place everything within html, body and head tags. Don’t use markup to style elements such as font tags and the ever redundant center tag. In place of tables use divs.
Semantic code creates a logical heirarchy and tells a browser what data lays within tags. It allows bots from search engines to crawl with ease and makes designs easier to update. There are many more benefits to semantic coding, and it’s easily achieved.
Using alternative text on images is another aspect of accessible coding. Putting alt text on an image that says “piccie_lushcamera01″ isn’t very descriptive. However, “Me in a Belle costume” is! Alternative text should fall under ten words as it’s only meant to be a brief annotation.
User experience is still a relatively new field in the world of user orientated services. It focuses on the psychology of user and interface interactions to produce the best experience for that user within context. As such there are a few points I feel are applicable to the web.
It’s easy to simply accept the statistics when it comes to eye tracking. Naturally there are recurring trends in the ways a user scans a website but mostly it’s down to the decisions made by the designer. Consider colour, size, position and shape when creating a gaze plot - or use an eye tracker.
There are also many usability factors to consider for text centric websites. Around a dozen words per line is optimum for readibility. Splitting up articles makes them easier to read on screen, as is using precise language without too much jargon or ‘waffle’.
Accessibility does not make a good or bad designer. It’s an expected part of work ethic when regarding users, and as such should not be a selling point in any profession. Alternatively, saying accessiblity limits design is just placing blame on the tools instead of accepting responsbility.
This article is being edited to remain current and relevant. If you have anything to contribute, please do not hesitate to comment. This post was last edited on August 12, 2008.
Comments are off Subscribe