My first week at code fellows. We discussed in depth a semantic web. If you don’t know what the idea of a semantic web is, here is the dirty explanation: setting a standard way of doing things so everyone can communicate. Or, according to the W3C, "The Semantic Web provides a common framework that allows data to be shared and reused across application, enterprise, and community boundaries". On face value this sounds like a great idea but as is with most “great idea!” implementation is murky at best.
In a world where technology and the way we make technology changes overnight, defining and setting standards can create the equivalent of a chained and shackled internet. As a result many javascript frameworks are ignoring semantics completely. This presents some problems such as accessibility, maintainability, and a fractured development base as developers are forced to pick technologies and a less navigable web for Web crawlers leading to poor SEO results. A potential solution for this is ARIA which has the effect of killing several birds with one stone.
ARIA or Accessible Rich Internet Applications is a way of making web applications that make use of undescriptive html markup descriptive of what the application actually is! Example below….
<ol role="tablist">
<li id="ch1Tab" role="tab">
<a href="#ch1Panel">Chapter 1</a>
</li>
<li id="ch2Tab" role="tab">
<a href="#ch2Panel">Chapter 2</a>
</li>
<li id="quizTab" role="tab">
<a href="#quizPanel">Quiz</a>
</li>
</ol>
<div>
<div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab">Chapter 1 content goes here</div>
<div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab">Chapter 2 content goes here</div>
<div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">Quiz content goes here</div>
</div>
Notice the role attribute. By defining an attribute with a role tag we are not just describing one tag but defining the relationship of multiple tags and defining association of page elements or widget. There is more good news...Angular has a simple ngAria module.