Teaching back-end developers to code semantically 24.08.2008 @ 11:45am 0 comments
While working on a large application in my full-time role, I created a generic stylesheet to handle form styling and came across a few problems with the developer/designer split within the company. Developers often need to write HTML for forms but do not always know/care about semantics/accessibility and this sometimes means inaccessible/non-semantic forms go unnoticed throughout the app.
I wondered if there was a way I could force the developers to code semantically without having to sit over their shoulder and walk them through it each time they needed to mark up a form, and then it came to me.... use more specific CSS selectors.
By using more specific selectors it forces them to code semantically in order to get the style they need. For example instead of the follow:
input {
border: 2px solid #ccc;
background-color: #eee;
}
You can be more specific and use the following as a selector instead:
form fieldset input {
border: 2px solid #ccc;
background-color: #eee;
}
This is just a really simple example but as you can see, if they want their input fields to look right, they need to ensure they are within a form and a fieldset.
Another example might be tables. Some people do not use <thead>, <tfoot> and <tbody> but we can make sure they do by adding them to our CSS selectors.
You can also use attribute selectors to ensure the use of relevant attributes. For example, if you wanted to make sure newly added navigation links always had an accesskey, you could do the following (this will not work in IE6 so you can just add this rule without the attribute selector to an IE6 only stylesheet):
ul#nav li a[accesskey] {
/* whatever */
}
Be warned though, there are some attribute selectors that do not work in IE7, so always remember to check your CSS across browsers :)
So... by being more specific, future developers of your website/application will slowly learn that things don't work within your project unless they are semantic and will be coding semantic markup by default in no time! Well, this is the theory.
What people think...
There have been 0 comment(s) on this entry so far. Have something you'd like to say? Feel free to comment below.
Add your thoughts
Fields in bold are required.
Latest entries
Categories
Who am I?
I am Jenna Smith - a front end web developer who has been busy coding XHTML & CSS for the last 6 years. If you are interested in seeing my work or getting in touch you can do so through my growldesign website.