Implementing Accessibility with AgularJs
####This blog is written with love.
We have recently been using the Web Content Accessibiity Guidelines version 2.0 (WCAG 2.0) to improve the accessibility of our web projects.. In this blog, we will show a creative way to implement the item ARIA2: Identifying required fields with the aria-required property.
The following is a typical input field(
input is a void element. the closing “/” is optional.):
And in the browser, it looks like this in a browser:
We would like to add asterisk to the label, if the input field is required:
The HTML element looks like:
There are many fields need to be updated, to make it simple, we are going to do it dynamically with angularjs.
Let’s create a aterisk directive first.
Make sure you have bootstrapped your html with:
Now whenever you add an
asterisk element in your DOM structure, you will see a “*” on the page.
Please checkout this pluckr: http://plnkr.co/edit/kIIBicQklGuZVDblkw0Z?p=preview
required is a new attribute introduced in HTML5, and is supported by all main stream browsers. Though there is a ‘html5shiv.js’ to fix some issue on IE9, I have NOT verified it. Please leave comments, if it does not work on your IE9 with
What we want to achive is have angularjs add the required
span when it finds a
required attribute on the
required attribute to
input element. The code looks like:
After the enhancement, it will become:
The final plnkr can be found here.