I have MAMP PRO (version 2.1.1) installed on my iMac for local web development projects. I recently installed this blog on my development environment to be able to start developing a new theme. For my surprise, everything seemed to work ok until I logged in with Chrome (version 21.0.1180.89). The whole admin interface exploded.
No idea what was causing this weird problem that didn’t appear with Safari at all. Same problem has been described on WordPress Answers and Stack Overflow.
I tried clearing all browser data with no help. I tried reinstalling WordPress, but it didn’t help either. I disabled WordPress plugins, no help. There was nothing weird in the logs, just alerts about missing favicons. PHP (5.4.4) cache is off, but to be honest, I don’t know enough about Apache and PHP caching or configuration to be able to trace this issue there.
Then I noticed this comment on Stack Overflow:
Well this is really strange. I opened the local site with a “incognito window” of Chrome and the problem dissapeared :S
I gave it a try and, ta-da, problem vanished.
Would be nice to know what was causing it. Something I didn’t try, was to disable all Chrome extensions. A faulty extension could explain why it worked in incognito mode.
The reason for this bug is most likely AdBlock plugin. The WordPress admin interface will load correctly after disabling AdBlock.
The following checkboxes have one big important difference:
First checkbox is associated with its label, second is not. Try clicking them. Which one is easier to use?
Form elements and labels should always be associated with each other using the [cci]for[/cci] attribute on [cci][/cci] tag. On the example above, when user clicks the label, the associated checkbox will be checked or unchecked depending on the current state.
Control association has two important purposes: usability and accessibility. From usability perspective, bigger targets are easier to click (or tap). Therefore label is easier to hit than small checkbox or radio button. From accessibility perspective, visually impaired users will not know what the form element does if there is no associated label. Just add the [cci]for[/cci] attributes and everything works as expected. Simple, huh?
Not always. We have this thing called ASP.NET WebForms.
In ASP.NET WebForms the server side label control [cci][/cci] is a different beast. It will render a [cci][/cci] by default. I’ve seen many forms that don’t have any semantic labels, just spans. The reason for this is, that [cci][/cci] needs an [cci]AssociatedControlID[/cci] attribute to create association with a form element. Like this: