Creating Interfaces screen reader experiment process study Homework: improve major presentation to...

Creating Interfaces

screen reader experiment

process study

Homework: improve major presentation to be 'accessible'

do downloads: Saxon, OpenWave, Nokia Toolkit and sign-up for tellme

studios

Accessibility simulation

• Success?

Why care?

• Nice thing to do…• May be part of target audience

– visually impaired, not just totally blind

• Often required by law– For example, if you are at state university

• Helps lead to better design for 'everyone'– clarity in organization– focus on the important components

Process study

• Present my effort on requirement of major application– not because mine is 'the answer' or 'the best'

answer but as example of how the problem could be broken down into steps

Rough plan• create a mini xml file• create xsl that displays it in a simple way• GET THIS WORKING• move on to put in interaction

– use Dan & Stephenie's checkbox idea

• need to understand checkboxes– google for checkbox tutorial, examples, DOM– write VERY SIMPLE javascript using alerts

• attempt fuller program

<?xml version="1.0" ?><?xml-stylesheet href="makemajor.xsl" type="text/xsl"?><major><name>Math/Computer Science</name><required cn="MAT1400">Calculus I</required><required cn="MAT1500">Computer Science I</required><required cn="MAT3100">Linear Algebra</required><option num="1"> <course cn="MAT2100">Data Structures</course> <course cn="MAT2400">Differential Equations</course></option><option num="2"> <course cn="MAT3100">Creating Dynamic Web

Documents</course> <course cn="MAT3200">Creating databases for web

applications</course> <course cn="MAT3420">Creating interfaces</course> <course cn="MAT3567">Abstract Algebra</course></option></major>

<?xml version="1.0" ?>

<xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output method="html" />

<xsl:template match="/major">

<html>

<head>

<title>Present Major</title>

</head>

<body>

<h2>Required courses</h2><br/>

<xsl:apply-templates select="/major/required"/>

<h2> Options</h2><br/>

<xsl:apply-templates select="/major/option"/>

</body>

</html>

</xsl:template>

<xsl:template match="required">

Course number: <xsl:value-of select="@cn"/>

Course name: <xsl:value-of select="."/>

<br/>

</xsl:template>

<xsl:template match="option">

Choose <xsl:value-of select="@num"/> from

<xsl:for-each select="course">

Course number: <xsl:value-of select="@cn"/>

Course name: <xsl:value-of select="."/>

</xsl:for-each>

<br/>

</xsl:template>

</xsl:transform>

…


<xsl:value-of select="@cn"/>: <xsl:value-of select="."/>

<br/>

</xsl:template>




<xsl:value-of select="@cn"/>: <xsl:value-of select="."/><br/>

</xsl:for-each>

<hr/>

</xsl:template>

</xsl:transform>

…


<xsl:value-of select="@cn"/>: <xsl:value-of select="."/>

<br/>

</xsl:template>




<br/> <xsl:value-of select="@cn"/>: <xsl:value-of select="."/>

</xsl:for-each>

<hr/>

</xsl:template>

</xsl:transform>

Reflection

• Will continue to add 'interaction'

• But: is it needed?

• Good presentation of requirements may not need a calculation.

saxon

• Decided to use saxon: standalone XSL/XML program instead of IE6– produces HTML, which I could examine– allowed me to use the HTML result in

Netscape, which has better JavaScript error information

• click on Start/Run choose command

Microsoft(R) Windows 98 (C)Copyright Microsoft Corp 1981-1999.

C:\WINDOWS\Desktop>

Microsoft(R) Windows 98 (C)Copyright Microsoft Corp 1981-1999.

C:\WINDOWS\Desktop>cd ..

C:\WINDOWS>cd ..

C:\>cd saxon

C:\saxon>saxon -o major.html -a major.xml

major.html

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Present Major</title> </head> <body> <h2>Required courses</h2><br>MAT1400: Calculus I<br>MAT1500: Computer Science I<br>MAT3100: Linear Algebra<br><h2> Options</h2><br> Choose 1 from <br>MAT2100: Data Structures<br>MAT2400: Differential Equations <hr> Choose 2 from <br>MAT3100: Creating Dynamic Web Documents<br>MAT3200: Creating databases for web applications<br>MAT3420: Creating interfaces<br>MAT3567: Abstract Algebra <hr> </body></html>

Adding checkboxes

• Want a way to group what needs to be grouped and also include information in a way that a JavaScript program can pick it up…..

• Use checkboxes <xsl:element name="input"> <xsl:attribute name="type">checkbox</xsl:attribute> <xsl:attribute name="name">?????</xsl:attribute> <xsl:attribute name="value">?????</xsl:attribute></xsl:element>

continued

• Give all the 'straight' required courses the same name: 'rlist'

• Make the value attribute be the course number.• Give the optional courses in each group the same

name: 'olist' concatenated with<xsl:variable name="reqnum" select="position()"/>• Stash away the count for the optional groups in a

hidden input tag. Give all these the same name. The relative number will tie them to the option groups.


<xsl:element name="input">

<xsl:attribute name="type">checkbox</xsl:attribute>

<xsl:attribute name="name">rlist</xsl:attribute>

<xsl:attribute name="value"><xsl:value-of select="@cn"/></xsl:attribute>

</xsl:element>

<xsl:value-of select="."/>

<br/>

</xsl:template>

<xsl:template match="option"><xsl:variable name="reqnum" select="position()"/> <xsl:element name="input"> <xsl:attribute name="type">hidden</xsl:attribute> <xsl:attribute name="name">ocounts</xsl:attribute> <xsl:attribute name="value"><xsl:value-of

select="@num"/></xsl:attribute> </xsl:element>Choose <xsl:value-of select="@num"/> from <xsl:for-each select="course"> <xsl:element name="input"> <xsl:attribute name="type">checkbox</xsl:attribute> <xsl:attribute name="name">olist<xsl:value-of

select="$reqnum"/></xsl:attribute> <xsl:attribute name="value"><xsl:value-of

select="@cn"/></xsl:attribute> </xsl:element> <xsl:value-of select="."/></xsl:for-each><br/></xsl:template> </xsl:transform>

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Present Major</title><script language="JavaScript" type="text/javascript" src="make.js"></script></head> <body> <h2>Required courses</h2><br><form onsubmit="return make(this);"><input type="checkbox" name="rlist" value="MAT1400">Calculus I<br><input type="checkbox" name="rlist" value="MAT1500">Computer Science I<br><input type="checkbox" name="rlist" value="MAT3100">Linear Algebra<br>

<h2> Options</h2><br><input type="hidden" name="ocounts" value="1"> Choose 1 from <input type="checkbox" name="olist1" value="MAT2100">Data Structures<input type="checkbox" name="olist1" value="MAT2400">Differential Equations<br><input type="hidden" name="ocounts" value="2"> Choose 2 from <input type="checkbox" name="olist2" value="MAT3100">Creating Dynamic Web Documents<input type="checkbox" name="olist2" value="MAT3200">Creating databases for web applications<input type="checkbox" name="olist2" value="MAT3420">Creating interfaces<input type="checkbox" name="olist2" value="MAT3567">Abstract Algebra<br><input type="submit" value="check"></form> </body> </html>

first try at JavaScript: major.jsfunction make(f) {var i;var nhidden;var nreq;var nopts;nreq = f.rlist.length;nopts =f.ocounts.length;alert("in make function, nreq is "+ nreq +" nopts "+nopts );

}

Testing

• Changing major.js does not require going back to saxon to create a new major.html

BUT

• reloading (refreshing) major.html. This includes the javascript file.

What about form input?

• check again:

• seems okay

What/how to check

• Count up number of checked 'rlist' items equals number of rlist items. Display the difference.

• For each option group, count up number of checked items. Compare with the ocounts (required) number. Display the difference.

function make(f) {

var i;

var nreq;

var nopts;

nreq = f.rlist.length;

nopts =f.ocounts.length;

alert("in make function, nreq is "+ nreq +" nopts "+nopts );

var ocountsa = new Array();

for (i=0; i<nopts;i++) {

ocountsa[i]=f.ocounts[i].value;

alert("the value of ocountsa[i] is " + ocountsa[i]);

}

}

Works…

• But I got nervous and decided to change major.xml, re-do saxon, and check

<option num="3"> <course cn="MAT3100">Creating Dynamic Web

Documents</course> <course cn="MAT3200">Creating databases for web

applications</course> <course cn="MAT3420">Creating

interfaces</course> <course cn="MAT3567">Abstract Algebra</course></option>

• Still works…

How to test?

• Just need to reload (the new major.js is reloaded)

• Need to check 1, 2 or 3 checkboxes. See what alert says.

….

if (nreq == nreqc) {

alert("You have taken all the required courses.")}

else {

alert("You need to take "+nreq-nreqc+" more of the required courses.");}

}

modify make.js

if (nreq == nreqc) { alert("You have taken all the required courses.")}

else { alert("You need to take "+parseInt(nreq-nreqc)+" more of the required courses.");}

}

On to the option groups

• Have a start already:– ocountsa holds the counts for each group– …. maybe should make sure that this is a

number– use the parseInt function– had problem. Type in javascript: in location

field to get display– This is a Netscape facility that helps for syntax

errors.

moving quickly to a conclusion

• I had some difficulties with

document.getElementbyName versus

document.getElementsByName

• resolved by google searcheS.

…var optiongroupname;var j;var coursesingroup;var grouptotal;for (i=1;i<=nopts;i++) {optiongroupname = "olist"+i;coursesingroup =

document.getElementsByName(optiongroupname);grouptotal=0;for (j=0;j<coursesingroup.length;j++) { if (coursesingroup[j].checked) { grouptotal++;}}alert("for group i = " + i +" grouptotal is " +

grouptotal);

} ends for i

works!

Now to make better messages

• problem with the i counter being one off…

ocountsa[0] corresponds to group 1

ocountsa[1] corresponds to group 2

• discovered when the first group wasn't satisfied with 1 course and the second group had NaN and undefined terms

• fixed it!

for (i=0;i<nopts;i++) {alert("i is " + i + " ocountsa[i] is " +

ocountsa[i]);optiongroupname = "olist"+(i+1);alert("optiongroupname is "+optiongroupname);coursesingroup =

document.getElementsByName(optiongroupname);grouptotal=0;for (j=0;j<coursesingroup.length;j++) { if (coursesingroup[j].checked) { grouptotal++;}}if (grouptotal>=ocountsa[i]) {alert("You have satisfied option group "+(i+1));}else {alert("You need to take " +

parseInt(ocountsa[i]-grouptotal) +" in option group "+parseInt(i+1));}

}

Enough

• Next step would be to improve on alerts for returning information– combine into one alert message– use DHTML to put into a 'div'

• Bigger issue: Message about the 1st or 2nd group is not satisfactory– list courses that could be taken– get a description of each option from the system

owners: pays to understand the data • intuition

Nuances of data

• New Media major:– programming option: CS I or Programming

Games

• Math/CS major:– not as clear: two options that are intended to

distinguish math from computer science tract

Go to your 'client' = owner of system

Homework

Return to simple display (no interaction)

• With Accessibility in mind, improve format

• Put in New Media or some other major AFTER YOU HAVE DONE the improvement of the formatting.

Creating Interfaces screen reader experiment process study Homework: improve major presentation to...

Documents

Transcript of Creating Interfaces screen reader experiment process study Homework: improve major presentation to...