Difference between revisions of "JavaScript widget testing"

From Dreamwidth Notes
Jump to: navigation, search
(draft version of the test page)
 
(link to the post)
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
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.
+
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 [http://dw-accessibility.dreamwidth.org/11510.html the dw_accessibility post].
 +
 
 +
 
 +
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?
 +
 
 +
Once you've done your tests, either comment on [http://dw-accessibility.dreamwidth.org/11510.html the dw_accessibility post]  or in the "results" section for each one of the examples.  If you comment here, be sure to sign your comment (either by writing your name or by writing three tildes, eg <nowiki>~~~</nowiki>, so the wiki will sign your name for you).
  
 
== 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."
 +
  
 
=== 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 23:
 
=== 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 31:
 
=== 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 39:
 
=== 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 47:
 
=== 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 55:
 
=== 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 63:
 
=== 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 71:
 
=== 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 ====
  
 
== Dojo and Dijit ==
 
== Dojo and Dijit ==
 +
 +
Dijit is the widget library that goes along with Dojo. Each of these pages describes what it is supposed to do and then has some examples under a section labeled "Examples" (which is a H2-level header). It looks like these examples are accessible under images labeled "View example", but I admit I'm not exactly sure that these examples will be even reachable by everyone's adaptive technology! More specifically, Mouseless Browsing doesn't seem to be able to see them; they seem to be generated by Dijit themselves and not by standard HTML tags. Please report in the original dw_accessibility post if you can't access them, and we will ask ''[http://ktiedt.dreamwidth.org/ ktiedt]'' for advice.
 +
 +
On the one hand, I found these tests less intuitive to use than the ones on the jQuery page, so it might take some doing to figure them out. On the other hand, each page explains what its accessibility functionality is intended to be.
 +
 +
=== Calendar ===
 +
 +
These tests provide a variety of calendar functions.
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/Calendar.html#dijit-calendar Calendar]
 +
 +
==== Results ====
 +
 +
===  Color picker ===
 +
 +
This provides a palette and a color picker which are supposed to be usable for screen reader and keyboard users as well as everybody else.
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/ColorPalette.html#dijit-colorpalette Color picker]
 +
 +
==== Results ====
 +
 +
=== Declaration  ===
 +
 +
Actually I can't get this one to work so I'm not sure what it is supposed to do. :-( Report if you can get it to do anything!
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/Declaration.html#dijit-declaration Declaration]
 +
 +
==== Results ====
 +
 +
=== Dialog  ===
 +
 +
These examples should give a button which, when pressed, pop up dialog boxes.
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/Dialog.html#dijit-dialog Dialog]
 +
 +
==== Results ====
 +
 +
=== Editor  ===
 +
 +
This widget should provide a rich text editor. Really take this one for a spin, because accessible rich text editors are one of the holy grails of the web.
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/Editor.html#dijit-editor Editor]
 +
 +
==== Results ====
 +
 +
=== In-line edit box  ===
 +
 +
These examples should provide a series of boxes containing text . You should be able to edit that text and have the changes appear on the page.
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/InlineEditBox.html#dijit-inlineeditbox In-line edit box]
 +
 +
==== Results ====
 +
 +
=== Menu ===
 +
 +
This example should provide some text that, when you right-click on it, pops up a screen reader-compatible menu. This menu should also be accessible according to the [http://www.dojotoolkit.org/reference-guide/dijit/Menu.html#id5  listed keyboard commands].
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/Menu.html#dijit-menu Menu]
 +
 +
==== Results ====
 +
 +
===  Menubar ===
 +
 +
This example should produce a window with drop-down menus.
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/.html#dijit-menubar Menubar]
 +
 +
==== Results ====
 +
 +
===  Progress bar  ===
 +
 +
This pops up a window and a button. When you push the button, the progress bar should run. It's worth reading the [http://www.dojotoolkit.org/reference-guide/dijit/ProgressBar.html#accessibility accessibility information] for this one, because it gives some hints about how it should interact with screen readers.
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/ProgressBar.html#dijit-progressbar Progress bar]
 +
 +
==== Results ====
 +
 +
=== Title pane  ===
 +
 +
This should produce a window with a collapsible title pane over some content.
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/TitlePane.html#dijit-titlepane Title pane]
 +
 +
==== Results ====
 +
 +
===  Toolbar ===
 +
 +
This example should produce a toolbar with some buttons in it. I'm pretty sure the buttons don't do anything, but you should be able to learn what's in them and select them.
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/Toolbar.html#dijit-toolbar Toolbar]
 +
 +
==== Results ====
 +
 +
===  Tool tip ===
 +
 +
These examples are very different, so run both of the available examples. They should both produce windows that are designed to give tool tips are mouse overs. You should also be able to get the tool tips by keyboard commands, and they should announce to screen readers.
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/Tooltip.html#dijit-tooltip Tool tip]
 +
 +
==== Results ====
 +
 +
===  Tool tip dialog ===
 +
 +
These examples provide menus that, when you expand them, allow you to save information into a form.
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/TooltipDialog.html#dijit-tooltipdialog Tool tip dialog]
 +
 +
==== Results ====
 +
 +
=== Tree  ===
 +
 +
I admit, I can't get this set to work. If you can, tell us what it does.
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/Tree.html#dijit-tree Tree]
 +
 +
==== Results ====
 +
 +
=== Currency text box  ===
 +
 +
This text box should complain if you don't put in a value containing both dollars and cents. It should explain what the error is, and then should reformat any correct input into dollars and cents.
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/form/CurrencyTextBox.html#dijit-form-currencytextbox Currency text box]
 +
 +
==== Results ====
 +
 +
=== Date text box  ===
 +
 +
This text box should allow you either to type in the date manually or select one from a calendar which drops down when you enter the text field.
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/form/DateTextBox.html#dijit-form-datetextbox Date text box]
 +
 +
==== Results ====
 +
 +
===  Number spinner ===
 +
 +
This text input field should complain if you enter any value that is not a digit, and it should tell you what the error is. You should also be able to use the mouse or the arrow keys to increase or decrease the number.
 +
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/form/NumberSpinner.html#dijit-form-numberspinner Number spinner]
 +
 +
==== Results ====
 +
 +
=== Text boxes ===
 +
 +
This set of examples are a series of text boxes, which should all allow input with specific constraints, usually detailed on the individual example pages.
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/form/NumberTextBox.html#dijit-form-numbertextbox Number text box]
 +
[http://www.dojotoolkit.org/reference-guide/dijit/form/SimpleTextarea.html#dijit-form-simpletextarea Simple text area]
 +
[http://www.dojotoolkit.org/reference-guide/dijit/form/Textarea.html#dijit-form-textarea Expanding/contracting text area]
 +
[http://www.dojotoolkit.org/reference-guide/dijit/form/TextBox.html#dijit-form-textbox Plain text box]
 +
[http://www.dojotoolkit.org/reference-guide/dijit/form/TimeTextBox.html#dijit-form-timetextbox Time text box: type or choose a time]
 +
[http://www.dojotoolkit.org/reference-guide/dijit/form/ValidationTextbox.html#dijit-form-validationtextbox Validation text box]
 +
 +
==== Results ====
 +
 +
===  Auto complete combo box ===
 +
 +
A “auto complete”, which allows the user to type any value and just gives suggested completions
 +
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/form/ComboBox.html#dijit-form-combobox Auto complete combo box]
 +
 +
==== Results ====
 +
 +
=== Multi select  ===
 +
 +
Allows the selection of multiple items
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/form/MultiSelect.html#dijit-form-multiselect Multi select]
 +
 +
==== Results ====
 +
 +
=== Filter select  ===
 +
 +
Similar to a select but with type-ahead filtering of the drop down list
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/form/FilteringSelect.html#dijit-form-filteringselect Filter select]
 +
 +
==== Results ====
 +
 +
===  Button ===
 +
 +
A representation of a normal button.
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/form/Button.html#dijit-form-button Button]
 +
 +
==== Results ====
 +
 +
===  Combo button ===
 +
 +
A button with an arrow to show a drop down (often a menu)
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/form/ComboButton.html#dijit-form-combobutton Combo button]
 +
 +
==== Results ====
 +
 +
===  Drop-down button ===
 +
 +
 +
 +
A button which displays a menu or some other popup when you press it
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/form/DropDownButton.html#dijit-form-dropdownbutton Drop-down button]
 +
 +
==== Results ====
 +
 +
===  Toggle button  ===
 +
 +
A cross between a Button and a Checkbox widget
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/form/ToggleButton.html#dijit-form-togglebutton Toggle button]
 +
 +
==== Results ====
 +
 +
===  Form checkbox  ===
 +
 +
Nearly the same as an HTML checkbox, but with fancy styling
 +
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/form/CheckBox.html#dijit-form-checkbox Form checkbox]
 +
 +
==== Results ====
 +
 +
 +
=== Radio button  ===
 +
 +
 +
To select one choice from a list
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/form/RadioButton.html#dijit-form-radiobutton Radio button]
 +
 +
==== Results ====
 +
 +
=== Form slider  ===
 +
 +
A scale with a handle you can drag up/down or left/right to select a value
 +
 +
[http://www.dojotoolkit.org/reference-guide/dijit/form/Slider.html#dijit-form-slider Form slider]
 +
 +
==== Results ====
 +
 +
 +
 +
  
 
[[Category:Accessibility]]
 
[[Category:Accessibility]]

Latest revision as of 01:48, 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.


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?

Once you've done your tests, either comment on the dw_accessibility post or in the "results" section for each one of the examples. If you comment here, be sure to sign your comment (either by writing your name or by writing three tildes, eg ~~~, so the wiki will sign your name for you).

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."


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

Dijit is the widget library that goes along with Dojo. Each of these pages describes what it is supposed to do and then has some examples under a section labeled "Examples" (which is a H2-level header). It looks like these examples are accessible under images labeled "View example", but I admit I'm not exactly sure that these examples will be even reachable by everyone's adaptive technology! More specifically, Mouseless Browsing doesn't seem to be able to see them; they seem to be generated by Dijit themselves and not by standard HTML tags. Please report in the original dw_accessibility post if you can't access them, and we will ask ktiedt for advice.

On the one hand, I found these tests less intuitive to use than the ones on the jQuery page, so it might take some doing to figure them out. On the other hand, each page explains what its accessibility functionality is intended to be.

Calendar

These tests provide a variety of calendar functions.

Calendar

Results

Color picker

This provides a palette and a color picker which are supposed to be usable for screen reader and keyboard users as well as everybody else.

Color picker

Results

Declaration

Actually I can't get this one to work so I'm not sure what it is supposed to do. :-( Report if you can get it to do anything!

Declaration

Results

Dialog

These examples should give a button which, when pressed, pop up dialog boxes.

Dialog

Results

Editor

This widget should provide a rich text editor. Really take this one for a spin, because accessible rich text editors are one of the holy grails of the web.

Editor

Results

In-line edit box

These examples should provide a series of boxes containing text . You should be able to edit that text and have the changes appear on the page.

In-line edit box

Results

Menu

This example should provide some text that, when you right-click on it, pops up a screen reader-compatible menu. This menu should also be accessible according to the listed keyboard commands.

Menu

Results

Menubar

This example should produce a window with drop-down menus.

Menubar

Results

Progress bar

This pops up a window and a button. When you push the button, the progress bar should run. It's worth reading the accessibility information for this one, because it gives some hints about how it should interact with screen readers.

Progress bar

Results

Title pane

This should produce a window with a collapsible title pane over some content.

Title pane

Results

Toolbar

This example should produce a toolbar with some buttons in it. I'm pretty sure the buttons don't do anything, but you should be able to learn what's in them and select them.

Toolbar

Results

Tool tip

These examples are very different, so run both of the available examples. They should both produce windows that are designed to give tool tips are mouse overs. You should also be able to get the tool tips by keyboard commands, and they should announce to screen readers.

Tool tip

Results

Tool tip dialog

These examples provide menus that, when you expand them, allow you to save information into a form.

Tool tip dialog

Results

Tree

I admit, I can't get this set to work. If you can, tell us what it does.

Tree

Results

Currency text box

This text box should complain if you don't put in a value containing both dollars and cents. It should explain what the error is, and then should reformat any correct input into dollars and cents.

Currency text box

Results

Date text box

This text box should allow you either to type in the date manually or select one from a calendar which drops down when you enter the text field.

Date text box

Results

Number spinner

This text input field should complain if you enter any value that is not a digit, and it should tell you what the error is. You should also be able to use the mouse or the arrow keys to increase or decrease the number.


Number spinner

Results

Text boxes

This set of examples are a series of text boxes, which should all allow input with specific constraints, usually detailed on the individual example pages.

Number text box Simple text area Expanding/contracting text area Plain text box Time text box: type or choose a time Validation text box

Results

Auto complete combo box

A “auto complete”, which allows the user to type any value and just gives suggested completions


Auto complete combo box

Results

Multi select

Allows the selection of multiple items

Multi select

Results

Filter select

Similar to a select but with type-ahead filtering of the drop down list

Filter select

Results

Button

A representation of a normal button.

Button

Results

Combo button

A button with an arrow to show a drop down (often a menu)

Combo button

Results

Drop-down button

A button which displays a menu or some other popup when you press it

Drop-down button

Results

Toggle button

A cross between a Button and a Checkbox widget

Toggle button

Results

Form checkbox

Nearly the same as an HTML checkbox, but with fancy styling


Form checkbox

Results

Radio button

To select one choice from a list

Radio button

Results

Form slider

A scale with a handle you can drag up/down or left/right to select a value

Form slider

Results

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