My decision to eliminate all ids from my CSS and transition to HTML 5 has led me to question the use of roles in markup.
In the past, IDs were used to style sidebars individually within a single selector for both. Here is an example:
<div id="sidebar" class="sidebar widget-area"></div>
<div id="sidebar-alt" class="sidebar widget-area"></div>
However, with HTML 5, I am exploring different approaches that do not rely on IDs for styling. One possibility is using the role attribute to define specific roles for each sidebar:
<aside role="sidebar-primary" class="sidebar widget-area"></aside>
<aside role="sidebar-secondary" class="sidebar widget-area"></aside>
Another option is giving both sidebars the same role and using the role selector for common styles:
<aside role="sidebar" class="sidebar-primary widget-area"></aside>
<aside role="sidebar" class="sidebar-secondary widget-area"></aside>
I am seeking opinions on these options and wondering about the importance of the role attribute in future development. Additionally, considering the lack of definition for a "sidebar" role, alternative roles such as "complementary" may be more appropriate:
<aside role="complementary" class="sidebar-primary widget-area"></aside>
<aside role="complementary" class="sidebar-secondary widget-area"></aside>