AccessU 2018
Widgets 2!

Patrick Fox

Technology Director @Publicis.Sapient, Austin, TX

@patrickfox

Agenda

Wizard Progress Indicator

Overview

Wizard Progress Example

Implementation

Examples

File Selector and Upload

Overview

File Upload Example

Experience Design

Provide accessible notifications for each status update

Experience Design
Requirements

Ensure that upload instructions and requirements are available

Experience Design
On Upload

  • "Uploading 5 files to 'My Photos'"
Files uploading notification

Experience Design
On File/Upload Complete

  • "Uploaded 3 of 5 files"
  • "3 of 5 files uploaded, 50% complete"
  • "5 of 5 files uploaded - upload complete"
File upload complete notification

Experience Design
On Error/Cancel

  • "Upload failed - 4 of 7 files were uploaded"
  • "Upload cancelled - 2 of 5 files not uploaded"
File upload cancelled notification

Experience Design
On Unload

  • Warn users - upload is not complete
Page unload warning dialog

Implementation

Status updates are made possible via XMLHttpRequest2 object's upload property

xhr.upload.onprogress = function(e) {
 if (e.lengthComputable) {
   progressBar.value = (e.loaded / e.total) * 100;
   var message = 'Files' + progressBar.value + '% loaded';
   $.announce(message, 'assertive');
 }
};

Example

Form Validation

Overview

Make success easy for all users, provide info and assistance

Form Validation Example

Implementation

Implementation
Labels

Form fields and groups of related radios/checkboxes must be labelled

Techniques:

Implementation
Requirements

Required fields and formatting or instructional copy must be associated with a field and understood via AT

Implementation
Errors and Help

Error states and messaging must be communicated via AT

Implementation
Example

Search By Location

Overview

Dynamic location search with map view

Store Locator Example

Experience Design

Experience Design
On Search/Filter Update

Implementation
Map and Search Results

Implementation
On Search/Filter Update

Examples

Improving Single Page Applications

Communicate View Changes

One approach: Emulate native browser page-load behavior

Page load behaviors

Step 1: Update Page Title

Step 2: Announce view change

React Example

Angular Example

Questions

Thanks!

@patrickfox