The venerable publication A List Apart, published an article in their 300th issue that discusses Nielsen’s concerns. The author Lyle Mullican offers two potential solutions, complete with Javascript code and explanation. The first solution provides a switch that allows the user to show and hide their typed password. The second allows the most recently typed character to remain visible momentarily before becoming an asterisk. Mullican’s examples are good for explaining how it would work. Mullican himself wrote “Note that this code is only intended to demonstrate the concept, and the process might be improved by using a JavaScript framework such as Prototype”.

Nielsen raised several issues but doesn’t spend any real effort proposing a solution. Of the 2 that Mullican proposed, both will likely be used, each with varying levels of success. One reason for this is designer preference. Each designer will decide what they like better. Another, more significant reason is implementation. Some will use plugins for their javascript frameworks, like Prototype or jQuery. Others will write their own, which will ultimately provide an inconsistent experience across websites. If you don’t think so, consider form validation. Every web developer has unnecessarily written their own email validation function.

The ideal solution would be to update HTML5 to include an improved password input element. This would offer the most consistent experience available to every website user. Of the two solutions demonstrated by Mullican, using a switch to show/hide the password value would be the preferred implementation. It’s more accessible to users that react more slowly, and offers every user more control over their experience. While the current password input has its problems, people understand how it works. So for the time being, your best bet is to continue using it. Hopefully with HTML5, the situation will improve.

Why not just type accessibility? It’s used in contexts where character lengths are limited, like Twitter and SMS. On Twitter, you may see some permutations that have airport codes appended to it. For example #a11ybos and #a11ysea are hash tags used by a groups, in Boston and Seattle respectively, who are organizing an Accessibility Camp.

Why the weird abbreviation? A11y is numeronym. Other common numeronyms are i18n and L10n for internationalization and localization respectively.

When the context changes, the meaning can be lost or altered. Colors can have different meaning when the culture of your audience changes. The color white in western cultures is symobolic of cleanliness, the good guys, and brides. In eastern cultures, white is used for funerals. Imagine spending a day creating a beautifully vivid graph, then make some xerox copies on the office copy machine. Do you perceive the information the same way as before? not likely.

This isn’t unlike an experience for someone who is color blind. Being asked to make decisions without all the information is difficult for anyone. How can the situation be improved? Shape. In the graph example above, using a different type of line would help retain information. For example, using a green solid line and a red dashed line would allow the lines to continue to be easily distinguished from one another – even in black and white.

Shape is also used to create better buttons. The image above shows 2 sets of buttons. The first row of buttons is an example of something you dont want to see on the web today, 2 plain rectangular buttons – red and green – with no other information. One way to improve these buttons is to add shape, as seen in row 2 of the above image. By adding a check to the green button and an “X” to the red button, they are clearly distinguished from one another to a color blind user. Also more information is communicated as to what the buttons mean, even if you didn’t add a button label. The symbols on the buttons can also provide value to not-native speakers if they don’t entirely under the text label.

A third area where shape can provide value, is in your navigation areas. There are a number of beautiful modern website designs that use a unique indicator to designate the current page. This could come in the form of an arrow, rectangle, or other unique shape. In the example below, Untitled Startup uses an indicator to designate the current page. This a great technique to increase usability and accessibility since it doesn’t rely on color alone to convey information.

Color is a great tool to have in your toolbox, but it shouldn’t be the only one. The examples provided here are simple by design. Try experimenting on your future projects by working the use of shape into your design.