AJAX With Accessibility

Source — https://labs.tadigital.com/

Introduction

When we create a website, accessibility should be main concern. Accessibility makes a website usable by everyone regardless of their ability or disability. Using AJAX in developing website makes a website more fast and dynamic. AJAX makes possible to update parts of a web page without reloading the whole page. But there is some accessibility issues with AJAX. We will discuss some AJAX implemented application’s issues and their solution.

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

~ Tim Berners-Lee, W3C Director

What is AJAX ?

Ajax stands for Asynchronous JavaScript And XML. AJAX are a common part of modern web design. They speed up the user experience by bypassing the need for full page reloads. You can load small parts of user interface or content at a time, either at user’s request or based upon other events.

Source: ilovecoding.org

Basically, what Ajax does is make use of the browser’s built-in XMLHttpRequest (XHR) object to send and receive information to and from a web server asynchronously, in the background, without blocking the page or interfering with the user's experience.

Ajax has become so popular that you hardly find an application that doesn’t use Ajax to some extent. The example of some large-scale Ajax-driven online applications are: Gmail, Google Maps, Google Docs, YouTube, Facebook, Flickr, and so many other applications.

Traditional Web Interaction

Source: lukeu.com

How AJAX Work ?

To perform Ajax communication JavaScript uses a special object built into the browser — an XMLHttpRequest (XHR) object—to make HTTP requests to the server and receive data in response.

All modern browsers (Chrome, Firefox, IE7+, Safari, Opera) support the XMLHttpRequest object.

The following illustrations demonstrate how Ajax communication works:

Figure — Working Process of AJAX

Advantages of AJAX

• No renders of whole pages are needed to update only a single area.
• Allows applications to render without data and fill data as the application gets it from the server.
• Gives platform independence to application developers.
• Faster page renders.
• More responsive applications.

Accessibility Issues with AJAX

• User does not know updates will occur.
• User does not notice an update.
• User can not find the updated information.
• Unexpected changes in focus.

Now we will see the accessibility issues related to the following four implementations of AJAX –

• Lazy Loading
• Infinite Scrolling
• Interstitial Views
• Single Page Application

Lazy Loading

Ajax content load almost at the same time as the rest of the pages but there is a slight delay due to things like server-side script delays, complex database queries or anything.

Figure — Lazy Loading

Lazy loading is a great design approach with almost no impact on accessibility. But problems can arise under two circumstances -

If the user arrives at the blank spot where the content has not loaded yet when developer irritate users with their “ARIA live” messages showing “content loaded”. We can solve this issue by using a placeholder there, the placeholder can be a spinner or a progress bar.

In lazy loading, AJAX content should not be announced as it loads. If we have already knew that the content will definitely load slowly then “ARIA live” announcements may be appropriate but if the content is designed to load quickly enough then it is best to make no announcement at all. We can solve this issue by ensuring that the content is loading quickly enough that it would be highly impossible for a user to arrive at those spot. If they arrive before the content is loaded then we can use a placeholder image there with alternative text saying that “Content is Loading” .

Infinite Scrolling

An “Infinite Scrolling” is a feature of a page where new content is added on the bottom of the page through the AJAX every time we scroll down or tab to the bottom of the page.

Figure — Infinite Scrolling

It was invented to allow users to access continuous content. The idea succeed well enough for mouse users, but it makes it very difficult for keyboard users,who can never tab past the infinite scrolling area because every time they tried to do so, new content will be added itself next in tab order.

One way to fix the accessibility problems of infinite scrolling areas is to stop the automated aspect of it and let users choose when to load new content. Instead of scrolling automatically upon reaching to a certain point, users are presented with a button that gives them the option to load more content if they want to. This approach can even acceptable to put content after the middle section because users will be always be able to get all areas of the page without any problem.

Interstitial View

A screen reader user must informed when a web page launches an interstitial view, a progress indicator or enters into a paused or busy state. The worst thing that a screen reader users can hear after activating a button is silence.

Figure — Interstitial View

When a user request an action that will take long time to complete, it is common to use an interstitial or intermediate page to users as a way to confirm that the link is working and the result are coming if they wait. Screen reader users need same kind of confirmation.

The following two way usually the most appropriate -

• Move the focus to interstitial message.
• Announce the interstitial message via ARIA live messages.

The correct approach is when user activates the button to launch the interstitial view, the original view disappears and is replaced by the interstitial view. The screen reader reads the content of that view because it is in an ARIA live region. When the interstitial view goes away, the original page returns, with the addition of the search results. After a brief intentional pause, the focus moves to the table, and the screen reader reads the caption of the table.

Single Page Application

Single page applications were invented to speed up web sites. Rather than force a complete page refresh every time a person clicks on a link, single page applications typically load just the main content, plus a few variables, such as the page title, page-specific styles (if any), and page-specific JavaScript (if any). The two main accessibility problems that need to be solved are:

• Notifying users when new content is loaded. Whenever screen reader users activate links, buttons, or controls, they need to hear some feedback. The design ought to have a standard method for handling AJAX-driven links and form submissions.
• Managing keyboard focus. Oftentimes users click on links in DOM nodes that will be gone after the new content loads (e.g. when they click on a link in a paragraph in the main content area; that paragraph will be completely gone after the main content is overwritten with the new content). Almost always this causes the focus to be lost completely, going back up to the top of the page. That may be partially OK in some circumstances (when going to the top of the page is desirable), but it’s best to always plan for the focus to go to a specific location whenever there is a risk that the focus will be lost.

Screen reader users should be made aware when new “pages” are loaded in single-page applications.

There are two main ways to notify the user when new AJAX content has loaded:

• Move the focus to the new content.
• Announce the new content via aria-live.

Either of these can be appropriate, depending on the circumstances, but in most simple single-page applications, it usually makes the most sense to move the focus to the new content.

Conclusion

There’s enough proof that Internet is not accessible enough. People with disabilities have been continuously fighting for accessible and more inclusive web from last 20 years. While developing websites — it is the responsibility of developer community to make sure that “THE INTERNET IS FOR EVERYONE”.