Difference between revisions of "JavaScript widget testing"

From Dreamwidth Notes
Jump to: navigation, search
(draft version of the test page)
 
(stubs for all tests)
Line 2: Line 2:
  
 
== jQuery ==
 
== jQuery ==
 +
 +
Each one of these pages has a functionality which can be tested. For visual users using the page's default style, the core functionality is in the middle of the page. Screen reader users, be aware that the functionality to test is under a H4-level header labeled "Functional demo".
 +
 +
You should also try the alternate tests. These are in the right-hand column under a H4-level headernamed "Examples". For example, the Accordion test has examples labeled "Default functionality," "Fill space," "No auto height," "Collapse content," "Open on mouseover," "Customize icons," and "Sortable."
 +
 +
Write about what works for you with these tests and what doesn't. Are they meaningful given your accessibility needs? Are they helpful? Are they usable?  Difficult or intuitive?
  
 
=== Accordion ===
 
=== Accordion ===
  
−
The accordion test has four expandable and collapsible sections filled with blocks of text (in this case,  test blocks of Latin prose). Can you access the text? Does expanding and collapsing work for you?
+
The accordion test has four expandable and collapsible sections filled with blocks of text (in this case,  test blocks of Latin prose).  
  
−
[http://jqueryui.com/demos/accordion/default.html Accordion test]
+
[http://jqueryui.com/demos/accordion/ Accordion]
  
 
==== Results ====
 
==== Results ====
Line 13: Line 19:
 
=== Auto complete ===
 
=== Auto complete ===
  
−
[http://jqueryui.com/demos/autocomplete/default.html Auto complete]
+
The auto complete test provides a text box which should offer suggestions as you type. There's a limited set of words available in this test, but "Java", "JavaScript",, and "ColdFusion" all appear to be available.
 +
 
 +
[http://jqueryui.com/demos/autocomplete/ Auto complete]
  
 
==== Results ====
 
==== Results ====
Line 19: Line 27:
 
=== Button ===
 
=== Button ===
  
−
[http://jqueryui.com/demos/button/default.html Button]
+
These are just the buttons provided in this widget set. Do they work for you? Can you select them intuitively?
 +
 
 +
[http://jqueryui.com/demos/button/ Button]
  
 
==== Results ====
 
==== Results ====
Line 25: Line 35:
 
=== Date picker ===
 
=== Date picker ===
  
−
[http://jqueryui.com/demos/datepicker/default.html Date Picker]
+
This widget should allow you  to pick a date off a little graphical calendar when you focus in the input field.
 +
 
 +
[http://jqueryui.com/demos/datepicker/ Date Picker]
  
 
==== Results ====
 
==== Results ====
Line 31: Line 43:
 
=== Dialog ===
 
=== Dialog ===
  
−
[http://jqueryui.com/demos/dialog/default.html Dialog]
+
This test gives you what looks like a standard webpage (with some Latin text and a simple form),  but it also includes a dialog box entitled "Basic dialog". That dialog box should be closable, movable, resizable, and should include the readable text, "_This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon._".
 +
 
 +
[http://jqueryui.com/demos/dialog/ Dialog]
  
 
==== Results ====
 
==== Results ====
Line 37: Line 51:
 
=== Progress bar ===
 
=== Progress bar ===
  
−
[http://jqueryui.com/demos/progressbar/default.html Progress bar]
+
This test shows a purely-visual progress bar showing whether or not a process is complete. There are [http://jqueryui.com/demos/progressbar/ variant versions of the progress bar available, one animated, the other resizable].
 +
 
 +
[http://jqueryui.com/demos/progressbar/ Progress bar]
  
 
==== Results ====
 
==== Results ====
Line 43: Line 59:
 
=== Slider ===
 
=== Slider ===
  
−
[http://jqueryui.com/demos/slider/default.html Slider]
+
This test provides a visual slider which can be moved with the mouse or the arrow keys.
 +
 
 +
[http://jqueryui.com/demos/slider/ Slider]
  
 
==== Results ====
 
==== Results ====
Line 49: Line 67:
 
=== Tabs ===
 
=== Tabs ===
  
−
[http://jqueryui.com/demos/tabs/default.html Tabs]
+
This test provides three boxes of Latin prose divided on pages by tabs.
 +
 
 +
[http://jqueryui.com/demos/tabs/ Tabs]
 +
 
 +
==== Results ====
 +
 
 +
=== Draggable ===
 +
 
 +
You should be able to drag the test around this page.
 +
 
 +
[http://jqueryui.com/demos/draggable/ Draggable]
 +
 
 +
==== Results ====
 +
 
 +
=== Droppable  ===
 +
 
 +
You should be able to drop one of these objects on to the other.
 +
 
 +
[http://jqueryui.com/demos/droppable Droppable]
 +
 
 +
==== Results ====
 +
 
 +
=== Resizable  ===
 +
 
 +
You should be able to re-size this object.
 +
 
 +
[http://jqueryui.com/demos/resizable Resizable]
 +
 
 +
==== Results ====
 +
 
 +
=== Selectable  ===
 +
 
 +
You should be able to draw a box with your cursor to select multiple items, or select them with the arrow keys. You should be able to select nonadjacent items in this list by using your control key.
 +
 
 +
[http://jqueryui.com/demos/selectable Selectable]
 +
 
 +
==== Results ====
 +
 
 +
=== Sortable  ===
 +
 
 +
You should be able to sort this list by dragging.
 +
 
 +
[http://jqueryui.com/demos/sortable]
 +
 
 +
==== Results ====
 +
 
 +
=== Position  ===
 +
 
 +
You should be able to reposition elements within this demonstration.
 +
 
 +
[http://jqueryui.com/demos/position]
  
 
==== Results ====
 
==== Results ====

Revision as of 00:06, 30 April 2010

This page is for testing the accessibility of various JavaScript widget sets. You can post comments about the tests you do on this page, or directly on the dw_accessibility post.

jQuery

Each one of these pages has a functionality which can be tested. For visual users using the page's default style, the core functionality is in the middle of the page. Screen reader users, be aware that the functionality to test is under a H4-level header labeled "Functional demo".

You should also try the alternate tests. These are in the right-hand column under a H4-level headernamed "Examples". For example, the Accordion test has examples labeled "Default functionality," "Fill space," "No auto height," "Collapse content," "Open on mouseover," "Customize icons," and "Sortable."

Write about what works for you with these tests and what doesn't. Are they meaningful given your accessibility needs? Are they helpful? Are they usable? Difficult or intuitive?

Accordion

The accordion test has four expandable and collapsible sections filled with blocks of text (in this case, test blocks of Latin prose).

Accordion

Results

Auto complete

The auto complete test provides a text box which should offer suggestions as you type. There's a limited set of words available in this test, but "Java", "JavaScript",, and "ColdFusion" all appear to be available.

Auto complete

Results

Button

These are just the buttons provided in this widget set. Do they work for you? Can you select them intuitively?

Button

Results

Date picker

This widget should allow you to pick a date off a little graphical calendar when you focus in the input field.

Date Picker

Results

Dialog

This test gives you what looks like a standard webpage (with some Latin text and a simple form), but it also includes a dialog box entitled "Basic dialog". That dialog box should be closable, movable, resizable, and should include the readable text, "_This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon._".

Dialog

Results

Progress bar

This test shows a purely-visual progress bar showing whether or not a process is complete. There are variant versions of the progress bar available, one animated, the other resizable.

Progress bar

Results

Slider

This test provides a visual slider which can be moved with the mouse or the arrow keys.

Slider

Results

Tabs

This test provides three boxes of Latin prose divided on pages by tabs.

Tabs

Results

Draggable

You should be able to drag the test around this page.

Draggable

Results

Droppable

You should be able to drop one of these objects on to the other.

Droppable

Results

Resizable

You should be able to re-size this object.

Resizable

Results

Selectable

You should be able to draw a box with your cursor to select multiple items, or select them with the arrow keys. You should be able to select nonadjacent items in this list by using your control key.

Selectable

Results

Sortable

You should be able to sort this list by dragging.

[1]

Results

Position

You should be able to reposition elements within this demonstration.

[2]

Results

Dojo and Dijit

Retrieved from "http://wiki.dreamwidth.net/wiki/index.php?title=JavaScript_widget_testing&oldid=8243"