| Accessibility @ a click

High Level design document

V 1.2

________________________

| Accessibility @ a click

Contents 1. Introduction .................................................................................... 3

1.1. Background ....................................................................................... 3

1.2. Audience ........................................................................................ 3

1.3. Scope ................................................................................................ 3

1.4. Terms ................................................................................................ 3

1.5. Architecture Guidance ....................................................................... 4

1. Simplicity ........................................................................................... 4

2. Security ............................................................................................. 4

2. System Overview ........................................................................... 4

2.1. User1st Cloud Components and Roles .................................................... 5

2.2. Private Cloud Components and Roles ............................................... 6

3. Components Architecture ............................................................... 7

3.1. User1st cloud .................................................................................... 7

3.1.1. Backend add-on ................................................................................ 7

3.1.2. Backend application .......................................................................... 7

3.1.3. Frontend .Net 4, ASP.NET MVC 3 application. Serves as updates

end-point to the manager server. .................................................................... 8

3.2. Private cloud ..................................................................................... 9

4. Work flows ................................................................................... 12

4.1. SAAS ...................................................... Error! Bookmark not defined.

4.2. On-Premise ............................................. Error! Bookmark not defined.

| Accessibility @ a click

1. Introduction

1.1. Background

User1st is the fastest and most cost-effective solution for website and web

application accessibility and usability for the disable communities. User1st makes

websites accessible and easy-to-use, ensuring compliance with the strictest

industry regulations, reducing financial and corporate risks, and maximizing web

exposure and revenue.

Organizations are faced with a growing legal and finance pressure for complying

with strict accessibility regulations and standards (WCAG 2.0 by W3), in process

in over 100 countries, such as EU, the USA, Canada and Australia.

Millions of dollar class action suits against the Walt Disney Company, Wells

Fargo, Jet Blue, CNN, and Target mean organizations are scrambling to ensure

electronic access to all.

With the click of a button, User1st applies an accessibility "skin" to the web

interface, making it compatible with the specific needs of each end-user.

Everyone can view the website in a w

1.2. Audience

This document is designed to be a reference for any person wishing to

implement or any person interested in the architecture of User1st

components. This document describes each component architecture and

sub-architecture their associated interfaces, database schemas, and the

motivations behind the chosen design.

This document should be read by an individual with a technical background

and has experience UML Class diagram and UML Sequence diagrams.

1.3. Scope

This document describes the User1st Cloud and Private cloud solution.

1.4. Terms

Operator – (or configuration manager) the person responsible to define the

mapping and rules of the site (using the backend system).

The operator has permission to configure and see reports for specific sites

only.

System administrator – the person responsible to manage the sites, users

and permissions. The system administrator has permission also to configure

and see reports for all sites.

Selector – a jQuery selector that when using jQuery framework can found

elements in a unique way.

| Accessibility @ a click

1.5. Architecture Guidance

1. Simplicity

The User1st backend should is working as a wizard to help the

integrator mapping the site and found the accessibility issues.

The User1st on-premises solution designed to be an on-premises

solution with minimal implementation and maintenance efforts.

2. Security

The Integrator works with individual configured Firefox add-on that

encrypts and signs the data before sending it to the server (in addition to

the https protocol)

The satellite servers serve a static content from the local disk, without

accessing any database or other component that is not on the DMZ.

These servers are read-only.

2. System Overview

| Accessibility @ a click

Components and roles:

2.1. User1st Cloud Components and Roles

2.1.1. Integrator

The integrator works with Firefox add-on that inject User1st backend

script into every valid page, this script communicate with the backend

server.

2.1.2. Backend – ASP.Net MVC application.

This component construct of 2 applications:

2.1.2.1. Backend application that works with Firefox add-on on the

client side.

Using this application the operator/configuration manager

2.1.2.2. Reports and management portal for the integrator

| Accessibility @ a click

2.1.3. Frontend - ASP.Net MVC application.

Serves as updates end-point to the Manager (#8).

2.1.4. Admin - ASP.Net MVC application.

Administration application to manage sites, users, permissions, etc.

2.1.5. Database

SQL 2008 R2 or SQL Azure 2008.

2.1.6. Batch – Windows Server/Worker role that runs background processed such

as monitor results aggregation for reports, Sync version with satellite sites, etc.

2.1.7. User1st System Administrator

2.2. Private Cloud Components and Roles

2.2.1. Satellite Manager – Responsible to downloads “update packages” and

updates the satellite servers.

2.2.1.1. Satellite Manager Control Panel

Winform application that communicate with the satellite manager

windows service to control the Manager action and check services

status.

The application allow the administrator to install packages, entire

package of part of it, to see servers content and status.

| Accessibility @ a click

2.2.2. Satellite Servers (STG + PROD) - ASP.Net MVC Application.

Serve the data and scripts from static files to the end-user browser and

Collect the monitor results and pass it to the manager (Manager pull the

result from the satellite server)

Customer can define as multiple environments and update each

separately.

2.3. Bank Data center

2.3.1. Production frontend environment that includes link to the script from

the PROD environment on the private cloud.

2.3.2. Staging frontend environment that includes link to the script from the

STG environment on the private cloud.

3. Components Architecture

3.1. User1st cloud

3.1.1. Backend add-on

Firefox add-on that injects User1st's backend script to pages.

Each add-on has a unique keys that was generated to its own

3.1.2. Backend application

3.1.2.1. Server application

3.1.2.1.1. Add-on service (Site Configuration server side)

| Accessibility @ a click

.Net 4, ASP.NET MVC 3 application that has 2 areas:

The entire role of this component is to build the site configuration.

After defining the site configuration the system saves it as a

JSON and send it to the server.

In the following diagram you can see the JSON high-level

structure.

SiteDefinition

-memberName

-memberName

Pattern

ID

Name

Metadata

Type

*

Values

Action

Type

TriggerValues

TypescrapingMethod

selectorfilters

3.1.2.1.2. Administration Reports

a. Site Configuration server side – the components what works with

the add-on (Firefox plugin)

b. Administration –The operator can see reports, fill images

description, generate satellite packages, etc.

The client side adds a layer to the original site (without changing it)

that helps to map and configure the site configuration.

3.1.3. Frontend

.Net 4, ASP.NET MVC 3 application.

Serves as updates end-point to the manager server.

| Accessibility @ a click

3.1.4. Admin

.Net 4, ASP.NET MVC 3 application

3.1.5. Batch

.Net 4, Windows Service or Azure Worker role

The batch service consists of 2 service:

1. Job executer

The Job executer pop tasks from the working queue create

a job and execute it. The job can create sub tasks (without

any reduce mechanism).

2. Scheduler

the scheduler based on Quartz.Net system. Its role it to

schedule tasks and push it into the working queue.

3.2. Private cloud

3.2.1. Satellite Manager

.Net 4, Windows Service

The satellite manager is an orchestrator that manage event and

can be controller via API.

The manager holds synchronizers and Satellite Servers clients.

The synchronizers role is to get new updates, for example:

a. Remote service synchronizer – cyclic access the User1st

sync endpoint on User1st cloud to get updates.

b. Folder watcher synchronizer – watch folder to see if new

package is dropped in.

The Satellite servers are client to the satellite server. The manager

using this client to publish new packages, collect monitor result

and more. The connection based on WCF Net.tcp.

| Accessibility @ a click

Manager

-memberName

-memberName

Synchronizer

Paramaters

SatelliteServer

URI

IsContenrServerIsMonitorCollector

OnUpdates Event

3.2.2. Satellite Server

.Net 4, ASP.NET MVC 3 application

The Customer should add a 5 line code this its pages that loaded the

rest of User1st code (if necessary).

a. Overview

The frontend application takes the site configuration that was

generated in the backend application and uses it to file elements

on the screen and modify these element (or entire page) according

to the scenario (i.e. the features or profile that was selected).

A profile.

b. Dynamic elements

In case of the operator mark the pattern as dynamic element the

system listen to changes in that element and react according to

the select features. In modern browser the system uses Mutation

observable to detect changes in older browser the system uses

timeout and compare HTML to detect changes.

c. Popups

In cases on popup pops that system move the focus to this popup

and the rest of the page from getting focus, when closing the

popup the system return to the element that triggered the

appearance of the popup.

The system detect that popup appearances by running cyclic

testing on the known popup selector.

d. In the following diagram you can see that sequence of the main

sequence in case the user selected User1st profile.

The satellite serve has 2 main role:

a. Serve static data from files

| Accessibility @ a click

When browser are for content it access one of the MVC

controllers, the controller than loads a text file from the disc

(according to the action and given domain) and it tot the

output cache and add HTTP cache control header.

b. Collect Monitor results

When client side application post monitor results the server

keeps then in a collection in the memory.

The manager cyclic access these server to collect the

monitor results. On collection the server lock the collection

return the results and clear the collection

BrowserUser1stSatellite

BandWeb Server

Get Page

Get User1st Loader script (Loader)

~1.5K script

Detect Page language

Get User1st initial script (Init?ver=0.0.0.23&lang=he-il)

~7K script

end-user selected accessibility profile

Ask for resources to download

<1K script

Google CDN

Download jQuery

Download scripts

~80K scripts

Get site configuration lateser version (GetsiteDefinitionUrl?siteUrl=http://www.ikea.co.i

GetSiteDefinition

JSON as script (Like JSONP), ~20K depend on site

Make page accessible

Set Long term cookie with the user profile

| Accessibility @ a click

4. Work flows

4.1. User1st cloud

4.1.1. Site configuration in the Backend subsystem

a. The operator maps the widget and elements of the sites and define

rules and metadata

b. The data is saved in the User1st cloud database

4.1.2. Publish the new configuration

a. When the operator is happy from the results (until now the end user

can't see the new configuration) he click the publish button.

b. End-user can see only published configuration

4.1.3. Make site accessible

a. End-user access site

b. A very small of User1st scrip is downed to the page detect the

language and access the server again to down load another very

small script that adds the "accessibility" button

c. The end-user click the "accessibility" button

d. The script now download the rest of user1st scripts and data

(important: the scripts and data are saved in the browser cache and

being re-downloaded only if modified)

e. The user choose his accessibility profile (i.e. Screen reader)

f. The system run scripts that fix the page DOM according to the

selected profile needs.

4.1.4. Accessibility Monitor

a. During the time the user surf the page that system run analysis

regards the accessibility validation and mapping quality

b. The monitor results is sent to the Frontend server and saved in

the database

c. The batch server runs on every end of day and analyze the

monitor results

d. The operator now can see that reports on the Backend reports

application.

| Accessibility @ a click

4.2. Private cloud

4.2.1. Site configuration in the Backend subsystem – same as 3.1.1

4.2.2. Publish the new configuration – same as 3.1.2

4.2.3. The batch runs a sync server job periodically that look for new

versions, data and software. When the job detect a new version is

creates update package, encrypts it and put it in the database.

This jobs creation differential updates that relative to the previous

version.

4.2.4. Synchronize the Satellite Manager server with the new site

configuration

The Satellite Manager have several Synchronizers that works in order to

detect new updates

Remote service synchronizer – run periodically and access the

User1st sync end-point (that sits in the Frontend server). When new

updates exist in the database, the synchronizer downloads it.

Folder watcher synchronizer – after the operator published the new

configuration he generate a new package, download it and send it to

the customer in a certain way (TBD later).

More synchronizer will be created according to the customer needs

4.2.5. Publish the package to the Satellite Server

When new package is ready the Manager publishes it to the satellite

manager that was pre-configured. There are several trigger for the

manager to publish the new package.

4.2.6. Make site accessible – same as 3.1.3

4.2.7. Accessibility Monitor

1. Monitor result are sent from the browser to the satellite server

and stored in the memory

| Accessibility @ a click

2. Cyclically the manager accesses the satellite server that

configured as monitor result collectors and get monitor results

from the memory aggregate it and send to the User1st Frontend

server.

Full Architecture design

Optional connections:

A. Connection from #10 to #12:

1. IE8 and IE9

2. Use of multiple domain source of CSS and images files

B. Connection of #8 to #3

a. Only for User1st's cloud integration

C. Connection of #13 to #11 (POST)

a. Customers using "User1st-monitoring" solution