How to make your Flash websites more accessible.
The 7 habits of highly acessible RIAS and solutions to deploy alternate content with web standards while keeping your experience rich.
Post here: http://www.asourceofinspiration.com/2009/02/28/progressive-enhancement-with-flash/
7. Why should I care?
Acessibility
Saturday, February 28, 2009
8. Why should I care?
Acessibility Ad Blocking
Saturday, February 28, 2009
9. Why should I care?
Acessibility Ad Blocking Search Marketing
Saturday, February 28, 2009
10. SWF Searchability
★ An inside look to RIAs and gadgets
‣ AS1 to AS3 support
★ Indexing Flash is limited
‣ Textual Content and URLs
‣ Diminished support to Javascript embedded SWFs
‣ External sources separately indexed
‣ Bidirectional languages are out
‣ Deep linking forgotten
Saturday, February 28, 2009
11. Why should I care?
New devices and platforms
Saturday, February 28, 2009
21. From Zero to Hero
★ XHTML / CSS
★ Javascript / Ajax
★ Flex / Flash
Saturday, February 28, 2009
22. “In truth, there are no bad technologies. There are
just bad uses of a technology. The cruel hand that
fate had dealt JavaScript reminds me of another
much maligned technology: Macromedia’s Flash.”
- Jeremy Keith, Dom Scripting
Saturday, February 28, 2009
24. The 7 habits
of highly accessible RIAs
1. Be Proactive
2. Come with the End in Mind
3. Put First Things First
4. Think Win/Win
5. Seek First to Understand, Then to be Understood
6. Synergize
7. Sharpen the Saw
Saturday, February 28, 2009
25. 1. Be Proactive
★ Start with a goal:
‣ Acessibility and Distribution of Information
Saturday, February 28, 2009
26. 2. Come with the End in
★ Function over form
‣ Essential functions without 3rd layer
★ Consider Different Platforms
‣ Fallback on input devices
Saturday, February 28, 2009
27. 3. Put First Things First
★ Markup first
‣ Additional functionality enhances experience
★ Basic fallback
‣ Native interactive elements: links, forms
Saturday, February 28, 2009
28. 4. Think Win/Win
★ Test for Developers, Test for Users
‣ Enhancement according to device capability
Saturday, February 28, 2009
29. 5. Seek First to Understand,
Then to be Understood
★ Understand the devices
‣ Limitations
‣ Capabilities
Saturday, February 28, 2009
30. 6. Synergize
★ Selective delivery
‣ Device/Browser detection
‣ Stylesheet by media
Saturday, February 28, 2009
31. 7. Sharpen the Saw
★ Modular code
‣ Extendable to new technologies
Saturday, February 28, 2009
A concept brought from engineering, brought to mainstream web development in 2003by Steve Champeon and Nick Finck on their 2003 SXSW talk “Inclusive Web Design For the Future”.
Until then, most web development companies were doing what it’s called Graceful Degradation, focusing on the current technologies and offering a small support to older browsers. Back then, most of concerns were related to graphical browsers, with acessible experiences constrained by economical pressures.
So what’s the difference between the older Graceful Degradation and today’s Progressive Enhancement?
Graceful Degradation
The website development was targeted for the latest browsers, with some backward support.
The main concern was to create a richer experience, with a high focus on presentation.
Progressive Enhancement
The focus here is on content, and no longer on presentaion for graphic browsers. The main concern is to assure the optimal distribution of content. In modern web development we should look forward, to other kind of displays and platforms.
But it does it a concern for all devices, starting with the least capable and walking all the way up to newer devices, enricheing the experiences but still separating presentation from information, with greater concern regarding acessibility and universal distribution, by using current web standards.
So, the web design isn’t always about the visuals, but also to assure that information is available to the widest audience possible, to make it acessibity.
Another recent problem when deploying web applications based on the Flash Platform, is the increasing number of people using Flash blocking extensions, like Ad Block Plus.
And for those thinking that a 97% adoption rate of the Flash Player is enough, better think again, because amongst those 3% is one of the highest sources of traffic: search engines.
So, the web design isn’t always about the visuals, but also to assure that information is available to the widest audience possible, to make it acessibity.
Another recent problem when deploying web applications based on the Flash Platform, is the increasing number of people using Flash blocking extensions, like Ad Block Plus.
And for those thinking that a 97% adoption rate of the Flash Player is enough, better think again, because amongst those 3% is one of the highest sources of traffic: search engines.
So, the web design isn’t always about the visuals, but also to assure that information is available to the widest audience possible, to make it acessibity.
Another recent problem when deploying web applications based on the Flash Platform, is the increasing number of people using Flash blocking extensions, like Ad Block Plus.
And for those thinking that a 97% adoption rate of the Flash Player is enough, better think again, because amongst those 3% is one of the highest sources of traffic: search engines.
Despite the previous attempts, mostly from Google, to index SWFs, it was only with Adobe’s release of their Searchable SWF library, that rich media became part of the indexed web.
The main reasons to improve SWF searchability were the increasing amount of Rich Internet Applications, gadgets and games that were available to large audiences.
However, the indexation is pretty much limited. The bot algorithm works much like a real person, exploring the SWF file, clicking in buttons, inserting inputs and traversing on the multple states of the application.
For now, it only indexes text and URLs, and ignores images and dynamic content.
When first integrated by Google, it also didn’t supported Javascript embedding techniques like SWFObject, but recently that has changed with support for the most common embedding techniques.
Other limitations includes the lack of support for dynamic languages and deep linking.
The most problematic is still the absence of dynamic content indexing. With so many of RIAs and websites getting data from external sources, like XML files, a lot of the hidden web is still left outside, with no context whatsoever. And even if individual XML documents are indexed, they are mostly useless as they have no context and semantic value whatsoever, thus no help to search engines.
And, last but not the least, one of the reasons you should care: devices that aren’t supporting (yet) the Flash Platform like the iPhone
Modern web development is separated in 3 layers:
1) Content
From HTML 4 to XHTML with an eye to HTML 5, with support for device languages like WAP and XHTML Basic the content is deployed with langues with semantic capabilities
2) PresentationSecond, we add the presentation layer with languages like CSS1 and CSS2
3) Interactivity
While the previous 2 layers are presente on most devices and graphical browseres, interactivity is where the dreams and nightmares happen, and what i’l bet talking about.
We’ll try to deploy rich visual experience while keeping it available to the widest audience possible, with future compatibility also in mind.
Modern web development is separated in 3 layers:
1) Content
From HTML 4 to XHTML with an eye to HTML 5, with support for device languages like WAP and XHTML Basic the content is deployed with langues with semantic capabilities
2) PresentationSecond, we add the presentation layer with languages like CSS1 and CSS2
3) Interactivity
While the previous 2 layers are presente on most devices and graphical browseres, interactivity is where the dreams and nightmares happen, and what i’l bet talking about.
We’ll try to deploy rich visual experience while keeping it available to the widest audience possible, with future compatibility also in mind.
Modern web development is separated in 3 layers:
1) Content
From HTML 4 to XHTML with an eye to HTML 5, with support for device languages like WAP and XHTML Basic the content is deployed with langues with semantic capabilities
2) PresentationSecond, we add the presentation layer with languages like CSS1 and CSS2
3) Interactivity
While the previous 2 layers are presente on most devices and graphical browseres, interactivity is where the dreams and nightmares happen, and what i’l bet talking about.
We’ll try to deploy rich visual experience while keeping it available to the widest audience possible, with future compatibility also in mind.
Modern web development is separated in 3 layers:
1) Content
From HTML 4 to XHTML with an eye to HTML 5, with support for device languages like WAP and XHTML Basic the content is deployed with langues with semantic capabilities
2) PresentationSecond, we add the presentation layer with languages like CSS1 and CSS2
3) Interactivity
While the previous 2 layers are presente on most devices and graphical browseres, interactivity is where the dreams and nightmares happen, and what i’l bet talking about.
We’ll try to deploy rich visual experience while keeping it available to the widest audience possible, with future compatibility also in mind.
Modern web development is separated in 3 layers:
1) Content
From HTML 4 to XHTML with an eye to HTML 5, with support for device languages like WAP and XHTML Basic the content is deployed with langues with semantic capabilities
2) PresentationSecond, we add the presentation layer with languages like CSS1 and CSS2
3) Interactivity
While the previous 2 layers are presente on most devices and graphical browseres, interactivity is where the dreams and nightmares happen, and what i’l bet talking about.
We’ll try to deploy rich visual experience while keeping it available to the widest audience possible, with future compatibility also in mind.
Modern web development is separated in 3 layers:
1) Content
From HTML 4 to XHTML with an eye to HTML 5, with support for device languages like WAP and XHTML Basic the content is deployed with langues with semantic capabilities
2) PresentationSecond, we add the presentation layer with languages like CSS1 and CSS2
3) Interactivity
While the previous 2 layers are presente on most devices and graphical browseres, interactivity is where the dreams and nightmares happen, and what i’l bet talking about.
We’ll try to deploy rich visual experience while keeping it available to the widest audience possible, with future compatibility also in mind.
We’ll work our way up from Zero to Hero, from basic web standard based pages to Rich Internet Application.
Web experiences don’t have to be dull, but they don’t have to be unaccessible either. We can have it both.
Instead of starting by building the rich experinece first, we’ll start with the basics. Content first. Then we add a presentation layer. And then, we apply the rich media and interactivity (Javascript, Flash).
A interesting comparison to what RIAs can be, with regards to accessibility are the 7 habits of Highly effective people, by Stephen Covey, that i freely adapted for this talk.
Start with a goal in mind: Accessibility and Distribution, by separating Content / Presentation / Interactivity
It will be easier in the end, easier for maintenance at least.
Functionality first.
We should have the basic functionality working without having to use the 3rd layer: If Javascript / Ajax / Flash aren’t there we should still be able to do basic actions.
Also, don’t forget where it’s going to be used: in a graphical browser we can use the TAB key to jump between inputs,but on a cellphone there’s no TAB key, so we should keep that in minf and add support for directional navigation with arrow keys.
Start with the first things: semantic markup
Only add additional elements when it gets the experience richer.
Check if the devices/browsers/platforms support the additional 3rd layer.
So don’t add device specific events (onchange and onblur) unless you’re covered all others, so users don’t get frustated with your application on your device.
Understand the plataform/device/browser
From screen resolution to conectivity it all affects how your application behaves.
Deliver the experience with regards to what your users devices are able to interpret
For instance, on Ajax applications, you can use @include to bypass non graphic browsers.
Or use media target for stylesheets: print, mobile, screen.
If you have you code by modules, it will be easier to adapt to richer experiences.
From includes with conditional comments to external scripts, it will be easier to maintain the application and extending it when new technologies are available.