What is role="main" used for in jQuery Mobile 1.4?

Question

jQuery Mobile 1.4 has changed

<div data-role="content">...</div>

into

<div role="main" class="ui-content">...</div>

I understand the purpose of using a class now instead of a data-role, but what I don't understand is this role="main". What is it used for?

Answer 1

The role attribute is native to HTML5 and meant to support WAI-ARIA.
See http://www.w3.org/TR/html5/dom.html#wai-aria and http://www.w3.org/TR/wai-aria/roles#role_definitions

jQuery Mobile in earlier versions simply transformed elements with the attribute data-role="content" into the main element <div role="main"> (which is equivalent to <main>) and added the CSS. So you get <div role="main" class="ui-content"> .

There was no other processing or added markup for elements with data-role="content". By deprecating the data-role="content" attribute and using ask you to use the correct HTML5 (CSS and WAI-ARIA role) directly, jQuery Mobile will have to do less processing for each page.