Stephan is a Germany-based computer science graduate and front-end developer with a soft spot for back-end technologies. He distrusts people who think JavaScript is not a real programming language, adores people who cherish clean design and concise code as much as he does and greets his co-founder folks over at deepr journalism. His superpower is transforming energy drinks into code.

Stephan's articles

  1. An Introduction to WAI-ARIA

    It might come as a shock, but I tell you: The web has changed! The last eight years have seen the rise of Ajax, JavaScript, HTML5, and countless front-end frameworks. Consequently, the internet is no longer a place of static HTML pages, as funny as they sometimes are. Rather, it has become a playground for complex, almost desktop-like web applications, each with their own widgets, controls, and behavior.

    Most of us take this for granted and push web development to the limit. However, there is also a non-negligible number of people with disabilities who still struggle with these new techniques. This is not due to disabled JavaScript or insufficient capabilities of current assistive technology (AT). On the contrary, in 2012 WebAIM found that over 98 percent of screen reader users had JavaScript enabled. Additionally, ATs like screen readers or refreshable Braille displays are getting better every year.

    The problem lies with HTML’s limited ability to mark up web applications that make heavy use of JavaScript and produce a huge amount of dynamic content. Four key obstacles can be identified when ATs deal with JavaScript applications:

    1. Unknown functionality of components
    2. Unknown states and properties of components
    3. Unreported change of dynamic content
    4. Bad keyboard accessibility

    Enter WAI-ARIA.


    ARIA, as it is sometimes referred to, stands for Accessible Rich Internet Applications. It is a technology specification that was designed by the Web Accessibility Initiative (the WAI part that completes the acronym) in the W3C (the World Wide Web Consortium) and it is now a W3C recommendation.

    You could think of ARIA as a suite of attributes to be included in your usual HTML code. These additional semantics help ATs to identify properties, relationships, and states in your user interfaces. That way ARIA tackles the accessibility challenges mentioned above and allows developers to make advanced web applications more usable for people with disabilities.

    Let us now take a look at Bootstrap’s tab panel widget and explore in detail how ARIA helps us augment the given HTML structure to make it more accessible. We will address each of the aforementioned key problems along the way.

    1. Functionality via Roles

    ARIA provides a rich role taxonomy that enables you as a developer to classify otherwise meaningless tags. That prepares the tags for ATs by revealing the functionality or the part they play in the overall web document.

    Bootstrap uses an unordered list to mark up its tabbed navigation. The framework also uses the ARIA roles tablist and tab correctly.