WebVisions 2013 in review: Part one
Wednesday, May 22, 2013
On Wednesday through Friday, May 22-24, I am attending the WebVisions Portland 2013 conference at the Oregon Convention Center. Below is a quick overview of the workshops I attended on Wednesday, with links.
(Also see my reviews from previous WebVisions conferences: 2012, 2011, 2010, 2009, 2008 and 2007.)
Accessibility for UX Designers – Derek Featherstone
(9:00 am to 12:30 pm | session details)
User Experience practitioners are in a unique position to effectively champion accessibility within their teams and organizations. You are trusted advisors and connect with all the right stakeholders for a project, including the people that will use the product you’re building. You are most often the person that connects the big picture with in the trenches hands-on work.
Filled with practical advice and examples from real projects, this session will provide you with an in-depth look at accessibility requirements for the modern web, recognize accessibility challenges earlier in the design process and communicate accessibility concepts more clearly with the rest of your team. This is not your typical accessibility workshop — you’ll get both the strategies and tactics you need to make a difference as you tackle real design problems for real people.
You’ll learn:
- How to integrate accessibility into the design process the right way (hint: it isn’t just a rubber stamp at the end of a project!)
- Why developers need you, why you need them, and how you can help make each other’s lives easier.
- How you can use accessibility as a design tool to simply create designs that are better for everyone
- Methods for communicating accessibility requirements effectively with your teams (both internal and external)
- The top 5 things that MUST be specified in order to successfully implement accessibility in a project
Notes:
- Twitter: @feather (and feather at simplyaccessible dot com)
- Previous presentation slides: Thinking Beyond the Device
- All of accessibility is edge cases
- Apple VoiceOver with rotor example
- Visual, hearing, mobility, cognitive, speech – Microsoft Surface example
- Designing for the extreme ends works for almost everyone in between
- Age is an interesting problem to solve: drag & drop vs. click & stick interactions
- AT tools: USB braille reader, JAWS screen reader, high-contrast keyboard, mouth/head wand, foot switch, single-handed keyboard, concave keyboard for mouth/head wand usage, software keyboard with guides for low-strength users, configurable gaming controller, color-coded keyboard for literacy, Humanware software app: “Blossoming as a child”
- Blind people experience most of the web linearly. The order on the screen matters
- Layout: Proximity for low-vision users … use a single vertical stack (like mobile design, always)
- Search for custom styles at simplyaccessible.com for CSS files to use as browser overrides
- Images in Context at simplyaccessible.com (captions) – view the transcript of this video (transcript), or watch this video on YouTube (autoplays)
- POUR: Perceivable, Operable, Understandable, Robust … focuses on user needs, not technology.
- Dragon Naturally Speaking – voice-activated mechanisms of activating links uses alt text content: “click The Haunting”
- The story that we tell in code needs to be same story that we’re telling visually. We shouldn’t just code elements in the order we see them; the order and element nesting need to make logical sense without CSS and graphics
- Accessibility solutions are better for everybody
- Use field-level error messaging as well as an error summary at the top. This is particularly important for people who zoom/magnify and those with cognitive difficulties
- Form error message examples: examples.simplyaccessible.com/error-messaging/
- You must be able to perform ALL functionality with a keyboard.
- Keyboard users: blind, mobility impaired, voice recognition technology (mouse emulation)
- Custom controls on maps are not keyboard-accessible
- You MUST test with a keyboard.
- Generally, don’t use keyboard shortcuts. They often interfere with AT software features.
- Model dialog example: Â Adding tabindex=”-1″ allows for programmatic focus. Upon close, return focus to where the user was before the dialog box
- Front-loaded content (e.g. bullet points that describe an article’s key information before the article, like CNN does); do this with your alt text, with the most important, distinguishing information first
- HTML source order matters. We need to specify orders within widgets and within pages
- Lightboxes/modal dialog boxes needs to retain focus within them when they’re in use
- The longer you wait, the more it costs
- Project Definition, User Research, Design Iteration, Develop & Implement
Implementing Layouts using CSS3 – Chris Mills
(2:00 pm to 5:30 pm | session details)
It is very surprising that — in the 20 years we’ve been publishing documents on the Web — we’ve never really had much in the way of easily manipulable, proper tools for creating web layouts. Even with CSS having very good cross browser support in recent years, positioning doesn’t have all the answers, and using floats for multiple columns is a hack. In 2012/2013, we are just starting to see decent layout tools for the web emerge and get support in browsers.
In this workshop, Chris Mills will look at historical layout methods, discuss their limitations, and then dive into the modern layout mechanisms available as part of CSS3, working through building up some useful examples with:
- Media queries, viewport and matchMedia
- Multi column layout
- Flexbox
- Grids
- Regions
- New CSS units such as rem, vw, vh and dppxv
- Fixing layouts with JavaScript
- Providing support for older browsers using Polyfills, conditional comments, modernizr and @supports
Notes:
- Twitter: @chrisdavidmills (and chrisdavidmills at gmail dot com)
- Code/markup examples: examples.zip
- Slides (actually a 44-page workbook): future-layouts.pdf
- Mobile first: don’t make mobile users download desktop assets they won’t see or use
- Opera Mobile Emulator for desktop
- viewport: width=device-width (use actual width of device) or width=number of pixels
- Adaptive images fix with PHP/JS/cookies. Is a server-side solution for a client-side problem. Browser prefetching prevents most client-side solutions
- Prefers to use large (double size) images with 72/96 ppi rather than increasing the ppi
- Using generated content (data-icon)Â to display font-face icons on the page (alternative to CSS sprites)
Continue to WebVisions 2013 in review: Part two »