Back to main AEAChicago2007 post
Derek Featherstone’s post about his presentation
ironfeathers.ca (just did triathlon, Ironman) icanhaz.com/accessibility (new tinyurl competitor) developers actually creating the site from its design often have checklist syndrome "here's what you need to do to make your site accessible" creates a compliance mentality it's something that happens at the end of building something, part of QA should be related to the people who're using the site used to do a lot of checklist compliance checking then had a transformative experience on this particular site Search Terms label is in the searchbox itself have JavaScript so when that field gets focus, the words go away doing user testing, tab into field, value is there so announced to screenreader user types in terms, hits Tab to get to Go, then hits Shift-Tab to check was written correctly and then his search terms were blanked, and he said "what happened, am I somewhere different?" so two keystrokes and he was lost Derek looked for a place to fail the site on a checklist and couldn't find one so take accessibility beyond the checklist patterns and techniques from real sites, interplay between XHTML/CSS/JavaScript hopefully add new techniques to coding arsenal current web trend is custom widgets Google Maps built own controls for zooming, moving, traffic, pinpoints all these are custom widgets and you can use API to place them on page they're not actual widgets that do anything, though so need to test accessibility accessibility isn't just screenreaders - task: voice recognition software to zoom in maybe each control is a link? voice recognition command "link" numbers the links then say "twelve" and link twelve would be clicked no links highlighted in Google Map then "button" - only one button, Search Maps at top cannot tab to any controls in Google Map definitely a problem set out when building ironfeathers to solve this problem API lets you do custom pretty much everything voice recognition software can say "mouse grid", pick ninth of page, drill down then click control once you found it don't even get tooltip saying Zoom In until activate it with a click command ironfeathers built their own controls using the button element tabbable and recognizable by voice recognition software if using custom widgets, choose appropriate code to build provide us with more intuitive controls than HTML allows, but require design/code to emulate instead of <div onclick="doSomething()"> used <button onclick="doSomething()"> inline editing - Basecamp to-do list shows tools on hover no way to activate using keyboard could instead have an "expose all controls" button available sometimes, AJAX helps accessibility. stay in same place after editing. live updates - think about positioning put "characters available" after a field if "updating" meter is in HTML but only sometimes shown, will screenreader user know when? if things update on other parts of the page, how does someone know when one happens? on mobile client, have "your status has been posted" message after update button should have on other clients as well how do we indicate the page is being updated? how do we alert the user that there's new content? Amazon tagging with screenreader "forms mode on" so shortcut keys don't jump to headings, etc. when AJAX box popped up, turned forms mode off Add button doesn't have alt text, so reads source attribute of image no label for text box, so reads "Edit [whatever's in the box]" then reads javascript: void(0) box with potential completions, but it's not a selectbox so don't know suggestions are there example of tree widget - need to build custom in HTML title attribute isn't read by default, and if it is used, it replaces the link text so had to put hidden span in the link itself tried to replicate what screenreader would say if reading a real tree (operating system) collapsed, expanded, number of children error/advisory information each field has a label; some have additional information that needs to be associated problem with label-field-advisory is advisory is after the field put it all in label. <label for="uname">Username <em>must not contain spaces</em></label> he uses em for advisory, strong for error use JavaScript to update label, though it may not be seen (i.e. password strength) form linearization don't put form elements after the submit button in the HTML, etc. put elements in order to be read, then position with CSS could also use tabindex, but hard to manage especially with back-end systems generating code search results often redisplay the form, but that can push results below the fold repetition of the form can confuse people reading the page linearly create mechanisms to move around the page <form method="post" action="search-results.html#results"> Found X results for <keyword> link at top that links to results anchor Search again link at bottom that links to form anchor translating visual language United Methodist Church design of navigation example from IASummit color and position tell us a lot same color says same section position says main tabs are at same level, ones below are subordinate difference in color, style, position says tool navigation is separate but with styles off, not telling the same story tools nav nested within an item secondary navigation is completely separate, and not in a list so separate tools nav; add labels for Site Menu and In This Section elearning course accessibility needed to make crossword puzzle accessible so had to really think about what learning objectives were need entry of data, removal of data, keyboard-friendly, scalable clues are labels for form fields so click on label and get focus on crossword field color for visual focus, typing automatically advances after each letter can use backspace key to remove actually coded as fieldsets for each clue, field for each letter javascript copies letters from across to down and vice versa labels at bottom of file title tags aren't really useful in screenreaders or for keyboard input likes to keep input outside the label so has another style hook only reads first label assigned to a particular field best resource for finding what works is local college assistive services and students don't buy a screenreader, see real people using the technology have skip links more often now, should AJAX pages have "no JavaScript" links? been thinking about that, but also sometimes AJAX is better (i.e. with tree)
Pingback: Information Squid » Blog Archive » An Event Apart Chicago 2007