AccessibleWeb@U - Thursday, Jan 29, 2009 - Dylan Wilbanks, Rick Ells, Terry Thompson, Heather Larson, Bill Corrigan, Lori Seabright, Bob Glass, Christine Sugatan, Wendy Chisholm - Initial business - iSchool is interested in a presentation on accessibility. Rick will follow up. - Only Terry and Dylan have read WCAG 2.0 so far - Volunteer sites needed for future Access Hack sessions - You can volunteer your site by sending email to Rick Ells (rells@u.washington.edu), Terry Thompson (tft@u.washington.edu), Dan Comden (danc@u.washington.edu) or Dylan Wilbanks (wilbanks@u.washington.edu) - Friendly, knowledgeable people will discuss accessibility topics related to your site's design - Our first Access Hack Session: School of Public Health - How it works - We have an Access Hack session where our guest webmaster describes the Web site and its accessibility related features. A discussion follows about the methods used and other methods/technologies that might be considered for future updates. Detailed notes of the discussion are submitted to the AccessibleWeb@U email list - To foster discussion, a post is placed on our blog at http://accesswebu.blogspot.com/ describing the Access Hack session and linking to the notes in the email list archive - You go to the blog and post your comments - The webmaster: Dylan Wilbanks - The site: sph.washington.edul - The school: - 815 total students, 735 of which are graduate students; one of largest grad schools on campus - Large, complex school - Developing an information architecture for the site is complicated - Making it user centered is the main challenge, particularly since many degrees span across programs - The site techniques: - Page layout is based on the grid design method advocated by Khoi Vinh, the NY Times Design Director - http://www.lifeclever.com/khoi-vinh-mark-boulton-grids -are-good/ - Define an overall grad for the page, then align major page parts with the grid - Home top of page page menus all CSS controlled - Menus based on Son of Suckerfish toolkit - Described at http://www.htmldog.com/articles/suckerfish/dropdo wns/ - Wanted pure HTML and CSS - At the time Ultimate Dropdown Menus (UDM, http://www.udm4.com/) was charging for the use of its libraries - Has some behaviors that are not right, - focus stays on what you have visited so menu remains when you mouseoff - Does not make it easy to tab or arrow through the menus - Considering abandoning Son of Suckerfish because of behaviors - Top menus (red bar) contain overall site navigation - On each page left column nav related to the topic - Content area of a page often also has a page table of contents - Results is three levels of navigation - Dropdowns are all unordered lists - Dropdowns all done with CSS - No Javascript - Tabbing through menus does not always work quite right - Works within unordered list but can't have it stay in a given dropdown, will move on to contents of next tab without the menu dropdown expansion moving with it - Site architecture - Windows shop - IIS on front end - ASP3 server - SQL 08 as background - Code on top all written by hand - Not using SharePoint - Might use SharePoint for internal purposes eventually - Using microformats - For dates, uses ABBR. but TITLE contains machine readable date intended for microformat readers, which confusing JAWS - Color is red and black - Evaluated how well colors would work with red/green color blindness - Videos on the Video Archive page (http://sph.washington.edu/history/videos.asp) are not captioned - Tables were not used for page formatting - Page structure defined with divs which are then sized and placed with CSS - Tables are used where appropriate for row X column information - Using 4.01 Transitional as standard DOCTYPE - Code is coming from various people in college, some of who have little background in HTML - 4.01 Transitional was most forgiving - People enter content through Web page - Site content entry interface has an HTML editor for entry (an ASP part) - Are working on a better editor that produces better HTML - Testing accessibility of pages - Rely on Cynthia Says and walking through WCAG criteria - Try to stick with XHTML that will validate and work well with CSS - Font size - Font size chosen looked good at first - People use higher resolution monitors, so the font size they see gets smaller - For body, declare a font size in pixels (12px) and scale everything off that - For font size and line spacing, tried to follow ideas of Richard Rutter - relational rhythm - Have spacing in between lines feel like spacing on a page - http://clagnut.com/ - http://clagnut.com/blog/1942/ - http://24ways.org/2006/compose-to-a-vertical-rhyt hm - Layout sizes of everything with pages are all in relative units, which allows user to scale font sizes up and down as needed without breaking the layout - Page width is fixed at 890 pixels - Discussion - Could menus be done with scripting and still be accessible? - Might be worth trying Dean.edward.name scripts - http://dean.edwards.name/ - Written scripts that fix all odd behaviors of IE6 - http://code.google.com/p/ie7-js/ - Could you use Javascript that consumes the unordered lists to give the behaviors visual people want? - ARIA will address these behaviors - Will still have to build in keyboard support yourself - Within unordered lists, make top level as headings - Juicy Studio now offers a FireFox Accessibility Toolbar with features for working with WAI-ARIA - https://addons.mozilla.org/en-US/firefox/add on/9108 - Yahoo User Interface library now offers a progressive enhancement pulldown menu - http://developer.yahoo.com/yui/menu/index.html - Menu content is maintained through simple semantic markup (unordered lists) - Has good arrow key and tab behavior - Free - YUI also offers a progressive enhancement collapsible treeview menu - http://developer.yahoo.com/yui/examples/tree view/tv-markup.html - Captioning of videos - Amazon has service called Mechanical Turk - You submit the task to Amazon Mechanical Turk (https://www.mturk.com/mturk/welcome) which in turn has pool of people who bid on your task - After doing a task, the customer can rate quality of work - https://www.mturk.com/mturk/welcome - Terry heard at a recent conference that results were sometimes good, sometimes not so good - You can accept and reject - Should you put controls on pages (such as scaling font size up or down) that can be done through the browser - Seems to be two camps rejecting or supporting the idea; your view depends on where you fall - One camp assumes people know how to scale sizes in browser and feel that doing it that way gives them more flexibility - How big should the size steps be? - Having controls on the page actually constrains you to just three steps - Using the browser means sizes can be scaled over a wide range - Others feel that users will not find how to scale sizes - Margins on the SPH site are narrow - Grid concept involves cutting page into equally wide sections then use the sections to place things in - 890 = 12x65 + 5x11 - total width = column widths plus gutter widths - Things seems to fit in the right place when placed according to the grid - Built on old site structure, which created some difficulties - Footer is arranged with negative margins - Menu in left margin is in div that occurs after content div in html - Creates odd tab order - Information architecture is complicated - Three different architectures - Overall site categories in red bar - Categorie subcategories on left - Once you get to a specific subcategory it has a left menu - Could address complexity with breadcrumbs - Used to have breadcrumbs - Got complex to maintain with three levels - Can page visitation rates be used to help evaluate structure? - Could lead to some puzzling conclusions - Most visited page has the words "meth" and "receipe" in it - Final business - Future topics - Taking a close look at menus - Son of Suckerfish - WAI-ARIA - YUI progressive enhancement - More Access Hack sessions