Blog6

Accessibility for Web Design

You need a great mix of accessible design, accessible development skills and accessible content. One of the most fundamental principles of accessibility is the need for keyboard navigation.

Accessible visual design

4.5% of world population has difficulty perceiving color combination because of color blindness. So we can add text beside the color, make this much more accessible.

Adjust color contrast wisely: 1.Meaningful text,icons, graphics: minimum 4.5:1. 2.Large pr bold text: minimun of 3:1.

Responsible animation：1.Allow people to turn animation off. 2.Don’t rely on animation. 3.Design stateful animation: logical start and end states. 4.Consider dissolve transitions instead of motion.

Labels make more accessible. Every form field needs a <label>.

Make sure the input for those forms has both the correct format and expected values.

Benefits of labels: 1.Programmatic relationship for assistive technology. 2.Clearer prompts. 3.Bigger targets. 4.Memory aid.

Error messages: 1.consistent placement; use error icon. 2.Visually close to the field. 3.Simple, plain language.( so it’s easy for everyone to understand). 4.Programmatic connection.

Write error message in clear and simple language. User should be able to understand the problem while reading an error message.

If error message is ambiguous and user is not able to find the reason of message, then it is of no use. User cannot do anything to fix the problem and it badly impacts the experience of the product.

Error message should contain necessary information. Most of the time user is not willing to read a long story.

Be concise and write a short description that is meaningful for user and gives him a clear idea of the problem and how to resolve it.

Avoid using redundant words and do not over communicate the problem.

Benefits of flexibility: 1.Line lengths. 2.Text sizes. 3.Zoom levels.

Content should have a good heading and title. Each page in a site have a unique title. Using good, clean markup on the rest of your page is an extension of that same concept. Use meaningful markup in a logical order. Use HTML markup to design.