Javascript, AJAX and Dynamic in Accessibility

In addition to the structure of the website and its design, its behavior is also important as a third level. JavaScript tells the browser how to behave when a certain event like a mouse movement occurs, that's the famous dynamic of web pages. Dynamic means that the website changes without being reloaded. The integration of videos or animations, on the other hand, is not understood as dynamic. Dynamics are most often associated with an action such as a click, mo

Article Content

useover, or keystroke.

Prefer HTML whenever possible

Elements that change without the website being reloaded are now almost exclusively created with JavaScript. JavaScript used to be considered an inaccessible gimmick. However, it is indispensable for many Web 2.0 websites. It also has a number of accessibility and usability benefits. For example, JavaScript can be used to check forms for correct completion without having to refresh the web page. Dynamic help information can be displayed when you move the mouse over an element and much more.

There is more detailed information about accessible JavaScript than I can provide, so I'll just summarize the basic information here. All elements should be created with HTML if possible and styled with CSS, only their behavior should be controlled via JavaScript. As with HTML and CSS, JavaScript is also written separately from structure and design in a separate file.

Discoverability - usability - device independence

Screen readers have trouble recognizing dynamically added content on web pages. Also, many behaviors are mouse-only, so they don't respond to keyboard input.

This applies to forms, for example. In the worst case it can happen that a completed form cannot be sent because the button only reacts to mouse input and not to the keyboard.

Which brings us to the next point: the input device should not be relevant. It shouldn't matter whether someone is using their device with a mouse, keyboard or touch.

Another area that can be problematic is dynamic menus. These menus expand when the mouse is moved over them. There are three reasons why these menus are difficult:

  1. They are almost never keyboard operable. In the worst case, the user gets stuck at the level he is currently on and cannot access the lower web pages. At best, he just has trouble moving from one level to the next.
  2. People with gross motor skills have trouble guiding the mouse precisely. The element collapses as soon as it is left, it becomes an ordeal to access the menu item.
  3. The menu does not work if JavaScript is disabled.

A particular problem are the lightboxes, which are dialog boxes that are placed over the content of the website and expect an input. It can happen to blind people that they don't even notice what's happening on the screen because the screen reader continues to move over the website as if nothing were happening. The sighted keyboard user, on the other hand, notices that there is a dialog box, but cannot reach it with the keyboard.

The most annoying thing is when elements of the website don't work when JavaScript is switched off, but no error message appears. There are some users who use an extension like NoScript for Firefox for security reasons. Scripts are generally blocked until they are selectively released. Many users forget that scripts are blocked and don't understand why something doesn't work. It is therefore necessary to either add a reference to the need for JavaScript or to offer a fallback solution so that the necessary function can also be used without JavaScript.

To make it short: the basic functions of the website should be usable without JavaScript. The advanced functions, on the other hand, can be implemented with JavaScript, the whole thing is summarized under the keyword Progressive Enhancement.

Add semantics

While most HTML elements inherently have semantics, JavaScript widgets don't have such machine readability on board. A semantics can easily be added via ARIA, but working with ARIA requires a lot of knowledge and caution.

ARIA basically just adds the semantics. Functionalities such as keyboard usability must also be added.

Testing is mandatory

Even though JavaScript is a real programming language, you don't need any expertise to test accessibility, at least not for the first steps. It definitely needs to be tested, but it's easy to do in this case: turn off JavaScript via the browser's options or an accessibility test toolbar and you'll find that some pages barely work anymore.

In addition, the website should be checked with the keyboard. A screen reader test can't hurt either. I have already mentioned the critical points above: dynamic navigation, forms and lightboxes.

Read more