This might seem obvious to anyone who regularly writes HTML, but it’s really helpful if you comment your source code to explain which elements you’re closing. If you’re debugging someone else’s source code (or your own code you wrote some time ago), there’s nothing worse than coming across this:
<p>What follows will really make you scratch your head:</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>By commenting which element you’re closing as you write it, it’ll be far easier to work out later on exactly what’s being closed off – and therefore easier to work out which is the offending element for any problem you’ve got. By closing and commenting everything as you write it, there’s also less chance you’ll miss closing something off, and the world of pain that brings with it.
So, commented, the above would look like this:
<p>What follows may make you scratch your head less:</p>
</div> <!-- end: div.article -->
</div> <!-- end: div#content -->
</div> <!-- end: div#main -->
</div> <!-- end: div#wrapper2 -->
</div> <!-- end: div#wrapper1 -->
</body>
</html>There you have it. Next time you’re in the zone and dropping divs in like there’s no tomorrow, spare a second to comment them as you close them off. Quick and simple, and you could save some poor dude a lot of hassle when he/she comes to look at your code in a few years.
Of course, the tag soup above is to illustrate a point. I’d never write such bloated HTML. *Cough*.
In the last piece I did on accessible web forms, I mentioned that in Forms Mode the JAWS screen reader won’t announce any content in a form that isn’t marked up in a form HTML tag. 90% of the time you can make forms more accessible by using labels for each field, but sometimes you want to provide more information than can fit nicely into the label (e.g. some extra help text) without making a meal of the layout and styling. Here’s a way of styling content in an HTML label tag so it looks like it’s separate from the label, but will still get read out by screen readers. Continue reading ‘Web form help text & accessibility’ »
You can go a long way to making a web form accessible by making sure every input field has a label. But with a set of radio buttons this ain’t enough. Use labels for each of your radio buttons and the various options will be read out, but how does a screen reader user get the question they’re supposed to be answering? Easy. Use fieldset and legend HTML tags, a simple – yet underused – way of getting your forms to make sense for screen reader users. Continue reading ‘Screen readers and radio buttons: using HTML fieldset and legend’ »
Conditional comments, combined with some browser-specific CSS, are a great way to get your website’s design & layout working in the various versions of Internet Explorer. But be careful, browser version targeting can soon have you and your website’s layout in knots unless you know exactly which browser(s) you want to target, and what CSS hacks to use. Continue reading ‘Conditional comments for Internet Explorer’ »
© 2007 - 2010 Andy Bryant, LessFuss Design