-2

I'm new to the 'role' attribute (ARIA) and I'm afraid I make generally too much use of classes when styling so could someone please explain the 'role' attr. in a dumbed down version (relative to class, where they differ) because the usual technical literature was a tad bit too technical to really get a working sense of it. I'd very much like to learn about 'role' in order to write more 'best practice' code.

I'd also need guidelines on when one knows when to use either class or role. If you guys could just get me started, I can hopefully continue on my own with the more technical details :)

ianquiksilver
  • 33
  • 2
  • 8

1 Answers1

2

You use a role to add specific, defined-by-specification, semantic meaning to an element.

You use a class to mark the element as part of a custom group with no automatic semantics.

Either can be targeted by CSS.

Generally you should focus on describing your markup with the correct semantics and then worrying about what you need to do to make it look the way you want (at which point you might add additional classes).

You would use both if you wanted to add the specific semantics of a role, but also mark an element as part of a custom group.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335