Google
 
Web www.albaspectrum.com

computer, internet, programming, Microsoft Dynamics, Oracle, Java, J2EE, EJB, SAP, ecommerce strategies, hightech jobs, h1b, web design, MS SQL Server, reporting, customizations, software, ERP, MRP, accounting systems, CRM - popular articles

 

Search Engine Optimizing and Accessible Flash

However this really limits what you can do with flash, and prevents you from taking advantage of all that flash can offer. There are many ways you can make flash accessible and search engine friendly while using it for more than simple design aspects.

The Basics -

If you feel your whole site needs to be flash, you should at least break it up into several pages and add an html sitemap. You can link to the sitemap at the bottom of every page so that search engines with then acknowledge that the other pages even exist. Another less than optimal, but acceptable method is creating an alternative text-only or html duplicate of your flash site.

I don't find either of these to be great ways to deal with flash. Instead breaking up flash elements, and having a mix of HTML and flash allows much more remote to provide accessible alternatives. Most designers will be saying “Well Duh” at this point, but I am talking about doing more than just using flash for banners or simple animation.

Most designers will tell you that using flash for navigation is an accessibility and search engine death wish. However, with new CSS methods you can now have navigation hidden behind flash. With these methods, users with flash see the bells and whistles that you spend so much time working on, and those who do not can still navigate normally (including search engines).

This is often refered to as Fharner Image Replacement, but instead of using a display: none box – it uses a span with a large text indent and overflow: hidden to hide the navigation and/or text. (developed by Mike Rundle)

CSS

#navigation { /* FLASH DETAILS */ }

#navigation span { text-indent: -9000px; overflow: hidden; display:inline; }

HTML

Home

The drawbacks:

This will work great for those who can not run CSS, have screen readers, and search engines. However, those who do not have flash or have flash disabled it will not show the navigation by default. To work around this, we can use javascript to enable/disable the flash and text replacement. I recommend using the Flash Detection script by Dithered.com

CSS [flash.css]

#flash_hold { }

#flash_hold span { text-indent: -9000px; overflow: hidden; display:inline; }

non-flash CSS [nonflash.css]

#flash_hold object{ display: none; }

/* Remove the text indent, so menu is visible */

#flash_hold span { text-indent: 0px; }

Javascript This will make the menu visible, with only a little increase in effort for the viewer.

Now we just need a Script to switch the CSS between Flash & Non-flash, this can be linked in the head tags

http://www.3point7designs.com/seoflash/ Here is a working example of an accessible and search engine friendly page, using this technique!

Ross Johnson is co-founder of Ann Arbor Web Design company 3.7 Designs. He also runs a Website Success Strategies blog for designers and non-designers.

Alba Spectrum popular articles series: FAQ, Reviews, Introductions, Product Selections, Advises, Definitions, online marketing

We are serving wholesale & retail customers in Illinois, California, Texas, Wisconsin, New York, Washington, Ohio, Michigan, Indiana, Arizona, New Mexico, Louisiana, Florida, Georgia, Minnesota, Utah, Virginia, Georgia, Hawaii, Iowa, Colorado, Ontario, Quebec, Alberta, British Colombia.  We also serve customer internationally in New Zealand, Europe: UK, France, Poland, Italy, Germany, Russia, India, Byrma, Thailand, Holland, Denmark, Sweden, Norway, Indonesia, Austria, New Zealand, Pakistan, Afghanistan, Iran, Spain, Argentina, Brazil, Chile, Uruguay, Paraguay, Peru, Equador, Colombia, Venezuela, Panama, Costa Rica, Canada, South Africa, Nigeria, Portugal, Greece, Turkey, Asia: India, China, Philippines, South Korea, plus business metros: Chicago, Los Angeles, Phoenix, Boston, Atlanta, Minneapolis, Fargo, Seattle, Miami, Orlando, Detroit, Buffalo, Toronto, Paris, London, Montreal, Denver, Warsaw, Berlin, Prague, Rome, Karachi, Sao Paulo, Rio de Janeiro, Moscow, Buenos Aires, Dehli, Mumbai, Beigin, Cairo, San Francisco, Fremont, Naperville, Oakland, Melburn, Sidney, Sent Petersburg, Tampa, New Orleans, Houston, Dallas, Mexico City, Bogota, Caracas, Lima, Salvador, Recife, Brasilia, Curitiba, Goiania. http://www.albaspectrum.com