#sxsw #iPadA11y
Marty DeAngelo, VP/Director, Interaction Design, Digitas Health
So I’m here for what is the final day of SXSW 2012, which is the marathon of interactive info-overload. And much like the last .2 tenths of a marathon the end is in sight, if we can just get there. If you’ve not attended an SXSW interactive conference you need to. And if you have but haven’t been recently I would recommend coming back, it’s bigger, badder and better than ever.
Marty DeAngelo speaking at SXSW 2012
So, let’s get started with Marty and how the iPad can save accessibility. Marty starts.
Last year Marty attended SXSW and noticed there were lots of discussions around mobile, and he wondered how that influenced and impacted the disabled. Mobile users have in many ways the same issues as disabled users.
Accessibility and the disabled usually are secondary to time and budget, meaning it gets left aside. When this same issue happened in the mobile space developers noticed, because of the louder signal, and did something about it. This helped improved accessibility user experience for both mobile and disabled.
Issues include:
- 17% of American’s have a disability (according to Marty)
- 24M have hearing loss
- 21M have vision issues
- 26 have mobility issues
What we have here, Marty says, is failure to communicate.
There are many people out there trying to solve the issue, but there are still people out there saying things like,
“But blind people don’t buy sporting goods, do they?”
A quote from a sports company exec to Marty.
What is the problem? The problem is everyone has issues with accessibility, but the disabled have more, thus access of content is more likely to be denied.
Visual issues are higher than most issues, but that’s not to say you can’t focus on other accessibility issues.
Jared Smith said last year at SXSW,
“Web accessibility is getting worse, there an increasing gap between innovation and accessibility.”
Usability issues between the web and mobile appear somewhat similar, but mobile has bigger issues, this data from survey results of 100 people that Marty asked, “How much do the following issues impact your use of the web?”
Marty is a birder, he takes photos of birds and shares them. On the mobile web he would try to download the bird he was seeing, but the photos would take forever to load via mobile.
In the early days, most of the web was text, which made for somewhat a difficult experience for people with disabilities.
For mobile, it’s the same problem all over again. Mobile issues are the exact same issues as the disabled audience. Smartphones all have the same issues as for disabled users.
A quote from Marty’s survey:
“Web accessibility is extremely important. If a website or information or app is not usable it makes anyone feel disabled.”
A List Apart has articles on how to change the user experience to display better on mobile devices.
Now tablets are here, but with the same issues in terms of accessibility. However, the big difference was angry users of mobile and tablets with a loud voice. They expect it to be closer to the web experience. Designers had to address issues of how to work on mobile. The changes that were made fixed accessibility, helping to make a better user experience overall.
The impact on accessibility is better, there are still some issues, like still using Flash, but there is still a way to go.
So how can this be fixed?
- HTML 5
- CSS 3
- Mobile first
- Responsive design
- Future developments
HTML 5 – There are 30 to 40 sessions here at SXSW 2012 about this. There are new structural elements, instead of Divs you have navigation sections, footer sections, etc. This allows you to name components that are relevant to users. There is tighter integration with CSS 3 to allow less reliance on Flash. Markup is big, with valid code, sound content hierarchy and proper use of Alt and Title attributes. It also provides better backups, like text transcripts of video and audio files.
With video, there are alternatives for how to display the video that enables the browser to create its own player, which allows better affordance for disabled and mobile users. By allowing multiple video types this allows your browser to use the best type available.
Marty says, another thing about video, auto play sucks so just don’t do it [amen!]. If you load a video usually the volume is bad, you have to struggle to find and use the controls. A volume slider is better than on/off by the way.
Captioning video will be a revolutionary tool to help people access video content in a much better way. There are two standards do far, TIML and WebVTT, Marty prefers WebVTT because of its controls. Browsers are not able to support this yet, but it’s coming soon.
Opera has examples of how to do this. (http://people.opera.com/brucel/demo/video/multilingual-synergy.html).
Transcripts are better than nothing, if you can’t caption your video. HTML is better than PDFs if possible to use especially for mobile users.
So what about ARIA? Structure code uses roles to help people understand what elements in the code are what. The problem is this is not supported on Mobile (desktop only right now).
Landmarks are a subset of ARIA that represent a version that works in mobile and most browsers.
CSS 3 – Transitions, transforms and animation. Transforms allow elements to be rendered in 2D space. It allows skewing elements in 2D space. Transitions can be used to change color, size , opacity and styles over time (think of a rollover). Animation can create animated elements such as as pulsing boxes. All of this can be done in pure CSS without having to use Flash or Java or JavaScript.
Typography is another improvement with CSS 3. For example, you can manipulate HTML text with CSS 3 to allow degrading in a graceful manner, yet still do amazing things to control your fonts.
Most newer browsers support Tranforms, Transitions and Animation (notable exception is I.E.). There are add ons that will allow older
Rethinking Your Mobile Strategy – Accessibility. Many strategies can improve mobility and accessibility at the same time.
Mobile First – Think Mobile First by Luke Wroblewski, consider your content first via mobile, and then later build the web solution. Focus on the most important pieces, and determine the context of usage. Where are users when they use your content. Determine the best context first to present the core of your information.
Responsive Design: Another example is Responsive Web Design book. We need to practice adapting our designs to different devices. We need to use server side detection to deliver the right code to the right device at the right time.
By determining the Audience, determine the best way to present content factoring in mobility, accessibility and
Ways to do responsive accessibility:
- Set up your structure to be read well by voiceover technology
- Increase size of hit states and links on smaller screens
- Create viable anchor links for access to large content
- Use HTML5 and CSS3 for mobile and disabled users
Also, consider the devices themselves. The accessibility functions of mobile devices are far superior t anything on the desktop. Voice command technology enables much better interaction on mobile devices vs. desktops is a great example of this.
For blind: Mobile devices help with voiceover for websites, voice control to find an activate function, sound and vibrations for transactions taken, etc.
For the deaf: visual cues for notifications, vibration notifications, SMS and Texting and even cameras on the phone.
Mobility – Voice commands, larger hit states are good examples of how to improve the user experience for mobility and disabled users.
iOS3 starting adding these functionalities. Now there is a much better suite of tools with iOS3. Android functions also have good features. Blackberry is coming, but is somewhat behind. And Windows phone has almost nothing.
Quote from Marty’s survey, “I think that a lack of consistent support and behaviors is a pretty significant problem.”
For the Future – Most accessibility issues are around vision, but not the other disabilities that are just as important.
Apps themselves are taking accessibility to a new level. For example, a bar code reader that reads out the ingredients of a product. Web App Standardization, Facebook is trying to raise the bar to create a set of mobile standards geared towards web apps. The ringmark system rates web standards compliance into three rings.
An android app can allow users to type Braille.
Let’s not forget eReaders. eReaders tend to suck when it comes to mobile issues. Most have limited if any voiceover. Amazon’s response to this was “That’s what audio books are for.” But that Marty says is a very different UX vs. reading a full book.
In conclusion, ways to improve disability and mobile for everyone:
- Consider designing Mobile First
- Use Good, semantic structural code
- Content Alternatives are essential, for disabled and mobile users
- HTML5, CSS 3 and new JavaScript techniques are improving
- Mobile devices offer build-in accessibility
- Better things are coming, keep reading blogs etc.
- Mobile is more than phones, don’t forget
And with that Marty concludes, he did a great job I think.
His slides with excellent data are here:
http://www.slideshare.net/martytdx/how-the-ipad-can-save-accessibility/
Tags: accessibility, Marty DeAngelo, SXSW 2012
