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.

• #post

A short and sweet blog post but hopefully of interest.

There have been a few tweets recently about customising the login page in APEX to have background images, and I thought it was about time I blogged again about something I setup for a very small piece of John’s KSCOPE17 presentation.

Basically, the request was to add a video to the background of a single page application (which had no login page).

So, I’ve decided to document how to do this on the Login Page.

You just need a mp4 file of the video of choice (I used https://videos.pexels.com/ for the stock video), and upload to static files in your application.

Then from a coding side, there are only really two components to it:

Add the following CSS into your application:

Then in the HTML Header of Page 101, add the following:

That’s it.

Check out the demo in Chrome (unfortunately probably wont work in IE7) , and change the select list to get some more examples - here

Obviously, consider the size of the videos you are embedding but I think the output is pretty impressive.

Any comments, please contact me via Twitter @RCDacre

• #post

• #orclapex

The enhancements in APEX 5 and 5.1 have made a massive difference to how we build APEX apps, also the likes of Regional Display Selectors, and collapsable regions are great features. These allow regions to be displayed in a different way based on user action. Even though, we still get queries like “I still want to see everything though!" - this is obviously subject to performance etc.

So looking about for potential solutions, I came across Birdview.js.

Birdview.js is a simple Javascript plugin, that at the press of a button will show a high level (birdseye) view of your application. Take a look at the demo on the site, and just press the “Z" button on your keyboard.

This library is pretty new, less than a couple of weeks old, but took the opportunity of seeing how easily it could be embedded into APEX. Answer: very easy.

Demo

Check out the demo here (username = demo password = demo):

https://apex.oracle.com/pls/apex/f?p=134575:5

The test case is pretty simple, this is the standard Sample Database Application, and page 5 has been updated to include all the charts on a single page. As with the plugin site, press the “Z" button. This will show the overview, you are then able to click anywhere on the overview and the screen will scroll to that section. Pretty neat.

Installation

To install, follow the instructions below:

1. Download the css and js files from here: http://achrafkassioui.com/birdview/js/birdview.js and http://achrafkassioui.com/birdview/css/birdview.css

2. In your APEX application, load as Static Files (or wherever you store your reference files)

1. Reference Files in User Interface Defaults:

1. On Page 0, create a "Page Load" Dynamic Action with the following settings:

   • True Action:

     • Action: “Execute Javascript"

     • Code:

     • birdview.init();

That should be all you need to do, every page that needs to scroll with have the option by pressing the “Z" on the keyboard

You can also pass in the button parameter into the init command, which will hide the icon at the top right of the screen, for example:

birdview.init({

button: false

});

Caveats

This has been tested in Apex 5.1 at this stage, but will look at 5.0 and look under the hood a bit more in the near future to see if there is anything else of interest and post back here.

This has been tested on Safari and Chrome on Mac and IE11 on Windows 7. Also tested on iPhone, the pinch / zoom works well.

Any questions or ideas, please get in touch via my twitter