SXSW 2010: Web Accessibility Gone Wild

Monday, March 15, 2010 11:00am
Jared Smith, WebAIM

Session Description

This session presents a wide variety of mistakes, blunders, misconceptions, over-indulgences, intricacies, and generally silly aspects of modern web accessibility. Sometimes the most serious errors are made by well-meaning developers who misunderstand the concepts or take their limited accessibility knowledge to an extreme level – thus web accessibility gone wild.

Discussion

“Mistakes, misconceptions, over-indulgences, minutia, and generally silly aspects of modern web accessibility” …or “how to Fail at web accessibility”

The mythical “accessible” web site does not exist. Accessibility is a continuum with many different paths.

Web accessibility is about more than just blindness. We need to think beyond blindness and visual disabilities and look into the cognitive areas which include many more people than those with visual impairments.

Accessible sites don’t need to be ugly. You want a really good experience still, and that’s possible. For people with disabilities the web is a godsend since it allows people with disabilities to access things they normally wouldn’t. Most areas of accessibility calls for larger fonts, contrasting colors, etc. which help everyone and not just those with disabilities.

Web accessibility has a branding issue, and it has devolved into specifications, checklists, and techniques. People run through a checklist of what they think is accessible, and just leave it at that. Web Accessibility is a continium and needs to be addressed again and again.

Compliance does not necessarily make your website accessible. Use guidelines as tools (and only tools) to achieve accessibility. So, your site can be fully compliant, yet totally inaccessible. Your site can also be fully compliant and technically accessible, yet functionally inaccessible.

Can you have too much accessibility? Yes! Web accessibility can and should happen naturally.

Accessibility implemented partially or incorrectly can be worse than no accessibility at all. Basically you need to build one version of a web site that is fully accessible. If there is a page you cannot make accessible then you’ll need to write alternative text to it.

Alternative Text

This is probably the most difficult aspect of Web Accessibility. You cannot define in a spec what equivilant

Alternative text for images should contain Content and Function. If you have a photo of yourself, you should probably have the “alt” tag set as your name, or “Photo of [your name].” If you have a graphical bullet, then don’t make it alt=”bullet,” that’s just bad all over. Also, having “image of…” or “graphic of…” in alt text is bad. It just becomes redundant, and you don’t want redundancy. However, if it’s an Illustration or a Photo then perhaps “Photo of…” or “Illustration of…” could be appropriate. But this is not necessary everywhere.

Do focus on content and functionality. “I don’t want to miss out on any content” vs. “I’m listening to the page at 400 words per minute in a robotic voice and I don’t want to miss out on any content.”

I’mages that are the only thing within a link, then this must have alt text. Otherwise the screen-reader wont know how to read off what the link goes to. In most cases if an alt tag is missing, it will read off the file of the image, or the URL it goes to. Avoid redundant text in cases where you have an alt tag assigned, but next to the image is the same exact text. It’s perfectly accessible to make the alt tag of an image blank in this case.

Captcha for spam prevention will not be accessible for people unless there is an audio version. And if someone is both deaf and blind then neither of these visual or audio preventions will work.

Accesskey and Tabindex is usually fail unless you’re sure you know what you’re doing. Learn the power of tabindex=”0″ and tabindex=”-1″.

  • tabindex=”1+”: Specifies exact tab order. Ensure tab order is complete, logical, and intuitive. Rarely needed.
  • tabindex=”0″: Places element in the default tab order.
  • tabindex=”-1″: Do not place element in tab order, but allow the element to programmatically receive focus.

Tabindex, focus(), and Aria to the rescue! Aria stands for “accessible rich internet applications.” Accessibility will greatly be built into HTML5.

  • Gives or enhances semantics of non-semantic or other-semantic elements
  • Landmark roles – define major functional areas of your page (search, navigation, main, etc.)
  • Enhances keyboard accessibility for widgets and controls
  • Ensures accessibility of dynamically updated content

Visually hiding content

  • Display:none and visibility:hidden hide from everyone… and that’s a good thing.
  • Absolute position off-screen left with CSS for screen readers
  • Use judiciously

The native accessibility (and usability) of your site is typically inversely proportional to the volume of …___

Make sure to skip to the main content links. Until browsers provide better keyboard navigation for sighted users. You can position them off-screen if you must, but make them clearly visible on :focus. One “skip” link is typically sufficient.

Do not removing focus indicators from links with the CSS attribute outline:0. CNN.com uses this, so when you tab through links you have no idea where you are. That’s a bad CNN, bad!

Bullet-proof web design is good. It’s a way for a designer to understand that they do not have control over what the website looks like to the end user. For example, if someone increases the font size then it shouldn’t make the website look crazy with the design.

Avoid links which say, “click here” as they lack description.

Headings; h1, h2, etc.; are great as screen readers (such as Jaws 10) will navigate you to these as “content” chunks. Lists are also very useful for navigation in design, and very very important in accessibility.

Odds and Ends

  • Test in a screen reader. NVDA is an open-source and free
  • Provide accurate, descriptive, succinct page titles
  • Don’t stress over screen reader pronunciation and quirks.
  • Expand first instance of acronyms and abbreviations. You don’t have to use <acronym>/<abbr> on all instances. Don’t use for well known terms.
  • Use <fieldset> and <legend> for groups of radio buttons and checkboxes.
  • Layout tables don’t (typically) affect accessibility.

More Information

#webaccessgonewild
@jared_w_smith
Wave: Web Accessibility Evaluation Tool

SXSW 2010: Managing Your Content Management System

Monday, March 15, 2010 9:30am
Alex Will, Spoonfed Media
Henry Erskine Crum, Spoonfed Media

Session Description

An effective content management system is a must for any content-based web service. This technical session will discuss elements of designing and building a custom CMS that leverages technology and existing web data from sources such as Flickr and Wikipedia to automate research and increase time spent writing original content.

Discussion

Key takaways of this panel

  • Most important factors when making a decision about a CMS: contentext of your content business and process of content protection.
  • Tools to evaluate what CMS you need for your business.
  • “A computer based system that allows one or more people to manage the online publication, storage and display of content.”

Content is generated from all different means. It can be from twitter, youtube, flickr, etc. But what they’re going to talk about today is the editorial content of the primary page.

The Production Process (of writing content)

  • Data Collection: The raw event data before you start writing the editorial
  • Work Flow Management: How you assign tasks to divide up the editorial parts into logical chunks
  • Research: Look to sources on the internet for further information or clarify information they may already know
  • Write
  • Review
  • Publish: At this point you also consider SEO or linking into Social Media to maximize what you get as far as viewers

Content Production in Events (from Spoonfed’s view)

  • Events are a moving target with a finite shelf-life
  • Incentive structure for UGC in events is small
  • Opinionated content for target market

Business Objective (from Spoonfed’s view)

  • Develop a way of publishing copyright event listings in an efficient and scalable way

Why Spoonfed choose a Custom CMS

What didn’t matter

  • Amount of data
  • Size of web site
  • Complexity of idea

What did matter

  • Data aggregation from multiple sources
  • Work flow management between editors
  • Reducing research time per event: having all data for the event on the same edit page
  • Search Engine Optimization: the editors need to know how to efficiently do this
  • Lead generation and contact management

Getting the Raw Data

  • Automate and aggregate non-editorial elements
  • Create different processes for different parts of the information
  • Dealing with issues of quality and duplication
  • Example: deciding what news stories to write real-time

Workflow Management

  • Dividing tasks, vertically segmenting, prioritizing and assigning responsibility
  • Incorporate automated steps into the workflow process
  • Reduce or remove the time that is spent by humans prioritizing the information

Reducing Research Time: the golden ratio

  • Give editors research esources without leaving the page: Wikipedia, Flickr, Twitter and Google News
  • Rise of real-time news as part of this process increases relevancy and quality
  • Re-purposing data

Talking about SEO

  • Tools to aid editors in the production of content for SEO; such as Keyword research
  • Suggested Inlinking
  • Major benefits if you’re not using off-the-shelf systems

Contacts, Relationship Building and Lead Generation

  • Linked to prioritization – manage the most important information first
  • Store and prioritize contacts that can be converted into leads
  • Automatically alert contacts when you create content they’d be interested in

Things we are thinking about in the Future

  • Prioritizing content pages for individual editors; such as Leveraging trend data
  • Analytics: value of historical data within CMS; such as what worked on the site and how to leverage in the CMS for the future

Don’t Forget

  • Every circumstance is different – think about tradeoffs
  • Launch and iterate mentality is key
  • Don’t expect to get it 100% first time; Editorial team is essential for further efficiency gains.

Reflect: Why custom CMS was right in this case

  • Solve problem of producing huge amounts of content efficiently
  • Analyze and innovate on improving every step of production process
  • Competitive advantage: size of editorial team, SEO, scalability

Questions and Answers

How many man-hours did it take for you to complete this development?
Their second version took about 7 months to get the main CMS out, and another 4 months of tweaks. It is written in Rails.

Do you have user themed content?
They use “tags” and you can create your own “entity magazine” on which tags you want displayed.

Can you talk about the visual about where does the feed come vs. where you’re actually writing?
One is a calendar and workflow, divided up how the editor wants it. Then you have the area in which you write, with an area where data is pulled in from Wikipedia and Flick allowing you to drag and drop into your own content (all within on the same page).

Do you retain a developer, or more than one? And if so, do you analyze ever where the expense of doing it yourself may financially surpass what it’s worth?
Yes. We’ve found now there is about one developer’s needs half a year for typical maintenance.

How much is your content found typically? Via clicking through articles, or searching on your website?
Articles, social media, and a large amount of traffic through search. They focus on whenever someone searches for sometime they’ve documented then it’s found.

More Information

#contentmgmtsystem

SXSW 2010: Your Design Process is Killing You

Sunday, March 14, 2010 2:00pm
Sara Summers, Microsoft

Session Description

Designers and developers are efficiency experts for our clients, yet we struggle to provide that expertise for ourselves and how we work. Learn how to collaborate and craft an effective process for teamwork and the hectic nature the business. This is a call to arms to every designer and developer in the community. No more smoke and mirrors. Let’s unify our efforts and make a real product the first time.

Discussion

The use of play and collaboration is best to get innovative ideas.

So what’s the deal with play? There’s no rules, it’s fun, it puts you in the moment.

Dr. Stuart Brown made the Institute of Play. What’s in teresting is how he came to study play. After the shooting on cthe campus of Texas in the 60s they brought Brown in to see why the shooter would have done what he did. He found this was due to a non-play childhood.

Play gives us empathy, trust, joy, etc. The absence of play gives you depression, rigidify, etc. The science of play is critical to our adaptation. The science of play is hard wired in us to play throughout our lifecycle. The science of play, if don’t for it’s own sake, makes us more progressive. It also drives us to seek out innovative products.

Tina Seelig, Executive Director for the Stanford Technology Ventures Program does exercises with her students. Paper and sharpies were passed out to the audience to do an exercise. On one side of the paper you were to write down the best business idea you could think of, and on the other side give the most horrendous business idea you could think of… and do it in only 2 minutes. Ripping the page in half, you only keep the bad business idea. The whole idea Dr. Seelig teaches is by simply getting people out of their typical creativity.

Kacie Kinzer’s Tweenbots were little robots which could only go straight placed around new york with a little flag that said, “Help Me” and the destination they wanted to reach. Every robot released eventually got to the correct spot.

Antonio Damasio’s experiment gave $2000 of fake money to all of his participants, and offered them two decks of poker cards to draw from. The participants needed to draw, on average, 50 cards from the more profitable pile before realizing it was better. After 80 cards they knew what to do.

Rationality requires feeling. So empathetic great design is needed to achieve great results.

…and I left.

More Information

#designprocesskillingyou

SXSW 2010: Why You Aren’t Done Yet

Sunday, March 14, 2010 11:00am
David Heinemeier Hansson, 37signals

Session Description

The deadline is looming, you’ve tweeted how busy you are four times this week, and yet you just can’t get the project wrapped up and out the door. Real artists ship and you want to be a real artist, real bad, but you’re not. Let me show you how to rework that.

Discussion

You can’t get anything done at work: most working environments are too difficult to get things done because you have too many people who become distractions trying to pull you away from your day. The times at which you get the most amount of things done is before or after people are there.

The one thing you should be worrying about are meetings. They’re usually scheduled in nice little neat chunks for some guy to blabber on and on about things you just do not care about. In most cases meetings are a waste of time for all of those people involved. Sometimes meets are good, such as when you want to fire someone it should be face-to-face. In basics, if you are announcing something with absolutely no emotion involved, then a meeting is not involved. Meetings are really just  what arrogant people call so they have to listen to them.

Most creative work doesn’t fit well with an hour there, two hours there, etc. You need more longer stretches to get things done, because as of right now meetings are the interferences in between.

Hansson decided, working at 37signals, since he couldn’t get anything done he would just stop going to the office and work from home (most of the time). There needs to be an interruption cost. So if you need to interrupt someone it’s $10, and that’ll make them think twice. Think about it this way: if you call a meeting with 10 people who make $25 an hour for an hour class, then you just blew $250 of the companies’ money.

The reason why you’re not getting anything done is because you’re working too hard. Just because you’re pooring more work into the day, it doesn’t mean you’re getting more done. If you’re aiming for creativity then crunching for so many hours are not going to produce those results. Very few creative ideas occur when you’re just crunching data. The best productivity happens slowly without stress.

Don’t be a hero: In most companies if you’re a work-a-holic you’re the hero. Don’t be that guy. Deadlines are ridiculous since someone is just making them up. If you, for instance, pull an all-nighter to make a Friday deadline then you’re going to be burned out that Monday or Tuesday.

Everyone says, “But I have so much work to do, so I cannot do this!” But in reality you still have an 8 hour day, you just use it better.

You’re in over your head: in most cases your boss asks, “when will project X be done?” and thus you answer giving your own deadline. You really have no idea when it’ll be done, and your estimates suck. The sooner you realize your estimates suck the happier you’ll be. You need to stop measuring deadlines as deadlines, and just realize they’re guesses.

You have to take charge: Decisions are progress, so make the decisions and make the call. When you can see on Wednesday you’re not going to get it done, you need to let someone know. Most people don’t do that, and it becomes much more critical by Friday. You can stop it at any moment if you have the courage to do so.

Good enough is fine: Don’t spend so much time working on one thing, just get it done and come back later to polish it up and make it better. This way you can get the entire system completed, and update it later.

Giving up is often one of the best things you can do.

Questions and Answers

What solutions do you have when working from home?
Turn up some loud dance music, use virtual desktops, and get rid of all distractions, mail counters, etc. Check your email only a few times a day.

How do you convince your manager how to do this?
Well, when Hansson worked for a company where they didn’t have this ability he just stopped going to meetings and started working from home. Try to see if you can work from home, and if people are not ok with you doing that then take a “sick day,” work from home, and show them what all you’ve gotten done. Results in productivity are really hard to disprove they worked. Disclaimer: you may get fired.

Are there any big companies which are doing it this way?
No, not really.

More Information

#youarentdoneyet

SXSW 2010: Augmenting Maps with Reality

Sunday, March 14, 2010 9:30am
Ryan Sarver, Twitter
Laura Diaz, Navteq
Kellen Elliott-McCrea, Flickr
Dennis Crowley, Foursquare
Chris Pendleton, Bing

Session Description

Remember when the utility of an online map consisted of directions and gawking at satellite imagery? With the recent tide of location-based apps such as Foursquare and the introduction of the likes of Twitter Maps, maps is rapidly emerging as the gateway to socially exploring the world around us. But that’s not all. In this future focused discussion, we’ll explore the rise of maps as a social platform and it’s potential beyond. This panel is sponsored by Microsoft Bing.

Discussion

As maps are getting more and more detailed at representing specific landmarks and buildings, what if we could project that further and represent rooms within buildings? The problem with this is there isn’t much public data for this type of information.

Another thing Crowley references was venues for events. How do you know how large the venue actually was to compare the attendance?

Another downfall is the way map data is updated and then released back to the public. Right now it’s a very manual process when updating streets, locations, directions, etc. No one mentioned any solution for this, aside from it’s just going to be socially constructed based on multiple feeds all coming together to make this happen. To me, this sounds kind of messy and inaccurate.

In the foursquare app there isn’t a map where there are clusters of people representing where people are. However, they have just recently added the “trending places” section which allows people to have a mental picture of where everyone is. All the data is there, but it just becomes a factor of representing it to a presentation layer.

The concept of “Bush-craft” is the idea where locals and people who have went there know about the good places to go.

There are quite a few open source map projects, but there still needs to be better ways where the end users can become the experts to where they live.

Questions and Answers

Have you seen any interesting data streams lately?
Twitter has a geo-tag feed. Flickr has a public listing of geo-tagged photos. Foursquare has a log of the last 3 months of your friends activity. Geonames and PublicBlock are also good sources.

The GPS on our phones is limited to a radius circle, so how can we get better accuracy? Is there anything coming out?
ComLab and Cisco are both working on things such as that. Skynet also is working on combining GPS and Wi-Fi. The problem is you need 3 or 4 satellites for lock-on, but in most cases you’ll only have 2. So being able to connect those two with Wi-Fi would be a huge potential.

More Information

#maps
8-bit Map of New York