A screen reader user, for example, misses the fact that it is an “error.” With the icon as a background image – there is no way to specify any alt text for the icon, and significant meaning is lost. The choice of icon, the choice of background colour and borders tell us visually that there is something wrong. The CSS is being used to convey very specific information. Using this approach also makes it very easy to create a div.success and div.warning CSS rules meaning we have less to change in our HTML. Your postal/zip code was not in the correct format.īackground: #ffcccc url(./images/error_small.png) no-repeat 5px 4px Notice that all of this visual information is now contained in the CSS rules for that div:
Notice that we place a nice little icon there, and use background colours and borders to convey a specific message: there was a problem that needs to be fixed. “Your postal/zip code was not in the correct format.” I’m as guilty of this as others (or, perhaps, I’m the only one that has done this, in which case this can serve as my holiday season confessional) We use lovely little icons to show status messages for a transaction to indicate if the action was successful, or was there a warning or error? For example: Here are some naughty examples of CSS background images with their nicer, more accessible counterparts. Which often happens when time is short and we need to get things done. Web Standards based development involves many things – using semantically sound HTML to provide structure to our documents or web applications, using CSS for presentation and layout, using JavaScript responsibly, and of course, ensuring that all that we do is accessible and interoperable to as many people and user agents as we can.Įxcept when we don’t clearly think through the full implications of using those techniques.
0 kommentar(er)
