Meta Refresh 2014

On the construction of user interface on the web

Sarbbottam Bandyopadhyay

Form accessibility demystified

Submitted Nov 27, 2013

Web is open platform, thus any application developed for this open platform should be accessible for any users, irrespective of their disabilities. Accessibility must be treated as the core feature of the user experience. Quite often, a web application that is keyboard accessible is considered to be accessible compliant. How ever which is partially true. For example, ‘hasgeek login’ form. There are visual indication of the error in the page, however for visually challenged user there is no indication for error and teh experience is more like an infinite loop. Using aria-invalid and aria-described by solves the problem.

Outline

Every web site (e-commerce, forums, social networks etc) that deals with users uses web forms. Web forms are used in several scenarios, user registration, upgrade, profile update, posting an article, questions, comments. A plain old HTML form always serves the purpose, but quite an often, CSS and/or JavaScript are used to make the experience smooth and shiny. For example, password strength meter, form validations, custom drop-down menus, auto complete, modal dialogs etc. These shiny and dynamic stuffs look visually awesome and stunning.

Developers mainly focus on the ‘look and feel’ along with performance. Is the awesome looking UI accessible via keyboard completely, accessible for a visually challenged user?

If not, how to achieve it? How to make visually challenged users aware of all the dynamic changes/updates the UI is going through?
Many a times we use custom elements instead of native. For example, using a custom drop down menu instead of native select/options. It is quite easy to visually implement a custom drop down menus using div(s), ul(s) and li(s). But, is it completely accessible, via keyboard, by a user who is visually challenged?

This presentation will mainly focus on ‘HOW’ rather than ‘WHAT’ with respect to web accessibility and real life use cases of accessibility.

Speaker bio

Sarbbottam is a front-end engineer for Yahoo. He manages the UI for user registration flow. He is passionate about making the UI accessible for challenged user, cross browser compatibility of the UI and web performance. He firmly believes that any web application must always be functional without JavaScript and JavaScript must be used for progressive enhancement of the UI.

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

Meta Refresh is an umbrella forum for conversations about different aspects of design and product including: UX and interaction design CMS, content management, publishing and content marketing Information architecture more