Basic

This section is the basics, in that sense that this is really important to have on your website.

Skip navigation

You can imagine if you were tabbing through a website and have to tab through the entire menu every single time you route to a new page, you would get frustrated.

This is the reason we put in "Skip the navigation and go straight to the main content" link at the top of the page. Some sites have nice animations on tab and for me that indicates that the company which developed the site cares about all their end users. Oh, like this site! Try tabbing!

Ensure that all interactive elements are keyboard accessible.

Always...ALWAYS think about the users that use keyboard to navigate the page. There are more of them then you realise. Keep this in mind when you are developing that there is no additional information for the :hover effect.

Page language

Indicate the primary language of every page by using the lang attribute in the html tag, for example <html lang="en">. This is important for users that use google translate. The translation does not work if this is wrongly marked.

Write code that adapts to the user's technology

Keep in mind that some users have to blow up the size of the text to 200%. In these cases it is our job that there isn't any horizontal scroll and we have to prevent any clipping of content. Use progressive enhancement to help ensure that core functionality and content is available regardless of the technology being used.

Avoid CAPTCHA where possible.

Captcha creates problems for many people. There are other ways of verifying that user input was generated by a human that are easier to use, such as automatic detection or interface interactions. If CAPTCHA really needs to be included, ensure that it is simple to understand and includes alternatives for users with disabilities, such as:

  • Providing more than two ways to solve the CAPTCHA
  • Providing access to a human representative who can bypass CAPTCHA
  • Not requiring CAPTHAs for authorized users

Don't overcomplicate things

Button is a button, link is a link. If you have a complex design and you think to yourself, "I have to have it as a span or a div to be able to create this", believe me, you can do everything to a link or a button as you would a div or a span.

This describes it best : Use a button instead of a div