JavaScript is a powerful and ubiquitous language that allows you to perform an incredible number of tasks. As you’ve seen in this app, jQuery enables you to take your code to the next level, doing a lot with few lines of code. When developing for the web, however, you have to keep in mind that not everyone is able or even allowed to load and execute JavaScript. Some users may use a computer with JavaScript disabled. Or their server may fail to serve a JavaScript library, a module, or a file in general. For such occasions, as professionals of the web, you must have a plan B.
In this project you used JavaScript to enhance the experience of your users. If your JavaScript code fails to load for any reason, your contact form will still work. Your Submit button will be able to send the data of the form to the server. This is possible because you developed it by building on top of the native behavior of HTML. The only drawback is that the process will turn into a synchronous one and your users will see a new page (or the same page with different content) served by the server. But is this true? Will your users actually see a page?
You developed your contact.php page so that it always serves a JSON object. If the JavaScript code fails to load and the user submits the form, all they’ll see is an unintelligible and unpleasant string representing the JSON object. What a shame! Is this really the best you can do?
As it turns out, you can slightly update your project to solve this issue. What you need to do is edit contact.php so that it can distinguish whether the request is an Ajax one or not. If it’s an Ajax request, it can serve the JSON object; otherwise, it should use the data collected to fill a complete page and serve it to the user. Although it may seem like a simple change, it improves the accessibility of the demo and can save your users a lot of frustration. The presented approach, called progressive enhancement, has many advantages and is valid for more than just this project.
Progressive enhancement
Progressive enhancement is a methodology that emphasizes accessibility, semantic HTML markup, and external style sheet and scripting technologies. The expression was coined by Steven Champeon in a series of articles and presentations for Web-monkey and the SXSW Interactive conference in 2003.
This methodology evangelizes the creation of web pages so that everyone can access the basic content and functionality and then provide an enhanced version to those using a better technology (for example, a modern browser). It not only improves the accessibility of web pages but can also improve their rank in the SERPs (Search Engine Result Pages), so you should adopt this methodology in all of your future projects.
Planning for JavaScript failures isn’t the only way you can improve the accessibility of your web pages. You can and should adopt WAI-ARIA as well. Explaining it in detail is outside the scope of this app, but to give you an idea, it provides an ontology of roles, states, and properties that define accessible user interface elements. These improve the accessibility and interoperability of web content and applications. One of the exposed roles, dialog, is a perfect fit for your dialog box. To employ it you have to add some attributes (highlighted in bold) to your markup as follows:
<div class="dialog-box" role="dialog" aria-labelledby="dialog-title"
aria-describedby="dialog-desc">
<h2 id="dialog-title" class="title"></h2>
<p id="dialog-desc" class="message"></p>
<button>OK</button>
</div>Another improvement can be obtained using the HMTL5 required attribute we cited in the introduction of this lesson. Using it will enable User Agents that support HTML5 to provide the information that the field is mandatory to the users. Assistive Technologies (ATs) don’t always proceed at the same speed as the usual suspects (Chrome, Firefox, and so on). To fill this gap, you can set the WAI-ARIA attribute aria-required to the mandatory elements as shown here:
<input name="name" id="name" required aria-required="true" />
Even if the UA supports HTML5, adding some WAI-ARIA attributes won’t hurt.
The enhancements discussed are just a small set of what you can do to improve the accessibility of your contact form. But these changes should have opened your mind on this matter enough to spur you to consider accessibility in your next project.
Leave a Reply