Vkládejte SilverLight do stránky přístupně, s alternativní obsahem

Technologie SilverLight nabízí několik způsobů, jak umístit aplikaci do stránky. Z hlediska přístupnosti jsou některé z nich velmi nevhodné, takže pomocí tohoto článku se pokusíme najít ten nejpřijatelnější.

Možnosti vkládání SilverLight aplikace do stránky

Pro neznalé bych odkázal na článek Silverlight – co je Silverlight?, kde naleznou letmý popis této RIA pluginové technogie. Jak vyplývá z oficiální dokumentace Integrating Silverlight with a Web Page, základní způsoby vložení aplikace do stránky jsou dva:

• integrace pomocí (X)HTML
• integrace pomocí JavaScriptu

Pokud používáme ASP.NET, je k dispozici rozšířená podpora založená na JavaScriptu:

• ASP.NET Silverlight Server Control

Alternativní obsah

Alternativní obsah v případě pluginové technologie je velmi důležitý. Alibistická a bohužel dnes ještě stále dosti častá věta "Nainstalujte si prosím…" naprosto nestačí! Neměli bychom nutit uživatele si cosi instalovat (můžeme mu to doporučit), a dokonce ani nevíme, jestli on má oprávnění si něco instalovat a jestli vůbec na jeho systém něco takového instalovat lze. Na paměti bychom měli mít také uživatele asistivních technologií. Tito všichni ocení, pokud jim nabídneme možnost, jak si požadavek, objednávku nebo službu vyřídit jinak:

• jednoduchým formulářem, kam uživatel popíše co chce
• formulářem pro objednání telefonního hovoru s naším pracovníkem
• odkazem na kontaktní formulář
• kontaktním telefonním číslem
• nebo třeba popisem, jak jinak ještě může uživatel postupovat

Integrace pomocí JavaScriptu

K vložení aplikace se použije Microsoftem zveřejněný skript SilverLight.js. Do stránky potom vkládáme kód, který může vypadat takto:

<script type="text/javascript">
 Silverlight.createObject(
                        "ClientBin/EmbeddingWithJS.xap",
sl3Host, "sl3",
                        {
                           
width: "200", height: "50",
                           
background: "white", alt: "<!–not installed–>",
                           
version: "2.0.31005.0"
                        },
                        { onError: onSLError,
onLoad: onSLLoad },
                       
"param1=value1,param2=value2", "row3");
</script>

Ačkoli určitým způsobem můžeme ovlivnit i zobrazený alternativní obsah, je celá funkcionalita a tedy i alternativní obsah závislý na podpoře klientského skriptování. Skript má navíc tendenci uživateli nutit instalaci SilverLight pluginu a to bez ohledu na to, zda si to uživatele přeje nebo zda to dokonce má oprávnění provést (!). Proto bych tento způsob volil pouze pro použití ve zvláštních aplikacích například v intranetu – pro webové stránky se nehodí.

Integrace pomocí ASP.NET SilverLight Server Control

Tento způsob stejně jako předchozí popsaný používá skript SilverLight.js, jen se o něj vývojář nemusí starat – do stránky jej automaticky emituje ScriptManager. Což mimo jiné také znamená, že ve stránce proto musí být umístěn formulář. Řekl bych proto, že tento způsob spojuje nevýhody předešlého a navíc přidává další omezení. Určitě se proto hodí pro vyvíjení a ladění aplikace a tam, kde nám uvedené nevýhody nevadí. Proto bych ve finální ASP.NET aplikaci určené pro web nakonec vývojářský komfort tohoto způsobu raději nevyužil.

Integrace pomocí (X)HTML

Tento způsob se mi zdá z hlediska přístupnosti nejčistší. Využívá se zde standardní XHTML element object, pod kontrolou tak máme i sémantiku dokumentu a samozřejmě snadno dáme k dispozici alternativní obsah. Vyzkoušejte si v různých prohlížečích a s různou podporou pluginů ukázku.

Vzorový kód může vypadat takto:

<object width="400" height="150" data="data:application/x-silverlight-2," type="application/x-silverlight-2">
  <param name="Source" value="ClientBin/UploadFile.xap" />
  <param name="InitParams" value="UploadUrl=http://myserver/ClientFunction.UploadFile.aspx"/>
  <param name="MinRuntimeVersion" value="2.0.31005.0" />
  <param name="AutoUpgrade" value="true" />
  <param name="EnableHtmlAccess" value="true" />
  <param name="AllowHtmlPopupWindow" value="true" />
  <div style="text-align:center">
    <p>
      Toto je alternativní obsah pro SilverLight aplikaci.
      <br />
      <a href="http://go2.microsoft.com/fwlink/?LinkID=114576&amp;v=2.0"><img src="http://go2.microsoft.com/fwlink/?LinkID=108181"
alt="Microsoft Silverlight" style="border-width:0;" /></a>
    </p>
  </div>
</object>

Kód spolehlivě funguje ve všech prohlížečích, pro které je dnes k dispozici i SilverLight plugin (Internet Explorer, FireFox, Opera, Safari…). Potěšitelné je, že není potřeba (jako v případě Flash pluginu) uvádět problematický atribut clsid.

Uvedený kód se nepokouší uživatele nutit stahovat nějaký plugin, na uživatele nevyskakují žádná okna. Jako alternativní obsah je předpřipravený odstavec, kam bychom měli doplnit skutečně užitečné informace pro náhradní vyřízení požadavku. Dále je vložen obrázkový odkaz směřující na stránku pro stažení SilverLight pluginu jako podpora pro uživatele, kteří se rozhodnou si plugin nainstalovat.

Tento způsob bych volil i v případě ASP.NET aplikací pro finální nasazení na web – a to i přesto, že v ASP.NET je metoda značně usnadňující práci vývojáře. Z hlediska SilverLight aplikace je totiž úplně jedno, jestli je stránka, do které je aplikace vkládána, statická nebo ji generujeme dynamicky třeba z PHP či JSP. Nic nám proto nebrání použít i v ASP.NET to, co kdekoli jinde a být tak dobře přístupný.

Je čistě na nás, jaký alternativní obsah připravíme nejen pro ty, kteří SilverLight nemají a nemůžou mít k dispozici, ale též pro uživatele asistivních technologií a netvořili si tak zbytečné bariéry na webu.

Stažení ukázkové stránky s vloženou SilverLight aplikací.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.