What does role=“button” mean?

Question

I found that in Google+ Project\'s page that buttons are all made from divs like:

I\'d like to

Answer 1

It's just semantics.

It is recommended that you use native HTML buttons using tag. However, if you are having custom controls using or

tags, the following information on the role='button' is highly recommended.

1. Trigger a Response

If you are building custom controls, they should work just like a button. If you click the element, it should trigger a response. For example, This response isn't changing the text of the button i.e. custom control. If it is, then it is not a button.

2. Keyboard focus

These custom controls acting as buttons should be focusable by tabbing through a keyboard and also should be focusable programmatically for screen-readers.

3. Operability

The custom control should implement onclick as well as onKeyDown events. Buttons can be activated through spacebar. Hence, if you are adding the role to a custom control, you need to handle these events yourself. Else, the semantic loses its meaning. A screen-reader user will try to activate the button using spacebar, but cannot.

The standard syntax for a custom control with the role='button' is

The tabindex="0" is not necessary if you are using tag, but is required if you are using a non-focusable tag like or

to manually allow focus.

Another useful tip is if you are still resorting to build custom button, it is much better to use tag since you can avoid onclick handlers.

0 讨论(0)

查看其它3个回答

发布评论:

提交评论

---

•  加载中...