HTML5: from documents to applications - HTML5 in Action - page 9

have advertisements displaying alongside posts—these could be placed in an <aside>
element. In a web application, you might use <aside> for a pop-up or a floating window
that appears over the main part of the application itself.
You can use the <mark> element to represent a part of text in your document that should
be marked or highlighted. A common use for this would be to highlight search terms within
a document.
With the new semantic elements, not only is your page's markup easier on the eye, but
search engine spiders and assistive technologies will also more easily understand your
pages. Speaking of assistive technologies brings us to our next important topic: ARIA
roles.
1.1.3. Enhancing accessibility using ARIA roles
When building web applications, you must ensure that your application is accessible to
all users, including those who require assistive technologies such as screen readers. En-
suring that your documents are accessible requires careful consideration when it comes
to the semantic meaning of your markup. Using simple HTML markup makes this rel-
atively straightforward, and HTML5's new elements improve the semantics even further.
But when you're creating web applications, it becomes much more difficult to cater to as-
sistive technology. The increasing amount of JavaScript code used to dynamically modify
web pages in modern web applications makes it far more difficult to deliver accessibil-
ity through good markup alone. This is where the Web Accessibility Initiative (WAI) and
ARIA standards come into play.
The WAI-ARIA specification aims to improve web applications by expanding on the ac-
cessibility information provided by the author of an HTML document. ARIA roles, re-
lationships, states, and properties allow you to define exactly how your web application
works in a way that an assistive technology such as a screen reader can understand. If, for
example, you build a drop-down list out of a text input and an unordered list, you can ap-
ply the ARIA role combobox to the input element so that it can be rendered appropriately
to the user's device. The following listing shows an example of this style of markup taken
directly from the WAI-ARIA 1.0 spec.