Skrýt videa s překladem do znakového jazyka
Zvětšit přes celou obrazovku
Česky English version of this page

Detail příspěvku

How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities - Practical Examples

Mgr. Radek Pavlíček




The Web is changed. From the space of plain text with links, pictures and simple forms it became multimedia and highly interactive space, in which we can find all types of content and operate it in many ways.

Websites are increasingly using more advanced and complex user interface controls and it is more and more complicated to make them accessible by standard means, which are offered  by current technologies.

HTML5 and WAI-ARIA guidelines bring a lot of new ways and means how to create websites more accessible also for users with special needs. Although both of them are work in progress, it´s already possible to use some new functionality they bring to improve accessibility of websites.

Universities nowadays publish a lot of information by means of HTML and related technologies (CSS, Javascript, etc.). It includes their websites, study materials, registration forms or online tests. Although by these means it is possible to create an accessible HTML document, due to their limitations it is quite often necessary to use some workaround to ensure accessibility. Well known (and widely spread) is for example hidden headings method, which is used for describing and labelling navigational and other parts of the web page. Notwithstanding these methods are commonly used, they are not very often used systematically and because of it they may cause some difficulties to users. In case of headings it could be a broken hierarchy or bad usage of heading elements in general.


What are HTML5 and WAI-ARIA?


HTML5 is the new standard for HTML. The previous version, HTML4, was created in 1999 and it is insufficient for actual needs and preferences of users.

WAI-ARIA, which was established as stand-alone standard, but now is also a part of HTML5, provides a framework for adding attributes to identify features for user interaction, how they relate to each other, and their current state. WAI-ARIA describes new navigation techniques to mark regions and common Web structures as menus, primary content, secondary content, banner information, and other types of Web structures.

WAI-ARIA was created to bridge the gap between rich applications and users with special needs by introducing additional metadata (through HTML element attributes) that assistive technologies can use to reason about a control or DOM element. These attributes, like "role", "aria-haspopup", "aria-selected" and others provide vital information to screen readers, which can then be used to provide a richer level of interaction with website for visitors with special needs.


Practical Examples


In this workshop, by way of practical examples, I would like to show some new features which these standards have and how they can help to increase the accessibility of universities websites. For example describing regions of the HTML document by WAI-ARIA landmarks allows describing not only the particular spots on the webpage, but the whole areas. Big advantage of this approach is that user knows, where the beginning and where the end of the concrete region are.

HTML5 and WAI-ARIA bring similar methods also for improvement of defining text alternatives to the visual objects (pictures, photos, charts, etc.) or for better accessibility of tables and forms.



Although HTML5 is not yet an official standard and no browsers have full HTML5 support, all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions. The same – or maybe even better – situation is in support of WAI-ARIA. This standard is widely supported in all major browsers and can be now easily used to improve quality of published content. There is absolutely no reason not to do it and you can only profit from using WAI-ARIA on your website.





Keywords: accessibility, web, html5, wai-aria, assistive technologies

Pro plný text, prezentaci a videozáznam se prosím přihlašte.