axbom.blog om coaching, design och etik

Infoga Flash, bibehåll hög tillgänglighet


calliandra blomma
(Om du har Flash Player 6 och JavaScript aktiverat ser du ett bildspel med blommor i stället för en enstaka bild ovan.)


Det här exemplet visar hur Flash-innehåll bör infogas för att bibehålla hög tillgänglighet och sökbarhet.

Osynlig hoppkod (jump code)

I början ligger en osynlig bild ovanför Flash-filmen (eller bilden) som låter användare med textläsare hoppa direkt till innehållet. Om du har relevant innehåll i din ”flashcontent”-div (se nedan) så kanske det här inte behövs.

Vanlig div

Det ligger en vanlig div i koden med id-namn ”flashcontent” som innehåller html-kod för att visa en vanlig bild. Innehållet i denna div ersätts med Flash-filmen om användaren har den önskade versionen av Flash.

Detektera och infoga med JavaScript

I det här exemplet infogas Flash-innehåll med JavaScript. Om JavaScript är deaktiverat, eller om användaren inte har den begärda Flash-versionen, ser användaren en statisk bild. Det alternativa innehållet kan vara precis vad som helst.

Extern XML-data

Bilder som laddas in i Flash-filmen definieras i en XML-fil. Vilken XML-fil som skall användas definieras med en parameter när Flash-filmen hämtas. Det betyder att samma Flash-film kan återanvändas och uppdateras utan Flash-kodning. När det är möjligt så använd data i XML-filer, vilket gör din lösning så väldigt mycket mer användbar.

Voila!

Som du kan se så kommer även sökmotorspindlar kunna läsa innehållet i div-en, och människor som kan se Flash-filmen kommer att se den. Vad kan vi mer önska? Ja kanske att Flash-detektering var möjligt med något annat än JavaScript.

Men det är en annan historia.

Läs mer om hur du bäst använder den här metoden för att infoga Flash-filmer med FlashObject.

Viktigt om tillgänglighet

Även med den här metoden måste du givetvis försäkra dig om att du har angett namn och/eller beskrivning av Flash-filmen med Flash inbyggda verktyg för tillgänglighet.

Obligatorisk läsning: Creating Accessible Macromedia Flash Content.

Tack

Jag har skrivit den svenska översättningen av handledningen för FlashObject.
Jag har också skrivit en engelsk version av den här sidan.

Bilagor

Alla filer som används i exemplet listas nedan.

(Obs! Om du använder Firefox och inte kan se Flash-filmer är det möjligt att du måste deaktivera Object-tabs i insticksprogrammet Adblock.)

Per Axbom

Per Axbom

@axbom

Per Axbom är kommunikationsvetaren som föddes i Liberia. I 20 år har han utbildat den digitala yrkeskåren och hjälpt organisationer med digital användbarhet och tillgänglighet. Hans jobb är att lyssna på människor och säkerställa att tekniken inte blir en kontrollerande, begränsande faktor utan i stället ett hållbart, omtänksamt stöd. Du kan höra hans röst på UX Podcast.

Digital omtanke bokomslag Pers nya handbok om etik i teknikbranschen, Digital omtanke, finns att köpa hos Bokus. Den engelska upplagan finns även i Kindle-format hos Amazon.

Leave a Reply

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.

  Prenumerera  
newest oldest most voted
Meddela om
trackback

chemise ralph lauren…
Les élèves de létablissement de la commune du Grand-Serre qui ont assisté aux faits ont également été auditionnés, les listes conduites par chacun des quatre socialistes se tiendraient dans un mouchoir de poche, ?Le Tchèque fait le break au sixième jeu…

trackback

maillot de foot…
もフォースクエア、Booyah、Yelp のような適用する機能…