Presentation is loading. Please wait.

Presentation is loading. Please wait.

Presenters: William Washington Candace Soderston Date:February 21, 2011 Repeat of our KD presentation to the UW’s Developer Architecture Working Group.

Similar presentations


Presentation on theme: "Presenters: William Washington Candace Soderston Date:February 21, 2011 Repeat of our KD presentation to the UW’s Developer Architecture Working Group."— Presentation transcript:

1 Presenters: William Washington Candace Soderston Date:February 21, 2011 Repeat of our KD presentation to the UW’s Developer Architecture Working Group (DAWG) (with some additional code examples) Architecting Kuali's User Interface Framework: Best Practices for User Experience & Accessibility 1

2 ASPECTS OF UI DEVELOPMENT PROCESS MATURITY Common, re-usable UI controls and frameworks Free design space across feature teams No UI guidance or review, no commonality Common UI templates / models Common UI guidelines / objectives UI design process & team collaboration model in place Some projects using Some user involvement Mature Immature Common Artifacts Teamwork Aspects No design process formalized – UI task flow & design done while executing No user involvement All key projects using the process / model Users evaluating continuously (structured methodology, sampling control and non-biasing approach) 2

3 PART ONE: USER EXPERIENCE OVERVIEW UX Best Practice Case Study: KS & Rice Partnership – KRAD

4 No UI commonality Common UI templates / models Common UI guidelines / objectives UI design process in place Some user involvement Mature Immature Teamwork Aspects No design process formalized No user involvement UI design process in all projects Users evaluating continuously ASPECTS OF UI DEVELOPMENT PROCESS MATURITY Common UI controls & frameworks Common Artifacts

5 No UI commonality Common UI templates / models Common UI guidelines / objectives UI design process in place Some user involvement Mature Immature Common Artifacts Teamwork Aspects No design process formalized No user involvement UI design process in all projects Users evaluating continuously CASE STUDY: KS & RICE PARTNERSHIP – KRAD Kuali Student KRAD User Interface Framework AXURE Prototyping Tool UIM User Interaction Model Common UI controls & frameworks USER CENTERED DESIGN User feedback Iterative design Usability Studies

6 THE HEART OF USER-CENTERED DESIGN (UCD) User involvement & iterative design Feedback early and often USER CENTERED DESIGN User feedback Iterative design Usability Studies Requirements emerge as users begin to see the evolving design...when they see what you're building, they'll say what they meant. - Alan Cooper

7 AGILE VS. USER CENTERED DESIGN Start sooner – Buy time with hard engineering problems Build and document less software – Treat prototype as specification User validation groups – Cultivate a group for continuous validation USER CENTERED DESIGN User feedback Iterative design Usability Studies

8 Common UI guidelines / objectives Mature Immature UIM User Interaction Model COMMON UI GUIDELINES: USER INTERACTION MODEL (UIM)

9 COMMON UI GUIDELINES: USER INTERACTION MODEL Design guidelines – a pattern library Good practice for common interaction patterns Best practice and constraints for appropriate use of UI design components – modular user interface elements Informed by research, best-practice, experience Continually evolving New contexts/problems (e.g. mobile) New UI design components (e.g. sliders)

10 USER INTERACTION MODEL: EXAMPLE

11 EVOLVING THE USER INTERACTION MODEL Weekly meetings Development team leads/BAs, UI framework team, UX team Criteria for inclusion in UIM Will we likely reuse this functionality? From a UX perspective, is the UI generalizable? From a UI perspective, is the code generalizable?

12 Mature Immature KRAD User Interface Framework Common UI controls & frameworks COMMON UI CONTROLS & FRAMEWORK: KRAD UI FRAMEWORK

13 History Students expect rich user experience – Web 2.0 Kuali Student UIF 1.0 built in GWT Spring 2010 Rice collaboration: KRAD UIF 1.0, SOA, UX > KRAD Requirements Demo KRAD 2.1

14 Common UI templates / models Mature Immature AXURE Prototyping Tool COMMON UI TEMPLATES & STENCILS: AXURE PROTOTYPING TOOL

15 Cross-platform Allows rapid creation of click-through HTML prototypes Custom Stencils that match reusable UI widgets Annotations that key to KRAD objects COMMON UI TEMPLATES & STENCILS: AXURE PROTOTYPING TOOL

16 DEMO COMMON UI TEMPLATES & STENCILS: AXURE PROTOTYPING TOOL

17 PART TWO: ARCHITECTING FOR ACCESSIBILITY 17

18 18 “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Tim Berners-Lee, W3C Director and inventor of the World Wide Web

19 WHAT IS ACCESSIBILITY FOR WEB & SOFTWARE? An aspect of design A code standard Enabling all people to be able to use it Focused on Disabilities  visual, aural, vocal, physical (mobility) … and cognitive senses. 19

20 A QUICK HISTORY OF ACCESSIBILITY Started with US, other country and state standards: U.S. Section 504 & 508 amendments (Rehabilitation Act - 1973) Self-Reporting required on Section 508 Voluntary Product Accessibility Template (VPAT) - now being harmonized with W3C’s WCAG 2.0 template Americans with Disabilities Act (ADA - 1990) More recent - Worldwide standards, developed under the auspices of the W3C: Web Content Accessibility Guidelines (WCAG 2.0) Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) and HTML5 20

21 CURRENT SOCIAL-LEGAL CLIMATE Accessibility status report required for commercial software to be selected by US federal institutions (and by state institutions in some states) 2009 – 2011 -- National Foundation of the Blind's (NFB's) class action suits against several universities, 2009 – 2011 Citations for inaccessible library web sites, departmental websites, financial services, and classroom technologies. May 26, 2011 -- the DOE Office of Civil Rights sent "Dear Colleague" letters to University presidents reminding educational institutions of their obligations under Section 504 and the ADA. 21

22 SO, WHAT ARE WE DOING IN KUALI RICE? Our goal = Build accessibility into the UI framework & UI model so Kuali applications can inherit the benefit … Accessible widgets and controls Accessible templates where there is no widget or control Accessibility guidelines where there are no templates Our process = Evaluate, define-architect, execute … Evaluate KRAD and KNS for baseline Log JIRAs – define/architect - determine timing Report status Set future target 22

23 EVALUATION PROCESS  Check the semantics of the code base: 1. Run a code checkercode checker 2. Navigate through the UI with keyboard only (no mouse) 3. Change to high contrast setting. Change to low DPI/large font setting (200x). Try screen magnifier. 4. Navigate through the UI with a screen-reader (can you turn off the monitor & still find your way around)? 5.Can all UI be accessed through speech input? Can special needs audiences use the software? (* UI = user interface) 23

24 KRAD / KNS BASELINE EVALUATION 24 We evaluated with 2 PCs with MS Windows OS: 2 operating systems: Vista and XP2 2 browsers: Firefox 5.0 and Internet Explorer8 2 Screen-readers: JAWS 12.0 (proprietary screen reader from Freedom Scientific, has largest market share today in screen-reading) NVDA (free, open source screen reader, growing in market share) 2 DPIs - native and 200% (recommended in Windows instead of changing screen resolution to affect font sizing) 2 contrast settings – regular and high contrast (white on black) And with 1 MAC with the Apple OSX (Lion): 2 browsers: Firefox 5.0 and Safari 1 screen reader: VoiceOver (built into the MAC OS) 2 screen resolutions: 1440 x 900 and 800 x 600 2 contrast settings: regular and high contrast (white on black)

25 OK – NOW, THE COMMON MISTAKES FOUND (TO AVOID) 25 Missing language & doctype tags Missing “skip to main content” links Missing page titles Head level problems (e.g. too many H1s, missing levels, & used for links) Titles or long descriptions needed on some links Opening new browser tab not announced to user For low vision users: Missing or insufficient visual indication of focus Images of text used in some active UI elements, not just in branding Confusing or missing focus order (keyboard navigation) Tables missing semantic markup – we’ll look at 4 examples! Tab structures missing semantic markup – we’ll look at 2 examples! And … we’ll cover an accessible error messaging approach!

26 DEEP DIVES – WE’LL LOOK AT THE FOLLOWING: Adaptations needed to make Accessible … 1.Tables – 4 examples (each with an HTML & ARIA variation) 2.Tabs – 1 example (with an HTML & ARIA variation) 3.Error Messaging – An approach for more accessible msgs 26 Tabs Errors Skip Deep Dives Acknowledgement goes to Hans Hillen from the Paciello Group who consulted with us on these code snippets

27 1. TABLE EXAMPLES - EXAMPLE 1 27 Could be a simple table … but … IF HTML markup = 2 separate tables (one for the column header row, another for the data rows) … … to sighted people it looks like a single table, but … it could be a navigation nightmare for screen-reading users! Example problem location: Sample Travel Application KNS L&F Section BO Class Tests Travel Account Inquiry page table at bottom of this page

28 TABLE MARKUP EXAMPLE 1 A 28 BEFORE: Travel Account Number Account Name Fiscal Officer ID 234235245 Expenses 235 769856859 Transport 237 Semantic Problem: Screen reader correctly perceives this as 2 separate tables - though it LOOKS like 1! Result: User is lost, does not know which cell he/she is in when the screen- reader speaks the data in “table 2”. HTML solution: Make this a single table with appropriate column header markup. OR … ARIA solution: See next page!

29 TABLE MARKUP EXAMPLE 1 B 29 AFTER (with ARIA tags): Account Number Account Name Fiscal Officer ID 234235245 Expenses 235 769856859 Transport 237 If Widget = 2 tables: If 1 table is not possible, ARIA can “fix” incorrect table structure. Wrap a single around both tables. Add row = ”presentation” to each individual table element. Add appropriate role to elements in each table. Looks the same, with correct semantics!

30 TABLE EXAMPLE 2 30 Problem: the screen reading is currently confusing, as the “Old” and “New” semantics are not included in the markup. Alternatives - Restructure: Add column span & scope markup and a hidden row of headers, so the nested column headers can be recognized by screen-readers Use a 3-column table - where the 1st column contains the variable name, the 2nd column contains the old values, and the 3rd column contains the edit controls for the new values Use two separate tables MULTIPLE COLUMN- PAIR TABLES Example problem location: Sample Travel Application KNS L&F Section BO Class Tests Travel Account Maintenance (Edit) page

31 TABLE MARKUP EXAMPLE 2 A 31 Semantics fixed in the single table of 4 rows, with colspan and scope attributes, and a hidden row of headers. Travel Account (a14) Old New Name Value Name Value Travel Account Number a14 Travel Account Number

32 TABLE MARKUP EXAMPLE 2 B 32 Semantics fixed by changing this to a 3-column table Property Old Value New Value Travel Account Number a14 Account Name ******** Travel Fiscal Officer ID 2 *.* fran

33 TABLE MARKUP EXAMPLE 2 C 33 A two-table design, displayed side-by-side Old Property Name Old Property Value Travel Account Number a14 Account Name ********* Travel Fiscal Officer ID 2 *.* fran New Property Name New Property Value Travel Account Number Account Name Travel Fiscal Officer ID

34 TABLE EXAMPLE 3 34 Alternatives: Add a title tag to each link (“Travel Account Number”), though will make for redundancy when more passively reading entire screen. or Add off-screen column headings, e.g., “Property name” and “Property Value” or Change to an ARIA list. In read-only inquiry forms, user’s focus will jump from link to link when actively navigating. So … are the live links (“a#”) associated semantically with their labels (e.g., “Travel Account Number”)? Example problem location: Sample Travel Application KNS L&F Section BO Class Tests Travel Account Inquiry page

35 TABLE MARKUP EXAMPLE 3 A 35 HTML: CSS:.offScreen { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; } HTML: Travel Account (a14) Property Name Property Value Travel Account Number a14 Semantics fixed with offscreen column headers

36 TABLE MARKUP EXAMPLE 3 B 36 ARIA: Travel Account Information Travel Account Number a14 Account Name ********* Travel Fiscal Officer Id 2 *.* fran Semantics fixed by changing this to an ARIA list

37 TABLE EXAMPLE 4 37 Multiple interactive elements can be placed within a table cell – all of them visually associated with a label (e.g., “Travel Account Number”). e.g.: Input field Inquiry icon Lookup icon Help icon Informational text Constraint text How Is this semantic relationship encoded in the mark-up, so that screen- readers can interpret and convey this? (missing in the code base today) Example problem location: Sample Travel Application KNS L&F Section BO Class Tests Travel Account Maintenance (Edit) page see travel account number cell for example

38 TABLE MARKUP EXAMPLE 4 A 38 Fieldset and legend Tags can be used to associate multiple controls that apply to the same user input field. (To prevent visual clutter, the fieldset and legend can be hidden visually.) HTML: Travel Account Number Travel Account Number Must be 10 digits

39 TABLE MARKUP EXAMPLE 4 B 39 Or you can assign an ARIA group role to a div to associate multiple controls that apply to the same user input field ARIA: Travel Account Number: 236 Travel Account Number Enter your travel account number or select the inquiry icon to find it. Must be 10 digits

40 2. ACCESSIBLE TAB STRUCTURES 40 If tabs change entire view contents … … how does a non-sighted user know they are tabs? … … so how to navigate through the overall site content? … In Kuali Portal: In KRAD Testing – KNS L&F Fiscal OfficerInquiry 2 : In KRAD Testing – KS L&F UIF Components (kitchen sink) Other Fields page (scroll down): 3 Example locations:

41 PROS / CONS OF HTML VS ARIA TAB MARKUP 41 HTMLARIA Goal is to target as many users of assistive technology now. Goal is to target the future -- early adopters and power users now, all others eventually. Your site behaves like a regular website with traditional web forms. Your site behaves like a rich client application, like you would find in a PC OS environment (e.g. Google Docs would be a good example). Con: Changing tabs cause the entire page, including the tab list itself, to refresh. The tab list loses focus when this happens. Pro: Changing tabs causes hidden content to become visible or Ajax content to be fetched. Focus stays on the tab list when this happens. Pro: Tabs will work in both virtual mode and forms mode for screen reader users. Con: Tabs will only work in (auto) forms mode.

42 RECOMMENDATIONS FOR KRAD 42 In Kuali Portal, use HTML markup (is OK to refresh the entire page & user is not in forms mode). For tab controls on a page, that don’t apply to the entire page (e.g., apply to a section of a form), use ARIA markup (is not OK to refresh the entire page, & OK to work only in Forms mode). In KRAD Testing – KNS L&F Fiscal OfficerInquiry 2 : In KRAD Testing – KS L&F UIF Components (kitchen sink) Other Fields page (scroll down):

43 TAB EXAMPLE A: START WITH A TRADITIONAL HTML TABLIST (KUALI PORTAL TABS) 43 The tab group is an unordered list ( ), preserving the grouped structure for technology that is not ARIA compliant. Each tab is a list item in the tab group’s unordered list. Each tab is also then implemented as an element inside the list’s items ( ). The tab panel(s) – the content -- associated with the tabs are placed below the list, in divs. (Note -- whether only the active tab panel is there or all tab panels depends on whether the entire page has to refresh when a new tab is opened, or whether the contents of a new tab panel is already hidden in the DOM / fetched through Ajax) My Dogs My Cats My Birds My Dogs … My Cats … My Birds …

44 44 Place a heading before the tab list, in this example, “My Animals” If the visual design doesn’t allow for visual headings, this can be hidden off screen. This heading identifies the tab list and becomes a good anchor point to navigate to. Add tab role and state information, using hidden text (hidden spans) The span’s text would = “tab” and “tab, selected”. (Code Example on next slide) As an alternative for the “selected” part, it is also possible to mark the currently selected tab as a plain list item without a link in it (the fact that it can’t be activated in that case indicates that the tab is currently opened). This technique only works if selecting a tab refreshes the entire page (which would move focus to the start of the new page), not if only the tab panel contents are updated. Update the page title if the tabs change entire page contents If the individual tabs in a list represent structural (sub)sections of the site as a whole, it can be useful to modify the page’s title to reflect this. For example, in the portal, opening the “Administration Tab” could cause the outer page’s title to change to “Administration page - Kuali Portal”. This can be achieved through a simple javascript call like: document.title=”My New Title”. Add a skip link (positioned offscreen) after the heading and before the tab list, if there are many tabs (eg, if 8 or more) Allows users to move focus past the list rather than to have to tab through each item TAB EXAMPLE A, CONT : ADDITIONAL HTML MARKUP

45 45 HTML: My Animals Dogs Tab, selected Cats Tab Birds Tab My Dogs … My Cats … My Birds … CSS:.offScreen { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; } ADDITIONAL CSS & HTML MARKUP TAB EXAMPLE A, CONTINUED :

46 RECOMMENDATIONS FOR KRAD, CONTINUED 46 For tab controls on a page, that don’t apply to the entire page (e.g., apply to a section of a form), use ARIA markup (is not OK to refresh the entire page, & is OK to work only in Forms mode). In KRAD Testing – KNS L&F Fiscal OfficerInquiry 2 : In KRAD Testing – KS L&F UIF Components (kitchen sink) Other Fields page (scroll down): Next – Example B – an ARIA tablist!

47 TAB EXAMPLE B: AN ARIA TABLIST 47 In addition to the HTML markup:  On the unordered list tag ( ), add: Role="tablist” Give the tablist a title. This can be done in either of these way s: role=”tablist” title=”title goes here”> Create an HTML label element & point its “for” attribute to the tablist container. Aria-labelledby=" ". (This could be a hidden heading preceding the tablist)  On the list items ( ), add: Role=“presentation” (a tablist should have tabs, not list items, as children, so this role hides them) On the element inside the list’s items ( ), define these attributes: Role="tab" Aria-selected="true/false" (set to true for the tab that is currently selected, false otherwise) Aria-controls=" ”  On the divs following the tablist, add: Role="tabpanel" Aria-labelledby=" " Aria-expanded=”true / false” (depending on whether the tab panel is currently expanded or not) Aria-hidden=”true / false” (depending on whether the tab panel is currently visible)

48 BUT WITH ARIA MARKUP, WE’RE NOT DONE YET! 48 We need to manage the keyboard & tab order! The tab list should take up one stop in the tab order. This tab stop should be to the currently active tab. (To navigate between tabs, typical keyboard users would use the 4 arrow keys as well as the Home, End, Pgup and Pgdn keys.) This "single tab stop" approach can be implemented in ARIA in one of two ways (discussed further on next slides): Roving Tabindex ARIA-ActiveDescendant

49 TAB EXAMPLE B1: MANAGING ARIA TAB ORDER WITH ROVING TABINDEX: 49 Each tab in the tab list has a "tabindex" value. For the tab that is currently selected, the tabindex value is "0" All the other tabs have a tabindex value of "-1" (i.e. they are skipped in the tab order but still focusable). Whenever the selected tab is changed (e.g. by using the arrow keys or clicking on it with the mouse), scripting is used to move focus to that tab, and update the tabindex values for all tabs to reflect the new situation (the tab that used to have tabindex="0" now gets a tabindex value of "-1", and the newly selected tab gets tabindex="0"). With this approach it's very important to ensure there is always at least one tab with tabindex="0", otherwise the entire tablist would become unreachable by keyboard. In addition to managing the tab order, there are two ways to activate the selected tab & those will be discussed after option 2.

50 TAB EXAMPLE B2: MANAGING ARIA TAB ORDER WITH ARIA-ACTIVEDESCENDANT: 50 The tablist itself is made focusable (i.e. the element gets tabindex="0"). The focused tab is then indicated by adding an aria-activedescendant attribute to the tablist. The value of the aria-activedescendant attribute is the ID of the tab element that was selected. When the selected tab changes, the only thing that needs to be updated is the value of that attribute so that it targets the newly selected tab. If this approach is followed correctly, the browser and screen reader will perceive the tab referenced by aria-activedescendant as being focused. In addition to managing the tab order, there are two ways to activate the selected tab. Next we’ll talk through the two ways to activate a new tab in an ARIA tablist.

51 AND – THERE ARE 2 WAYS TO ACTIVATE AN ARIA TAB: 51 Activation Option i: Clicking on a tab loads a new page When navigating the tabs with the arrow keys, it moves focus, but does not automatically open the tab. To activate a focused tab, the keyboard user presses the Enter key, after which a new page loads. Note that it is very important to correctly set the "aria-selected" tabs to true or false for all tabs (a screen reader user needs to hear which tab is currently selected and which ones are not). UX recommendation is to NOT use activation option i with ARIA tablist: Use option ii for ARIA tablists (where we don’t want entire page to refresh). Use traditional HTML tablists where entire page will refresh, so tablist will work outside of forms mode (see earlier slide with the current pros/cons of HTML and ARIA tablists).

52 2 WAYS TO ACTIVATE A NEW TAB, CONTINUED 52 Activation Option ii: Clicking on a tab updates just the relevant part of the page through AJAX, the tablist and rest of page stays the same. If tabs are used to dynamically load content, but focus remains on the actual tab, it's recommended to automatically activate the tab as it is navigated with the arrow key (mouse & keyboard behavior are the same). This behavior is similar to how a tab list works in a desktop environment. Current UX recommendation is to use this activation option where we use ARIA tablists (and be consistent throughout an application). See e xample code snippet for activation option ii that follows.

53 53 Tab example B1: ARIA Tablist with a Roving Tabindex and with Activation Option ii Dogs Cats Birds My Dogs … My Cats … My Birds …

54 54 Tab example B2: ARIA Tablist with Aria- Activedescendant and Activation Option ii Dogs Cats Birds

{ "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.com/13/4081446/slides/slide_54.jpg", "name": "54 Tab example B2: ARIA Tablist with Aria- Activedescendant and Activation Option ii Dogs Cats Birds

55 3. ACCESSIBLE ERROR MESSAGING 55 Error Scenario: User submits complex form (after field-level client-side validation, if any, is done) Application finds errors in multiple fields on the page, across groups of fields. Best practice = At top of page there is a page-level summary of errors (so that it is early in the screen-reading order) – the summary includes the # of errors in each group that has errors, not the error text. Focus is placed here when application returns errors. User can jump directly to any of the groups that have errors, because each group in the summary is marked up as a link: If there are group-level summaries, the focus(link) moves to the group’s summary, and from there the user can jump to any of the fields. (this is recommended) If there are no group-level summaries, the focus(link) moves to the 1st field that has an error in the chosen group. (Application can implement w/o group summary but this is not recommended) Every summary (page level and group level) starts with a heading. The user can get back to the page-level summary using standard shortcuts for moving to top of page, or we can create a custom global shortcut.

56 ACCESSIBLE ERROR MESSAGING, CONTINUED 56 Example page-level summary, with heading text-variable filled in: 17 errors in form submission Example group and field-level error messaging: Error state indication is placed with the field – see icon and field visual treatment. (Helps low-vision & all users!) Error text is placed in group-level summary above the group’s fields AND placed in an error tooltip. The tooltip appears contiguous with the field when the user hovers over and when the field is selected. Try out the behavior in a sample code implementation here!

57 ACCESSIBLE ERROR MESSAGING, CONTINUED 57 Additional visual indication on the field when user hovers over the error text. Additional visual indication on the field when the user selects it and can enter data. Tooltip remains visible with the field while entering the data. Try out the behavior in a sample code implementation here!

58 ACCESSIBLE ERROR MESSAGING, CONTINUED 58 This strategy solves the formatting problems we otherwise create when we place error message text within each field (whether immediately below or to the right), requiring other space to be pushed aside or down: We don’t know how wide or deep the other aspects associated with the fields and groups will be, how adding the error text will affect the relationship/layout with other field groups on the page. Placing content inside a form field’s label means that all this content will be announced by a screen reader as the field’s accessible name, rather than as the field’s accessible description or state information. This is too verbose. This strategy addresses the need to place the error indication and text as close to the field as possible -- helpful for all users and also needed particularly for low-vision users. Try out the behavior in a sample code implementation here!

59 FINALLY – SOME CAVEATS 59 This is a deep area –requires study and expertise – is not yet automatable There are tools and resources to help. Aspirational target = live partnering with and evaluation by special needs audiences

60 OTHER ACCESSIBILITY RESOURCES Kuali Rice Accessibility: https://wiki.kuali.org/display/KULRICE/Rice+Accessibility https://wiki.kuali.org/display/KULRICE/Rice+Accessibility W3C’s WCAG 2.0 guidelines: http://www.w3.org/WAI/WCAG20/quickref/Overview.php http://www.w3.org/WAI/WCAG20/quickref/Overview.php University of Washington’s Accessibility resources: http://www.washington.edu/accessibility/ http://www.washington.edu/accessibility/ Illinois IT Accessibility Initiative: http://www.itaccessibility.illinois.edu/ ITI’s Web Accessibility checker: http://achecker.ca/checker/index.phphttp://achecker.ca/checker/index.php Web Developer browser extension: http://chrispederick.com/work/web- developer/help/http://chrispederick.com/work/web- developer/help/ Firefox Accessibility Evaluation Toolbar: https://addons.mozilla.org/en- US/firefox/addon/accessibility-evaluation-toolb/https://addons.mozilla.org/en- US/firefox/addon/accessibility-evaluation-toolb/ … and many others … 60

61 OTHER OPEN SOURCE ACCESSIBILITY ACTIVITIES jQuery toolkit team (http://jquery.com/)http://jquery.com/ The Dojo toolkit team (http://dojotoolkit.org/) (http://dojotoolkit.org/ Fluid skinning system team (http://www.fluidproject.org/)http://www.fluidproject.org/ The Inclusive Design Institute at Ontario College of Design in Toronto (http://inclusivedesign.ca/)http://inclusivedesign.ca/ The Paciello Group (http://www.paciellogroup.com/)http://www.paciellogroup.com/ Jasig / Sakai (http://www.jasig.org/, http://sakaiproject.org/)http://www.jasig.org/http://sakaiproject.org/ … and many others … 61

62 COMMERCIAL VENDORS’ ACCESSIBILITY INFO Adobe Accessibility: http://www.adobe.com/accessibility/http://www.adobe.com/accessibility/ Apple Accessibility: http://www.apple.com/accessibility/http://www.apple.com/accessibility/ IBM Accessibility: http://www.ibm.com/accessibility/http://www.ibm.com/accessibility/ Microsoft Accessibility: http://www.microsoft.com/enable/http://www.microsoft.com/enable/ Oracle Accessibility: http://www.oracle.com/us/corporate/accessibility/http://www.oracle.com/us/corporate/accessibility/ … and many others … 62

63 Q & A 63

64 Craving more UI Framework Information? E Explore https://wiki.kuali.org/display/STUDENT/User+Interaction https://wiki.kuali.org/display/STUDENT/User+Interaction +Model (Look at design components) https://wiki.kuali.org/display/STUDENT/User+Experience+Team Test Drive http://demo.rice.kuali.org (login as admin) (Look at UIF components) Get Involved https://wiki.kuali.org/display/KULRICE/Collaboration Contact foundationux@kuali.org foundationux@kuali.org Thank You! 64


Download ppt "Presenters: William Washington Candace Soderston Date:February 21, 2011 Repeat of our KD presentation to the UW’s Developer Architecture Working Group."

Similar presentations


Ads by Google