All about Usability and Accessibility of Model Window in Web Design

Summary:

Model window is the most essential element of the web page in modern days, as it provides extra real estate on the screen and serving contextual content ultimately. Despite its usefulness, we never think of its user experiences, usability, and accessibility for instance, through keyboard keys, instead of mouse.

Intro:

For web and mobile designers, popup, nag screen, interstitial, etc. are devil creations and enemies of better user experiences, against the user friendly and useful model windows, created with great care. In fact, model windows offer unprecedented advantages for developers like delivering contextual info, notifications, actions in contexts of current screen, and most importantly some extra space for content or short forms to fill up quickly.

Ignorance of Model Windows

Despite their essential and usefulness, developers often ignore them during designing and programming, particularly at the usability, accessibility, and user experiences point of views in modern responsive web designing. For instance, if any user is favoring navigation of your website through keyboard instead of pointing device like mouse, she will get frustrations when a model windows popup immediately in contexts of some actions or anyway.

Yes, there are frustrations because dealing with model windows always need mouse pointer to take some actions on button or activate the input fields on the model windows. If user wants to ignore it and close it, she again has to use mouse pointer to click the ‘X’ close button on the model windows anywhere.

Of course, there are alternatives to use keyboard shortcuts like tab-key or alter-tab keys, but they are not universal and applicable in all OS or versions of OS. If, user is reaching on the model windows there is no guarantee that Esc key shortcut will work to close the model windows.

Need Attentions

In short, we can say that we need some programming hacks to make model windows accessible and usable in all sorts of use cases of website, be it on desktop or on the handheld devices. Let’s see how we can improve the semantics of the markup of model windows in this post.

Improvements in Semantic

Generally, when we code for model windows, we give it an id in div tags and state a hovering action to close it. Thus, this simple div element of model window has nothing in sense of semantic meaning when any user wishes to use it or closes it through keyboard or screen reader actions.

In order to understand this, if we take one code example of a model window, we can see how improvement in coding is possible.

<div id="modal_overlay">
<div id="modal_close" onClick="modalClose()">
X
</div>

Now in this code, if we correct the semantic of the above code by writing markup for the button instead of simple div element as well as adding an AIRA label for screen reader.

<div id="modal_overlay">
<button type="button" class="btn-close" id="modal_close" aria-label="close">
X
</button>
</div>

This way we address our two targeted issues: keyboard action through tab key and focused state through AIRA label for screen readers. As button can be tabbed and this action falls in convention on the web, our both purposes, usability and accessibility through keyboard have solved.

If you want to take user experiences at the next level, some more efforts through CSS and JavaScript are essential. Let’s check them one-by-one in code examples.

Adding focus states

We grab attention of users through some effects like shadow towards the button so they can know that it is active element and will respond through keyboard actions too. We can do this way:

:focus {
box-shadow: 0 0 3px rgba(0,0,0,.75);

Generally, when model window appears, its background freezes and user begins focusing on the model window. However, this phenomenon never happens automatically and you have to first save the last active element on the screen through coding and in next step, you need to code to shift the focus of user on the model window. Thus, you have to add code for both action through following ways.

Save the Background

You can save background element by adding variable and executing it through function.

var lastFocus;
function modalShow () {
lastFocus = document.activeElement;
}
function modalClose () {
lastFocus.focus(); // place focus on the saved element
}

Shift the Focus

You can do this by giving that element an id and set attributes for keyboard action:

var modal = document.getElementById('your-modal-id-here');
function modalShow () {
modal.setAttribute('tabindex', '0');
modal.focus();
}

Closing Model Window

We can do this simply by using Escape key as it used as standard convention in digital world.

function modalClose ( e ) {
if ( !e.keyCode || e.keyCode === 27 ) {
// code to close modal goes here
}
}
document.addEventListener('keydown', modalClose);

There are more usability steps, but expert and dedicated web developers at Lujayn, always using those advance steps in certain contexts and in favor of its patrons.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s