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

2. Accessibility simulation Success?

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

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

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

6. Math/Computer Science Calculus I Computer Science I Linear Algebra Data Structures Differential Equations Creating Dynamic Web Documents Creating databases for web applications Creating interfaces Abstract Algebra

7. Present Major Required courses Options

8. Course number: Course name: Choose from Course number: Course name:

10. … : Choose from :

12. … : Choose from :

14. Reflection Will continue to add 'interaction' But: is it needed? Good presentation of requirements may not need a calculation.

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

16. Microsoft(R) Windows 98 (C)Copyright Microsoft Corp 1981-1999. C:\WINDOWS\Desktop>

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

18. major.html Present Major Required courses MAT1400: Calculus I MAT1500: Computer Science I MAT3100: Linear Algebra Options Choose 1 from MAT2100: Data Structures MAT2400: Differential Equations Choose 2 from MAT3100: Creating Dynamic Web Documents MAT3200: Creating databases for web applications MAT3420: Creating interfaces MAT3567: Abstract Algebra

19. 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 checkbox ?????

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

21. checkbox rlist

22. hidden ocounts Choose from checkbox olist

24. Present Major Required courses Calculus I Computer Science I Linear Algebra

25. Options Choose 1 from Data Structures Differential Equations Choose 2 from Creating Dynamic Web Documents Creating databases for web applications Creating interfaces Abstract Algebra

26. first try at JavaScript: major.js function 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 ); }

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

29. What about form input? check again: seems okay

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

31. 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]); }

32. Works… But I got nervous and decided to change major.xml, re-do saxon, and check Creating Dynamic Web Documents Creating databases for web applications Creating interfaces Abstract Algebra Still works…

33. function make(f) { var i; var nreq; var nopts; nreq = f.rlist.length; nopts =f.ocounts.length; var ocountsa = new Array(); for (i=0; i<nopts;i++) { ocountsa[i]=f.ocounts[i].value; } var nreqc; var ogrouptotal; nreqc = 0; for (i=0; i<nreq; i++) { if (f.rlist[i].checked) { nreqc++; } } alert("nreqc, number of rlist checked, is " + nreqc); }

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

36. …. if (nreq == nreqc) { alert("You have taken all the required courses.")} else { alert("You need to take "+nreq-nreqc+" more of the required courses.");} }

38. 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.");} }

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

42. moving quickly to a conclusion I had some difficulties with document.getElementbyName versus document.getElementsByName resolved by google searcheS.

43. … 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

44. works!

45. 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!

46. 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));} }

49. 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 1 st or 2 nd 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

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

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