AEAChicago2007 – “Accessibility: Lost in Translation” by Derek Featherstone

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)

About Jennifer Berk

I'm an analytics and data leader with a marketing and product mindset. I like online newspapers, science fiction and fantasy, and ugly fish.
This entry was posted in Conference, Development. Bookmark the permalink.

One Response to AEAChicago2007 – “Accessibility: Lost in Translation” by Derek Featherstone

  1. Pingback: Information Squid » Blog Archive » An Event Apart Chicago 2007

Leave a Reply

Your email address will not be published. Required fields are marked *