Explain yourself

[tomturton]

Hi Heydon,

I love this and have had a lot of fun using it on my website and my competitors (yes, I get a real kick out of seeing how many HTML fuck-ups they've made)

What I really think the project needs however is some explanation as to why some things are bad.

I imagine where a rule isn't considered best practices, you still have some very logical reasons, but it would be useful to know them.

For example, I am quite puzzled about why I often see If you are going to make it look like a button, make it a button, dammit! on <a class="button"> elements. These 'buttons' are hyperlinks and should work without JavaScript and be seen as links by search engines and screen readers. Does that mean they should not look like buttons? I think that's a very harsh limitation to a designer.

Thanks for your time and contributions to the web community.
Tom

[Heydon]

Thanks @tomturton,

The reason <a class="button"> is not appropriate in place of a <button> is that screen readers read it as "link", meaning these users will think it is a "going somewhere" control rather than a "doing something" control. This is misleading.

In this example, there is also no href attribute. This means that the 'button' is not focusable by keyboard. Keyboard users would therefore not be able to activate it.

Thank you for the feedback. I wonder whether writing the explanations as comments in the CSS itself would suffice?

[tomturton]

Thanks for your swift answer, Heydon.

I might have confused you a bit with the button example. I was actually talking about normal a elements that do have href attributes, eg. <a href="bob.html" class="button">Bob</a>.

This element would still trigger the If you are going to make it look like a button, make it a button, dammit! warning. The point I was trying to make was that hyperlinks should nearly always use the <a> tag, regardless of how they are styled. So I think a elements with href attributes should be exempt from this rule.

I would agree that buttons that submit a form or trigger an event on a page should be button elements.

---

But we digress. Regarding explanations, I think the most sensible place would be in the GitHub readme.md file, but as long as they exist somewhere then I'll be happy!

Cheers,
Tom

[tomturton]

Hi,
Any updates? Thoughts?

Cheers.

[Heydon]

@tomturton Hey! Yeah, I got rid of that and made some other improvements for a merge with a11y.css. See 744d39f

Cheers.

[tomturton]

Classy. That's much more forgiving.

Any chance of explaining reasons for the warning messages in readme.md?

I found your rather good Smashing Magazine article, which sums your rules up nicely, but it would be more useful to have an up-to-date version directly associated with the project.

Maybe in the meantime you could link to your article from readme.md?

How all occasions do inform against me,
And spur my dull revenge.css!
-- William Shakespeare