This blog post has been migrated to here

I’ve spent time over the years looking at how to improve the accessibility of applications that we, as Developers create to meet the needs of all users of our applications.

In my past life as an Oracle Forms Developer it was far more cumbersome to meet Web Content Accessibility Guidelines than it is in Oracle APEX. APEX 5.x, the Universal Theme and Theme Roller have been massive strides in improving how we build accessible and compliant applications - even though you may not even know it.

In my experience there are occasions (rightly or wrongly) when developing applications, that we have had to move away from standard APEX functionality and create our own components that might not meet these standards.

Identifying issues where an application violates accessibility rules has always been a challenge.

Google Chrome has many extensions available such as the Accessibility Developer Tools and Site Improve Accessibility Checker that I have used over time, but recently I came across tota11y.

I will let you read the full details, but tota11y is an interesting concept, as it is a single javascript file - tota11y.min.js that you can add into your application.

That will add a menu to the bottom left of your APEX application (and doesn’t look too out of place with the Developer Toolbar).





Click on the button, and this menu is displayed:



There are several features to the tool, and just wanted to cover a couple now that have really sparked my interest.

Headings - as it says above the plugin checks the order of the heading elements in your page and highlights any issues were the order is not in the defined, for example as h1 -> h2 -> h3.

See below, I’ve added a h1 and a (imaginatively titled “This is an h3 element") h3 element but no h2. This is a breach of accessibility rules.



Whilst this might seen like a small issue, when it comes to accessible websites and applications, but correct ordering an structure this is key to providing in-page navigation for external accessibility tools - it is much more than a bigger font.

Not only does tota11y, highlight each element that it find in your page, the Errors tab also shows you what rules you are breaching:



The one feature that made me go “wow" is the "Screen Reader Wand", this is a hover over tool that shows the text that will be used by a screen reader.

In this example, tota11y captures the text of the Interactive Grid header for the “Abbreviation" column, and as the Interactive Grid is written in such a way that it is compliant with accessibility standards, it also identifies the ability to Sort Ascending and Descending.

Also, APEX is pretty clever with the badges in the left hand for screen readers as it surfaces both the name and the value.



Website accessibility is a massive subject that will take more than this basic blog post, but when designing applications, have a think about what you are doing and if it is compliant and maybe this tool will be of help but basically the APEX Team have done most of the hard work for us.

Any comments, you can find me on twitter @rcdacre.