Making your website accessible to everyone is not only a moral duty, it’s a legal obligation. Many organizations, including the International Olympic Committee, have been sued for not making their websites accessible enough. With 50 million Americans suffering from some disability or other, improving your site’s accessibility makes clear commercial sense too.

It’s not just those labeled as ‘disabled’ who stand to gain either. Research suggests that 57% of adult computer users will benefit from enhanced accessibility of some kind. Only 19% of websites currently meet the most basic accessibility requirements, so you can really stand out from the competition by making a few changes to your site.

In this article, we explore 12 ways in which you can make your site more accessible. Some methods are very cheap and quick to implement, others require a little more time and financial investment, but you should think of them as business opportunities. With the internet so central to all of our lives these days, it’s unfair that some people are being left behind.

1. WAI-ARIA

When improving your site’s accessibility, your first port of call should be a set of documents, published by the Worldwide Web Consortium, called WAI-ARIA. These documents basically set out the ways in which developers should add metadata to HTML for improved accessibility.

2. Progressive Enhancement

Progressive enhancement means designing a website in a layered fashion so that everyone can access the most basic functions and users with better bandwidth and advanced browsers can see an enhanced version. Sites built using a strategy of progressive enhancement can be read much more easily by screen reading software, used by people with a range of disabilities.

3. Alternate Content

It’s absolutely vital that you provide a text equivalent for non-text content in your site. Images and videos need alt tags, so that people using screen reading software can find out exactly what’s on a page. Links need relevant title tags too.

4. Captions

As well as alt tags, images, audio and video clips need captions, so that the visually impaired know exactly what they’re looking at. If you’re uploading videos or podcasts, provide a paragraph of text summarizing its contents, or even better, provide a full transcript. Don’t forget, captions really help with SEO too.

5. Screen Reading Software

Most blind and partially sighted people use screen reading software when browsing websites. One of the best ways to make sure that your website is accessible to them is to try using the same software yourself. Turn off your monitor and run the software to find out exactly what your site’s saying to these valuable readers and potential customers. If the software starts spouting gibberish, you know you need to make some changes!

6. Audit

No amount of accessibility testing you do yourself can compare to having a real specialist cast their expert eye over your site. There are a number of companies and individuals who will carry out an accessibility audit for you, telling you exactly which changes you need to make.

7. Usability Testing

Usability testing is another valuable way to identify potential accessibility problems with your site. Get a group of people with a range of different needs to try your site out for real, navigating around and performing tasks. They’ll be able to tell you in detail about any problems they encounter, lots of which, you’re bound to find, will not be included in WAI-ARIA guidelines.

8. Stylesheets

When you’re building or redesigning your site, make sure that your stylesheets permit variable font sizes and never use fixed fonts. You’d be amazed by how many users, from old people to those with slightly poor eyesight, resize their fonts on a regular basis.

9. Font Controls

Firefox and Internet Explorer users can enlarge fonts but lots of people are not aware of this and others still are using older browsers that do not have this capability. For them, consider embedding font resizing controls into your site.

10. Consistency

Consistency in design from page to page is really important for people who can’t take in a whole page at a glance, and those using screen readers. If you’re site’s consistent, with the same things in the same place on each page, they’ll be able to get to navigate around much more easily. Sighted users often find consistency beneficial too.

11. Text for Navigation

Avoid using images for navigation on your site, at all costs. Use text instead. Screen readers can understand it and it’s much easier to resize. If your navigation controls can’t be enlarged, make sure they’re written in a clear font, at least 16 point in size.

12. Colors

Using different colors in websites is great, but you have to consider how they work together to create a clear image. Foreground and background colors must contrast sufficiently and you can forget about using light-grey text it’s difficult enough for people with 20-20 vision to read. Links must be a different color from the rest of the text on your site, preferably blue and always underlined.

Conclusion

Accessibility is an often overlooked aspect of web design, but it’s something that should be at the core of your design process right from the start when you’re wireframing a layout. Without sounding too self-serving, ensuring that your website meets the standard for accessibility means one thing: more happy customers. And you know what that means!

Use the comments below to tell us if you agree with the tips above and how you’ve made your site more accessible.

Generally speaking, call-to-action buttons should be simple and clear. They must stand out and grab a user’s attention. Everything must be carefully considered, from the trigger words used to colors, sizes, shapes and positioning. These buttons must be highly visible, but not so garish that they render your site ugly or unbalanced.

Below, we take a closer look at 25 of the most convincing call-to-action buttons found on the web. We examine why each individual button is so successful. Hopefully, they’ll give you an idea of some basic does and don’ts and help inspire your own designs.

1. WordPress e-Commerce

It’s important to let your button stand out by using color. If you can choose a color which ties in with your site’s palette, like this one, the results are all the more attractive.

2. Skype

This “Download now” button is pretty simple. It’s not particularly large or brightly colored. It is, however, surrounded by plenty of white space, which makes it even more noticeable to users.

3. Picsengine

Picsengine relies on placement for the success of its “See in action” button. The button’s stuck right in the middle of the page, with no other distracting text, links or buttons surrounding it.

4. Mozilla Firefox

The Mozilla Firefox “Free Download” button has stimulated much debate. Most people, myself included, believe that its large, irregularly shaped, vividly colored design is truly revolutionary in terms of call-to-action graphics. A small minority, however, argue that it’s confusing and doesn’t resemble a button at all.

5. CakePHP

CakePHP’s “Download” button has been created with large size and unusual shape in mind. Its clarity, however, has not come at the expense of overall site aesthetic. It sits comfortably into the background thanks to its matching color scheme.

6. Crazyegg

Crazyegg has designed its site around its call-to-action button, which sits proudly in the middle of the homepage, surrounded by plenty of white space. Its bright yellow color is mirrored only by the other call-to-action button on the page – the much smaller “Sign In” button in the top right.

7. Litmus

Litmus hasn’t gone overboard with its call-to-action button; nevertheless it’s very clear, thanks in large part to the empty space surrounding it and its rounded shape, which isn’t echoed anywhere else on the page.

8. StumbleUpon

Having one primary function objective per page makes it easier for users to locate call-to-action buttons, but sometimes this just isn’t possible. There’s loads to click on the StumbleUpon homepage, but the “Start Stumbling” button really stands out, thanks to its use of color in an otherwise monotone setting

9. Remember the Milk

Remember the Milk offers visitors several options on its homepage, but the most important one- “Signup Now!”- is by far the clearest, positioned in the middle of the page, surrounded by a colored box and capitalized. No need for gaudy, bright colors here.

10. Lifetree Creative

Lifetree Creative has managed to make its call-to-action button really big, even bigger than the company logo, without making the page appear unbalanced. Color, shape, size and space have been used to great effect here.

11. Dailymile

Dailymile has done something rather unusual with its call-to-action button. It’s laid out on top of everything else on the page, with a subtle drop-shadow behind it. Helped also by the fact that it’s green, the button really sticks out.

12. Carsonified

Carsonified’s homepage contains lots of information, nevertheless, the “Buy Your Tickets” button shines through, thanks to its use of capitals and color. The white letters stand out really well against the red.

13. planHQ

PlanHQ has used the power of white space to accentuate its call-to-action buttons. Neither brightly colored nor oversized, these buttons are clear thanks to the blocks of white they sit in.

14. Things

Things has two call-to-action buttons on its homepage, both of which are of similar importance to the company. For this reason, they are an identical shape, size and color, but both stand out well against the light blue and grey.

15. Livestream

Red is an excellent color to use when you want to draw attention to something. It stands out best against a black and white background, like the one used on Livestream’s homepage. The arrow shape of the “Broadcast Now” button, in the top right corner, urges users to click forward.

16. Ncover

Ncover is yet another site with two call-to-action buttons on its homepage. By using the color green against a blue background, Ncover has managed to prioritize one more important button over the other.

17. Dashboard

Red against a black and white background features again here. Besides its color, Dashboard’s “Try it Free!” button is highly visible thanks to its size, which offers enough room for the logo and “Sign up in 60 secs” to be included.

18. Free People

This page might look rather standard, but you’d be surprised at how many e-commerce sites get it wrong when it comes to their “add to cart/basket” buttons. Free People’s button is obvious without being ungainly, thanks to its color and large but modest size.

19. ClickFormant

Usually, it’s best to use industry-standard trigger words for call-to-action buttons. For a mailing list, the button should normally read “Signup” or “Join”. Occasionally, however, varying these words can really add to a company’s brand image. This is what ClickFormant has done by using the word “Inform”.

20. Kalculator

Large, over-sized call-to-action buttons are often very successful, but can look ugly and, at times, a bit desperate. Aware of this, Koombea has used positioning, color, space and shape, rather than size, to make its button shine.

21. Basecamp

Basecamp is run by a very intelligent bunch, so it comes as no surprise that its call-to-action button is every bit as clever. Many sites make the mistake of positioning a button at the top of the page, which is great, until the user scrolls down and it’s obscured. Basecamp’s button appears twice: once at the top and again at the bottom.

22. Spotify

Spotify’s “Buy now” button is a prime example of how best to use color and space. Bright-green and surrounded by whiteness, the button is evident to all.

23. Dropbox

Dropbox’s homepage layout is every bit as logical and simple as Dropbox itself (a fantastic tool, which you really should try if you haven’t already!) Visitors are under no illusions as to what they should be doing here. They can either “Watch a Video” or “Download Dropbox”- it’s as simple as that.

24. 280 Slides

The “Try it now…” button at 280 Slides is big…really big! There’s no way that a visitor can miss it. It is blue, the same color as the background, so doesn’t look as unsightly as it easily could.

25. FlockDraw

FlockDraw’s “Start Drawing” button is one of the most attractive in this list. Besides its great color, which marks it out from the muted background, it’s subtly illuminated and underlined with multicolored brushstrokes.

Conclusion

If one type of call-to-action button was more successful than any other, you can be sure that every website would be using it. While it’s possible to identify similarities between the buttons above, there are clearly lots of differences too. It’s vital that you test different combinations of call-to-action buttons on your site, to see how each one affects conversion rates. You can do this easily using Google Website Optimizer. Whatever your call-to-action buttons look like, however, make sure that they fit your overall website design.

To provide an insight into how it should be done, we’ve compiled a list of 25 of the most beautifully designed web agency sites. These amazing sites all have that “wow factor”, displaying cutting edge design alongside marketing savoir-faire. They are conscious of their target clientele, whether it’s large corporations or personal clients, presenting an understanding of their needs.

Love Creative

Love Creative has struck a perfect balance between visual impact, user-friendly layout, and interactive features on their site. Using so much flash and audio can often be distracting, but the simplicity of their navigation page helps to introduce it in both a fresh and bite-sized manner.

Grafikonstruct

As one of the top developers of flash sites in Brazil, Grafikonstruct are a valuable addition to this list. Specialising in sites for the fashion industry, they are the go to designers if you’re looking for sophisticated graphics to engage your audience.

Sapient

As you would expect from one of the big boys in innovative and interactive marketing, Sapient’s website is an example of absolutely beautiful web design. Their site had to be included in this list because of it’s faultless targeting of their clientele.

Marek Levak (Designme)

Marek Levak, a freelance web designer from the Slovak Republic, has produced a simple and very usable site to display his portfolio of work. Though arguably not the most creative of pages, “it does what it says on the tin” so to speak, and from the look of his past clients, the functional approach has won him lots of work.

Fat Man Collective

The popular minimal approach has been implemented with a touch of class by the Barcelona and London based Fat Man Collective. Included in the ‘The Creative Agency Awards’ list of the top 99 creative agencies of 2009, they are a great example of innovation in the industry.

AB+C

Inventive, intelligent and bold are just three ways you could describe Australian agency AB+C’s site. The minimal use of colour makes navigation a breeze whilst maintaining the visual impact so important for new visitors.

The World of Merix

Waiting for complicated flash sites to load can often be a deterrent when browsing the web, but this site developed by The World of Merix makes the short wait worthwhile. Their unique navigation system is not only pleasure to use, but also a great display of their programming muscle.

hillmancurtis

Founded in 1998, Hillmancurtis emphasizes the combination of simplicity with elegance to create sophisticated and intuitive designs. Nominated for the Cooper Hewitt National Design award in 2009, and with a client list including Yahoo, Adobe, Hewlett-Packard and eMusic, their inclusion in this list is a given.

Fudge

Fudge has taken an original approach to its homepage that most web designers will be able to relate to. They’ve used a layout which simulates the Photoshop workspace. Nice touches include the flashing cursor and transparency grid background.

Huge

Huge boasts an impressive 150 million monthly visitors to sites they have developed. Add to that annual revenue of $8.3 billion taken by online businesses they created and you start to understand why they are called Huge.

Orange Label

The Czech Republic based Orange Label has been designing web sites since 2001. As with all successful web design agencies, they have a number of strings to their bow, from logo design to iPhone apps. Their site has been chosen as a great example of a simple and understated portfolio page.

TOY

Bold, simple, and perfectly executed, the TOY website is a prime example of minimal web design. Operating since 2005, it has quickly become one of the top 10 most award-winning agencies in the world.

Gravica Design

Michael McDonald at Gravica Design has presented another excellent example of the minimal approach on his website. The site displays a masterful use of Flash combined with a simplistic layout.

Studio No. 1

Studio No.1 in Los Angeles has created an excellent holding page in anticipation of their new site. Examples of past work, an easily downloadable PDF portfolio and clear contact information make this a truly functional page.

Cobra Creative

The San Francisco based Cobra Creative is a husband and wife team that has a unique ability to complete projects like a larger agency, with high end professional solutions, complemented with perfectly conceived branding. Their portfolio presents work so amazing; it’s hard to believe that it was created by a boutique agency. Oh, and their site isn’t too bad either!

StudioWEBER

Romanian design agency StudioWEBER has used a classic layout which displays past work in a clear and effective way. This operates perfectly in drawing potential clients through the portfolio and straight down to the contact area.

Analog

Analog is a company made up of a group of friends who make websites. Using a classic grid based approach, their site is simple, well-planned, and oozes experience. Click Alt+G to see their grid, a very nice touch.

Yugo Nakamura

Yugo Nakamura is a creative director, designer and engineer, who explores various forms of interactive systems in digital and networked environments. Works viewable on his site were recently displayed at the Center Pompidou in Paris and the Design Museum in London. Creativity is key.

Schematic

Schematic values the ability to excel across various fields within the new media industry. Specializing in everything from copywriting to technology and user experience, this enables it to stay ahead of its rivals.

Critical Mass

This list wouldn’t be complete without a mention of Critical Mass’s animated portfolio, which caused some serious shockwaves in the industry back in 2008. A slick, Flash-injected redesign of their old site, made this firm cool and desirable in an instant.

Ricardo Landim

Working across several different mini sites, games, and flash sites, Ricardo Landim creates conceptual designs that involve and immerse the user through expert use of color. His online portfolio is so thorough; you needn’t leave his site to view his work in all its glory.

Ultraviolet Design

Ultraviolet Design has been bold in its choice of colour, but pulled it off extremely well. Purple, normally associated with frustration, somehow becomes quite relaxing. The addition of an interactive banner at the top of the page is subtle, but works as a great example of programming prowess.

Tolleson

While Tolleson may be better known for its identity systems and work to push the boundaries of print manufacturing, they also produce clean and interactive websites. Their homepage is a perfect example of their first-rate work.

Delete London

Delete London crafts powerful and fresh digital user experiences. An agency that is aware of the kinetic nature of the new media industry, they have an enviable top-level client list which reflects their ability as designers.

Ultra16

Ultra16 uses a layout that can be seen in several of the sites in this list, but it does so with real finesse. Specialising in web design for the entertainment and fashion industries, its high profile clients will undoubtedly set them up to become one of the future major players in the industry.

Conclusion

From the minimal to the complex, aesthetically focused to functional; our list of 25 of the most beautifully designed web agency sites has come to an end. If there are any that you think we’ve missed, please use the comments below to share your suggestions.