<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>sprungmarker</title>
	
	<link>http://sprungmarker.de</link>
	<description>accessibility is fun</description>
	<lastBuildDate>Mon, 02 May 2011 23:49:06 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/SprungmarkerKompakt" /><feedburner:info uri="sprungmarkerkompakt" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><geo:lat>50.934</geo:lat><geo:long>6.934</geo:long><item>
		<title>Was ist mit cufón, typeface.js oder lettering.js?</title>
		<link>http://feedproxy.google.com/~r/SprungmarkerKompakt/~3/Onzl9jKhD-c/</link>
		<comments>http://sprungmarker.de/2011/was-ist-mit-cufon-typeface-js-oder-lettering-js/#comments</comments>
		<pubDate>Sat, 09 Apr 2011 21:05:38 +0000</pubDate>
		<dc:creator>Egger Sylvia</dc:creator>
				<category><![CDATA[Barrierefreiheit]]></category>
		<category><![CDATA[cufon]]></category>
		<category><![CDATA[kompakt]]></category>
		<category><![CDATA[lettering.js]]></category>
		<category><![CDATA[Schriftersetzung]]></category>
		<category><![CDATA[Screenreader]]></category>
		<category><![CDATA[typeface.js]]></category>

		<guid isPermaLink="false">http://sprungmarker.de/?p=1665</guid>
		<description><![CDATA[




Schriftersetzung ist noch immer aktuell, wenn es sich um Lizenz- oder Darstellungsfragen dreht. Leider möchte man aus mehreren Gründen sagen: Zum einen sind mit dem verstärkten Einsatz von font-face alternative Schriftersetzungs-Lösungen fast obsolet geworden und, entwickelt man im Hinblick auf ...]]></description>
			<content:encoded><![CDATA[<p class="summary">
<figure id="attachment_1711" class="alignright" aria-describedby="figcaption_attachment_1711" style="width: 310px"><img class="size-medium wp-image-1711" title="Schriftmanipulation lettering.js" src="http://sprungmarker.de/wp-content/uploads/2011/04/se-vorlage-lettering-300x138.gif" alt="Schriftmanipulation lettering.js" width="300" height="138" /><figcaption id="figcaption_attachment_1711">Screenshot: Schriftmanipulation lettering.js - Vorlage</figcaption></figure>
<p>Schriftersetzung ist noch immer aktuell, wenn es sich um Lizenz- oder Darstellungsfragen dreht. Leider möchte man aus mehreren Gründen sagen: Zum einen sind mit dem verstärkten Einsatz von <code>font-face</code> alternative Schriftersetzungs-Lösungen fast obsolet geworden und, entwickelt man im Hinblick auf Barrierefreiheit, waren diese alternativen Lösungen nie wirklich eine Option.</p>
<p>War früher in Sachen Schriftersetzung <a title="Zur Reihe auf sprungmarker: sIFR und Barrierefreiheit" href="http://sprungmarker.de/2008/bik-zertifizierung-was-macht-man-mit-sifr-1/">sIFR</a> Marktführer, übernahmen später Javaskript-basierte Lösungen die Führung. Die bekanntesten sehen wir uns nun im Hinblick auf Barrierefreiheit genauer an: <a title="weiter zum Projekt cufón" hreflang="en" href="http://cufon.shoqolate.com/">cufón</a>, <a title="weiter zum Projekt typeface.js" lang="en" hreflang="en" href="http://typeface.neocracy.org/">typeface.js</a> und eine Methode der Schriftmanipulation &#8211;  <a title="weiter zum Projekt lettering.js" lang="en" hreflang="en" href="http://letteringjs.com/">lettering.js</a>.</p>
<p><span id="more-1665"></span></p>
<h2>Technik</h2>
<p>Im <a title="zum BIK-Test des Monats" href="http://www.bitvtest.de/infothek/artikel/lesen/tdm-bmg.html">BIK-Test des Monats März 2011</a> spielt die Schriftersetzung mit Hilfe von cufón eine nicht unbedeutende Rolle: Das <a title="zur Webseite des Bundesministeriums für Gesundheit" href="http://www.bundesgesundheitsministerium.de/">Bundesministerium für Gesundheit</a> setzt in großen Teilen auf diese Schriftersetzung, setzte muss man nun sagen. Das problematische Testergebnis, am dem cufón einen nicht unbeträchtlichen Anteil hat, scheint Wirkung gezeigt zu haben. Es befinden sich zwar noch Code-Reste mit dem Verweis auf cufón im Quellcode oder in Skripten, aber cufón erzeugt keine Ersetzung mit Hilfe des <code lang="en">canvas</code>-Elements mehr.</p>
<figure id="attachment_1715" class="alignright" aria-describedby="figcaption_attachment_1715" style="width: 293px"><img class="size-full wp-image-1715 " title="Vorlage Schriftersetzung Cufon" src="http://sprungmarker.de/wp-content/uploads/2011/04/se-vorlage-cufon.gif" alt="Vorlage Schriftersetzung Cufon" width="283" height="193" /><figcaption id="figcaption_attachment_1715">Screenshot Schriftersetzung Vorlage Cufon</figcaption></figure>
<p>Damit sind wir schon beim technischen Stichwort: Sowohl cufón als auch <span class="lang" lang="en">typeface.js</span> nutzen die Möglichkeiten des Browsers, Vektorgrafiken zu rendern. Die Ausgangsschrift wird mit Hilfe eines Konverters in eine Javaskript-Datei umgewandelt. Der Browser stellt den Text dann entsprechend seiner Möglichkeiten mit Hilfe des <code lang="en">canvas</code>-Elements oder als Internet Explorer vor Version 9 als <abbr title="Vector Markup Language" lang="en">VML</abbr> dar.</p>
<p>Bei <span class="lang" lang="en">lettering.js</span> liegt der Fall etwas anders: Hier wird mit Hilfe von Javaskript um jeden Buchstaben eines Wortes ein <code lang="en">span</code>-Element gesetzt, damit man jeden Buchstaben per CSS einzeln manipulieren kann. Dieses Verfahren kann man auch auf größere Einheiten ausweiten, etwa einzelne Wörter manipulieren oder ganze Zeilen. Hier handelt es sich auch nicht um eine Schriftersetzung, sondern um eine -manipulation.</p>
<h2>Barrierefreiheit</h2>
<p>Sicherlich sind die beiden Schriftersetzungsmethoden im Vergleich etwa zu sIFR ein Gewinn gewesen. Lange gab es zur  Darstellung von sIFR kaum Alternativen. Freilich blieb die Lizenzfrage die gleiche, längst haben die Schriftenhersteller in ihren EULAs nachgezogen und legen die Lizenzen auch explizit für sIFR oder cufón fest. Wie für sIFR gilt, sieht man sich die Barrierefreiheit solcher Lösungen an, kann es ganz schnell unschön werden.</p>
<p>Wir sehen uns daher alle drei Methoden unter folgendem barrierefreien Blickwinkel an:</p>
<ul>
<li>Kommen Screenreader damit klar?</li>
<li>Wie sieht es mit der Skalierbarkeit aus?</li>
<li>Was passiert im Kontrastmodus oder bei benutzerdefinierten Farben?</li>
<li>Der ewige Knackpunkt all dieser Techniken: Verlinkungen</li>
</ul>
<p>Für den Test haben wir einen einfachen Text ausgewählt: eine Überschrift und einen Absatz.</p>
<blockquote><p><code>&lt;h1&gt;</code>Überall dieselbe alte Leier.<code>&lt;/h1&gt;</code></p>
<p><code>&lt;p&gt;</code>Das Layout ist fertig, &lt;a href=&#8221;http://sprungmarker.de&#8221; title=&#8221;weiter zum sprungmarker Projekt&#8221;&gt;der Text&lt;/a&gt; lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext.<code>&lt;/p&gt;</code></p></blockquote>
<figure id="attachment_1717" class="alignright" aria-describedby="figcaption_attachment_1717" style="width: 282px"><img class="size-full wp-image-1717" title="Schriftersetzung Vorlage typeface.js" src="http://sprungmarker.de/wp-content/uploads/2011/04/se-vorlage-typefacejs.gif" alt="Schriftersetzung Vorlage typeface.js" width="272" height="180" /><figcaption id="figcaption_attachment_1717">Screenshot Schriftersetzung Vorlage typeface.js</figcaption></figure>
<p>Nur bei <span class="lang" lang="en">typeface.js</span> wird die Überschrift durch einen Absatz ersetzt, da keine Überschriften unterstützt werden &#8211; zumindest keine semantischen Überschriften. Die Webseite von <span class="lang" lang="en">typeface.js</span> arbeitet mit visuellen Überschriften, die aber nur mit Hilfe von div-Elementen und CSS hergestellt sind. Im Grunde hat sich <span class="lang" lang="en">typeface.js</span> damit schon für eine weitere barrierefreie Prüfung disqualifiziert.</p>
<p class="wp-flattr-button"></p> <p><a href="http://sprungmarker.de/?flattrss_redirect&amp;id=1665&amp;md5=d0f57931bae44f6461d8c2021d88b3a5" title="Flattr" target="_blank"><img src="http://sprungmarker.de/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=Onzl9jKhD-c:D5GnHRSeSp0:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?i=Onzl9jKhD-c:D5GnHRSeSp0:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=Onzl9jKhD-c:D5GnHRSeSp0:ewi2tLLrNnk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=ewi2tLLrNnk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=Onzl9jKhD-c:D5GnHRSeSp0:eYgBPDbq7UE"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=eYgBPDbq7UE" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=Onzl9jKhD-c:D5GnHRSeSp0:MxV00nO3qFw"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=MxV00nO3qFw" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=Onzl9jKhD-c:D5GnHRSeSp0:aVEt4g-unHM"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=aVEt4g-unHM" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=Onzl9jKhD-c:D5GnHRSeSp0:I9og5sOYxJI"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=I9og5sOYxJI" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SprungmarkerKompakt/~4/Onzl9jKhD-c" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://sprungmarker.de/2011/was-ist-mit-cufon-typeface-js-oder-lettering-js/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<feedburner:origLink>http://sprungmarker.de/2011/was-ist-mit-cufon-typeface-js-oder-lettering-js/</feedburner:origLink></item>
		<item>
		<title>Accessible WordPress</title>
		<link>http://feedproxy.google.com/~r/SprungmarkerKompakt/~3/zMmiiYXYClU/</link>
		<comments>http://sprungmarker.de/2011/accessible_wordpress/#comments</comments>
		<pubDate>Sun, 09 Jan 2011 14:39:58 +0000</pubDate>
		<dc:creator>Egger Sylvia</dc:creator>
				<category><![CDATA[Barrierefreiheit]]></category>
		<category><![CDATA[Special]]></category>
		<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://sprungmarker.de/?p=1409</guid>
		<description><![CDATA[Meine Ausflüge Richtung WordPress letztes Jahr waren doch etwas üppiger und vor allem wird es auch Zeit, dass sich mit dem Thema WordPress und Barrierefreiheit jemand dauerhafter beschäftigt.  <a href="http://sprungmarker.de/2011/accessible_wordpress/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p class="summary">Meine Ausflüge Richtung <span lang="en" xml:lang="en">WordPress</span> letztes Jahr waren doch etwas üppiger und vor allem wird es auch Zeit, dass sich mit dem Thema <span lang="en" xml:lang="en">WordPress</span> und Barrierefreiheit jemand dauerhafter beschäftigt. Deswegen gibt es dazu jetzt eine eigene Projektseite: <a hreflang="en" href="http://accessible.sprungmarker.de/">Accessible WordPress</a>.</p>
<p>Dort wird es dann auch alle weiteren <span lang="en" xml:lang="en">Updates</span> und Informationen zu meinen bisherigen Entwicklungen <a hreflang="en" href="http://accessible.sprungmarker.de/2011/01/accessible-1-0/">Accessible 1.0</a> und dem Plugin <a hreflang="en" href="http://accessible.sprungmarker.de/2011/01/wordpress-editor-plugin-mce-accessible-language-change/">MCE Accessible Language Change</a> geben. Die Projektumgebung ist dann sowohl Vorschau für <span lang="en" xml:lang="en">Themes</span> als auch Testumgebung &#8211; vor allem mit der neusten Entwicklungsversion von <span lang="en" xml:lang="en">WordPress</span>.</p>
<p><span id="more-1409"></span></p>
<p>Um mit dem Thema schlicht mehr Leute zu erreichen, versuche ich mich mal im konsequenten Englisch &#8211; was mir jetzt nicht leicht fällt, ich spüre schon, dass das noch etwas hakelig läuft &#8211; aber ich werde mich schon <em>improven</em>. ;)</p>
<p>Damit wird auch sprungmarker.de wieder frei von <span lang="en" xml:lang="en">Twenty Ten</span> werden &#8211; dem <span lang="en" xml:lang="en">Default-Theme</span> von <span lang="en" xml:lang="en">WordPress</span>. Ich finde es weder sonderlich ästhetisch in Aussehen und Codequalität, noch halte ich es für innovativ. Nun heisst es die HTML 5 Kenntnisse mobilisieren und endlich was Schickes hier bauen &#8211; da freu ich mich richtig drauf.</p>
<p class="wp-flattr-button"></p> <p><a href="http://sprungmarker.de/?flattrss_redirect&amp;id=1409&amp;md5=05d5770104d2ca283de4d601b94fb842" title="Flattr" target="_blank"><img src="http://sprungmarker.de/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=zMmiiYXYClU:edD9-jyMIko:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?i=zMmiiYXYClU:edD9-jyMIko:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=zMmiiYXYClU:edD9-jyMIko:ewi2tLLrNnk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=ewi2tLLrNnk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=zMmiiYXYClU:edD9-jyMIko:eYgBPDbq7UE"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=eYgBPDbq7UE" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=zMmiiYXYClU:edD9-jyMIko:MxV00nO3qFw"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=MxV00nO3qFw" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=zMmiiYXYClU:edD9-jyMIko:aVEt4g-unHM"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=aVEt4g-unHM" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=zMmiiYXYClU:edD9-jyMIko:I9og5sOYxJI"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=I9og5sOYxJI" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SprungmarkerKompakt/~4/zMmiiYXYClU" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://sprungmarker.de/2011/accessible_wordpress/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<feedburner:origLink>http://sprungmarker.de/2011/accessible_wordpress/</feedburner:origLink></item>
		<item>
		<title>Meine SVG-Machine :)</title>
		<link>http://feedproxy.google.com/~r/SprungmarkerKompakt/~3/MFX_XudJTy0/</link>
		<comments>http://sprungmarker.de/2011/meine_svg_machine/#comments</comments>
		<pubDate>Mon, 03 Jan 2011 14:37:21 +0000</pubDate>
		<dc:creator>Egger Sylvia</dc:creator>
				<category><![CDATA[HTML]]></category>
		<category><![CDATA[Webstandards]]></category>
		<category><![CDATA[Kurs]]></category>
		<category><![CDATA[SVG]]></category>
		<category><![CDATA[W3C]]></category>

		<guid isPermaLink="false">http://sprungmarker.de/?p=1392</guid>
		<description><![CDATA[Ich mag ja diese nicht mehr allzu neue Welt der Online-Kurse und so habe ich mich an das für mich neue Thema SVG rangewagt. Das W3C hat einen im Herbst angeboten und ich hab ihn durchgezogen. <a href="http://sprungmarker.de/2011/meine_svg_machine/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p class="summary">Ich mag ja diese nicht mehr allzu neue Welt der Online-Kurse und so habe ich mich an das für mich neue Thema <em><abbr title="Scalable Vector Graphics" lang="en" xml:lang="en">SVG</abbr></em> rangewagt. Das <acronym title="World Wide Web Consortium" lang="en" xml:lang="en">W3C</acronym> hat einen im Herbst angeboten und ich hab ihn durchgezogen.</p>
<p><em>Durchgezogen</em> ist auch das richtige Wort. Als dann doch Anfängerin zog der Kurs in nur 5 Wochen eine Unmenge an Themen durch. Dazu hatte man stets Teile der Spezifikation, des Online-Materials und des verknappten, vereinfachten Materials durchzuackern. Dann jeweils Hausaufgaben zu erledigen, die sich nicht unbedingt direkt aus dem gerade noch gelesenen Material ergaben. ;) Also schlicht &#8211;  man war oft ziemlich auf sich allein gestellt.</p>
<p><span id="more-1392"></span></p>
<p>Aber: da SVG ja mittlerweile direkt in HTML5 integriert und bearbeitet werden kann und der IE9 es auch unterstützen wird, fand ich das schon spannend damit zu arbeiten. Wenngleich die SVG-Unterstützung für einzelne Bereiche wie Text oder Animation noch sehr je nach Browser unterschiedlich ist und mitunter auch noch zu wünschen übrig lässt. Auch ist das Anlegen eines Pfades einer komplexen Figur auch eher was für Leute, die gerne redundant arbeiten. :) Aber das einfach auch einmal per Hand angelegt zu  haben, hat was, auch wenn es mühsam ist, da noch den Überblick zu behalten. Klasse find ich, wie einfach es ist zu animieren &#8211; und das ganz ohne <span lang="en" xml:lang="en">Scripting</span>.</p>
<figure id="attachment_1393" class="alignright" aria-describedby="figcaption_attachment_1393" style="width: 310px"><a href="http://sprungmarker.de/wp-content/uploads/svg_machine/"><img class="size-full wp-image-1393 " title="SVG-Machine" src="http://sprungmarker.de/wp-content/uploads/2011/01/svg-machine.gif" alt="SVG Animationen als Maschine" width="300" height="245" /></a><figcaption id="figcaption_attachment_1393">SVG Animationen als Maschine</figcaption></figure>
<p>Als quasi <em>Abschlussarbeit</em> sollte man dann mit Hilfe des Gelernten etwas machen, was einem selbst gefällt und irgendwie auch besonders sein sollte. Auch wieder so eine Aufgabe, die mich nach dieser knappen Spanne an Wissensaneignung dann doch etwas gefordert hat. Aber letztlich habe ich mich auf meine künstlerischen <span lang="en" xml:lang="en">Roots</span> besonnen und eine kleine <a title="weiter zur SVG-Machine - nicht barrierefrei" href="http://sprungmarker.de/wp-content/uploads/svg_machine/">SVG-Maschine</a> gebaut. Auch um Animationen als das zu zeigen, was sie letztlich auch sind: Maschinen. :) Den vollen Genuss der SVG-Machine erhält man mit aktuellen Browsern wie Safari 5, Chrome oder Opera. Die Textanimation etwa &#8211; das fallende A &#8211; läuft nicht in allen Browsern, im aktuellen Firefox läuft gar nichts, aber schon in der 4er Version laufen einige der Animationen, aber nicht die Text-Animationen und -Effekte.</p>
<p>Jetzt werde ich mich damit beschäftigen, wie SVG auch barrierefrei zu machen ist und meine neuen Kenntnisse im kleinen Rahmen immer mal vertiefen. Meine SVG-Machine hat wohl auch Anklang gefunden, sie wurde <a title="weiter zum Artikel auf dem W3C Blog: Get ready for HTML5 Graphics: Start the new year learning SVG" hreflang="en" href="http://www.w3.org/QA/2010/12/get_ready_for_html5_graphics_s.html">als gelungenes Beispiel</a> im W3C Blog hervorgehoben. Das W3C bietet den Kurs erneut an ab 10. Januar 2011. Wenn er diesmal etwas Fahrt aus den Lektionen nimmt, ist er meine absolute Empfehlung. <a title="Introduction to SVG: Course Description" hreflang="en" href="http://www.w3.org/2010/09/intro_svg_course_description.php">Zur ausführlichen Kursbeschreibung</a>.</p>
<p class="wp-flattr-button"></p> <p><a href="http://sprungmarker.de/?flattrss_redirect&amp;id=1392&amp;md5=c16e5e92c8fd7d4f4291360373ec56ba" title="Flattr" target="_blank"><img src="http://sprungmarker.de/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=MFX_XudJTy0:81pftzKUmEw:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?i=MFX_XudJTy0:81pftzKUmEw:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=MFX_XudJTy0:81pftzKUmEw:ewi2tLLrNnk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=ewi2tLLrNnk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=MFX_XudJTy0:81pftzKUmEw:eYgBPDbq7UE"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=eYgBPDbq7UE" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=MFX_XudJTy0:81pftzKUmEw:MxV00nO3qFw"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=MxV00nO3qFw" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=MFX_XudJTy0:81pftzKUmEw:aVEt4g-unHM"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=aVEt4g-unHM" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=MFX_XudJTy0:81pftzKUmEw:I9og5sOYxJI"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=I9og5sOYxJI" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SprungmarkerKompakt/~4/MFX_XudJTy0" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://sprungmarker.de/2011/meine_svg_machine/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://sprungmarker.de/2011/meine_svg_machine/</feedburner:origLink></item>
		<item>
		<title>Webfonts in der Praxis – Teil 2 – Beispielfont Lobster</title>
		<link>http://feedproxy.google.com/~r/SprungmarkerKompakt/~3/opZ2xn0OezY/</link>
		<comments>http://sprungmarker.de/2010/webfonts_in_der_praxis_2/#comments</comments>
		<pubDate>Wed, 24 Nov 2010 21:52:11 +0000</pubDate>
		<dc:creator>Egger Sylvia</dc:creator>
				<category><![CDATA[HTML]]></category>
		<category><![CDATA[Webstandards]]></category>
		<category><![CDATA[Embedding]]></category>
		<category><![CDATA[Font Squirrel]]></category>
		<category><![CDATA[Fonts]]></category>
		<category><![CDATA[kompakt]]></category>
		<category><![CDATA[Typekit]]></category>
		<category><![CDATA[Vortrag]]></category>
		<category><![CDATA[Webfonts]]></category>

		<guid isPermaLink="false">http://sprungmarker.de/?p=1371</guid>
		<description><![CDATA[Die letzten Monate des Jahres sind irgendwie immer eher stressig - scheint so ein Naturgesetz zu sein. Daher erst jetzt den zweiten Teil zum Thema Webfonts in der Praxis. <a href="http://sprungmarker.de/2010/webfonts_in_der_praxis_2/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p class="summary">Die letzten Monate des Jahres sind irgendwie immer eher stressig &#8211; scheint so ein Naturgesetz zu sein. Daher erst jetzt den zweiten Teil zum Thema <span lang="en" xml:lang="en">Webfonts</span> in der Praxis.</p>
<p>Im ersten Teil ging es darum, sich einen <a title="weiter zum ersten Teil: Webfonts in der Praxis" href="http://sprungmarker.de/2010/wbfonts_in_der_praxis_auf_fontsuche/">Überblick zu <span lang="en" xml:lang="en">Webfont-Services</span></a> zu schaffen, <a title="Webfonts in der Praxis - Teil 2 - zur Präsentation auf slideshare" href="http://www.slideshare.net/sprungmarker/webfonts-in-der-praxis-teil-2-beispielfont-lobster">im zweiten Teil</a> geht es nun um die konkrete Praxis &#8211; egal ob es sich um selbst- oder fremdgehostete Fonts handelt &#8211; wie sieht das konkrete Ergebnis aus, wo treten die Probleme auf, auf was muss man acht geben, was kann man noch nachjustieren.</p>
<p><span id="more-1371"></span></p>
<p>Um es möglichst anschaulich, vergleichbar und einfach zu halten, habe ich die <span lang="en" xml:lang="en">Webfont Lobster</span> ausgewählt. Die Schrift kann man für beide Hosting-Formen nutzen und eignet sich daher gut für Vergleichergebnisse. Verglichen werden:</p>
<ul>
<li><span lang="en" xml:lang="en">Rendering Engine</span> und Browser (Win &#8211; GDI, <span lang="en" xml:lang="en">Direct Write</span> / Mac &#8211; <span lang="en" xml:lang="en">Core Text</span>)</li>
<li><span lang="en" xml:lang="en">Webfont-Services</span> wie Google <span lang="en" xml:lang="en">Fonts</span> und <span lang="en" xml:lang="en">Typekit</span></li>
</ul>
<p>Ich gehe aber auch auf noch reichlich experimentelle <span lang="en" xml:lang="en">Font-Features</span> ein wie Kerning mit Hilfe von CSS (<code><span lang="en" xml:lang="en">text-rendering</span></code>, <code><span lang="en" xml:lang="en">font-kerning</span></code>), <code><span lang="en" xml:lang="en">font-size-adjust</span></code> oder <span lang="en" xml:lang="en">OpenType Features</span>. Teilweise ist das schon übergreifender implementiert, teilweise kaum wie die <span lang="en" xml:lang="en">OpenType Features</span>, die in geringen Anteilen in aktuellsten Versionen von <span lang="en" xml:lang="en">Firfefox</span> und <span lang="en" xml:lang="en">Webkit</span> laufen sollen (mitunter reicht auch die Alpha- oder Beta-Version dazu nicht). Manches konnte ich nicht nachstellen, obwohl es schon in diesen Versionen laufen sollte.</p>
<h3><a title="Webfonts in der Praxis - Teil 2 - zur Präsentation auf slideshare" href="http://www.slideshare.net/sprungmarker/webfonts-in-der-praxis-teil-2-beispielfont-lobster"><span lang="en" xml:lang="en">Webfonts</span> in der Praxis &#8211; Teil 2 &#8211; Beispielfont Lobster</a></h3>
<p><object id="__sse5894334" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="555" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="data" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=eggerwebfonts2-101124151444-phpapp02&amp;stripped_title=webfonts-in-der-praxis-teil-2-beispielfont-lobster&amp;userName=sprungmarker" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="src" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=eggerwebfonts2-101124151444-phpapp02&amp;stripped_title=webfonts-in-der-praxis-teil-2-beispielfont-lobster&amp;userName=sprungmarker" /><param name="allowfullscreen" value="true" /><embed id="__sse5894334" type="application/x-shockwave-flash" width="100%" height="555" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=eggerwebfonts2-101124151444-phpapp02&amp;stripped_title=webfonts-in-der-praxis-teil-2-beispielfont-lobster&amp;userName=sprungmarker" allowscriptaccess="always" allowfullscreen="true" data="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=eggerwebfonts2-101124151444-phpapp02&amp;stripped_title=webfonts-in-der-praxis-teil-2-beispielfont-lobster&amp;userName=sprungmarker"></embed></object></p>
<p><a hreflang="en" href="http://www.slideshare.net/sprungmarker">Meine Präsentationen</a> auf <a lang="en" xml:lang="en" hreflang="en" href="http://www.slideshare.net/sprungmarker">slideshare</a>.</p>
<p class="wp-flattr-button"></p> <p><a href="http://sprungmarker.de/?flattrss_redirect&amp;id=1371&amp;md5=6f528667e189839c2e41a415f9f0b184" title="Flattr" target="_blank"><img src="http://sprungmarker.de/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=opZ2xn0OezY:bOL7Nkn_O_U:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?i=opZ2xn0OezY:bOL7Nkn_O_U:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=opZ2xn0OezY:bOL7Nkn_O_U:ewi2tLLrNnk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=ewi2tLLrNnk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=opZ2xn0OezY:bOL7Nkn_O_U:eYgBPDbq7UE"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=eYgBPDbq7UE" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=opZ2xn0OezY:bOL7Nkn_O_U:MxV00nO3qFw"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=MxV00nO3qFw" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=opZ2xn0OezY:bOL7Nkn_O_U:aVEt4g-unHM"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=aVEt4g-unHM" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=opZ2xn0OezY:bOL7Nkn_O_U:I9og5sOYxJI"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=I9og5sOYxJI" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SprungmarkerKompakt/~4/opZ2xn0OezY" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://sprungmarker.de/2010/webfonts_in_der_praxis_2/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://sprungmarker.de/2010/webfonts_in_der_praxis_2/</feedburner:origLink></item>
		<item>
		<title>WordPress Child Theme for Twenty Ten: Accessible 1.0</title>
		<link>http://feedproxy.google.com/~r/SprungmarkerKompakt/~3/UiRnSL6FOnA/</link>
		<comments>http://sprungmarker.de/2010/wordpress-child-theme-for-twenty-ten-accessible-1-0/#comments</comments>
		<pubDate>Mon, 01 Nov 2010 14:43:02 +0000</pubDate>
		<dc:creator>Egger Sylvia</dc:creator>
				<category><![CDATA[Barrierefreiheit]]></category>
		<category><![CDATA[Themes]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[BITV]]></category>
		<category><![CDATA[kompakt]]></category>
		<category><![CDATA[Theme]]></category>
		<category><![CDATA[Twenty Ten]]></category>
		<category><![CDATA[WCAG]]></category>
		<category><![CDATA[WCAG2]]></category>

		<guid isPermaLink="false">http://sprungmarker.de/?p=1339</guid>
		<description><![CDATA[WordPress 3.0 came out with a new default theme: Twenty Ten. The theme is compared to Kubrick an improvement, but still has mostly the same accessibility issues as its forerunner <a href="http://sprungmarker.de/2010/wordpress-child-theme-for-twenty-ten-accessible-1-0/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<figure id="attachment_1348" class="alignright" aria-describedby="figcaption_attachment_1348" style="width: 310px"><img class="size-full wp-image-1348" title="Screenshot Accessible 1.0 child theme for Twenty Ten" src="http://sprungmarker.de/wp-content/uploads/2010/11/screenshot.png" alt="Screenshot Accessible 1.0 child theme for Twenty Ten" width="300" height="225" /><figcaption id="figcaption_attachment_1348">Screenshot Accessible 1.0 child theme for Twenty Ten</figcaption></figure>
<p lang="en" xml:lang="en">WordPress 3.0 came out with a new default theme: Twenty Ten. The theme is compared to Kubrick an improvement, but still has mostly the same accessibility issues as its forerunner, e.g. not enough contrast in colors, few improvements for keyboard users and you get no real information about user&#8217;s location within a web page.</p>
<p lang="en" xml:lang="en">
<figure id="attachment_1361" class="alignright" aria-describedby="figcaption_attachment_1361" style="width: 310px"><img class="size-full wp-image-1361" title="Screenshot: Accessible 1.0 file structure" src="http://sprungmarker.de/wp-content/uploads/2010/11/screenshot-accessible-04.png" alt="Screenshot: Accessible 1.0 file structure" width="300" height="199" /><figcaption id="figcaption_attachment_1361">Screenshot: Accessible 1.0 file structure</figcaption></figure>
<p lang="en" xml:lang="en">This is where Accessible 1.0 get&#8217;s into: a child theme for the default theme Twenty Ten to get the parent theme more accessible. You get all functionality of Twenty Ten plus accessible features of the child theme. That&#8217;s a nice deal. :)</p>
<p lang="en" xml:lang="en">And: the child theme uses no templates, only a css file and some programming in functions.php. That&#8217;s all. Accessible 1.0 should only be a small accessible enhancement.</p>
<p>You find all informations about Accessible 1.0 on a new site &#8211; Accessible WordPress. Please follow updates and download the accessible child theme there: <a title="visit the new location for the child theme" href="http://accessible.sprungmarker.de/2011/01/accessible-1-0/">WordPress Child Theme for Twenty Ten: Accessible TwentyTen</a>.</p>
<p>Thanks. :)</p>
<p class="wp-flattr-button"></p> <p><a href="http://sprungmarker.de/?flattrss_redirect&amp;id=1339&amp;md5=996346470668d5b98b7d529342a63536" title="Flattr" target="_blank"><img src="http://sprungmarker.de/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=UiRnSL6FOnA:e_wJmtS97eI:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?i=UiRnSL6FOnA:e_wJmtS97eI:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=UiRnSL6FOnA:e_wJmtS97eI:ewi2tLLrNnk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=ewi2tLLrNnk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=UiRnSL6FOnA:e_wJmtS97eI:eYgBPDbq7UE"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=eYgBPDbq7UE" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=UiRnSL6FOnA:e_wJmtS97eI:MxV00nO3qFw"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=MxV00nO3qFw" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=UiRnSL6FOnA:e_wJmtS97eI:aVEt4g-unHM"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=aVEt4g-unHM" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=UiRnSL6FOnA:e_wJmtS97eI:I9og5sOYxJI"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=I9og5sOYxJI" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SprungmarkerKompakt/~4/UiRnSL6FOnA" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://sprungmarker.de/2010/wordpress-child-theme-for-twenty-ten-accessible-1-0/feed/</wfw:commentRss>
		<slash:comments>39</slash:comments>
		<feedburner:origLink>http://sprungmarker.de/2010/wordpress-child-theme-for-twenty-ten-accessible-1-0/</feedburner:origLink></item>
		<item>
		<title>WordPress Plugin: MCE Accessible Language Change</title>
		<link>http://feedproxy.google.com/~r/SprungmarkerKompakt/~3/BXUssW43yZs/</link>
		<comments>http://sprungmarker.de/2010/wordpress-plugin-mce-accessible-language-change/#comments</comments>
		<pubDate>Mon, 01 Nov 2010 11:19:11 +0000</pubDate>
		<dc:creator>Egger Sylvia</dc:creator>
				<category><![CDATA[Barrierefreiheit]]></category>
		<category><![CDATA[Plugin]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[Accessibility]]></category>
		<category><![CDATA[kompakt]]></category>
		<category><![CDATA[language change]]></category>
		<category><![CDATA[Plugins]]></category>
		<category><![CDATA[Sprachwechsel]]></category>
		<category><![CDATA[TinyMCE]]></category>

		<guid isPermaLink="false">http://sprungmarker.de/?p=1294</guid>
		<description><![CDATA[One thing I always missed in WordPress editor TinyMCE is to add language change. So I made my first plugin. :) This was somehow hard because it's not only to get a plugin in WordPress running, you also have ... <a href="http://sprungmarker.de/2010/wordpress-plugin-mce-accessible-language-change/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<figure id="attachment_1319" class="alignright" aria-describedby="figcaption_attachment_1319" style="width: 310px"><img class="size-full wp-image-1319" title="Screenshot: Buttons MCE Accessible Language Change" lang="en" xml:lang="en" src="http://sprungmarker.de/wp-content/uploads/2010/10/screenshot-plugin-1.png" alt="Screenshot: Buttons MCE Accessible Language Change" width="300" height="199" /><figcaption id="figcaption_attachment_1319">Screenshot: Buttons MCE Accessible Language Change</figcaption></figure>
<p lang="en" xml:lang="en">One thing I always missed in WordPress editor TinyMCE is to add language change. So I made my first plugin. :) This was somehow hard because it&#8217;s not only to get a plugin in WordPress running, you also have to get into programming with TinyMCE. So keep in mind when you use the plugin, I am a novice &#8230;</p>
<p>The Plugin <em><a title="MCE Accessible Language Change - in WordPress Plugin Directory" href="http://wordpress.org/extend/plugins/mce-accessible-language-change/">MCE Accessible Language Change</a></em> &#8211; <strong>now</strong> in the WordPress Plugin directory<em> &#8211; </em>adds two buttons to the editor: one for changing the language of a word or phrase within a <code>span</code> element and one for changing or adding the language of already existing block elements as paragraphs or headlines. Furthermore you can add the target language to a link:<span id="more-1294"></span></p>
<h3 lang="en" xml:lang="en">Language change within a <code>span</code> element</h3>
<figure id="attachment_1321" class="alignright" aria-describedby="figcaption_attachment_1321" style="width: 310px"><img class="size-full wp-image-1321" title="Screenshot: Popup add language change" lang="en" xml:lang="en" src="http://sprungmarker.de/wp-content/uploads/2010/10/screenshot-plugin-2.png" alt="Screenshot: Popup add language change" width="300" height="199" /><figcaption id="figcaption_attachment_1321">Screenshot: Popup add language change</figcaption></figure>
<p lang="en" xml:lang="en">To change the language of a word or phrase, just select the word or phrase, klick on the button <em>LANG </em>and fill in the language adequate  code, e.g. for a word or phrase in french <em>fr</em>. If you have to be If you need to be XHTML compliant, just fill in the language code again. You can modify of delete your entry at any time. Language change is highlighted in the editor, but not on the website.</p>
<h3 lang="en" xml:lang="en">Add or change language attributes of existing block elements</h3>
<figure id="attachment_1322" class="alignright" aria-describedby="figcaption_attachment_1322" style="width: 310px"><img class="size-full wp-image-1322" title="Screenshot: Popup add language change for block elements" lang="en" xml:lang="en" src="http://sprungmarker.de/wp-content/uploads/2010/10/screenshot-plugin-3.png" alt="Screenshot: Popup add language change for block elements" width="300" height="199" /><figcaption id="figcaption_attachment_1322">Screenshot: Popup add language change for block elements</figcaption></figure>
<p lang="en" xml:lang="en">You can add language change to existing HTML elements as paragraph or headlines. To add or edit the language of a e.g. a paragraph, just klick in the paragraph and on the button <em>LANG ATTR and</em> fill in the language code  (e.g. for a french word or phrase  <em>fr</em>) . If you need to be XHTML compliant, just fill in the language code again. You can modify of delete your entries at any time. To delete your entries, just empty the fields. If you need to add the target language to a link, just mark the link text and add the target language</p>
<h3 lang="en" xml:lang="en">Add a target language to a link</h3>
<p lang="en" xml:lang="en">If your link target is in a different language, you can add a target language to the link. Just klick in the link and on the button <em>LANG ATTR</em> and fill in the language code for the target language. You can modify of delete your entry at any time. To delete your entry, just empty the field.</p>
<h3 lang="en" xml:lang="en">Plugin informations</h3>
<p lang="en" xml:lang="en">The plugin is localized for english and german, please let me know if you would like additional localizations added.</p>
<p lang="en" xml:lang="en">Requirements: <strong>WordPress 3.0 and above</strong><br />
Tested up to: WordPress 3.1 on all modern browsers als IE 7/8, Safari, Chrome, Firefox and Opera (Windows, Mac)<br />
TinyMCE is not yet running with IE 9.<br />
Version: 1.0<br />
Licence: GNU General Public License v2.0</p>
<p lang="en" xml:lang="en">Hoping to add more features in future updates, e.g. backwards compatibility.</p>
<h3 lang="en" xml:lang="en">Installation</h3>
<ol>
<li lang="en" xml:lang="en">Just download MCE Accessible Language Change in the <a title="MCE Accessible Language Change download" href="http://wordpress.org/extend/plugins/mce-accessible-language-change/">WordPress Plugin directory</a>.</li>
<li lang="en" xml:lang="en">Upload <em>mce-accessible-language-change</em> folder to the &#8220;/wp-content/plugins/&#8221; directory</li>
<li lang="en" xml:lang="en">Activate the plugin through the &#8220;Plugins&#8221; menu in WordPress</li>
<li lang="en" xml:lang="en">To show your language change visually in the editor &#8211; not on your website: If you have already a file named <em>editor-style.css</em> in your WordPress theme, you have to copy the styles below into this file <em>editor-styles.css </em>to get your language changes visible in the editor.<br />
If you don&#8217;t have a file named <em>editor-styles.css</em> in your theme, you have to do nothing &#8211; MCE Accessible Language Change Plugin will do this for you.</li>
</ol>
<pre class="brush:xml; auto-links:false;" lang="en" xml:lang="en">span[lang],
.lang {
    background: #f8f8f8;
    border: 1px solid #d2d0ce;
    padding: 2px;</pre>
<h3 lang="en" xml:lang="en">Changelog</h3>
<p lang="en" xml:lang="en">1.0 &#8211; first release<br />
* Minor changes renaming files according to the name of zip file</p>
<h3 lang="en" xml:lang="en">Upgrade notice</h3>
<p lang="en" xml:lang="en">No upgrades right now.</p>
<p lang="en" xml:lang="en">If you didn&#8217;t get the plugin running, please download it again and replace the installed plugin. Plugin folder and file had not the same name. :) Sorry for the mingle-mangle.</p>
<h3 lang="en" xml:lang="en">Download</h3>
<p lang="en" xml:lang="en"><em><a title="MCE Accessible Language Change - in WordPress Plugin Directory" href="http://wordpress.org/extend/plugins/mce-accessible-language-change/">MCE Accessible Language Change in WordPress Plugin Directory</a></em></p>
<p class="wp-flattr-button"></p> <p><a href="http://sprungmarker.de/?flattrss_redirect&amp;id=1294&amp;md5=464d107b910112a256cccda522910146" title="Flattr" target="_blank"><img src="http://sprungmarker.de/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=BXUssW43yZs:0dK4kWwO2Cg:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?i=BXUssW43yZs:0dK4kWwO2Cg:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=BXUssW43yZs:0dK4kWwO2Cg:ewi2tLLrNnk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=ewi2tLLrNnk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=BXUssW43yZs:0dK4kWwO2Cg:eYgBPDbq7UE"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=eYgBPDbq7UE" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=BXUssW43yZs:0dK4kWwO2Cg:MxV00nO3qFw"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=MxV00nO3qFw" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=BXUssW43yZs:0dK4kWwO2Cg:aVEt4g-unHM"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=aVEt4g-unHM" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=BXUssW43yZs:0dK4kWwO2Cg:I9og5sOYxJI"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=I9og5sOYxJI" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SprungmarkerKompakt/~4/BXUssW43yZs" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://sprungmarker.de/2010/wordpress-plugin-mce-accessible-language-change/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		<feedburner:origLink>http://sprungmarker.de/2010/wordpress-plugin-mce-accessible-language-change/</feedburner:origLink></item>
		<item>
		<title>Webfonts in der Praxis: Teil 1 – Auf Fontsuche</title>
		<link>http://feedproxy.google.com/~r/SprungmarkerKompakt/~3/xUtBIY6tVBY/</link>
		<comments>http://sprungmarker.de/2010/wbfonts_in_der_praxis_auf_fontsuche/#comments</comments>
		<pubDate>Sun, 05 Sep 2010 17:44:14 +0000</pubDate>
		<dc:creator>Egger Sylvia</dc:creator>
				<category><![CDATA[HTML]]></category>
		<category><![CDATA[Webstandards]]></category>
		<category><![CDATA[Embedding]]></category>
		<category><![CDATA[Font Squirrel]]></category>
		<category><![CDATA[font-face]]></category>
		<category><![CDATA[Fontdeck]]></category>
		<category><![CDATA[Fonts]]></category>
		<category><![CDATA[fonts.com]]></category>
		<category><![CDATA[FontShop]]></category>
		<category><![CDATA[Fontspring]]></category>
		<category><![CDATA[kompakt]]></category>
		<category><![CDATA[Typekit]]></category>
		<category><![CDATA[Vortrag]]></category>
		<category><![CDATA[Webfonts]]></category>

		<guid isPermaLink="false">http://sprungmarker.de/?p=1222</guid>
		<description><![CDATA[Webfonts sind ja nun schon ne ganze Weile präsent, aber wenn es wirklich in der Praxis dann darum geht, die richtige Schrift am richtigen Ort zu finden, kann das mitunter doch auch nicht so ganz einfach sein. Deswegen habe ...]]></description>
			<content:encoded><![CDATA[<p class="summary">Webfonts sind ja nun schon ne ganze Weile präsent, aber wenn es wirklich in der Praxis dann darum geht, die richtige Schrift am richtigen Ort zu finden, kann das mitunter doch auch nicht so ganz einfach sein. Deswegen habe ich mich in meiner Agentur aufgeschwungen, in zwei Teilen die Erkenntnisse in Sachen Webfonts zusammenzustellen und zwischen den widerstreitenden Parteien und Argumenten zu vermitteln.</p>
<p>Im ersten Teil <a title="zur Präsentation auf Slideshare" href="http://www.slideshare.net/sprungmarker/webfonts-in-der-praxis-teil-1">Webfonts in der Praxis &#8211; auf Fontsuche</a> geht es darum, welche Möglichkeiten stehen uns zur Verfügung, um eine vom Kunden oder von uns ausgewählte Schrift ins Web zu bringen. Dabei geht es rein um die Fülle der Services, wie Schriften ins Web kommen &#8211; sei es durch Selbst- oder Fremdhosting, sei es eine Gratis-Font oder eine kommerzielle. Allein im kommerziellen Bereich sind die Webfont-Services aufgeblüht, doch man sollte mit Vorsicht an die unterschiedlichen Preis-Leistungs-Modelle rangehen. Im zweiten Teil wird es dann ernst: Da teste ich diese ganzen Möglichkeiten auf Webtauglichkeit &#8211; ich kann jetzt schon sagen, <span lang="en" xml:lang="en">Typekit</span> wird durchaus auch überschätzt, da nehme ich mich nicht aus.</p>
<p><span id="more-1222"></span></p>
<p>Um einen Überblick über die Preis-Leistungs-Verhältnisse der Webfont-Services vorzuhalten, habe ich ein tabellarische Übersicht erstellt: <a title="Webfont-Services Overview" hreflang="en" href="http://sprungmarker.de/wp-content/uploads/webfont-services/">Webfont-Services <span lang="en" xml:lang="en">Overview</span></a>.</p>
<p>Allein der preisliche Unterschied zwischen einem Per-Font-Modell plus minus zusätzlicher Limitierungen wie Brandbreite oder einen Jahres-Hosting wie bei <span lang="en" xml:lang="en">Typekit</span> fällt bei mehreren Schriften schon ins Gewicht. Vor allem dann wenn man die Webtauglichkeit der Schrift ja nicht wirklich vorher testen kann &#8211; auch die 30-Tage-Testaccounts laufen irgendwann aus. Das ist schon der definitive Font-Goldrush, was wir jetzt erleben. :)</p>
<h3><a title="Webfonts in der Praxis - Teil 1 (02.09. 2010)- zur Präsentation auf slideshare" href="http://www.slideshare.net/sprungmarker/webfonts-in-der-praxis-teil-1">Webfonts in der Praxis &#8211; Teil 1 &#8211; Auf Fontsuche (02.09. 2010)</a></h3>
<p><object id="__sse5894334" width="100%" height="555" type="application/x-shockwave-flash" data="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=eggerwebfontslast-100905115928-phpapp01&amp;stripped_title=webfonts-in-der-praxis-teil-1"><param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=eggerwebfontslast-100905115928-phpapp01&amp;stripped_title=webfonts-in-der-praxis-teil-1" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/></object>
<p><a hreflang="en" href="http://www.slideshare.net/sprungmarker">Meine Präsentationen</a> auf <a lang="en" xml:lang="en" hreflang="en" href="http://www.slideshare.net/sprungmarker">slideshare</a>.</p>
<p class="wp-flattr-button"></p> <p><a href="http://sprungmarker.de/?flattrss_redirect&amp;id=1222&amp;md5=4046693ba1dc3695aae7e92a3d94771c" title="Flattr" target="_blank"><img src="http://sprungmarker.de/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=xUtBIY6tVBY:hHgeRKQrH24:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?i=xUtBIY6tVBY:hHgeRKQrH24:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=xUtBIY6tVBY:hHgeRKQrH24:ewi2tLLrNnk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=ewi2tLLrNnk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=xUtBIY6tVBY:hHgeRKQrH24:eYgBPDbq7UE"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=eYgBPDbq7UE" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=xUtBIY6tVBY:hHgeRKQrH24:MxV00nO3qFw"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=MxV00nO3qFw" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=xUtBIY6tVBY:hHgeRKQrH24:aVEt4g-unHM"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=aVEt4g-unHM" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=xUtBIY6tVBY:hHgeRKQrH24:I9og5sOYxJI"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=I9og5sOYxJI" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SprungmarkerKompakt/~4/xUtBIY6tVBY" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://sprungmarker.de/2010/wbfonts_in_der_praxis_auf_fontsuche/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		<feedburner:origLink>http://sprungmarker.de/2010/wbfonts_in_der_praxis_auf_fontsuche/</feedburner:origLink></item>
		<item>
		<title>WordCamp 2010: Das war mein erstes Barcamp :)</title>
		<link>http://feedproxy.google.com/~r/SprungmarkerKompakt/~3/Bz9AIlF3reY/</link>
		<comments>http://sprungmarker.de/2010/wordcamp2010_das_war_mein_erstes_barcamp/#comments</comments>
		<pubDate>Sun, 04 Jul 2010 19:01:05 +0000</pubDate>
		<dc:creator>Egger Sylvia</dc:creator>
				<category><![CDATA[Barrierefreiheit]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[Theme]]></category>
		<category><![CDATA[Twenty Ten]]></category>
		<category><![CDATA[WordCamp]]></category>

		<guid isPermaLink="false">http://sprungmarker.de/?p=1205</guid>
		<description><![CDATA[Man kann sich das Wetter nicht aussuchen und derzeit schon eher gar nicht, dann auch noch ruckzuck nach Berlin zum WordCamp 2010 - das war schon eine physische Herausforderung. :) Und es war mein erstes Barcamp und mir ist ...]]></description>
			<content:encoded><![CDATA[<p class="summary">Man kann sich das Wetter nicht aussuchen und derzeit schon eher gar nicht, dann auch noch ruckzuck nach Berlin zum <a title="zur Webseite des WordCamp 2010" href="http://wordcamp.de/"><span lang="en" xml:lang="en">WordCamp</span> 2010</a> &#8211; das war schon eine physische Herausforderung. :) Und es war mein erstes Barcamp und mir ist grade nicht so ganz klar, was es von anderen <span lang="en" xml:lang="en">Events</span> unterscheidet. Aber vielleicht ist da so ein <span lang="en" xml:lang="en">WordCamp</span> nicht wirklich das beste Beispiel dafür.</p>
<h3>Das Betahaus: interessantes Gebäude</h3>
<p>Auf die eher <a title="zur Review des WordCamps vom Webarchitekten" href="http://derwebarchitekt.de/review-wordcamp-2010-berlin/">provisorischen Gegebenheiten des Betahauses</a> wurde ja schon hingewiesen, als <a title="zum Review des WordCamps von Torsten Maue" href="http://www.torstenmaue.com/wordcamp-berlin-2010-mein-ruckblick/"><q>Bruchbude</q></a> würde ich es denn nicht bezeichnen, freilich war es etwas gewöhnungsbedürftig. Ich bin ja in einer alternativen (Arbeits-)kultur aufgewachsen quasi und bin da schon ziemlich offen, was das Ambiente betrifft. In Kombination mit der Hitze waren die Räume im 4. Stock eher nicht zu benutzen, alleine sitzen war schweiss-fördernd. :) Durchaus Wohnzimmercharme hat der Raum im Erdgeschoss, intimer und individuell mit Sitzgelegenheiten ausgestattet. Leider waren einige der Stühle schon so klapprig, dass ich dachte, sie würden die erste Session nicht überstehen &#8211; haben sie aber. Jemand verglich das Betahaus mit dem Unperfekthaus in Essen und meinte, das seien ja dann doch sehr große Unterschiede. Ich denke aber auch, dass das Betahaus vielleicht auch andere Funktionen erfüllt als das Unperfekthaus. Auch glaube ich mittlerweile &#8211; ich habe ja lange in Berlin gelebt und bin nun nur noch ab und an Zaungast -, dass man an einer <span lang="en" xml:lang="en">Location</span> wie dem Betahaus sehen kann, wie es Berlin an Geld fehlt.</p>
<p><span id="more-1205"></span></p>
<p>Also, ja &#8211; die <span lang="en" xml:lang="en">Location</span> hätte besser gewählt werden können, aber in Mitte oder Prenzlauer Berg ist das wohl dann eher ne Geldfrage für so ein Barcamp. Denn, ich denke, was wirklich schick und hip ist in Berlin, kostet halt auch mittlerweile. Das wäre so meine Vermutung. Aber ich fand es in Ordnung. Mikros wären schon in diesen halligen Räumen sinnvoll gewesen, in den letzten Reihen hat man kaum verstanden bzw. lesen können, was grade referiert wurde. Positiv möchte ich hervorheben, dass ich es super fand, soviel Gratisgetränke zu erhalten, das war auch dringend notwendig. Und ich fand im übrigen toll, im Cafe auch mittags was Schmales kaufen zu können. Die Kritik hab ich irgendwie nicht verstanden, dass das Barcamp auch noch Brötchen stellen soll. Ist das der Barcamp-Gedanke für 200 Leute Brötchen zu schmieren? Aber vielleicht bin ich da auch nicht so dran an diesem Gedanken. Ich halte es für völlig in Ordnung mir mittags für 4-5 Euro ein gut belegtes und überbackenes Fladenbrot zu kaufen? Verstehe ich nicht wirklich, aber vielleicht bin ich schlicht zu alt, um das nachzuvollziehen. :)</p>
<p>Schwierig fand ich auch den Lärmpegel, der schon einige Stunden vor dem Halbfinalspiel im Hinterhof des Cafes durch die geschlossenen Türen richtig gut zu hören war. ;) Gut, ich mach mir wenig aus Fußball, aber auch so würde ich sagen, das WordCamp war nach dem gemeinsamen Gucken des Spiels schon eher am Ende. Es hat schon einen Bruch bedeutet, zwei Stunden zu pausieren. Gut, die Veranstalter haben da halt das beste draus machen müssen, die absolute Mehrheit wollte ja das Spiel gucken. :)</p>
<h3>Die Sessions waren durchwachsen</h3>
<p>Das trifft ja auch auf jede andere Veranstaltung zu. Die Kritik, dass es ja nur fast <span lang="en" xml:lang="en">Session</span> gegeben hätte, die auf <span lang="en" xml:lang="en">Basics</span> abzielten und man nichts gelernt hätte, stimmt nur bedingt. Jede <span lang="en" xml:lang="en">Session</span>, soweit sie im Vorfeld angekündigt war, war ja mit einem Schwierigkeitsgrad versehen. <span lang="en" xml:lang="en">Sessions</span> wie von Thomas Boley zu <a title="zur Information zu tempELA" href="http://wordcamp.de/2010/06/10/tempela-eine-template-engine-fur-widgets-und-plugins/">tempELA</a> &#8211; eine <span lang="en" xml:lang="en">Template Engine</span> für <span lang="en" xml:lang="en">WordPress Widgets</span> und <span lang="en" xml:lang="en">Plugins</span> &#8211; oder von Michael Preuß zu <a title="mehr Informationen zur Session" href="http://wordcamp.de/groups/xtreme-one-–-ein-kommerzielles-wordpress-framework/">Xtreme One</a> &#8211; einem auf YAML und <span lang="en" xml:lang="en">WordPress</span> basierendes <span lang="en" xml:lang="en">Theme-Framework</span> &#8211; waren durchaus sehr spannend und haben genau dort angesetzt, wo in WordPress halt seit Jahren zu wenig passiert, was Standardisierung betrifft. So ein sauberes HTML-<span lang="en" xml:lang="en">Template</span> wie Boley jetzt nur für <span lang="en" xml:lang="en">Widgets</span> und <span lang="en" xml:lang="en">Plugins</span> entwickelt hat, würde man sich sofort für die <span lang="en" xml:lang="en">Theme</span>entwicklung wünschen. Es ist einfach verwunderlich, dass sich im <span lang="en" xml:lang="en">Theme</span>bereich da nie wirklich etwas entwickelt hat, was die Trennung von PHP und HTML wirklich ermöglicht. Auch wenn mir die Portierung der Kommentierung von Typo3 dafür nicht ganz gefällt, aber es ist mal ein Schritt in die richtige Richtung. :)</p>
<p>Auch Michael Preuss geht in die richtige Richtung, wenn er ein Standard-<span lang="en" xml:lang="en">Framework</span> wie YAML reinholt und die Standardisierung noch weiter treibt und für das <span lang="en" xml:lang="en">Theme</span> eine Art Meta<span lang="en" xml:lang="en">framework</span> für <span lang="en" xml:lang="en">WordPress </span>zur Verfügung stellt, mit dem man dann x-fache Layout- und Konfigurationsoptionen hat. Freilich ist das dann eher für den <span lang="en" xml:lang="en">Webdesigner</span> gedacht, der die Konfiguration für den Kunden erstellt und nutzt. Schon eine spannende Sache, vor allem in seiner überzeugenden Flexibilität.</p>
<h3>Meine <span lang="en" xml:lang="en">Session</span>: <span lang="en" xml:lang="en">Twenty Ten</span> &#8211; ist das neue <span lang="en" xml:lang="en">WordPress</span> 3.0 Theme barrierefrei?</h3>
<p>Mit meiner Session zur <a title="zur Präsentation auf Slideshare" href="http://www.slideshare.net/sprungmarker/wordcamp-2010-twenty-ten-barrierefrei">Barrierefreiheit des neuen <span lang="en" xml:lang="en">WordPress Themes Twenty Ten</span></a> war ich dann ganz zufrieden, leider musste ich erst mal Boxen organisieren. Das <span lang="en" xml:lang="en">Screenreader</span>beispiel &#8211; was ja durchaus als Ovation an die <span lang="en" xml:lang="en">WordPress</span>-Entwicklung gedacht war &#8211; hat bei den meisten wieder Verstörung ausgelöst. Ist mir klar, warum das immer noch so ist, aber ich gehe da schon eher drüber weg. Das müssen Zuhörer meiner Vorträge schlicht aushalten. Und mit JAWS 11 und der fast schon komfortablen Ausgabe von und Navigation mit <abbr title="Web Accessibility Initiative" lang="en" xml:lang="en">WAI</abbr>-<abbr title="Accessible Rich Internet Application" lang="en" xml:lang="en">ARIA</abbr> Orientierungspunkten &#8211; wie es so schön eindeutscht heißt &#8211; ist das ja schon richtig <span lang="en" xml:lang="en">handy</span> und sehr wenig verstörend. Und ich finde es wichtig, dass die Leute da genau hinhören, damit es seinen Störungs-Charakter verliert.</p>
<p>Was mir positiv aufgefallen ist: die Leute fragen sofort nach und es wurde mehr diskutiert, als ich gedacht habe. Das kenne ich eher nur aus seminar-ähnlichen Zusammenhängen. Spannend. Und, da ich ja derzeit weiter versuche, mit den <span lang="en" xml:lang="en">WordPress</span> internen Mechanismen wie <span lang="en" xml:lang="en">Child-Theme</span> und functions.php ein barrierefreies <span lang="en" xml:lang="en">Theme</span> aus <span lang="en" xml:lang="en">Twenty Ten</span> abzuleiten &#8211; dass man quasi nach wie vor den <span lang="en" xml:lang="en">Look</span> und die Möglichkeiten des Default-Themes hat, aber eben auch ein barrierefreies <span lang="en" xml:lang="en">Theme</span> &#8211; fand ich es spannend, dass ich dazu auch gleich ein paar Tipps erhalten habe. Das ist sicherlich auch eine Qualität eines Barcamps, diese offene Atmosphäre des Teilens von Wissen &#8211; liegt mir ja ganz besonders, etwas das ich ja immer wieder hier angesprochen habe.</p>
<p>Die Präsentation gibt es wie immer auf <a title="zur Präsentation auf Slideshare" href="http://www.slideshare.net/sprungmarker/wordcamp-2010-twenty-ten-barrierefrei">Slideshare</a>. Im Schnellschuss-Verfahren &#8211; ich bin erst knapp am Abend davor damit fertig geworden &#8211; habe ich das PDF-Dokument auch getagged. Die Präsentation daher auch als <a href="http://www.sprungmarker.de/wp-content/uploads/wordcamp_segger.pdf">PDF-Datei (844 <abbr title="Kilobytes" lang="en" xml:lang="en">Kb</abbr>)</a>. Das <span lang="en" xml:lang="en">Theme Twenty Ten</span> bleibt hier auf sprungmarker weiterhin aktiv, ist aber schon jetzt ein Ableitung davon, ein <span lang="en" xml:lang="en">Child-Theme</span> und ich arbeite mich dann an diesem ersten Schritt weiter in Richtung eines barrierefreien Themes, wo auch immer ich schließlich technisch damit landen werde.</p>
<h4><a title="zur Präsentation auf Slideshare" href="http://www.slideshare.net/sprungmarker/wordcamp-2010-twenty-ten-barrierefrei"><span lang="en" xml:lang="en">Twenty Ten</span> &#8211; ist das neue <span lang="en" xml:lang="en">WordPress</span> 3.0 <span lang="en" xml:lang="en">Theme</span> barrierefrei? (<span lang="en" xml:lang="en">WordCamp</span> 2010)</a></h4>
<p><object id="__sse5894334" width="100%" height="555" type="application/x-shockwave-flash" data="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=wordcampsegger-100702021534-phpapp01&amp;stripped_title=wordcamp-2010-twenty-ten-barrierefrei"><param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=wordcampsegger-100702021534-phpapp01&amp;stripped_title=wordcamp-2010-twenty-ten-barrierefrei" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/></object>
<p><a hreflang="en" href="http://www.slideshare.net/sprungmarker">Meine Präsentationen</a> auf <a lang="en" xml:lang="en" hreflang="en" href="http://www.slideshare.net/sprungmarker">slideshare</a>.</p>
<p>Summa summarum &#8211; wenn es nicht so derart heiß gewesen wäre, hätte ich mir sicherlich noch mehr <span lang="en" xml:lang="en">Sessions</span> angehört und hätte mehr Austausch und Tipps mitnehmen können. Dafür können die Organisatoren aber wenig &#8211; für so eine Hitzewelle. :) Daher &#8211; mir hat das durchaus Spaß gemacht und ich bedanke mich für meinen ersten Barcamp-Eindruck bei allen, ich werde das wieder versuchen &#8211; so ein Barcamp.</p>
<p class="wp-flattr-button"></p> <p><a href="http://sprungmarker.de/?flattrss_redirect&amp;id=1205&amp;md5=fd805eb36f5bd294449eba16d5e71fab" title="Flattr" target="_blank"><img src="http://sprungmarker.de/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=Bz9AIlF3reY:zN_xRlOzuMo:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?i=Bz9AIlF3reY:zN_xRlOzuMo:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=Bz9AIlF3reY:zN_xRlOzuMo:ewi2tLLrNnk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=ewi2tLLrNnk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=Bz9AIlF3reY:zN_xRlOzuMo:eYgBPDbq7UE"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=eYgBPDbq7UE" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=Bz9AIlF3reY:zN_xRlOzuMo:MxV00nO3qFw"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=MxV00nO3qFw" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=Bz9AIlF3reY:zN_xRlOzuMo:aVEt4g-unHM"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=aVEt4g-unHM" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=Bz9AIlF3reY:zN_xRlOzuMo:I9og5sOYxJI"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=I9og5sOYxJI" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SprungmarkerKompakt/~4/Bz9AIlF3reY" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://sprungmarker.de/2010/wordcamp2010_das_war_mein_erstes_barcamp/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		<feedburner:origLink>http://sprungmarker.de/2010/wordcamp2010_das_war_mein_erstes_barcamp/</feedburner:origLink></item>
		<item>
		<title>Umbau für das WordCamp 2010</title>
		<link>http://feedproxy.google.com/~r/SprungmarkerKompakt/~3/wXJeWUGQcUg/</link>
		<comments>http://sprungmarker.de/2010/umbau_wordcamp2010/#comments</comments>
		<pubDate>Mon, 21 Jun 2010 07:19:09 +0000</pubDate>
		<dc:creator>Egger Sylvia</dc:creator>
				<category><![CDATA[Barrierefreiheit]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[Theme]]></category>
		<category><![CDATA[Twenty Ten]]></category>
		<category><![CDATA[WordCamp]]></category>

		<guid isPermaLink="false">http://sprungmarker.de/?p=1181</guid>
		<description><![CDATA[Zu Testzwecken ist hier der WordPress-Standard zu sehen: das neue Theme Twenty Ten. Auf dem WordCamp 2010 in Berlin werde ich mich mit der Barrierefreiheit von WordPress-Themes beschäftigen: Barrierefreiheit in WordPress Themes optimieren: Twenty Ten und WPBasis
Mit WordPress 3.0 ...]]></description>
			<content:encoded><![CDATA[<p class="summary">Zu Testzwecken ist hier der <span lang="en" xml:lang="en">WordPress</span>-Standard zu sehen: das neue <span lang="en" xml:lang="en">Theme</span> Twenty Ten. Auf dem WordCamp 2010 in Berlin werde ich mich mit der Barrierefreiheit von <span lang="en" xml:lang="en">WordPress-Themes</span> beschäftigen: <a title="weiter zur Vortragsinfo" href="http://wordcamp.de/groups/barrierefreiheit-in-wordpress-themes/">Barrierefreiheit in WordPress Themes optimieren: Twenty Ten und WPBasis</a></p>
<p>Mit <a title="weiter zu den Infos von WordPress 3.0" hreflang="en" href="http://wordpress.org/development/2010/06/thelonious/"><span lang="en" xml:lang="en">WordPress</span> 3.0</a> ist nun seit 2005 wieder ein neues Standard-<span lang="en" xml:lang="en">Theme</span> &#8211; <a title="weiter zum Blog des Themes" lang="en" xml:lang="en" hreflang="en" href="http://2010dev.wordpress.com/">Twenty Ten</a> &#8211; integriert, wurde auch Zeit und das werde ich mir daher nun auch hier genauer ansehen. Weil sich am offenen und praktischen Herzen nun mal am besten testen lässt. :)</p>
<p class="wp-flattr-button"></p> <p><a href="http://sprungmarker.de/?flattrss_redirect&amp;id=1181&amp;md5=8a98bea051e0a784366d94d1ef94472c" title="Flattr" target="_blank"><img src="http://sprungmarker.de/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=wXJeWUGQcUg:dCrMB4-W0gA:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?i=wXJeWUGQcUg:dCrMB4-W0gA:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=wXJeWUGQcUg:dCrMB4-W0gA:ewi2tLLrNnk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=ewi2tLLrNnk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=wXJeWUGQcUg:dCrMB4-W0gA:eYgBPDbq7UE"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=eYgBPDbq7UE" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=wXJeWUGQcUg:dCrMB4-W0gA:MxV00nO3qFw"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=MxV00nO3qFw" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=wXJeWUGQcUg:dCrMB4-W0gA:aVEt4g-unHM"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=aVEt4g-unHM" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=wXJeWUGQcUg:dCrMB4-W0gA:I9og5sOYxJI"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=I9og5sOYxJI" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SprungmarkerKompakt/~4/wXJeWUGQcUg" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://sprungmarker.de/2010/umbau_wordcamp2010/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<feedburner:origLink>http://sprungmarker.de/2010/umbau_wordcamp2010/</feedburner:origLink></item>
		<item>
		<title>Barrierefreiheit &amp; Media Player: Captioning – Teil 2</title>
		<link>http://feedproxy.google.com/~r/SprungmarkerKompakt/~3/zhBiaI5uQ14/</link>
		<comments>http://sprungmarker.de/2010/barrierefreiheit_mediaplayer_captioning/#comments</comments>
		<pubDate>Tue, 01 Jun 2010 07:34:09 +0000</pubDate>
		<dc:creator>Egger Sylvia</dc:creator>
				<category><![CDATA[Barrierefreiheit]]></category>
		<category><![CDATA[Caption]]></category>
		<category><![CDATA[Captionate]]></category>
		<category><![CDATA[ccPlayer]]></category>
		<category><![CDATA[Easy YouTube Player]]></category>
		<category><![CDATA[Flowplayer]]></category>
		<category><![CDATA[JWPlayer]]></category>
		<category><![CDATA[kompakt]]></category>
		<category><![CDATA[Player]]></category>
		<category><![CDATA[QTtext]]></category>
		<category><![CDATA[SubRip]]></category>
		<category><![CDATA[Timed Text]]></category>
		<category><![CDATA[Video]]></category>

		<guid isPermaLink="false">http://sprungmarker.de/?p=1096</guid>
		<description><![CDATA[Im ersten Teil meiner kleinen Recherche zur Barrierefreiheit von Media Playern Barrierefreiheit &#38; Media Player: eine Kurzübersicht – Teil 1 haben wir uns einen Kurzüberblick darüber verschafft, welche Player überhaupt in Frage kommen und wie es mit der Barrierefreiheit ...]]></description>
			<content:encoded><![CDATA[<p class="summary">Im ersten Teil meiner kleinen Recherche zur Barrierefreiheit von Media Playern <a title="weiter zum ersten Teil der Serie" href="http://sprungmarker.de/2010/barrierefreiheit_mediaplayer_eine_kurzuebersicht/">Barrierefreiheit &amp; Media Player: eine Kurzübersicht – Teil 1</a> haben wir uns einen Kurzüberblick darüber verschafft, welche Player überhaupt in Frage kommen und wie es mit der Barrierefreiheit aussieht. Im zweiten Teil sehen wir uns die Integrationsmöglichkeit von <span lang="en" xml:lang="en">Captions</span> im Detail an.</p>
<p>Auch hier zu Beginn ein kleines Fazit: Die Unterstützung von <span lang="en" xml:lang="en">Captions</span> ist mittlerweile Standard geworden; nicht zuletzt durch die <a title="zum Artikel: Automatic captions in YouTube" hreflang="en" href="http://googleblog.blogspot.com/2009/11/automatic-captions-in-youtube.html">automatische Möglichkeit</a>, <span xml:lang="en" lang="en">YouTube</span>-Videos mit <span lang="en" xml:lang="en">Captions</span> zu versehen, ist das Thema sehr präsent und fast selbstverständlich geworden. Freilich stehen den vielen technischen Umsetzungen immer noch ein Unmenge an Videos entgegen, die erst mit <span lang="en" xml:lang="en">Captions</span> versehen werden müssen. Auch sieht es mit dem <span lang="en" xml:lang="en">Finetuning</span> der <span lang="en" xml:lang="en">Captions</span> hinsichtlich Farbe, Hintergrund, Position oder Schrift recht gut aus, wenngleich sich da erst eine Standardisierung bilden muss, wer will schon eine bunte Mischung von allem auf so schmalem Grund. :)</p>
<p><span id="more-1096"></span></p>
<p>Ein sehr erfreuliches Bild zeichnet sich bei den Playern ab, wenn es um die Einbindung von <span lang="en" xml:lang="en">Captions</span> geht. Ich spreche hier immer bewusst nicht von Untertitelung. Im Unterschied zur herkömmlichen Untertitel enthalten <span lang="en" xml:lang="en">Captions</span> Informationen zum jeweiligen Sprecher und zu weiteren wichtigen Audioinformationen.</p>
<table border="0" cellspacing="0" cellpadding="0" width="100%" summary="Übersichtstabelle Media Player - Captioning">
<colgroup>
<col width="*"></col>
<col width="10%"></col>
<col width="10%"></col>
<col width="20%"></col>
<col width="20%"></col>
</colgroup>
<tbody>
<tr>
<th scope="col"><span lang="en">Media Player</span></th>
<th scope="col"><span lang="en" xml:lang="en">Captions</span></th>
<th scope="col"><abbr title="Closed Captions" lang="en" xml:lang="en">CC</abbr></th>
<th scope="col">Format</th>
<th scope="col"><span lang="en" xml:lang="en">Embedded</span></th>
</tr>
<tr>
<th class="row" scope="row"><a href="http://www.longtailvideo.com" hreflang="en" xml:lang="en" lang="en" title="zur Webseite des JW Players">JW <span xml:lang="en" lang="en">Player</span></a></th>
<td class="active">ja</td>
<td class="active">ja</td>
<td class="left">
<ul>
<li><abbr title="Timed Text" lang="en" xml:lang="en">TT</abbr></li>
<li><span lang="en" xml:lang="en">SubRip</span></li>
</ul>
</td>
<td class="left"><span lang="en" xml:lang="en">FLV cuepoints (Captionate)</span></td>
</tr>
<tr>
<th class="row" scope="row"><a href="http://flowplayer.org/" xml:lang="en" lang="en" hreflang="en" title="zur Webseite des Flowplayers">Flowplayer</a></th>
<td class="active">ja</td>
<td class="active">ja</td>
<td class="left">
<ul>
<li><abbr title="Timed Text" lang="en" xml:lang="en">TT</abbr></li>
<li><span lang="en" xml:lang="en">SubRip</span></li>
</ul>
</td>
<td class="left"><span lang="en" xml:lang="en">FLV cuepoints (RichFLV)</span></td>
</tr>
<tr>
<th class="row" scope="row"><a href="http://maltwiki.org" hreflang="en" title="zur Webseite des MALT Wiki Players"><span xml:lang="en" lang="en">MALT</span> Wiki <span xml:lang="en" lang="en">Player</span></a> (Basis: <span lang="en" xml:lang="en">Flowplayer</span>)</th>
<td class="active">ja</td>
<td class="active">ja</td>
<td class="left">
<ul>
<li><abbr title="Timed Text" lang="en" xml:lang="en">TT</abbr></li>
<li><span lang="en" xml:lang="en">SubRip</span></li>
</ul>
</td>
<td class="left"><span lang="en" xml:lang="en">FLV cuepoints (RichFLV)</span></td>
</tr>
<tr>
<th class="row" scope="row"><a href="http://ncam.wgbh.org/invent_build/web_multimedia/tools-guidelines/ccplayer" hreflang="en" title="zur Webseite des ccPlayers">cc<span xml:lang="en" lang="en">Player</span></a></th>
<td class="active">ja</td>
<td class="active">ja</td>
<td class="left">
<ul>
<li><abbr title="Timed Text" lang="en" xml:lang="en">TT</abbr></li>
<li><span lang="en" xml:lang="en">QTtext</span></li>
</ul>
</td>
<td class="left"><span lang="en" xml:lang="en">FLV cuepoints (Captionate)</span></td>
</tr>
<tr>
<th class="row" scope="row"><a href="http://www.nomensa.com/web-accessibility/what-we-do/accessible-media-player" hreflang="en" title="zur Webseite des Nomensa Players">Nomensa <span xml:lang="en" lang="en">Accessible Media Player</span></a></th>
<td class="active">ja</td>
<td class="active">ja</td>
<td class="left">keine Infos</td>
<td class="left">keine Infos</td>
</tr>
<tr>
<th class="row" scope="row"><a href="http://www.video-flash.de/flv-flash-fullscreen-video-player/" title="zur Webseite des flv flash-fullscreen video-player">flv <span xml:lang="en" lang="en">flash-fullscreen video player</span></a></th>
<td class="active">ja</td>
<td>nein</td>
<td class="left"><abbr title="Timed Text" lang="en" xml:lang="en">TT</abbr></td>
<td class="left">nein</td>
</tr>
<tr>
<th class="row" scope="row"><a href="http://www.officefordisability.gov.uk/player/" hreflang="en" title="zur Webseite des ODI Player">ODI <span xml:lang="en" lang="en">Player</span></a></th>
<td class="active">ja</td>
<td class="active">ja</td>
<td class="left">keine Infos</td>
<td class="left">keine Infos</td>
</tr>
</tbody>
</table>
<h3>Open versus <span lang="en" xml:lang="en">Closed Captions</span></h3>
<p>Die erste wichtige Unterscheidung bei der Einbindung von <span xml:lang="en" lang="en">Captions</span> ist, ob man sie permanent zugeschaltet darstellt (<em xml:lang="en" lang="en">Open Captions</em>) oder ob man die Möglichkeit bietet, sie zu- und abzuschalten (<em xml:lang="en" lang="en">Closed Captions</em> &#8211; CC). Die <a title="zur entsprechenden Info in den WCAG 2" hreflang="en" href="http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-captions">WCAG 2﻿</a> lassen beides als hinreichend zu, man kann sich also entscheiden. :) <span xml:lang="en" lang="en">Closed Captions</span> wird auch von fast allen Playern unterstützt. Diese Funktion, die ja auch eine gute <span xml:lang="en" lang="en">Usability</span> bietet, hat sich also zum Standard gemausert. Und das ist auch gut so. Offene <span lang="en" xml:lang="en">Captions</span> unterstützen ohnehin alle genannten <span lang="en" xml:lang="en">Player und </span>bis auf den flv <span lang="en" xml:lang="en">flash-fullscreen video player</span> kann man in allen Playern die <span lang="en" xml:lang="en">Captions</span> zu- und abschalten. Auch für den <span xml:lang="en" lang="en">Button</span>-Namen hat sich ein Quasi-Standard entwickelt: CC für <span xml:lang="en" lang="en">Closed Captions</span>.</p>
<h3>Standardisierung im <span lang="en" xml:lang="en">Caption</span>-Format: <span lang="en" xml:lang="en">Timed Text</span></h3>
<p><a class="ImgRightLink" title="Screenshot Timed Text Beispiel - Demo JW Player" rel="lightbox" href="http://sprungmarker.de/wp-content/uploads/2010/05/timed_text.gif"><img src="http://sprungmarker.de/wp-content/uploads/2010/05/timed_text_small.gif" alt="Zur Bildvergrößerung: Screenshot Timed Text Beispiel - Demo JW Player" width="251" height="267" /></a>Für die Einbindung der <span xml:lang="en" lang="en">Captions</span>-Inhalte stehen so unterschiedliche Formate zur Verfügung wie <span xml:lang="en" lang="en">Timed Text</span>, <span xml:lang="en" lang="en">SubRip</span> oder QTtext. Die genannten Formate werden alle als externe Datei in den Player eingebunden. Eine weitere Möglichkeit ist, die Inhalte bereits im Video mit einzubetten wie mit Hilfe von <em>cuepoints</em> &#8211; dabei werden an bestimmten Fixpunkten im Video die <span xml:lang="en" lang="en">Captions</span> eingeblendet. Beide Möglichkeiten werden von den Playern unterstützt &#8211; freilich in je unterschiedlicher Ausprägung. Für die externe Einbindung hat sich ein Standard durchgesetzt: das Format <a title="zur W3C Spezifikation Timed Text" lang="en" xml:lang="en" hreflang="en" href="http://www.w3.org/TR/2010/CR-ttaf1-dfxp-20100223/">Timed Text (TT)</a>. Sieht man sich die aktuelle Spezifikation an &#8211; denn im Grunde ist das alles sehr einfach angelegt (Einfache Syntax: Absätze mit Anfang- und Endzeitpunkt, die den <span lang="en" xml:lang="en">Captions</span>-Text enthalten) -, ist mittlerweile viel an <span lang="en" xml:lang="en">Styling</span> möglich, von der unterschiedlichen farblichen Hinterlegung einzelner Passagen in der <span lang="en" xml:lang="en">Caption</span>, über Transparenzen, Positionierung und anderen Formen der Hervorhebung, um den inhaltlichen Zusammenhang etwa einzelner Sprecher klarer zu machen. Freilich wird nur ein Bruchteil tatsächlich von den <span lang="en" xml:lang="en">Playern</span> unterstützt.</p>
<p><img class="ImgRight" src="http://sprungmarker.de/wp-content/uploads/2010/05/subrip.gif" alt="Screenshot: SupRip Datei Beispiel Flowplayer" width="294" height="257" />Der <a title="zur Information des Plugins Captions des Flow Players" hreflang="en" href="http://flowplayer.org/plugins/flash/captions.html"><span lang="en" xml:lang="en">Flowplayer</span></a>, JW Player und der MALT Wiki Player unterstützen auch noch das einfache Textformat <a title="zur Information in der Wikipedia" href="http://en.wikipedia.org/wiki/SubRip">SubRip</a> (.SRT) &#8211; noch einfacher als <span lang="en" xml:lang="en">Timed Text</span> werden die Positionen durchnummeriert und mit Anfangs- und Endzeitpunkt und den Inhalten der <span lang="en" xml:lang="en">Captions</span> versehen. SubRip hat wohl nicht den besten Ruf, weil es zu sehr von der Community an allen Ecken und Enden aufgebohrt wurde. <cite><a title="zum Artikel: A gentle introduction to video encoding, part 4: captioning" lang="en" xml:lang="en" hreflang="en" href="http://diveintomark.org/archives/2009/01/07/give-part-4-captioning">Dive into Mark</a></cite> formuliert das recht schön: <q>SubRip is the AVI of caption formats</q>. Das <span xml:lang="en" lang="en">Styling </span>von <span xml:lang="en" lang="en">SubRip</span> ist sehr rudimentär und unterstützt die <span xml:lang="en" lang="en">Basics</span> wie Schrift, Größe und Farbe: Formatierungen wie fett, kursiv und ein wenig Schrift. Das war&#8217;s auch schon. Mit Hilfe von <span xml:lang="en" lang="en">Timed Text</span> kann man weit mehr an <span xml:lang="en" lang="en">Styling</span> erarbeiten.</p>
<p><img class="ImgRight" src="http://sprungmarker.de/wp-content/uploads/2010/05/qttext.gif" alt="Screenshot: Beispiel QTtext - einaches Textformat mit Timestamp und Caption" width="249" height="223" />Der cc-<span lang="en" xml:lang="en">Player</span> unterstützt noch das <span lang="en" xml:lang="en">Quicktime</span> Format <a title="zur Information zu QTtext" href="http://www.apple.com/quicktime/tutorials/texttracks.html">QTtext</a>, ebenfalls ein einfaches Textformat, das mit einigen <a title="mehr Informationen zu den Descriptors von QTtext" hreflang="en" href="http://www.apple.com/quicktime/tutorials/textdescriptors.html">Deskriptoren</a> layouttechnisch nachbearbeitet werden kann &#8211; auch wieder sehr einfach, oben die Metainformationen, dann mit <span lang="en" xml:lang="en">Timestamp</span> die einzelnen <span lang="en" xml:lang="en">Captions</span>.  Im Gegensatz zu <span xml:lang="en" lang="en">SubRip</span> ist layouttechnisch mit QTtext mehr möglich: Neben den üblichen Textformatierungen kann man auch die Hintergrundbox, auf der die <span xml:lang="en" lang="en">Captions</span> liegen, beeinflussen (Transparenz, Position, Masse), auch die Art, wie die <span xml:lang="en" lang="en">Captions</span> eingeblendet werden.</p>
<h3>Integrierte <span lang="en" xml:lang="en">Captions</span>: <span lang="en" xml:lang="en">Captions</span> schon im Video einbinden</h3>
<p><img class="ImgRight" src="http://sprungmarker.de/wp-content/uploads/2010/05/captionate.jpg" alt="Screenshot Captionate" width="250" height="210" />Der JW Player, Flowplayer und der ccPlayer unterstützen auch die Variante, dass man <span xml:lang="en" lang="en">Captions</span> bereits im Video mit einbettet. Dafür wird unterschiedliche Software empfohlen, die<a href="http://help.adobe.com/en_US/ActionScript/3.0_UsingComponentsAS3/WS5b3ccc516d4fbf351e63e3d118a9c65b32-7ee4.html"> cuepoints in FLV-Dateien</a> unterstützt. Der cc-Player und JW Player empfehlen die <span lang="en" xml:lang="en">Software</span>: <a title="zur Information zu Captionate" lang="en" xml:lang="en" hreflang="en" href="http://www.buraks.com/captionate/">Captionate</a>, der Flowplayer wie MALT Wiki Player  <a title="zur Information zu RichFLV" lang="en" xml:lang="en" hreflang="en" href="http://richapps.de/?p=169">RichFLV</a>.﻿ Und auch hierbei gibt es wieder graduelle Unterschiede. RichFLV ist so gut wie nicht dokumentiert, ist aber als <span xml:lang="en" lang="en">Air</span>-Anwendung plattformübergreifend nutzbar. <span xml:lang="en" lang="en">Captionate</span> kostet zwar nicht soviel, läuft aber nur unter Windows. :) Positiv: <span xml:lang="en" lang="en">Captionate</span> ist sehr gut <a href="http://www.buraks.com/captionate/helpfile/index.html">dokumentiert</a> und mit dem Blick auf die <a href="http://www.adobe.com/devnet/flash/articles/video_captionate/popup_01.html">Demo</a> muss man sagen, das geht schon sehr <span xml:lang="en" lang="en">smooth</span>. Mit <span xml:lang="en" lang="en">Captionate</span> lassen sich mehrere Sprecher und Sprachen zuordnen und es gibt auch ein <span xml:lang="en" lang="en">Plugin</span>, um etwa wieder in das <span xml:lang="en" lang="en">SubRip</span>-Format zu exportieren. In Planung sind wohl weitere Import- und Exortformate. Das wäre dann schon ziemlich <span xml:lang="en" lang="en">handy</span> und spannend. Um die <span lang="en" xml:lang="en">embedded</span>-Variante beim JW Player zu integrieren, muss man die Variable <code lang="en" xml:lang="en">addVariable("captions","captionate")</code> hinzufügen.</p>
<p><a class="ImgRightLink" title="Screenshot RichFLV" rel="lightbox" href="http://sprungmarker.de/wp-content/uploads/2010/05/richFLV.png"><img src="http://sprungmarker.de/wp-content/uploads/2010/05/richFLV_small.gif" alt="Zur Bildvergrößerung: Screenshot RichFLV" width="250" height="275" /></a>Ich habe die verschiedenen Varianten getestet und es ist tatsächlich so, dass man sich bei jedem Player an die Software-Empfehlung halten muss. Ein Video, das mit <span xml:lang="en" lang="en">Captionate</span> bearbeitet wurde, kann zwar im ccPlayer integriert werden, die gleiche Datei im Flowplayer liefert aber keine <span xml:lang="en" lang="en">Captions</span> aus. Ich habe mal den Test gemacht und die mit <span xml:lang="en" lang="en">Captionate</span> erzeugte Datei in RichFLV erneut abgespeichert und schon lief sie auch im Flowplayer. Etwas unhandlich das und auch unstandardisiert. Es wäre wünschenswert, wenn sich da eine Einheitlichkeit entwickelt, weil man ja auch nicht weiß, welche Unterschiede da in Verarbeitung und Ausspielung sonst noch zu erwarten sind. Ganz abgesehen davon, das RichFLV viel weniger Optionen aufzubieten hat als <span xml:lang="en" lang="en">Captionate</span>.</p>
<p>Standardmäßig ist eher von dem Fall auszugehen, dass die Videos vorliegen und erst mit <span lang="en" xml:lang="en">Captions</span> versehen werden müssen, insofern greift man zu einem Textformat wie <span lang="en" xml:lang="en">Timed Text</span>. So ein einfaches Textformat lässt sich <span lang="en" xml:lang="en">template</span>mäßig auch sehr gut dynamisieren und in ein CMS integrieren. Unterschiede gibt es dann in den Möglichkeiten, die <span lang="en" xml:lang="en">Captions</span> zu layoutieren &#8211; das sehen wir uns im nächsten Punkt an. So lässt das <span xml:lang="en" lang="en">Plugin</span> des JW <span lang="en" xml:lang="en">Players</span> sehr wenig zu: Die Schriftgröße lässt sich einstellen (Vorsicht &#8211; mit der Größe des Players ändert sich auch die Schriftgröße &#8211; das kann bei kleinen Playern zu einer unleserlichen Schrift führen &#8211; also lieber auf das Einstellen der Schriftgröße verzichten. Der Player skaliert ohnehin auch die Schrift der <span xml:lang="en" lang="en">Captions</span> automatisch mit), die Transparenz des Hintergrunds der <span lang="en" xml:lang="en">Caption</span> und ob <span lang="en" xml:lang="en">Captions</span> per default abgeschaltet sein sollen. Noch ein kleiner barrierefreier Tipp für den JW Player: Warum auch immer werden in der Standardintegration der beiden barrierefreien <span lang="en" xml:lang="en">Plugins</span> <span lang="en" xml:lang="en">Caption</span> und <span lang="en" xml:lang="en">Audiodescription</span> die <span lang="en" xml:lang="en">Buttons</span>, um beide Optionen zu- und abzuschalten, als Layer auf das Video gelegt &#8211; das nennt sich dann Dock &#8211;  und sind per Tastatur so nicht erreichbar. Man kann das ändern, in dem man die <span xml:lang="en" lang="en">Buttons</span> wieder in die Playerleiste nach unten legt mit dem Parameter <code lang="en" xml:lang="en">dock=false</code>.</p>
<h3><span lang="en" xml:lang="en">Captions</span> individuell anpassen</h3>
<p><a class="ImgRightLink" title="Screenshot aus der Spezifikation des W3C Timed Text - Styling" rel="lightbox" href="http://sprungmarker.de/wp-content/uploads/2010/05/timed_text_styling.gif"><img src="http://sprungmarker.de/wp-content/uploads/2010/05/timed_text_styling_small.gif" alt="Zur Bildvergrößerung: Screenshot aus der Spezifikation des W3C Timed Text - Styling" width="250" height="242" /></a>Grundsätzlich muss man bei der individuellen Anpassung der <span xml:lang="en" lang="en">Captions</span> zwei Herangehensweisen unterscheiden: Zum einen gibt der Player oder das <span xml:lang="en" lang="en">Plugin</span> schon Defaults vor, die man meist mit Hilfe von Parametern oder Variablen anpassen kann. Zum anderen kann man im <span xml:lang="en" lang="en">Captions</span>-Format wie <span xml:lang="en" lang="en">Timed Text</span> die je eigenen <span xml:lang="en" lang="en">Styling</span>-Vorgaben nutzen und so Ausgabe und Aussehen der <span xml:lang="en" lang="en">Captions</span> individualisieren. Das gilt im übrigen auch für die im Video integrierte Variante, das <span xml:lang="en" lang="en">Styling</span> erledigt dann das jeweilige Programm wie etwa <span xml:lang="en" lang="en">Captionate</span>, wo man die individuellen Angaben dann einstellen kann. Für die externen Varianten der einzelnen <span xml:lang="en" lang="en">Captions</span>-Formate gilt, was das Format zulässt. Da ist <span xml:lang="en" lang="en">Timed Text</span> an der Individualisierungs-Spitze angesiedelt, mit etwas weniger wartet QTtext auf und eher spartanisch kommt schließlich <span xml:lang="en" lang="en">SubRip</span> daher. Dazu muss man einschränken, dass die Möglichkeiten der Spezifikation und Formate das eine ist, die tatsächliche Ausgabe und Interpretation durch den Player etwas andres. Wir sehen uns die unterschiedlichen <span xml:lang="en" lang="en">Styling</span>-Stufen nun im Detail an:</p>
<h4>Media Player: Möglichkeiten des <span xml:lang="en" lang="en">Stylings</span></h4>
<table border="0" cellspacing="0" cellpadding="0" width="100%" summary="Übersichtstabelle Media Player - Captioning - Styling">
<colgroup>
<col width="*"></col>
<col width="20%"></col>
<col width="15%"></col>
<col width="15%"></col>
</colgroup>
<tbody>
<tr>
<th scope="col"><span lang="en">Styling</span></th>
<th scope="col">JW <span lang="en" xml:lang="en">Player</span></th>
<th scope="col"><span lang="en" xml:lang="en">Flowplayer</span></th>
<th scope="col">cc<span lang="en" xml:lang="en">Player</span></th>
</tr>
<tr>
<th class="row" scope="row">via <span lang="en" xml:lang="en">Player / <span xml:lang="en" lang="en">Plugin</span> Default</span></th>
<td class="active left">ja</td>
<td class="active left">ja</td>
<td class="active left">ja</td>
</tr>
<tr>
<th class="row" scope="row">Default editierbar</th>
<td class="active left">ja</td>
<td class="active left">ja</td>
<td class="left">nein</td>
</tr>
<tr>
<th class="row" scope="row">via <span lang="en" xml:lang="en">Timed Text</span></th>
<td class="active left">ja</td>
<td class="active left">ja</td>
<td class="active left">ja</td>
</tr>
<tr>
<th class="row" scope="row">via <span lang="en" xml:lang="en">SupRip</span> (rudimentäres HTML)</th>
<td class="active left">ja</td>
<td class="active left">ja</td>
<td class="left">nein</td>
</tr>
<tr>
<th class="row" scope="row">via QTtext (Deskriptoren)</th>
<td class="left">nein</td>
<td class="left">nein</td>
<td class="active left">ja</td>
</tr>
<tr>
<th class="row" scope="row"><span lang="en" xml:lang="en">embedded</span> via <span lang="en" xml:lang="en">Captionate</span></th>
<td class="active left">ja</td>
<td class="left">nein</td>
<td class="active left">ja</td>
</tr>
<tr>
<th class="row" scope="row"><span lang="en" xml:lang="en">embedded</span> via <span lang="en" xml:lang="en">RichFLV</span></th>
<td class="left">nein</td>
<td class="active left">ja</td>
<td class="left">nein</td>
</tr>
<tr>
<th class="row" scope="row">Default Player / <span xml:lang="en" lang="en">Plugin</span> überschreibt embedded <span xml:lang="en" lang="en">Styles</span></th>
<td class="active left">ja</td>
<td class="active left">ja</td>
<td class="left">nein</td>
</tr>
<tr>
<th class="row" scope="row">Mehrsprachigkeit</th>
<td class="left">nein, aber bald: <a title="zum Supportticket des Plugins" hreflang="en" href="http://developer.longtailvideo.com/trac/ticket/692">Ticket#692</a></td>
<td class="left">nein</td>
<td class="active left">ja</td>
</tr>
<tr>
<th class="row" scope="row">CC-<span xml:lang="en" lang="en">Button</span> anpassbar</th>
<td class="active left">ja (nur durch Kompilieren des <span lang="en" xml:lang="en">Plugins</span> bzw. laut <a title="zum Supportticket des Plugins" hreflang="en" href="http://developer.longtailvideo.com/trac/ticket/692">Ticket#692</a> wird <span xml:lang="en" lang="en">Button</span> skinfähig)</td>
<td class="left">nein</td>
<td class="active left">ja (nur via fla-Datei)</td>
</tr>
<tr>
<th class="row" scope="row">Besonderheiten</th>
<td class="left">nein</td>
<td class="left">nein</td>
<td class="active left">
<ul>
<li>durchsuch- und ansteuerbar</li>
<li>Mehrsprachigkeit</li>
<li>Anzahl der Zeilen</li>
<li>unterschiedliche Darstellungsmodi</li>
</ul>
</td>
</tr>
</tbody>
</table>
<h4><span lang="en" xml:lang="en">Styling</span> des Defaults nutzen</h4>
<p>Für diese Form des <span xml:lang="en" lang="en">Stylings</span> kommen nur folgende Player wirklich in Frage: JW Player, Flowplayer, MALT Wiki Player und ccPlayer. Alle von diesen genannten Player unterstützen es, dass man im Default des Players oder im <span xml:lang="en" lang="en">Plugin</span> die <span xml:lang="en" lang="en">Captions</span> entsprechend styled. Beim JW Player ist das die Schriftgröße, die Transparenz des Hintergrunds und ob die <span xml:lang="en" lang="en">Captions</span> automatisch zugeschaltet wird. Der Flowplayer ist da noch etwas ausgefeilter im Default, ich denke das gilt auch immer für den MALT Wiki Player, da er ja auf dem Flowplayer basiert: Man kann im Default des <span xml:lang="en" lang="en">Captions-Plugin</span> einstellen: die Schrift, Schriftgröße, Schriftfarbe und Textausrichtung, aber ebenso Position, Breite, Höhe und Transparenz des Hintergrunds. Der ccPlayer ist im Default, soweit ich das recherchieren konnte, nicht änderbar und ist auf Verdana in der Größe 14 mit dreizeiligen <span xml:lang="en" lang="en">Captions</span> eingestellt, das kann man mit den <span xml:lang="en" lang="en">Styles</span> von <span xml:lang="en" lang="en">Timed Text</span> oder QTtext überschreiben.</p>
<p>Interessanterweise greift dieser Default auch für die im Video integrierten <span xml:lang="en" lang="en">Captions</span>, das heißt: Hat man in der Videodatei mit <span xml:lang="en" lang="en">Captionate</span> andere <span xml:lang="en" lang="en">Styles</span> eingestellt, werden die durch den Default des Players oder des <span xml:lang="en" lang="en">Plugins</span> überschrieben. Einzig im ccPlayer ist das nicht der Fall, dort überschreiben die <span xml:lang="en" lang="en">Styles</span> von <span xml:lang="en" lang="en">Captionate</span> den Default. Man darf sich auch fragen, warum das die anderen Player nicht machen. Grundsätzlich ist ein Default ja gut, aber <span xml:lang="en" lang="en">Captionate</span> erlaubt da viel mehr Einstellungen. Der beste Fall wäre im Grunde, wenn man das mit Hilfe eines Parameters im Player nachjustieren kann, genau für den Fall, den man eben haben möchte, welche <span xml:lang="en" lang="en">Styles</span> man jeweils überschreiben möchte. Aber das bietet leider noch kein Player.</p>
<h4><span lang="en" xml:lang="en">Styling</span> des <span xml:lang="en" lang="en">Captions</span>-Formats nutzen</h4>
<p><a class="ImgRightLink" title="Screenshot Timed Text - einfaches HTML - Styling" rel="lightbox" href="http://sprungmarker.de/wp-content/uploads/2010/05/timedtext_simple.gif"><img src="http://sprungmarker.de/wp-content/uploads/2010/05/timedtext_simple_small.gif" alt="Zur Bildvergrößerung: Screenshot Timed Text - einfaches HTML - Styling" width="250" height="209" /></a>Genauso stufig geht es mit der Interpretation des <span xml:lang="en" lang="en">Stylings</span> im <span xml:lang="en" lang="en">Captions</span>-Format selbst weiter: Sehr gut, weil auch sehr rudimentär, unterstützt wird einfaches HTML, das man direkt in den <span xml:lang="en" lang="en">Captions</span>-Text einarbeitet. Für die Anpassung der Schrift arbeitet man dann mit dem alten <code>font</code>-Element. Auch sonst wird etwa für kursiv oder fett auf die nicht semantischen HTML-Elemente <code>i</code> und <code>bold</code> zurückgegriffen. Ich habe zwar versucht, dafür das <code>em</code>- oder <code>strong</code>-Element zu nutzen, wird aber nicht interpretiert. Leider. So ist die Standardisierung in den <span xml:lang="en" lang="en">Captions</span>-Formaten letztlich noch nicht auf der Höhe der Zeit. Um diese einfachen HTML-Elemente einzusetzen, muss man im JW Player und Flowplayer alles mit <code>CDATA</code> umschließen, sonst wird der gestylte Inhalt nicht mehr ausgegeben. Im ccPlayer klappt das auch ohne <code>CDATA</code>. Ähnlich ist es mit dem <code>br</code>-Element. Auch da muss normalerweise <code>CDATA</code> angewendet werden, in einem aktuellen Supportticket des Flowplayers wird das aber aufgearbeitet. Kann auch sonst eher ziemlich mühselig sein, jedes <code>br</code> so auszuzeichnen.</p>
<p><span xml:lang="en" lang="en">SubRip</span> arbeitet da ähnlich wie <span xml:lang="en" lang="en">Timed Text</span>, auch hier die gleichen einfachen HTML-Elemente, aber mehr ist dann auch nicht mehr möglich. QTtext hat ebenfalls sehr einfache Deskriptoren wie <code>{bold}</code> und auch zwei Stufen in der Anpassung &#8211; global am Anfang der QTtext-Datei und <span xml:lang="en" lang="en">inline</span> pro <span xml:lang="en" lang="en">Captions</span>-Text. Theoretisch müsste das <span xml:lang="en" lang="en">Inline-Styling</span> auch funktionieren, aber der ccPlayer lässt nur globale <span xml:lang="en" lang="en">Styles</span> für QTtext zu. Insofern ist man mit dem <span xml:lang="en" lang="en">Styling</span> via QTtext dann sehr eingeschränkt: Entweder die ganze <span xml:lang="en" lang="en">Caption</span> ist fett oder nicht. Eher sehr unhandlich.</p>
<p>Will man wirklich auch auf einer Mikroebene stylen, kommt man an <span xml:lang="en" lang="en">Timed Text</span> nicht vorbei. Erst damit hat man die Möglichkeit, global mit IDs zu arbeiten, aber auch auf einer Mikroebene etwa mit einem <code>span</code>-Element. Leider greifen auch bei <span xml:lang="en" lang="en">Timed Text</span> HTML-Elemente wie <code>em</code> oder <code>strong</code> nicht. Entweder man greift wieder auf <code>bold</code> oder <code>i</code> zurück, oder man nutzt ein <code>span</code>-Element und arbeitet mit den Attributen von <span xml:lang="en" lang="en">Timed Text</span>. Freilich ist die Interpretation dieser Möglichkeiten wiederum an den Player gebunden. Weit voraus greift hierbei der ccPlayer. Wir sehen uns das jetzt genauer an:</p>
<h4>Media Player: Welche Möglichkeiten hat man wirklich, die <span xml:lang="en" lang="en">Captions</span> zu stylen?</h4>
<table border="0" cellspacing="0" cellpadding="0" width="100%" summary="Übersichtstabelle Media Player - Captioning - Styling Details">
<colgroup>
<col width="*"></col>
<col width="20%"></col>
<col width="20%"></col>
<col width="20%"></col>
</colgroup>
<tbody>
<tr>
<th scope="col"><span lang="en">Timed Text</span></th>
<th scope="col">JW <span lang="en" xml:lang="en">Player</span></th>
<th scope="col"><span lang="en" xml:lang="en">Flowplayer</span></th>
<th scope="col">cc<span lang="en" xml:lang="en">Player</span></th>
</tr>
<tr>
<th class="row" scope="row">rudimentäres HTML (etwa fett, kursiv, Schriftart, Schriftgröße, Farbe, unterstrichen)</th>
<td class="active left">ja (<code>CDATA</code>)</td>
<td class="active left">ja (<code>CDATA</code>)</td>
<td class="active left">ja</td>
</tr>
<tr>
<th class="row" scope="row">laut Spezifikation global (<span lang="en" xml:lang="en">Styles</span> via <code lang="en" xml:lang="en">head</code>-Element)</th>
<td class="left">nein, aber bald: <a title="zum Supportticket des Plugins" hreflang="en" href="http://developer.longtailvideo.com/trac/ticket/692">Ticket#692</a></td>
<td class="active left">ja</td>
<td class="active left">ja</td>
</tr>
<tr>
<th class="row" scope="row">laut Spezifikation im <code lang="en" xml:lang="en">body</code> (<span lang="en" xml:lang="en">Styles</span> via <code>div</code>- oder <code>p</code>-Element)</th>
<td class="left">nein, aber bald: <a title="zum Supportticket des Plugins" hreflang="en" href="http://developer.longtailvideo.com/trac/ticket/692">Ticket#692</a></td>
<td class="left">nein</td>
<td class="active left">ja</td>
</tr>
<tr>
<th class="row" scope="row">laut Spezifikation <span lang="en" xml:lang="en">inline</span> (etwa <span lang="en" xml:lang="en">Styles</span> via <code lang="en" xml:lang="en">span</code>-Element)</th>
<td class="left">nein, aber bald: <a title="zum Supportticket des Plugins" hreflang="en" href="http://developer.longtailvideo.com/trac/ticket/692">Ticket#692</a></td>
<td class="left">nein</td>
<td class="active left">ja</td>
</tr>
</tbody>
</table>
<p><a class="ImgRightLink" title=" Screenshot Timed Text komplexes Styling" rel="lightbox" href="http://sprungmarker.de/wp-content/uploads/2010/05/timedtext_komplex.gif"><img src="http://sprungmarker.de/wp-content/uploads/2010/05/timedtext_komplex_small.gif" alt="Zur Bildvergrößerung: Screenshot Timed Text komplexes Styling" width="250" height="336" /></a>Das Anpassen auf globaler Ebene wird vom Flowplayer und ccPlayer unterstützt, der JW PLayer kann das bis dato nicht, aber es liegt ein Support-Ticket (<a href="http://developer.longtailvideo.com/trac/ticket/692">Ticket-692</a>) vor. Dieses Support-Ticket hat auch das <span xml:lang="en" lang="en">Styling</span> via <code>body</code>-, <code>div</code>- oder <code>p</code>-Element und das <span xml:lang="en" lang="en">Inline-Styling</span> via <code xml:lang="en" lang="en">span</code>-Element auf dem Plan. Wenn dieses Ticket live geht, unterstützt der JW Player dann weite Bereiche von <span xml:lang="en" lang="en">Timed Text</span>. Sonst unterstützt die volle stufige Palette nur der ccPlayer. Freilich auch hier wieder Abzüge, die Spezifikation <span xml:lang="en" lang="en">Timed Text</span> hat sehr viele Optionen, die noch kein Player unterstützt. Da hätte ich noch Tage testen können, um da eine vollständige Liste zu erarbeiten. Was unterstützt wird in jedem Fall sind wieder die <span xml:lang="en" lang="en">Basics</span> wie Farbe, Schrift, Größe oder kursiv. Werden Attribute nicht unterstützt, steht dann schon gerne null als Ausgabe in den <span xml:lang="en" lang="en">Captions</span>. ;)</p>
<p>So kann man im <code xml:lang="en" lang="en">style</code>-Element im Kopf der Datei mit Hilfe von mehreren Attributen wie <code>tts:fontSize="18"</code>﻿ &#8211; man reiht sie einfach aneinander &#8211; globale <span xml:lang="en" lang="en">Styles</span> für alle <span xml:lang="en" lang="en">Captions</span> oder mit Hilfe von IDs eindeutig einer <span xml:lang="en" lang="en">Caption</span> zuordnen. Im Element im <code>body</code> spricht man dann die ID an mit <code><span xml:lang="en" lang="en">style</span>="1"</code> als Beispiel. Damit erhält dann genau dieser Absatz oder <code>div</code> die im Kopf der Datei dafür definierten Formate. Man kann jedoch auch die Attribute wie <code>tts:backgroundColor="purple"</code>﻿ dann im <code>body</code> auf alles anwenden bis zur Mikroebene mit Hilfe eines <code xml:lang="en" lang="en">span</code>-Elementes. Auch hierbei können unterschiedliche Attribute schlicht aneinander gereiht werden. So würde man um einen Bereich der <span xml:lang="en" lang="en">Caption</span> kursiv und fett zu machen, dann im <code xml:lang="en" lang="en">span</code>-Element die Attribute <code>tts:fontStyle="italic"﻿</code> und <code>tts:fontWeight﻿="bold"</code>﻿ hinzufügen. Individualisierung von <span xml:lang="en" lang="en">Captions</span> ist also durchaus auch ein wenig Arbeit. :)</p>
<h4>Weitere Besonderheiten</h4>
<p>Die Individualisierung des CC-<span lang="en" xml:lang="en">Buttons</span> wird von den meisten Playern unterstützt, der Standard-Wortlaut <em>CC</em> für <span lang="en" xml:lang="en">Closed Captions</span> ist vielleicht nicht immer verständlich, wenn gleich standardisiert im Englischen. Ganz so einfach ist es dann jedoch doch nicht. Der ccPlayer bietet nur an, dass  man den <span xml:lang="en" lang="en">Button</span> in der fla-Datei ändert. Der Flowplayer lässt das Ändern bis dato im <span xml:lang="en" lang="en">Captions-Plugin</span> nicht zu. Der JW Player lässt die Änderung zwar zu, man muss aber dann das <span xml:lang="en" lang="en">Captions-Plugin</span> neu kompilieren, was ja eher dann in Richtung Entwicklung geht. Aber es gibt ein Support-Ticket (<a href="http://developer.longtailvideo.com/trac/ticket/692">Ticket#692</a>), das verspricht, den <span xml:lang="en" lang="en">Button</span> skinfähig zu machen. Also bis dato ist die Anpassung des <span xml:lang="en" lang="en">Buttons</span> eher noch ein Sonderfall.</p>
<p><a class="ImgRightLink" title="Screenshot Collage Sonderfunktionen Caption ccPlayer" rel="lightbox" href="http://sprungmarker.de/wp-content/uploads/2010/05/cc_player_settings.jpg"><img src="http://sprungmarker.de/wp-content/uploads/2010/06/cc_player_settings_small.jpg" alt="Zur Bildvergrößerung: Screenshot Collage Sonderfunktionen Caption ccPlayer" width="250" height="305" /></a>Im Grunde war es das dann schon mit dem Individualisieren der <span xml:lang="en" lang="en">Captions</span>. Nur der ccPlayer bietet darüber hinaus noch weitere spannende Funktionen an. So kann man die <span xml:lang="en" lang="en">Captions</span> auch durchsuchen. Dafür steht der <span xml:lang="en" lang="en">Button</span> <kbd xml:lang="en" lang="en">search</kbd> zur Verfügung, der öffnet einen <span xml:lang="en" lang="en">Layer</span> über dem Player und kann dann nach Worten oder Phrasen in den <span xml:lang="en" lang="en">Captions</span> suchen. Die Suche bezieht sich immer auf die grade angewählte Sprache und findet Wörter aus anderen Sprachen dann nicht. Mit Klick auf <kbd>Suchen</kbd> wird das gesuchte Wort dann direkt im Video angesprungen. Funktioniert ziemlich gut. Kann man auch in meinem <a href="http://sprungmarker.de/wp-content/uploads/mp/ccplayer/index_tt2.html" title="zum Beispiel ccPlayer mit Timed Text">Beispiel</a> testen.</p>
<p>Wie schon angeführt, kann der ccPlayer auch mit unterschiedlichen Sprachen arbeiten. Dazu muss man schlicht nur das <code>div</code>- oder <code>p</code>-Element mit dem <code xml:lang="en" lang="en">lang</code>-Attribut versehen für jede Sprache und schon kann man die Sprache im Player anwählen. Mit Klick auf den <span xml:lang="en" lang="en">Button</span> <kbd xml:lang="en" lang="en">languages</kbd> öffnet sich wieder ein <span xml:lang="en" lang="en">Layer</span> über dem Player und man kann im Select die Sprache auswählen. Auch das kann man in meinem <a href="http://sprungmarker.de/wp-content/uploads/mp/ccplayer/index_tt2.html" title="zum Beispiel ccPlayer mit Timed Text">Beispiel</a> testen, ich habe mal die <span xml:lang="en" lang="en">Captions</span> für Deutsch &#8211; okay ist eher Lorem Ipsum Latein &#8211; und Englisch angepasst. Das funktioniert auch gut. Freilich ist das jetzt die <code xml:lang="en" lang="en">lang</code>-Methode des ccPlayers nicht wirklich aus der Spezifikation von <span xml:lang="en" lang="en">Timed Text</span> ableitbar, wie sie betonen, aber ich finde das <code xml:lang="en" lang="en">lang</code>-Attribut ist ja schließlich durchaus bekannt und lässt sich verlässlich einsetzen. Der JW Player hat ebenfalls ein Support-Ticket (<a href="http://developer.longtailvideo.com/trac/ticket/692">Ticket#692</a>) für Mehrsprachigkeit, gelöst wird das wohl, indem man mit mehreren <span xml:lang="en" lang="en">Timed Text</span> Dateien arbeitet, für jede Sprache eine.</p>
<p>Eine weitere interessante Option im ccPlayer ist, den Darstellungsmodus für das Erscheinen der <span xml:lang="en" lang="en">Captions</span> &#8211; also wie sie in den Videorahmen reinlaufen &#8211; einzustellen. Der Default ist klassisch Popup, jede <span xml:lang="en" lang="en">Caption</span> ersetzt die andere. Aber man kann auch den <span xml:lang="en" lang="en">Rollup</span>-Modus einstellen und die Anzahl der Zeilen dafür. Die Zeilen der <span xml:lang="en" lang="en">Captions</span> rollen dann wie im Film rein, die erste Zeile bleibt immer nur solange, bis eine weitere am unteren Rand reinrollt. Wie im klassischen Filmabspann. Ich habe das mal angetestet, funktioniert aber nur teilweise. Eventuell gibt es da auch wieder Darstellungsprobleme, wenn man bestimmte Attribute von <span xml:lang="en" lang="en">Timed Text</span> verwendet. Aber prinzipiell funktioniert der <span xml:lang="en" lang="en">Rollup</span>-Modus.</p>
<h3>Beispiele</h3>
<p>Ich habe für den JW Player, Flowplayer und ccPlayer Beispiele mit <span xml:lang="en" lang="en">Captions</span>-Formaten erarbeitet. Die Player liegen im Standardmodus vor, also könnte es beim Flowplayer in der Bedienung Probleme geben, was die Barrierefreiheit betrifft. Dafür muss man ja erst immer noch weitere <span xml:lang="en" lang="en">Plugins</span> einbauen. Bei den anderen beiden dürfte es eigentlich keine Probleme geben. Die jeweilige <span xml:lang="en" lang="en">Captions</span>-Beispiel-Datei kann man sich auch ansehen und herunterladen:</p>
<ul>
<li><a href="http://sprungmarker.de/wp-content/uploads/mp/jwplayer/index_subrip.html">JW Player mit <span xml:lang="en" lang="en">SubRip</span>-Format</a></li>
<li><a href="http://sprungmarker.de/wp-content/uploads/mp/jwplayer/index_tt.html">JW Player mit <span xml:lang="en" lang="en">Timed Text</span> (einfaches HTML)</a></li>
<li><a href="http://sprungmarker.de/wp-content/uploads/mp/flowplayer/example/index_subrip.html">FlowPlayer mit <span xml:lang="en" lang="en">SubRip</span> Format</a></li>
<li><a href="http://sprungmarker.de/wp-content/uploads/mp/flowplayer/example/index_tt.html">Flow Player mit <span xml:lang="en" lang="en">Timed Text</span> (einfaches HTML)</a></li>
<li><a href="http://sprungmarker.de/wp-content/uploads/mp/flowplayer/example/index_tt2.html">Flowplayer mit <span xml:lang="en" lang="en">Timed Text</span> (gemäß Spezifikation &#8211; globale <span xml:lang="en" lang="en">Styles</span>)</a></li>
<li><a href="http://sprungmarker.de/wp-content/uploads/mp/ccplayer/index_qttext.html">ccPlayer mit QTtext</a></li>
<li><a href="http://sprungmarker.de/wp-content/uploads/mp/ccplayer/index_tt.html">ccPlayer mit <span xml:lang="en" lang="en">Timed Text</span> (einfaches HTML)﻿</a></li>
<li><a href="http://sprungmarker.de/wp-content/uploads/mp/ccplayer/index_tt2.html">ccPlayer mit <span xml:lang="en" lang="en">Timed Text</span> (gemäß Spezifikation)</a></li>
</ul>
<p class="wp-flattr-button"></p> <p><a href="http://sprungmarker.de/?flattrss_redirect&amp;id=1096&amp;md5=55fcbb4dbc5a0e7ef6b001eeab363946" title="Flattr" target="_blank"><img src="http://sprungmarker.de/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=zhBiaI5uQ14:ZTTmHf4mqbM:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?i=zhBiaI5uQ14:ZTTmHf4mqbM:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=zhBiaI5uQ14:ZTTmHf4mqbM:ewi2tLLrNnk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=ewi2tLLrNnk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=zhBiaI5uQ14:ZTTmHf4mqbM:eYgBPDbq7UE"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=eYgBPDbq7UE" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=zhBiaI5uQ14:ZTTmHf4mqbM:MxV00nO3qFw"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=MxV00nO3qFw" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=zhBiaI5uQ14:ZTTmHf4mqbM:aVEt4g-unHM"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=aVEt4g-unHM" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=zhBiaI5uQ14:ZTTmHf4mqbM:I9og5sOYxJI"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=I9og5sOYxJI" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SprungmarkerKompakt/~4/zhBiaI5uQ14" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://sprungmarker.de/2010/barrierefreiheit_mediaplayer_captioning/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://sprungmarker.de/2010/barrierefreiheit_mediaplayer_captioning/</feedburner:origLink></item>
		<item>
		<title>Barrierefreiheit &amp; Media Player: eine Kurzübersicht – Teil 1</title>
		<link>http://feedproxy.google.com/~r/SprungmarkerKompakt/~3/snx-qsYssYo/</link>
		<comments>http://sprungmarker.de/2010/barrierefreiheit_mediaplayer_eine_kurzuebersicht/#comments</comments>
		<pubDate>Mon, 24 May 2010 13:44:18 +0000</pubDate>
		<dc:creator>Egger Sylvia</dc:creator>
				<category><![CDATA[Barrierefreiheit]]></category>
		<category><![CDATA[Audiobeschreibung]]></category>
		<category><![CDATA[Caption]]></category>
		<category><![CDATA[ccPlayer]]></category>
		<category><![CDATA[Easy YouTube Player]]></category>
		<category><![CDATA[Flowplayer]]></category>
		<category><![CDATA[JWPlayer]]></category>
		<category><![CDATA[kompakt]]></category>
		<category><![CDATA[ODI Player]]></category>
		<category><![CDATA[Player]]></category>
		<category><![CDATA[Video]]></category>

		<guid isPermaLink="false">http://sprungmarker.de/?p=993</guid>
		<description><![CDATA[Die Einbindung von Videos mit Hilfe eines Players gehört ja mittlerweile zum Tagesgeschäft. Geht es dabei jedoch um barrierefreie Optimierung wie Captions oder Audiobeschreibung, sieht es im Standardsektor nicht immer rosig aus.
Da ich in diesem Sektor immer wieder auch ...]]></description>
			<content:encoded><![CDATA[<p class="summary">Die Einbindung von Videos mit Hilfe eines <span xml:lang="en" lang="en">Players</span> gehört ja mittlerweile zum Tagesgeschäft. Geht es dabei jedoch um barrierefreie Optimierung wie <span xml:lang="en" lang="en">Captions</span> oder Audiobeschreibung, sieht es im Standardsektor nicht immer rosig aus.</p>
<p>Da ich in diesem Sektor immer wieder auch auf der Suche bin, ob es nicht doch eine <span xml:lang="en" lang="en">All-in-one</span>-Lösung gibt, habe ich mich mal auf den Weg gemacht. Ein knappes Fazit gleich zu Beginn &#8211; im Grunde sind es gleich zwei: <span xml:lang="en" lang="en">Captions</span> &#8211; ich spreche bewusst nicht nur von Untertitelung &#8211; haben sich zu einem Quasi-Standard gemausert, die sind fast immer im <span xml:lang="en" lang="en">Player</span> integriert oder als <span xml:lang="en" lang="en">Plugin</span> integrierbar. Im Bereich der <span xml:lang="en" lang="en">Captions</span> unterscheidet sich Einbindung und <span xml:lang="en" lang="en">Finetuning</span> in den <span xml:lang="en" lang="en">Playern</span> eher sehr graduell.</p>
<p><span id="more-993"></span></p>
<p>Ganz anders sieht es für die Einbindung von Audiobeschreibungen aus, da sieht es eher finster aus und von einer Standardisierung ist man noch weit entfernt. Leider, muss man dazu sagen. Weil grade &#8211; sieht man sich das aktuelle WCAG 2 an &#8211; wird die Audiobeschreibung bereits auf <span xml:lang="en" lang="en">Level</span> A und AA gefordert. Gänzlich ohne Entsprechung in der Player-Landschaft ist die Integration einer <span xml:lang="en" lang="en">Extended Audiodescription</span>, gut die parallele Einbindung ist auch nicht so trivial, vor allem auch, weil das Format SMIL es eher komplexer angeht, als es für Standards eigentlich notwendig wäre.</p>
<p> Und das zweite, weitaus kürzere Fazit: Es gibt schlicht zu wenige Standard-<span xml:lang="en" lang="en">Player</span>, die sich auch auf die Barrierefreiheit einlassen. Gut, alle werden jetzt wieder in Richtung JW-<span xml:lang="en" lang="en">Player</span> nicken und das auch zurecht, aber es bewegt sich minimal auch in anderen <span xml:lang="en" lang="en">Playern</span> was Richtung Barrierefreiheit und das sehen wir uns jetzt hier genauer an:</p>
<h3><span xml:lang="en" lang="en">Media Player</span> und <span xml:lang="en" lang="en">Barrierefreiheit</span>: eine Kurzübersicht</h3>
<p>In meiner Kurzübersicht für den generellen Überblick, welche Player überhaupt in Frage kommen, bin ich neben der Einbindung von <span xml:lang="en" lang="en">Captions</span> und Audiobeschreibungen auch der Möglichkeit der Integration eines Trankskripts und von Gebärdensprache nachgegangen. Und &#8211; schließlich geht es ja um einen umfassenden barrierefreien Zugang &#8211; habe ich getestet, ob die Player jeweils tastaturbedienbar und mit <span xml:lang="en" lang="en">Screenreader</span> (<span xml:lang="en" lang="en">JAWS</span>) nutzbar sind &#8211; aber freilich ist das nur ein Kurztest.</p>
<table border="0" cellspacing="0" cellpadding="0" width="100%" summary="Übersichtstabelle Media Player - Barrierefreiheit">
<colgroup>
<col width="*" />
<col width="10%" />
<col width="10%" />
<col width="10%" />
<col width="10%" />
<col width="10%" />
<col width="10%" />
<col width="10%" />
	</colgroup>
<tr>
<th scope="col"><span lang="en">Media Player</span></th>
<th scope="col"><abbr title="Closed Caption" xml:lang="en" lang="en">CC</abbr></th>
<th scope="col"><abbr title="Audio Description" xml:lang="en" lang="en">AD</abbr></th>
<th scope="col"><abbr title="Extended Audio Description" xml:lang="en" lang="en">EAD</abbr></th>
<th scope="col">Transkript</th>
<th scope="col"><abbr title="Gebärdensprache">GS</abbr></th>
<th scope="col">tastatur-<br />bedienbar</th>
<th scope="col">Screenreader</th>
</tr>
<tr>
<th scope="row" class="row">JW <span xml:lang="en" lang="en">Player</span></th>
<td class="active">ja</td>
<td class="active">ja (<abbr title="closed" xml:lang="en" lang="en">c</abbr>)</td>
<td>nein</td>
<td>nein</td>
<td>nein</td>
<td class="active">ja</td>
<td class="active">ja</td>
</tr>
<tr>
<th scope="row" class="row"><span xml:lang="en" lang="en">Flowplayer</span></th>
<td class="active">ja</td>
<td class="active">ja</td>
<td>nein</td>
<td>nein</td>
<td>nein</td>
<td class="active">ja mit <span xml:lang="en" lang="en">HTML controlbar</span></td>
<td class="active">ja mit Überarbeitung von <span xml:lang="en" lang="en">HTML controlbar</span></td>
</tr>
<tr>
<th scope="row" class="row"><span xml:lang="en" lang="en">MALT</span> Wiki <span xml:lang="en" lang="en">Player</span> (Basis: <span xml:lang="en" lang="en">Flowplayer</span>)</th>
<td class="active">ja</td>
<td class="active">ja (<abbr title="closed" xml:lang="en" lang="en">c</abbr>)</td>
<td>nein</td>
<td class="active">ja</td>
<td>nein</td>
<td class="active">ja</td>
<td class="active">ja</td>
</tr>
<tr>
<th scope="row" class="row">cc<span xml:lang="en" lang="en">Player</span></th>
<td class="active">ja</td>
<td>nein</td>
<td>nein</td>
<td>nein</td>
<td>nein</td>
<td class="active">ja</td>
<td class="active">ja</td>
</tr>
<tr>
<th scope="row" class="row">Nomensa <span xml:lang="en" lang="en">Accessible Media Player</span></th>
<td class="active">ja</td>
<td>nein</td>
<td>nein</td>
<td class="active">ja</td>
<td>nein</td>
<td class="active">ja</td>
<td class="active">ja</td>
</tr>
<tr>
<th scope="row" class="row">flv <span xml:lang="en" lang="en">flash-fullscreen video player</span></th>
<td class="active">ja</td>
<td>nein</td>
<td>nein</td>
<td>nein</td>
<td>nein</td>
<td>minimal</td>
<td>nein</td>
</tr>
<tr>
<th scope="row" class="row">ODI <span xml:lang="en" lang="en">Player</span></th>
<td class="active">ja</td>
<td class="active">ja (<abbr title="closed" xml:lang="en" lang="en">c</abbr>)</td>
<td class="active">ja (<abbr title="closed" xml:lang="en" lang="en">c</abbr>)</td>
<td class="active">ja</td>
<td class="active">ja</td>
<td class="active">ja</td>
<td class="active">ja</td>
</tr>
</table>
<h4>Welche <span xml:lang="en" lang="en">Player</span> kommen für Barrierefreiheit nun in Frage?</h4>
<p><a href="http://sprungmarker.de/wp-content/uploads/2010/05/jw_player.jpg" rel="lightbox" title="Screenshot JW Player mit CC- und AD-Button aktiviert im Layermodus" class="ImgRightLink"><img src="http://sprungmarker.de/wp-content/uploads/2010/05/jw_player_small1.jpg" alt="Zur Bildvergrößerung: Screenshot JW Player mit CC- und AD-Button aktiviert" width="250" height="159" /></a>Den <a href="http://www.longtailvideo.com" hreflang="en" xml:lang="en" lang="en" title="zur Webseite des JW Players">JW <span xml:lang="en" lang="en">Player</span></a> muss man ja fast nicht mehr vorstellen, findet man ihn fast auf allen BIENE-Seiten. :) Er hat immer damit bestochen, dass er eine Rundum-Lösung geboten hat, <span xml:lang="en" lang="en">Captions</span> und Audiobeschreibung waren schlicht im Default des <span xml:lang="en" lang="en">Players</span> integriert. Das hat sich mittlerweile etwas verändert, <span xml:lang="en" lang="en">Caption</span> und Audiobeschreibung sind nun <span xml:lang="en" lang="en">Plugins</span> und müssen extra integriert werden. Prinzipiell kein Problem, das einzige Manko ist, dass sich die barrierefreien Plugins immer mal wieder weiterentwickeln &#8211; etwa ändern sich die Parameter-Namen und die <span xml:lang="en" lang="en">Update</span>-fähigkeit leidet darunter etwas. Das absolute Plus ist jedoch der Entwickler des <span xml:lang="en" lang="en">Players</span>, der sehr offen ist, diese beiden <span xml:lang="en" lang="en">Plugins</span> auf Anfrage auch weiter zu entwickeln &#8211; ich habe gerade einen kurzen Kontakt mit ihm geknüpft, um das <span xml:lang="en" lang="en">Plugin</span> für die Audiobeschreibung etwas voran zu bringen. Aber dazu mehr in den Details. :) Der JW <span xml:lang="en" lang="en">Player</span> ist mit dem Screenreader nutzbar und auch tastaturbedienbar.</p>
<p><a href="http://sprungmarker.de/wp-content/uploads/2010/05/flow_player.jpg" rel="lightbox" title="Screenshot Flowplayer mit aktivierer Closed Caption" class="ImgRightLink"><img src="http://sprungmarker.de/wp-content/uploads/2010/05/flow_player_small.jpg" alt="Zur Bildvergrößerung: Screenshot Flowplayer mit aktivierer Closed Caption" width="250" height="168" /></a>Der <a href="http://flowplayer.org/" xml:lang="en" lang="en" hreflang="en" title="zur Webseite des Flowplayers">Flowplayer</a> wird gerne eingesetzt, weil er <span xml:lang="en" lang="en">trendy</span> ist und schlicht immer schon etwas besser anpassbar war, was die Oberfläche betrifft. Da hat der JW <span xml:lang="en" lang="en">Player</span> im übrigen mittlerweile aufgeholt, die gesamte Oberfläche lässt sich jetzt inklusive Grafiken mit Hilfe einer XML-Datei individualisieren. Aber der <span xml:lang="en" lang="en">Flowplayer</span> bedient sich ebenso der <span xml:lang="en" lang="en">Plugin</span>-Architektur und bietet so <span xml:lang="en" lang="en">Captions</span> an. Aber dann wird es eher haarig, sieht man sich nach der Audiobeschreibung um, wird auf das Audio-<span xml:lang="en" lang="en">Plugin</span> verwiesen. Was meint, man führt schlicht eine Mp3-Datei synchron zum Video. Mehr aber auch nicht. Der <span xml:lang="en" lang="en">Flowplayer</span> ist von Haus aus nicht tastaturbedienbar, kann aber mit Hilfe des <span xml:lang="en" lang="en">Plugins</span> <a href="http://flowplayer.org/plugins/flash/controlbar.html" xml:lang="en" lang="en" hreflang="en" title="zum Plugin Controlbar des Flowplayer">Controlbar</a> tastaturbedienbar gemacht werden und ist dadurch auch mit dem <span xml:lang="en" lang="en">Screenreader</span> nutzbar.</p>
<p><a href="http://sprungmarker.de/wp-content/uploads/2010/05/maltwiki_player.jpg" rel="lightbox" title="Screenshot MALT Wiki Player mit aktivierter Closed Caption" class="ImgRightLink"><img src="http://sprungmarker.de/wp-content/uploads/2010/05/maltwiki_player_small.jpg" alt="Zur Bildvergrößerung: Screenshot MALT Wiki Player mit aktivierter Closed Caption" width="250" height="196" /></a>Der <a href="http://maltwiki.org" hreflang="en" title="zur Webseite des MALT Wiki Players"><span xml:lang="en" lang="en">MALT</span> Wiki <span xml:lang="en" lang="en">Player</span></a> ist ein durch die <span xml:lang="en" lang="en">Community</span> vorangetriebenes Projekt und basiert auf dem <span xml:lang="en" lang="en">Flowplayer</span>. Leider kann man <span xml:lang="en" lang="en">online</span> bis dato nur Beispiele des <span xml:lang="en" lang="en">Players</span> mit <span xml:lang="en" lang="en">Captions</span> sehen, aber sie weisen darauf hin, dass die Beispiele für Audiobeschreibungen noch integriert werden. Der Player bietet auch einen ziemlich umfangreichen Einstellungsbereich, wo man seine allgemeinen Präferenzen anwählen kann &#8211; etwa <span xml:lang="en" lang="en">Captions</span>, Audiobeschreibung oder Transkript. Das ist schon eine ziemliche Weiterentwicklung des <span xml:lang="en" lang="en">Flowplayers</span>. Der <span xml:lang="en" lang="en">MALT</span> Wiki <span xml:lang="en" lang="en">Player</span> ist tastaturbedienbar und mit <span xml:lang="en" lang="en">Screenreader</span> nutzbar.</p>
<p><a href="http://sprungmarker.de/wp-content/uploads/2010/05/cc_player.jpg" rel="lightbox" title="Screenshot ccPlayer mit aktivierten Closed Captions" class="ImgRightLink"><img src="http://sprungmarker.de/wp-content/uploads/2010/05/cc_player_small.jpg" alt="Zur Bildvergrößerung: Screenshot ccPlayer mit aktivierten Closed Captions" width="250" height="190" /></a>Der <a href="http://ncam.wgbh.org/invent_build/web_multimedia/tools-guidelines/ccplayer" hreflang="en" title="zur Webseite des ccPlayers">cc<span xml:lang="en" lang="en">Player</span></a> hat bis dato noch keine Integration von Audiobeschreibungen, ist aber hinsichtlich <span xml:lang="en" lang="en">Captions</span> ziemlich ausgefeilt. Ich denke, diesen Player sollte man auch beobachten, was sich da noch entwickelt. So ist für <span xml:lang="en" lang="en">Captions</span> eine Suche integriert und es sind auch mehrsprachige <span xml:lang="en" lang="en">Captions</span> möglich. Wichtig ist dem <span xml:lang="en" lang="en">Player</span> die Tastaturbedienbarkeit und er ist auch mit <span xml:lang="en" lang="en">Screenreader</span> nutzbar.</p>
<p><a href="http://sprungmarker.de/wp-content/uploads/2010/05/nomensa_player.jpg" rel="lightbox" title="Screenshot Nmensa Accessible Media Player" class="ImgRightLink"><img src="http://sprungmarker.de/wp-content/uploads/2010/05/nomensa_player_small.jpg" alt="Zur Bildvergrößerung: Screenshot Nmensa Accessible Media Player" width="250" height="116" /></a>Den <a href="http://www.nomensa.com/web-accessibility/what-we-do/accessible-media-player" hreflang="en" title="zur Webseite des Nomensa Players">Nomensa <span xml:lang="en" lang="en">Accessible Media Player</span></a> habe ich immer mal am Rande wahrgenommen, es gab früher auch noch mehr Einsicht in die Funktionen des <span xml:lang="en" lang="en">Players</span>. Mittlerweile sind nur noch wenige Infos zu diesem <span xml:lang="en" lang="en">Player</span> online erhältlich, auf alle Fälle unterstützt er <span xml:lang="en" lang="en">Captions</span>. Es ist wohl auch von der Integration eines Transkripts die Rede, aber Beispiele kann man davon leider nicht finden. Ich fand das Projekt aber immer schon recht spannend, vor allem weil sehr viel Wert auf Tastaturbedienbarkeit und Nutzbarkeit mit <span xml:lang="en" lang="en">Screenreadern</span> gelegt wird.</p>
<p><a href="http://sprungmarker.de/wp-content/uploads/2010/05/flvflash_player.jpg" rel="lightbox" title="Screenshot flv flash-fullscreen video player mit offener Caption" class="ImgRightLink"><img src="http://sprungmarker.de/wp-content/uploads/2010/05/flvflash_player_small.jpg" alt="Zur Bildvergrößerung: Screenshot flv flash-fullscreen video player mit offener Caption" width="250" height="219" /></a>Um auch mal das typische Mittelfeld in der barrierefreien Optimierung quasi als Vergleichsgröße einfließen zu lassen, habe ich mir den <a href="http://www.video-flash.de/flv-flash-fullscreen-video-player/" title="zur Webseite des flv flash-fullscreen video-player">flv <span xml:lang="en" lang="en">flash-fullscreen video player</span></a> angesehen. Außer der Unterstützung von Captions und einem minimalen Durchkommen per Tastatur ist der Player sonst nicht barrierefrei. So, das war jetzt die berühmte Kontrollgruppe. ;)</p>
<p><a href="http://sprungmarker.de/wp-content/uploads/2010/05/odi_player.jpg" rel="lightbox" title="Screenshot ODI Media Player mit aktivierter Closed Caption" class="ImgRightLink"><img src="http://sprungmarker.de/wp-content/uploads/2010/05/odi_player_small.jpg" alt="Zur Bildvergrößerung: Screenshot ODI Media Player" width="250" height="275" /></a>Ein absolutes Gusto-Stück unter den Playern ist der <a href="http://www.officefordisability.gov.uk/player/" hreflang="en" title="zur Webseite des ODI Player">ODI <span xml:lang="en" lang="en">Player</span></a>. Ich werde da mal anfragen, wie und ob man den kommerziell einbauen kann. Im Interview ist zu hören, dass sie eine kommerzielle Nutzung erwägen, das wäre sehr wünschenswert. Würde man eine <span xml:lang="en" lang="en">All-in-one</span>-Lösung suchen, hat man sie mit diesem <span xml:lang="en" lang="en">Player</span> tatsächlich gefunden. Der <span xml:lang="en" lang="en">Player</span> unterstützt &#8211; und das ziemlich <span xml:lang="en" lang="en">smooth</span> bedienbar &#8211; Captions, Audiobeschreibung, Erweiterte Audiobeschreibung, Gebärdensprache, Transkript, ist tastaturbedienbar und mit <span xml:lang="en" lang="en">Screenreader</span> nutzbar. Gut, nicht jede Webseite will so einen mächtigen <span xml:lang="en" lang="en">Player</span>, der auch ziemlich Raum einnimmt, aber vom integrativen Ansatz her ist das schon ziemlich weit vorn. Alle Funktionen und Formate sind im Flash des Players integriert, daher ist es schwer zu sagen, wie die Einbindung genau funktioniert und welche Formate unterstützt werden. Eine Frage, die man ja auf Anfrage klären kann, ist, ob der Player auch schmaler einsetz- und individualisierbar ist.</p>
<p>Und das war&#8217;s auch schon von der <span xml:lang="en" lang="en">Player</span>-Seite her. Würde man sich jetzt auch noch jene Player, die ausschließlich YouTube integrieren, ansehen, könnte man da auch noch mehr <span xml:lang="en" lang="en">Player</span> bieten wie etwa den <a href="http://icant.co.uk/easy-youtube/" title="zum Easy YouTube Player" xml:lang="en" lang="en" hreflang="en">Easy YouTube Player</a> von Chris Heilmann. Im übrigen gibt es gerade für den <span xml:lang="en" lang="en">YouTube</span>-Bereich durchaus einige barrierefreie Ansätze. Aber: ich habe aus einer agenturtypischen Sichtweise <span xml:lang="en" lang="en">Player</span> gesucht für Kunden, die ihre Videos auf der Webseite präsentieren wollen, nicht via <span xml:lang="en" lang="en">YouTube</span>. Auch gibt es durchaus Unterschiede im Preis, die Preislage des JW Players oder <span xml:lang="en" lang="en">Flowplayers</span> hält sich ja in Grenzen, wenn es sich etwa nur auf eine <span xml:lang="en" lang="en">Domain</span> bezieht. Und bei einigen Playern muss man schlicht anfragen, wie viel die Nutzung letztlich kosten würde. Eine kleine Übersicht dazu:</p>
<h4><span xml:lang="en" lang="en">Media Player</span> und Barrierefreiheit: Allgemeine Infos</h4>
<table border="0" cellspacing="0" cellpadding="0" width="100%" summary="Übersichtstabelle Media Player - Allgmeine Infos">
<colgroup>
<col width="*" />
<col width="25%" />
<col width="10%" />
<col width="10%" />
<col width="10%" />
	</colgroup>
<tr>
<th scope="col"><span lang="en">Media Player</span></th>
<th scope="col">Medien</th>
<th scope="col"><span xml:lang="en" lang="en">YouTube</span></th>
<th scope="col">Lizenz</th>
<th scope="col"><span xml:lang="en" lang="en">Themable</span></th>
</tr>
<tr>
<th scope="row" class="row"><a href="http://www.longtailvideo.com" hreflang="en" xml:lang="en" lang="en" title="zur Webseite des JW Players">JW <span xml:lang="en" lang="en">Player</span></a></th>
<td class="left">FLV, H.264, Mp4, Mp3, AAC, Streaming</td>
<td>ja</td>
<td class="left"><span xml:lang="en" lang="en">Noncommercial-Share Alike</span><br />kommerziell</td>
<td>ja</td>
</tr>
<tr>
<th scope="row" class="row"><a href="http://flowplayer.org/" xml:lang="en" lang="en" hreflang="en" title="zur Webseite des Flowplayers">Flowplayer</a></th>
<td class="left">FLV, H.264, Mp4, Mp3, Streaming</td>
<td>nein</td>
<td class="left"><abbr title="GNU general public licence" xml:lang="en" lang="en">GPL</abbr><br />kommerziell</td>
<td>ja</td>
</tr>
<tr>
<th scope="row" class="row"><a href="http://maltwiki.org" hreflang="en" title="zur Webseite des MALT Wiki Players"><span xml:lang="en" lang="en">MALT</span> Wiki <span xml:lang="en" lang="en">Player</span></a> (Basis: <span xml:lang="en" lang="en">Flowplayer</span>)</th>
<td class="left">nein</td>
<td>ja</td>
<td class="left">auf Anfrage</td>
<td>ja</td>
</tr>
<tr>
<th scope="row" class="row"><a href="http://ncam.wgbh.org/invent_build/web_multimedia/tools-guidelines/ccplayer" hreflang="en" title="zur Webseite des ccPlayers">cc<span xml:lang="en" lang="en">Player</span></a></th>
<td class="left">FLV, H.264, Mp4, Mp3</td>
<td>nein</td>
<td class="left">keine</td>
<td>ja</td>
</tr>
<tr>
<th scope="row" class="row"><a href="http://www.nomensa.com/web-accessibility/what-we-do/accessible-media-player" hreflang="en" title="zur Webseite des Nomensa Players">Nomensa <span xml:lang="en" lang="en">Accessible Media Player</span></a></th>
<td class="left">ja, zu wenige Infos</td>
<td>ja</td>
<td class="left">kommerziell</td>
<td>ja</td>
</tr>
<tr>
<th scope="row" class="row"><a href="http://www.video-flash.de/flv-flash-fullscreen-video-player/" title="zur Webseite des flv flash-fullscreen video-player">flv <span xml:lang="en" lang="en">flash-fullscreen video player</span></a></th>
<td class="left">FLV, H.264, Mp4, Streaming</td>
<td>nein</td>
<td class="left">gratis unter <abbr title="GNU Lesser General Public License" xml:lang="en" lang="en">LGPL</abbr></td>
<td>ja</td>
</tr>
<tr>
<th scope="row" class="row"><a href="http://www.officefordisability.gov.uk/player/" hreflang="en" title="zur Webseite des ODI Player">ODI <span xml:lang="en" lang="en">Player</span></a></th>
<td class="left">keine Infos</td>
<td>nein</td>
<td class="left">auf Anfrage</td>
<td>nein</td>
</tr>
</table>
<p>Diese Kurzübersicht der Standard-Player hat uns gezeigt, dass die Auswahl, je diffiziler die barrierefreien Anforderungen werden, immer kleiner wird. Das ist  sehr schade, schließlich gibt es die Anforderung einer Audiobeschreibung nicht erst seit heute. Aber wie der Entwickler des JW Players auf meine Anfrage zum Plugin für eine erweiterte Audiobeschreibung meinte, da würde der Aufwand nicht wirklich in einem Verhältnis zur tatsächlichen Nutzung stehen. Ich hoffe aber, dass er sich trotzdem das noch einmal durch den Kopf gehen lassen wird. Diese Argumente hört man ja öfter &#8211; das typische massenkompatible Argument -, wenn eine barrierefreie Optimierung nur wenige nutzen, warum sollte man dann den Aufwand treiben. Ich sage dann immer, wenn es auch nur wenige nutzen, können es zum einen immer noch mehr werden und im Web geht es schließlich auch um Spezialisierung. Wie viele Spezialfeatures setzen wir denn sonst ein und kein Mensch fragt, wer das alles nutzen wird. :)</p>
<h3>Barrierefreiheit &#038; Media Player: im Detail</h3>
<p>Wir sehen uns nun im Detail an, was die Player im Bereich der <span xml:lang="en" lang="en">Captions</span> und Audiobeschreibung wirklich zu bieten haben:</p>
<ul>
<li><a href="http://sprungmarker.de/2010/barrierefreiheit_mediaplayer_captioning/"><span xml:lang="en" lang="en">Media Player</span> und Barrierefreiheit: <span xml:lang="en" lang="en">Captioning</span> &#8211; Teil 2</a></li>
<li><span xml:lang="en" lang="en">Media Player</span> und Barrierefreiheit: Audiobeschreibung &#8211; Teil 3 (In Kürze)</li>
</ul>
<p class="wp-flattr-button"></p> <p><a href="http://sprungmarker.de/?flattrss_redirect&amp;id=993&amp;md5=47a73ce7b12b4587e05583b303197618" title="Flattr" target="_blank"><img src="http://sprungmarker.de/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=snx-qsYssYo:48oeTQRwDdg:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?i=snx-qsYssYo:48oeTQRwDdg:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=snx-qsYssYo:48oeTQRwDdg:ewi2tLLrNnk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=ewi2tLLrNnk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=snx-qsYssYo:48oeTQRwDdg:eYgBPDbq7UE"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=eYgBPDbq7UE" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=snx-qsYssYo:48oeTQRwDdg:MxV00nO3qFw"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=MxV00nO3qFw" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=snx-qsYssYo:48oeTQRwDdg:aVEt4g-unHM"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=aVEt4g-unHM" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=snx-qsYssYo:48oeTQRwDdg:I9og5sOYxJI"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=I9og5sOYxJI" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SprungmarkerKompakt/~4/snx-qsYssYo" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://sprungmarker.de/2010/barrierefreiheit_mediaplayer_eine_kurzuebersicht/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://sprungmarker.de/2010/barrierefreiheit_mediaplayer_eine_kurzuebersicht/</feedburner:origLink></item>
		<item>
		<title>Was ist Barrierefreiheit – meine Vorträge</title>
		<link>http://feedproxy.google.com/~r/SprungmarkerKompakt/~3/REqz9-CEYqM/</link>
		<comments>http://sprungmarker.de/2010/was_ist_barrierefreiheit_meine_vortraege/#comments</comments>
		<pubDate>Fri, 21 May 2010 07:56:35 +0000</pubDate>
		<dc:creator>Egger Sylvia</dc:creator>
				<category><![CDATA[Barrierefreiheit]]></category>
		<category><![CDATA[Extern]]></category>
		<category><![CDATA[Webstandards]]></category>
		<category><![CDATA[Alternativtext]]></category>
		<category><![CDATA[kompakt]]></category>
		<category><![CDATA[Screenreader]]></category>
		<category><![CDATA[Semantik]]></category>
		<category><![CDATA[Slideshare]]></category>
		<category><![CDATA[Vortrag]]></category>

		<guid isPermaLink="false">http://sprungmarker.de/?p=1033</guid>
		<description><![CDATA[Seit kurzem habe ich die Möglichkeit, turnusmäßig und dann geblockt Einführungsvorträge zur Barrierefreiheit zu halten. Das ist ziemlich spannend. :)
Es war zwar ein kleines Hauruck-Unternehmen, weil der erste Vortrag sehr knapp terminiert war, aber da die Vorträge ja nun ...]]></description>
			<content:encoded><![CDATA[<p class="summary">Seit kurzem habe ich die Möglichkeit, turnusmäßig und dann geblockt Einführungsvorträge zur Barrierefreiheit zu halten. Das ist ziemlich spannend. :)</p>
<p>Es war zwar ein kleines Hauruck-Unternehmen, weil der erste Vortrag sehr knapp terminiert war, aber da die Vorträge ja nun turnusmäßig stattfinden, kann ich die Präsentation Schritt für Schritt ausbauen und entlang der Erfahrungen optimieren. Die jeweils aktuelle Präsentation packe ich dann auf <a href="http://www.slideshare.net/sprungmarker" xml:lang="en" lang="en" hreflang="en">Slideshare</a>.</p>
<p><span id="more-1033"></span></p>
<p>Als barrierefreie Entwicklerin, das war die erste Erfahrung aus den beiden Vorträgen der letzten Wochen, muss ich wieder lernen, auf einen allgemein verständlichen Erklärungslevel zu kommen. Daher fand ich ganz direkte Fragen gut wie ist ein <span xml:lang="en" lang="en">Screenreader</span> nun Hard- oder Software. Oder wie funktioniert jetzt nun genau eine Braillezeile oder wie formuliere ich denn wirklich einen Alternativtext für blinde Nutzer. Und nicht alles ist wirklich einfach zu beantworten, schließlich kenne ich Braillezeilen auch nur aus zweiter Hand. :) Aber &#8211; und das ist halt das spannende für mich &#8211; ich nehme das zum Anlass, um mir eben so ein Arbeiten mit Braillezeile genauer anzusehen, kaufen kann ich mir freilich keine, weil zu teuer (auch bei <span xml:lang="en" lang="en">Ebay</span> nicht billiger zu haben ;) ) und auch nicht braille-kundig. Immerhin weiß ich jetzt, was ein <em>anerkanntes Hilfsmittel</em> ist und was von der Krankenkasse bezahlt wird.</p>
<p>Und was mir am besten gefallen hat, waren die vielen direkten Fragen, fast schon Debatten. Das hat mich mitunter auch ein wenig aus der Vortragsraison gebracht, weil ich ja durch die Debatten im Galopp schon fast dann quer durch den Vortrag war. Aber &#8211; und auch das macht durchaus Spaß &#8211; die Vorträge haben halt auch diesen überlappenden Seminarcharakter. Am Ende des Vortrags &#8211; nach einer angemessenen Pause natürlich &#8211; hätte ich gerne noch einen Aufbauvortrag gehalten. :)</p>
<p>Insofern harre ich der Vorträge, die da nun immer wieder kommen werden &#8230; :)</p>
<h3><a href="http://www.slideshare.net/sprungmarker/was-ist-barrierefreiheit-1805-2010-4130601" title="Was ist Barrierefreiheit? (18.05. 2010)- zur Präsentation auf slideshare">Was ist Barrierefreiheit? (18.05. 2010)</a></h3>
<p><object type="application/x-shockwave-flash" data="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=koelnseggervortrag02movofficeopt-100517174200-phpapp01&#038;stripped_title=was-ist-barrierefreiheit-1805-2010-4130601" width="100%" height="400"><param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=koelnseggervortrag02movofficeopt-100517174200-phpapp01&#038;stripped_title=was-ist-barrierefreiheit-1805-2010-4130601" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/></object></p>
<p><a href="http://www.slideshare.net/sprungmarker" hreflang="en">Meine Präsentationen</a> auf <a href="http://www.slideshare.net/sprungmarker" hreflang="en" lang="en" xml:lang="en">slideshare</a>.</p>
<p>Meine Vorträge arbeiten sehr intensiv mit <span xml:lang="en" lang="en">Screencasts</span>, die sind natürlich in <span xml:lang="en" lang="en">slideshare</span> nicht enthalten. Und weil ich ja in Übung bleiben will, werde ich auch die in <span xml:lang="en" lang="en">slideshare</span> integrierte und herunterladbare PDF-Datei so weit wie möglich barrierefrei gestalten. Ich werde die dann auch hier verlinken. Gerne dann Rückmeldung zum barirerefreien PDF, wenn es Probleme damit gibt, gerne auch ganz direkt. :)</p>
<h3><span xml:lang="en" lang="en">Update</span></h3>
<p>So, jetzt habe ich die PDF-Datei barrierefrei aufgearbeitet: <a href="http://www.sprungmarker.de/wp-content/uploads/vortrag_180510_last.pdf" title="Den Vortrag herunterladen">Was ist Barrierefreiheit? Ein Kurztest (PDF-Datei, 2,8 Mb)</a>. An Sprachauszeichnung und Abkürzungs-Einbindung habe ich mich nach Stunden jetzt nicht mehr herangetraut. Die Umfliessen-Ansicht ist nicht zu empfehlen. ;) Ich denke, da muss ich mich erst genauer heranarbeiten, weil ich fürchte, dafür sollte man wohl am Ausgangspunkt ansetzen: am generellen Layout der Präsentation.</p>
<p class="wp-flattr-button"></p> <p><a href="http://sprungmarker.de/?flattrss_redirect&amp;id=1033&amp;md5=35aebc8ebb7171892d678efaf79ae2f4" title="Flattr" target="_blank"><img src="http://sprungmarker.de/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=REqz9-CEYqM:fTpz0iOGAs4:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?i=REqz9-CEYqM:fTpz0iOGAs4:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=REqz9-CEYqM:fTpz0iOGAs4:ewi2tLLrNnk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=ewi2tLLrNnk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=REqz9-CEYqM:fTpz0iOGAs4:eYgBPDbq7UE"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=eYgBPDbq7UE" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=REqz9-CEYqM:fTpz0iOGAs4:MxV00nO3qFw"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=MxV00nO3qFw" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=REqz9-CEYqM:fTpz0iOGAs4:aVEt4g-unHM"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=aVEt4g-unHM" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=REqz9-CEYqM:fTpz0iOGAs4:I9og5sOYxJI"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=I9og5sOYxJI" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SprungmarkerKompakt/~4/REqz9-CEYqM" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://sprungmarker.de/2010/was_ist_barrierefreiheit_meine_vortraege/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://sprungmarker.de/2010/was_ist_barrierefreiheit_meine_vortraege/</feedburner:origLink></item>
		<item>
		<title>Das Webstandards-Magazin geht ins zweite Jahr</title>
		<link>http://feedproxy.google.com/~r/SprungmarkerKompakt/~3/5Fj5xAlKJFA/</link>
		<comments>http://sprungmarker.de/2010/das_webstandards_magazin_geht_ins_zweite_jahr/#comments</comments>
		<pubDate>Wed, 24 Mar 2010 22:17:14 +0000</pubDate>
		<dc:creator>Egger Sylvia</dc:creator>
				<category><![CDATA[Webstandards]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[Magazin]]></category>
		<category><![CDATA[mobil]]></category>
		<category><![CDATA[RGBa]]></category>
		<category><![CDATA[Webapp]]></category>
		<category><![CDATA[WYSIWYG]]></category>

		<guid isPermaLink="false">http://sprungmarker.de/?p=982</guid>
		<description><![CDATA[Ausgabe 5 des Webstandards-Magazins ist ab morgen im Handel, das Abo hat meine Agentur schon vorab erreicht und wird mir schön regelmäßig auf den Schreibtisch gelegt. Normalweise packe ich das Heft dann sofort in den Gemeinschaftsraum. Diesmal hab ich ...]]></description>
			<content:encoded><![CDATA[<p class="summary">Ausgabe 5 des <a href="http://www.webstandards-magazin.de/" title="zur Webseite des Magazins">Webstandards-Magazins</a> ist ab morgen im Handel, das Abo hat meine Agentur schon vorab erreicht und wird mir schön regelmäßig auf den Schreibtisch gelegt. Normalweise packe ich das Heft dann sofort in den Gemeinschaftsraum. Diesmal hab ich es aber glatt mit nach Hause genommen und auch gelesen. Wie kommt das?</p>
<p><img src="http://www.sprungmarker.de/wp-content/uploads/webstandardsmag-picto.jpg" alt="Cover Webstandards-Magazin- Heft 05/10" width="200" height="196" class="ImgRight" />Angst ist ein schlechter Ratgeber. Auch so eine Binsenweisheit, an die man sich auch noch hält. Als ich gestern frühmorgens angekündigt hatte, dass ich &#8211; wenn ich das Heft schon mal lese &#8211; auch gleich eine Rezension mache, kam via <cite><a href="http://twitter.com/webstandardsmag/status/10937420348" title="zum Tweet bei Twitter">Twitter vom Webstandards-Magazin</a></cite> zurück: <q>Ganz Düsseldorf duckt sich schon mal ;)</q>. Gut, was soll ich sagen &#8211; sie haben recht und auch wieder nicht. Was nicht von mir zu erwarten ist, eine Rezension, die sich bedeckt hält. Warum auch, das Webstandards-Magazin hat nichts zu verstecken, es hat freilich noch einiges versteckt, aber darauf komme ich in meinem Fazit zurück.</p>
<p>Ich habe lange überlegt, wie man das Heft am besten in eine Rezension packt und mich für eine thematische, subjektive Auswahl entschieden mit einem kleinen, ebenso subjektivem Ausblick, was mir noch fehlt.</p>
<p><span id="more-982"></span></p>
<h3>Warum ich das Magazin nach Hause genommen habe?</h3>
<p>Zum einen sicherlich, weil die letzte Ausgabe, die ich auch wirklich gelesen habe, Ausgabe 2 war. Das spricht jetzt weder gegen das Magazin, noch für mich. :) Ich bin nur manchmal so im Umgang mit Geschenken, dass ich sie schlicht ziemlich lang liegen lasse. Und Abos, speziell in Agenturen, sind nun mal Geschenke. Zum anderen hat mich der aktuelle <a href="http://www.webstandards-magazin.de/index.php/index/05-10-mobil" title="zum Inhaltsverzeichnis des aktuellen Heftes">Schwerpunkt <em>mobil</em></a> schlicht dazu verführt, weil ich da in den letzten Monaten ein wenig affiziert wurde durch <a href="http://sprungmarker.de/2010/rueckschau_auf_2009_und_ausblick_auf_2010/" title="mehr Infos dazu in meinem Jahresüberblick">zwei Webinare zum Thema</a>.</p>
<p>Entsprechend zielgerichtet habe ich auf den Schwerpunkt hin gelesen, okay &#8211; zugegeben &#8211; zuerst lese ich immer die Artikel zum Thema Barrierefreiheit. Aus dem ganzen Heft hat mir der schmale bis kurzweilige Artikel zu <em><span xml:lang="en" lang="en">Location Based Games</span></em> am besten gefallen und damit will ich keinesfalls dem Herausgeber schmeicheln. ;) Wer schon auf harmlosen Sonntagsspaziergängen erlebt hat, wie der Partner plötzlich das Wort <a href="http://www.geocaching.de/" title="mehr Infos zum Geocaching">Geo<span xml:lang="en" lang="en">caching</span></a> ins Rennen wirft und unbedingt Verstecktes via <span xml:lang="en" lang="en">iPhone</span> suchen will, weiß, dass die in diesem Artikel vorgestellten <span xml:lang="en" lang="en">Play-Caching-Sessions</span> um einiges verschärfter sind. Selten so gelacht, ich sag dazu ja immer, ein Waldstreifen ist mir da immer um einiges interessanter. Oder um es mit ein wenig mehr Medientheorie zu sagen &#8211; <a href="http://en.wikipedia.org/wiki/Raymond_Williams" title="zur Information zu Raymond Williams" xml:lang="en" lang="en" hreflang="en">Raymond Williams</a> nannte das schon sehr früh die Tendenz zur <em>mobilen Privatisierung</em> -, man hat immer sein Wohnzimmer dabei und kommt aber trotzdem viel rum. ;) Freilich hat der Anspruch, warum man sich solchen <span xml:lang="en" lang="en">Reality</span>-Spielen hingeben soll, etwas eher <span xml:lang="en" lang="en">wellness</span>haftes. Aber womöglich ist es das genau, die <span xml:lang="en" lang="en">Wellness</span>. Ich hätte mir da ein wenig mehr Anarchismus gewünscht, schließlich operieren diese Spielansätze tatsächlich auf einer historisch gängigen Praxis der Realitäts- und Stadterkundung jenseits gängiger Routen und Vorgaben &#8211; als Beispiel wären die Techniken der <a href="http://de.wikipedia.org/wiki/Situationistische_Internationale#Wichtige_Begriffe" title="weiter Informationen zum Situationismus">Situationisten</a> hier zu nennen. Aber wie schon gesagt, habe mir sofort einiges notiert und werde mich da weiter damit beschäftigen. Danke dafür!</p>
<p>Der Artikel zu <a href="http://de.wikipedia.org/wiki/Mobile_Tagging" title="mehr Infos zu Mobile Tagging in der Wikipedia"><span xml:lang="en" lang="en">Mobile Tagging</span></a> von André Wussow war sehr passend, hätte ich keinen <span xml:lang="en" lang="en">iPod Touch</span>, würde ich das sicherlich massiv nützen, schon weil ich Codes sehr mag. Das Thema <em><span xml:lang="en" lang="en">Browser</span>weichen</em> (Tim Böttiger) wird besonders für mobil wieder wichtiger. Ich hätte mir da aber einen Zugang gewünscht, der sich mehr mit Standards beschäftigt. Freilich können wir auch wieder anfangen, diese Voll-PHP-<span xml:lang="en" lang="en">User-Agent</span>-Lösungen zu nutzen, aber davon waren wir doch eigentlich schon wieder weg. Der Artikel zieht das argumentativ durchaus richtig durch, aber er bleibt in der unterschiedlichen Gewichtung dann doch zu wage. Aber auf diesen Punkt komme ich in meinem Ausblick noch zu sprechen &#8211; dem mitunter Fehlen einer Webstandards-Perspektive. Das erwarte ich nicht von jedem Artikel, aber gerade in der<span xml:lang="en" lang="en"> Browser</span>weichen-Debatte würde ich einen speziellen Fokus auf Webstandards erwarten.</p>
<p>Der mobile Praxisbericht von <a href="http://www.marcozehe.de/" title="zur Webseite von Marco Zehe" hreflang="en">Marco Zehe</a> in Sachen <span xml:lang="en" lang="en">iPhone</span> und <span xml:lang="en" lang="en">VoiceOver</span> ist spannend und gibt vor allem auch Einblick in die taktile Handhabung etwa einer Datentabelle, die von <span xml:lang="en" lang="en">VoiceOver</span> leider bis dato nicht so gut interpretiert wird wie etwa von <span xml:lang="en" lang="en">JAWS</span>. Spannend ist auch das konkrete Ergebnis für Webentwickler, war aber eher zu erwarten in dieser vertrauten Kombination von <span xml:lang="en" lang="en">Safari</span> und <span xml:lang="en" lang="en">VoiceOver</span>.</p>
<p>Was mir noch gefehlt hat im mobilen Schwerpunkt, sind Artikel, die den <em>klassischen</em> Webentwickler wie mich dort abholen, wo er zuhause ist: Bei den <span xml:lang="en" lang="en">Webapps</span>, die mit Hilfe von HTML, CSS und etwa einem <span xml:lang="en" lang="en">Plugin</span> wie <a href="http://www.jqtouch.com/" xml:lang="en" lang="en" hreflang="en" title="mehr Infos zu jQTouch">jQTouch</a> arbeiten. Nichts gegen native <span xml:lang="en" lang="en">App</span>erstellung mit <a href="http://de.wikipedia.org/wiki/Xcode" title="mehr Informationen zu Xcode in der Wikipedia">Xcode</a> oder <a href="http://de.wikipedia.org/wiki/Objective-C" title="mehr zu Objective-C in der Wikipedia" xml:lang="en" lang="en" hreflang="en">Objective-C</a> &#8211; zwei Artikel arbeiten auch diese Themen gut auf, nur fehlte mir der Brückenschlag zum sinnvollen Einsatz von Webstandards ein wenig. Grade mobil ist da schon eine weitere Herausforderung. Und meine C-Zeiten liegen schon arg lang zurück, da war der knappe Ausflug im <span xml:lang="en" lang="en">Webinar</span> in den Xcode-Bereich schon wesentlich komfortabler. :)</p>
<h3>Für den <em>klassischen</em> <span xml:lang="en" lang="en">Webworker</span> wie mich war doch einiges dabei &#8230;</h3>
<p>Spannend sowohl der Artikel von <a href="http://yatil.de/" title="zur Webseite von Eric Eggert">Eric Eggert</a> zu den CSS3 Animationen als auch von <a href="http://www.asemota.de/" title="zur Webseite von Stefan Asemota" hreflang="en">Stefan Asemota</a> zu <a href="http://www.css3.info/preview/rgba/" hreflang="en" title="zur Information zu RGBa auf css3.info">RGBa</a>, die einfachste Transparenz überhaupt, würde ich sagen. Man spürt in beiden Artikeln und generell grade, um wie viel einfacher und zugleich präziser CSS3 daherkommt. Die Transparenz-PNGisierung hat dann ja bald ein Ende, dank IE 9. ;)</p>
<p>In den beiden Artikeln zu <acronym title="What You See Is What You Get" xml:lang="en" lang="en">WYSIWYG</acronym> von <a href="http://mcwiwa.de/" title="zur Webseite von Maik Wagner">Maik Wagner</a> und <a href="http://textformer.de/" title="zur Webseite von Nicolai Schwarz">Nicolai Schwarz</a> ist der Anspruch, konform und valide zu arbeiten, sehr präsent &#8211; sehr gut. :) Auch wenn sich die Artikel etwas überschneiden und beide eine schlechte Praxis und Ausgabe von WYSIWYG-Editoren voraussetzen, die so auch wieder leicht speziell anmutet und etwa durch ganz andere Ansätze wie dynamische CMS-Maskenerstellung, die heute ja problemloser möglich ist, umgangen werden kann. Damit kann man entweder den Editor gänzlich entfernen oder reduziert ihn auf die Befüllung von Absätzen mit der entsprechenden Minimalkonfiguration des Editors. Die Option, ein Bild in den Editor zu integrieren, ist dann nicht mehr zwingend notwendig. Konformität und Validität lassen sich durch eine kleinteiligere Maskenbildung viel einfacher erreichen. Freilich sind diese Lösungen nur möglich, wo Masken so frei erstellt werden können. Die von Maik Wagner genannten Beispiele wie Blogsysteme bieten diese Möglichkeit nicht, hier greifen die beiden Lösungen dann durchaus: <a href="http://de.wikipedia.org/wiki/Textile" xml:lang="en" lang="en" title="mehr Infos zu Textile in der Wikipedia">Textile</a> (Maik Wagner) als einfache Auszeichnungssprache für Texte, vor allem bekannt aus  der Wikinutzung und kollaborativen Werkzeugen wie <a href="http://www.atlassian.com/software/confluence/" hreflang="en" xml:lang="en" lang="en" title="mehr Informationen zu Confluence">Confluence</a>, und der HTML-Filter auf PHP-Basis <a href="http://htmlpurifier.org/" xml:lang="en" lang="en" hreflang="en" title="mehr Informationen zum HTML Purifier">HTML Purifier</a> (Nicolai Schwarz).</p>
<h3>Wo für mich noch etwas fehlt &#8230;</h3>
<p>Wenn ich jetzt von der konkreten inhaltlichen Linie etwas abweiche, dann nur aus einem Grund: Ein Heft ist auch eine Gefühlssache, das heißt, ein Heft setzt sich für mich auch aus einem Mosaik von unterschiedlichen Formaten, Mustern, Ansätzen und Angeboten zusammen. Jeder Baustein darin ist wichtig und muss rund sein. Das Mosaik des Webstandards-Magazin ist noch nicht ganz rund für mich als Leserin &#8211; das mag für andere dann gänzlich anders sein. Aber das hier ist eine subjektive Lesereise.</p>
<p>Was mir am meisten fehlt, ist der größere Bezug zu Webstandards. Das mag in den vorhergehenden Heften präsenter gewesen sein, im aktuellen Heft muss ich eher ein wenig danach suchen. Dann bin ich ein absoluter Fan von Interview-Formaten, weil die so eine Mischform zwischen Stringenz und Lockerheit mitbringen. Das aktuelle Heft bietet da eine ziemliche Spanne an, nicht immer ganz rund. Hier würde ich schlicht den Ball an die Redaktion zurückspielen: Traut Euch da mehr zu. Es ist kein einfaches Format &#8211; so ein Interview -, da hat sich das aktuelle Heft auch viel vorgenommen. Gut so &#8211; ein wenig kantig noch, ab und an zu trocken und mitunter reißt der Bezug zwischen Frage und Antwort ab. Kritischer wird es dann, wenn ein Interview mit eigener Zuspitzung zusammengefasst dargestellt wird wie im Fall von <a href="http://www.splintered.co.uk/" hreflang="en" title="zur Webseite von Patrick H. Lauke">Patrick H. Lauke</a>. Ich hatte schlicht immer wieder Schwierigkeiten zu unterscheiden, wer was gesagt hat. Und dass es Web Evangelisten auch schwer haben, wissen wir ja alle. ;)</p>
<p>Der schwierige Spagat zwischen kurzweiligen, knappen Formaten &#8211; ich fand die <span xml:lang="en" lang="en">Favicon</span>-Doppelseite doch recht witzig &#8211; und tiefergehenden Fachartikeln geht immer noch auf. Ein ganz kleinwenig war es mir zu kurzweilig mitunter. Aber das mag stimmungsabhängig sein. Respekt muss man ebenso der unglaublichen inhaltlichen Bandbreite zollen, das steht das Heft ganz gut durch &#8211; andere Magazine wären da schon längst zerfasert. :)</p>
<h3>Mein Fazit</h3>
<p>Man muss und darf die Frage immer wieder stellen, was das Webstandards-Magazin nun von anderen Magazinen wie etwa die <a href="http://www.weave.de/" xml:lang="en" lang="en" title="zum WEAVE Magazin">WEAVE</a> unterscheidet. Ich würde sagen zweierlei: Zum einen das starke Beharren auf und das <span xml:lang="en" lang="en">Handling</span> der eigenen Themen. Das mag nicht immer so aufgehen, aber diese Suchbewegung bildet sich für den Leser durchaus positiv ab. Und zum anderen spürt man, dass das Magazin sich in dieser Suchbewegung immer in Bewegung hält. Diese Bewegung kann man gut an den Ecken und Kanten des Heftes erkennen und damit meine ich nicht herkömmliche Eselsohren. :) Der Balanceakt zwischen Blattlinie und immer noch irgendwie Aufbruch lässt sich gut aushalten. Etliches dabei noch unfertig, ganz klar. Auch hier wieder denke ich, kann sich die Redaktion mehr zutrauen.</p>
<p>Für ein Magazin, das sich immer ein Stück weiterentwickeln will, ist es wichtig, sich beständig zu häuten. Am <span xml:lang="en" lang="en">Cover</span> des Webstandards-Magazin kann man dieses Häuten mit jeder neuen Ausgabe mitverfolgen. Und  das wird spannend bleiben.</p>
<p class="wp-flattr-button"></p> <p><a href="http://sprungmarker.de/?flattrss_redirect&amp;id=982&amp;md5=0400645b2274707f0c4d73d657c46874" title="Flattr" target="_blank"><img src="http://sprungmarker.de/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=5Fj5xAlKJFA:ILvQYYdC41k:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?i=5Fj5xAlKJFA:ILvQYYdC41k:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=5Fj5xAlKJFA:ILvQYYdC41k:ewi2tLLrNnk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=ewi2tLLrNnk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=5Fj5xAlKJFA:ILvQYYdC41k:eYgBPDbq7UE"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=eYgBPDbq7UE" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=5Fj5xAlKJFA:ILvQYYdC41k:MxV00nO3qFw"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=MxV00nO3qFw" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=5Fj5xAlKJFA:ILvQYYdC41k:aVEt4g-unHM"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=aVEt4g-unHM" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=5Fj5xAlKJFA:ILvQYYdC41k:I9og5sOYxJI"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=I9og5sOYxJI" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SprungmarkerKompakt/~4/5Fj5xAlKJFA" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://sprungmarker.de/2010/das_webstandards_magazin_geht_ins_zweite_jahr/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://sprungmarker.de/2010/das_webstandards_magazin_geht_ins_zweite_jahr/</feedburner:origLink></item>
		<item>
		<title>Mit Screenreadern testen (1): Zitatauszeichnung</title>
		<link>http://feedproxy.google.com/~r/SprungmarkerKompakt/~3/JBjs2uB_6II/</link>
		<comments>http://sprungmarker.de/2010/mit_screenreadern_testen_1_zitatauszeichung/#comments</comments>
		<pubDate>Sun, 28 Feb 2010 21:45:32 +0000</pubDate>
		<dc:creator>Egger Sylvia</dc:creator>
				<category><![CDATA[Barrierefreiheit]]></category>
		<category><![CDATA[BLOCKQUOTE]]></category>
		<category><![CDATA[CITE]]></category>
		<category><![CDATA[JAWS]]></category>
		<category><![CDATA[kompakt]]></category>
		<category><![CDATA[NVDA]]></category>
		<category><![CDATA[Screenreader]]></category>
		<category><![CDATA[Testen]]></category>
		<category><![CDATA[VoiceOver]]></category>
		<category><![CDATA[Windows-Eyes]]></category>
		<category><![CDATA[Zitat]]></category>

		<guid isPermaLink="false">http://sprungmarker.de/?p=925</guid>
		<description><![CDATA[Semantik in HTML ist ja etwas Wunderbares, interessant wird es, wenn man sich die Interpretation durch Screenreader genauer ansieht. Bei meiner Recherche zur Technikwürze zum Thema Formulare hatte ich schon an der einen oder anderen Stelle aufgehorcht. Immer mal ...]]></description>
			<content:encoded><![CDATA[<p class="summary">Semantik in HTML ist ja etwas Wunderbares, interessant wird es, wenn man sich die Interpretation durch <span lang="en">Screenreader</span> genauer ansieht. Bei meiner Recherche zur <a href="http://sprungmarker.de/2010/extern_technikwuerze_formulare_total/" title="zum sprungmarker Artikel zu Formularen total">Technikwürze zum Thema Formulare</a> hatte ich schon an der einen oder anderen Stelle aufgehorcht. Immer mal wieder war mir nicht klar, habe ich die Semantik in HTML unzureichend gesetzt oder liegt es an der Kombination von <span lang="en">Screenreader</span> und / oder <span lang="en">Browser</span> / System. Daher werde ich jetzt in loser Folge semantische Auszeichnungen in <span lang="en">Screenreadern</span> testen. Den Anfang macht die Auszeichnung von Langzitaten &#8211; <code lang="en">blockquote</code> -, von Kurzzitaten mit Hilfe des q-Elementes und die jeweilige Zuordnung zur zitierten Quelle &#8211; <code lang="en">cite</code>.</p>
<h3><span lang="en">Screenreader</span> und Zitate: das Gesamtergebnis</h3>
<p>Um gleich mit der argumentativen Tür ins Haus zu fallen: Es sieht durchwachsen aus mit der Ausgabe von Zitaten &#8211; nur Langzitate werden standardmäßig vorgelesen &#8211; aber auch nicht immer. Leider muss man sagen, die gesamte Semantik eines Artikels geht dann doch verloren. Der Weg kann nicht sein, jedes Zitat als <code lang="en">blockquote</code>-Element umzusetzen . Vor allem wenn man bedenkt, wie <em>alt</em> die semantische Auszeichnung von Zitaten ist. Die Verwendung reicht quasi ins HTML-Urgestein zurück: <a href="http://sprungmarker.de/2007/kleine-geschichte-des-blockquote-elements/" title="zum sprungmarker Artikel">Kleine Geschichte des <code>blockquote</code>-Elements anhand der Spezifikationen</a>.</p>
<p><span id="more-925"></span></p>
<p>Vor allem kann man die Unterstützung in der Ausgabe bei <span lang="en">Screenreadern</span> an der konkreten Browserunterstützung des jeweiligen Elements ablesen. So sitzt das Langzitat mit Hilfe des <code lang="en">blockquote</code>-Elements schon weitaus fester, auch wenn man mitunter das explizite Vorlesen erst hinzuschalten muss. Das Kurzzitat mit Hilfe des q-Elements, das ja lange Zeit nur von wenigen <span lang="en">Browsern</span> unterstützt wurde &#8211; <a href="http://msdn.microsoft.com/en-us/library/cc304133(VS.85).aspx#Quoting" title="zum Artikel bei Microsoft: Quoting with the Q Element" lang="en" hreflang="en">IE 8 hat da ja endlich nachgezogen</a>, hat das Nachsehen. Die Unterstützung wird dauern, da haben <span lang="en">Screenreader</span> eindeutig Nachholbedarf. Gänzlich abgeschlagen dann die Angabe der Quelle mit Hilfe des <code lang="en">cite</code>-Elements. Einzig als Attribut im Langzitat wird <code lang="en">cite</code> von<span lang="en"> JAWS</span> vorgelesen. Befüllt man das <code lang="en">cite</code>-Attribut mit einer URL, sollte man darauf achten, dass sie nicht lang ist, denn <span lang="en"> JAWS</span> liest das dann wirklich bis zum letzten Zeichen vor. ;) Einzige Ausnahme ist <span lang="en">Window-Eyes</span>, das auch über das Kurzzitat &#8211; das q-Element &#8211; informiert.</p>
<h4>Die Testumgebung</h4>
<p>Ich habe eine <a href="http://sprungmarker.de/wp-content/uploads/zitat_test.html" title="weiter zur Testseite">einfache Testseite</a> erstellt, in der ich im ersten Absatz den alleinigen Einsatz eines Kurzzitats und dessen Quelle und darauf folgend das Langzitat &#8211; ein <code lang="en">blockquote</code>-Element mit gefülltem <code lang="en">cite</code>-Attribut &#8211; teste.</p>
<pre class="brush:xml; auto-links:false;">
    &lt;p&gt;Der &lt;cite&gt;Blindtext-Generator&lt;/cite&gt; sagt, dass &lt;q&gt;esse est percipi&lt;/q&gt; ein Gassenhauer ist:&lt;/p&gt;
    &lt;blockquote cite=&quot;Blindtext-Generator&quot;&gt;&lt;p&gt;&Uuml;berall dieselbe alte Leier. Das &lt;span lang=&quot;en&quot; xml:lang=&quot;en&quot;&gt;Layout&lt;/span&gt; ist fertig, der Text l&auml;sst auf sich warten. &lt;/p&gt;&lt;/blockquote&gt;
   &lt;p class=&quot;quelle&quot;&gt;Quelle: &lt;cite&gt;&lt;a href=&quot;http://www.blindtextgenerator.de/&quot;&gt;Blindtext-Generator&lt;/a&gt;&lt;/cite&gt;&lt;/p&gt;
</pre>
<p>Diese Testseite habe ich dann mit folgenden <span lang="en">Screenreadern</span> und <span lang="en">Browser</span>-Erweiterungen getestet:</p>
<ul>
<li><a href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp" hreflang="en" lang="en" title="zur Produktinfos von JAWS">JAWS</a> 11 mit IE 8 (<span lang="en">Windows</span>) und <span lang="en">Firefox 3.6</span> (<span lang="en">Windows</span>) </li>
<li><a href="http://www.nvda-project.org/" title="zur Projektinfo von NVDA" hreflang="en">NVDA</a> 2010.1 mit <span lang="en">Firefox 3.6</span> (<span lang="en">Windows</span>) und IE 8 (<span lang="en">Windows</span>)</li>
<li><a href="http://www.gwmicro.com/Window-Eyes/" title="zur Produktinfo von Window-Eyes" lang="en" hreflang="en">Window-Eyes</a> 7.1. und IE 8  (<span lang="en">Windows</span>)</li>
<li><a href="http://www.baum.de/cms/de-de/cobra/" title="zur Produktinfo von COBRA">COBRA</a> 8.1. und IE 6 (<span lang="en">Windows</span>)</li>
<li><a href="http://www.dolphin-de.de" title="zur Produktinfo von HAL">HAL</a> 11 und IE 8 (<span lang="en">Windows</span>)</li>
<li><a href="http://www.screenreader.net" title="zur Produktinfo von Thunder" hreflang="en" lang="en">Thunder</a> und <span lang="en">WebbIE</span> (<span lang="en">Windows</span>)</li>
<li><a href="http://www.apple.com/accessibility/voiceover/" title="zur Produktinfo von VoiceOver" hreflang="en" lang="en">VoiceOver</a> mit Safari 4.0.4 (<span lang="en">Macintosh</span>)</li>
<li><span lang="en">Webscreenreader <a href="http://webanywhere.cs.washington.edu/" title="zur Information WebAnywhere" hreflang="en" lang="en">WebAnywhere</a></span></li>
<li><a href="https://addons.mozilla.org/en-US/firefox/addon/402" title="zur Erweiterung Fangs" hreflang="en" lang="en">Fangs</a> <span lang="en">Screenreader</span>simulator (<span lang="en">Firefox</span>)</li>
<li><span lang="en"><a href="http://firevox.clcworld.net/" title="zur Information der Erweiterung Fire Vox" hreflang="en">Fire Vox</a> Screenreader-Plugin</span> (<span lang="en">Firefox</span>)</li>
</ul>
<p>Die Einstellungen der <span lang="en">Screenreader</span> und Erweiterungen sind typisch, also auf eine <span lang="en">Default</span>-Installation eingestellt, um festzustellen, ob die semantische Auszeichnung <span lang="en">default</span>mäßig auch aktiviert ist.</p>
<h4>Vergleich <span lang="en">Screenreader</span> und Interpretation von Zitaten</h4>
<p>Sieht man sich nun in der vergleichenden Tabelle die Ergebnisse im Detail an, ist der Interpretationsvorsprung von Langzitaten deutlich erkennbar. Pro <span lang="en">Screenreader</span> wird getestet, ob das Langzitat vorgelesen wird und auch bei einer Standardinstallation aktiviert ist, ob die Quelle als Attribut im Langzitat, das Kurzitat und das alleinstehende <code lang="en">cite</code>-Element mit entsprechender Info vorgelesen wird. Denn natürlich wird der entsprechende Text des Elementes immer vorgelesen, aber viel wichtiger ist, dass der Textabschnitt auch als Zitat gekennzeichnet wird.</p>
<table border="0" cellspacing="0" cellpadding="0" width="100%" summary="Übersichtstabelle Screenreader - Zitaterkennung">
<colgroup>
<col width="*" />
<col width="15%" />
<col width="15%" />
<col width="15%" />
<col width="10%" />
<col width="10%" />
	</colgroup>
<tr>
<th scope="col"><span lang="en">Screenreader</span></th>
<th scope="col" abbr="Option ist standardmässig aktiviert"><span lang="en">aktiviert</span></th>
<th scope="col" abbr="erkennt Langzitat"><code lang="en">blockquote</code></th>
<th scope="col" abbr="erkennt Langzitat und seine Zitatquelle"><code lang="en">blockquote</code> und <code lang="en">cite</code></th>
<th scope="col" abbr="erkennt Kurzzitat-Element"><code lang="en">q</code></th>
<th scope="col" abbr="erkennt Quelle des Kurzzitat-Element"><code lang="en">cite</code></th>
</tr>
<tr>
<th scope="row" class="row"><span lang="en">JAWS</span> 11 mit IE 8</th>
<td class="active">ja</td>
<td class="active">ja</td>
<td class="active">ja</td>
<td>nein</td>
<td>nein</td>
</tr>
<tr>
<th scope="row" class="row"><span lang="en">JAWS</span> 11 mit <span lang="en">Firefox 3.6.3</span></th>
<td class="active">ja</td>
<td class="active">ja</td>
<td class="active">ja</td>
<td>nein</td>
<td>nein</td>
</tr>
<tr>
<th scope="row" class="row">NVDA 2010.1 mit <span lang="en">Firefox 3.6.3</span></th>
<td class="active">ja</td>
<td class="active">ja</td>
<td>nein</td>
<td>nein</td>
<td>nein</td>
</tr>
<tr>
<th scope="row" class="row">NVDA 2010.1 mit IE 8</th>
<td class="active">ja</td>
<td>nein</td>
<td>nein</td>
<td>nein</td>
<td>nein</td>
</tr>
<tr>
<th scope="row" class="row"><span lang="en">Window-Eyes</span> 7.1. und IE 8</th>
<td>nein</td>
<td class="active">ja</td>
<td>nein</td>
<td class="active">ja</td>
<td>nein</td>
</tr>
<tr>
<th scope="row" class="row">COBRA 8.1. und IE 6</th>
<td>nein</td>
<td>nein</td>
<td>nein</td>
<td>nein</td>
<td>nein</td>
</tr>
<tr>
<th scope="row" class="row"><span lang="en">Thunder</span> und <span lang="en">WebbIE</span></th>
<td>nein</td>
<td>nein</td>
<td>nein</td>
<td>nein</td>
<td>nein</td>
</tr>
<tr>
<th scope="row" class="row"><span lang="en">Hal</span> mit IE 8</th>
<td>nein</td>
<td>nein</td>
<td>nein</td>
<td>nein</td>
<td>nein</td>
</tr>
<tr>
<th scope="row" class="row"><span lang="en">VoiceOver</span> mit Safari 4.0.4</th>
<td>nein</td>
<td class="active">ja</td>
<td>nein</td>
<td>nein</td>
<td>nein</td>
</tr>
<tr>
<th scope="row" class="row"><span lang="en">Webscreenreader WebAnywhere</span></th>
<td>nein</td>
<td>nein</td>
<td>nein</td>
<td>nein</td>
<td>nein</td>
</tr>
<tr>
<th scope="row" class="row">Fangs <span lang="en">Screenreader</span>simulator</th>
<td class="active">ja</td>
<td class="active">ja</td>
<td>nein</td>
<td>nein</td>
<td>nein</td>
</tr>
<tr>
<th scope="row" class="row"><span lang="en">Fire Vox Screenreader-Plugin</span></th>
<td>nein</td>
<td>nein</td>
<td>nein</td>
<td>nein</td>
<td>nein</td>
</tr>
</table>
<h3><span lang="en">Screenreader</span> und Zitate: die Ergebnisse im Einzelnen</h3>
<h4>Das Langzitat</h4>
<p>Standardmäßig aktiviert ist der Hinweis auf ein Langzitat nur bei <span lang="en">JAWS</span> und NVDA. Bei JAWS wird das Langzitat mit <em>Zitatblock-Anfang und -Ende</em> angesagt, NVDA setzt vor und hinter das Langzitat <em>Zitatblock</em>. <span lang="en">Window-Eyes</span> hat die Ansage des Langzitats nicht standardmäßig aktivert. In den Ausführlichkeitseinstellungen wählt man &gt; <em>Browsermodus</em> &gt; <em>Hervorhebung</em> / <em>Bereichshervorhebung</em> aus und hakt an, dass vor und nach dem Langzitat eine Nachricht eingefügt wird. Entsprechend hört sich das dann auch an:  am Anfang <em>Bereichshervorhebung</em> und am Ende des Langzitats <em>Bereichshervorhebung Ende</em>. So ganz konsistent funktioniert das nicht, im Testbeispiel wird das Ende des Langzitats nicht angesagt.</p>
<p><img src="http://sprungmarker.de/wp-content/uploads/picto-voiceover.gif" alt="VoiceOver: Testseite mit Ausführlichkeit hochgesetzt" width="542" height="177" class="ImgBorder" /></p>
<p class="quelle">Abbildung: <cite>Testseite mit Voiceover und Ausführlichkeit hochgesetzt</cite></p>
<p>Auch <span lang="en">VoiceOver</span> geht für das Ansagen von Auszeichnungen über die Ausführlichkeitseinstellung. Dort kann man für unterschiedlichste Elemente die Ausführlichkeit erhöhen. Man kann für alles die Ausführlichkeit auf hoch setzen oder für einzelne Elemente. Aber auch wenn man die Ausführlichkeit für alles auf hoch setzt, wird die Zitatinformation noch nicht vorgelesen. Man muss erst den Textblock anwählen und dann wird die Zusatzinformation <em>Zitatblock Ebene-1</em> vorgelesen. Etwas sehr gewöhnungsbedürftig, aber das ist ja <span lang="en">VoiceOver</span> im Allgemeinen. :) <span lang="en">VoiceOver</span> versucht ja auch mit dem Konzept der <span lang="en">Webspots</span> fehlende Semantik zu ersetzen &#8211; ein verständliches, aber auch schwieriges Konzept. Mit <span lang="en">VoiceOver</span> arbeite ich immer noch verhältnismässig langsam, die Lernkurve ist trotz schneller Anfangserfolge für mich recht hoch. :)</p>
<p><img src="http://sprungmarker.de/wp-content/uploads/picto-fangs.png" alt="Fangs: Ausgabe der Testseite" width="497" height="212" class="ImgBorder" /></p>
<p class="quelle">Abbildung: <cite>Testseite mit Fangs: Zitaterkennung</cite></p>
<p>In <span lang="en">Screenreadern</span> wie <span lang="en">Thunder</span>, die nicht direkt mit dem <span lang="en">Browser</span> arbeiten, sondern mit einem <span lang="en">Browser</span>ersatz wird das Zitat als solches nicht vorgelesen, aber durch Anführungszeichen gekennzeichnet, die auch vorgelesen werden. Ähnlich stellt das der <span lang="en">Screenreader</span>-Simulator <span lang="en">Fangs</span> dar, er markiert ganz richtig für das Langzitat den Anfang mit <span lang="en"><em>Block quote start</em></span> und das Zitatende mit <span lang="en"><em>Block quote end</em></span>.</p>
<p>Das Langzitat in Kombination mit einer Quellenangabe liest nur <span lang="en">JAWS</span> verständlich und verlässlich vor. NVDA scheint zwar das <code lang="en">cite</code>-Attribut zu erkennen, aber gibt für die Testseite kein verständliches Ergebnis wieder. Man müsste noch testen, ob NVDA nur bestimmte Werte für das <code lang="en">cite</code>-Attribut zulässt, etwa nur eine URL.</p>
<h5>Tonbeispiele: Langzitat</h5>
<ul>
<li> <a href="http://sprungmarker.de/wp-content/uploads/audio/jaws_zitat_ansage.mp3" class="wpaudio" title="Beispiel starten">Zitaterkennung: Tonbeispiel <span lang="en">JAWS</span></a> (102 <abbr title="Kilobytes" lang="en">Kb</abbr>)</li>
<li> <a href="http://sprungmarker.de/wp-content/uploads/audio/nvda_zitat_ansage.mp3" class="wpaudio" title="Beispiel starten">Zitaterkennung: Tonbeispiel NVDA</a> (70 <abbr title="Kilobytes" lang="en">Kb</abbr>)</li>
<li> <a href="http://sprungmarker.de/wp-content/uploads/audio/windows_eyes_zitat_ansage.mp3" class="wpaudio" title="Beispiel starten">Zitaterkennung: Tonbeispiel <span lang="en">Window-Eyes</span></a> (66 <abbr title="Kilobytes" lang="en">Kb</abbr>)</li>
<li> <a href="http://sprungmarker.de/wp-content/uploads/audio/voiceover_zitat_angesagt.mp3" class="wpaudio" title="Beispiel starten">Zitaterkennung: Tonbeispiel <span lang="en">VoiceOver</span> &#8211; nur Zitatende</a> (45 <abbr title="Kilobytes" lang="en">Kb</abbr>)</li>
</ul>
<h4>Das Kurzzitat</h4>
<p>Wie schon ausgeführt, ist das Kurzzitat mit Hilfe des <code>q</code>-Elements noch ein Stiefkind der Ausgabe. Nur <span lang="en">Window-Eyes</span> gibt es genauso wie das Langzitat hervorgehoben wieder. <span lang="en">Thunder</span> liest auch für das Kurzzitat die Anführungszeichen vor, was wenigstens markiert, dass es sich um ein Zitat handeln könnte. Ansonsten wird ausnahmslos über das Kurzzitat hinweg gelesen. Es erfolgt auch keine Zuordnung zur Quelle des Kurzzitats, das <code lang="en">cite</code>-Element wird schlicht überlesen. Ich habe auch sonst keine Einstellungen gefunden, um auch noch das Kurzzitat erkennbar zu machen. Aber ich lasse mich da gerne korrigieren. :) Als Variante hatte ich noch dem <code>q</code>-Element das <code lang="en">cite</code>-Attribut testweise hinzugefügt, aber das wurde von <span lang="en">Window-Eyes</span> ebenfalls ignoriert.</p>
<h3>Fazit</h3>
<p>Man könnte jetzt den irrigen Schluss ziehen und alle Zitate &#8211; auch Kurzzitate &#8211; als Langzitate kennzeichnen. Im Einzelfall kann man das sicherlich noch entscheiden &#8211; wann beginnt schon ein Lang- und endet ein Kurzzitat. :) Aber das ist natürlich keine wirkliche Lösung. Und man muss anmerken dürfen, dass eine gängige semantische Auszeichnung wie das Kurzzitat einfach zum Standard gehören sollte, auch und gerade für das Repertoire eines <span lang="en">Screenreaders</span>. Also muss man sich einfach wieder auf die Wartebank setzen und hoffen, dass nach der aktuellen <span lang="en">Browser</span>unterstützung auch die <span lang="en">Screenreader</span> nachziehen werden, <span lang="en">Window-Eyes</span> hat das ja schon.</p>
<p>Überrascht hat mich NVDA, der ja für seine Standardkonformität bekannt ist, dass er das Kurzzitat schlicht ignoriert. Ebenso wichtig wäre es, dass Semantik wie die Ansage eines Zitats schlicht immer voreingestellt ist. Schließlich trägt diese Semantik wesentlich zum Verständnis eines Textes bei. Und &#8211; das sei abschließend auch angemerkt, muss man Erweiterungen wie <span lang="en">Fire Vox</span>, die ja einen <span lang="en">Screenreader</span> nur simulieren, immer wieder und noch mit Bedacht nutzen. Sieht man sich die Ergebnisse im Vergleich zu <span lang="en">JAWS</span> oder NVDA an, lassen sie sich nicht mit einem realen <span lang="en">Screenreader</span> vergleichen. Man sollte also <strong>immer</strong> mit einem <span lang="en">Screenreader</span> testen, Erweiterungen und Simulationen sind bis dato nur Annäherungen.</p>
<h3><span xml:lang="en" lang="en">Update</span></h3>
<p>Das <code>q</code>-Element kann auch noch verschachtelt werden. <span xml:lang="en" lang="en">Window-Eyes</span>, das ja das Kurzzitat entsprechend markiert vorliest, macht das auch für verschachtelte Kurzzitate. Freilich wird ab einer gewissen Verschachtelungstiefe es schwer, die Informationen zur Bereichshervorhebung noch wirklich nachzuvollziehen. Vor allem auch, weil ja die korrekte inhaltliche Zuordnung zur Quelle für das Kurzzitat nicht ausgegeben wird.</p>
<p class="wp-flattr-button"></p> <p><a href="http://sprungmarker.de/?flattrss_redirect&amp;id=925&amp;md5=f731f3089ab143890dc2ad2810b43cb8" title="Flattr" target="_blank"><img src="http://sprungmarker.de/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=JBjs2uB_6II:UT1Gqlfr0EY:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?i=JBjs2uB_6II:UT1Gqlfr0EY:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=JBjs2uB_6II:UT1Gqlfr0EY:ewi2tLLrNnk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=ewi2tLLrNnk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=JBjs2uB_6II:UT1Gqlfr0EY:eYgBPDbq7UE"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=eYgBPDbq7UE" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=JBjs2uB_6II:UT1Gqlfr0EY:MxV00nO3qFw"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=MxV00nO3qFw" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=JBjs2uB_6II:UT1Gqlfr0EY:aVEt4g-unHM"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=aVEt4g-unHM" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=JBjs2uB_6II:UT1Gqlfr0EY:I9og5sOYxJI"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=I9og5sOYxJI" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SprungmarkerKompakt/~4/JBjs2uB_6II" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://sprungmarker.de/2010/mit_screenreadern_testen_1_zitatauszeichung/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
<enclosure url="http://sprungmarker.de/wp-content/uploads/audio/jaws_zitat_ansage.mp3" length="98562" type="audio/mpeg" />
<enclosure url="http://sprungmarker.de/wp-content/uploads/audio/nvda_zitat_ansage.mp3" length="67387" type="audio/mpeg" />
<enclosure url="http://sprungmarker.de/wp-content/uploads/audio/windows_eyes_zitat_ansage.mp3" length="65385" type="audio/mpeg" />
<enclosure url="http://sprungmarker.de/wp-content/uploads/audio/voiceover_zitat_angesagt.mp3" length="44841" type="audio/mpeg" />
<enclosure url="http://sprungmarker.de/wp-content/uploads/audio/jaws_zitat_ansage.mp3" length="98562" type="audio/mpeg" />
		<feedburner:origLink>http://sprungmarker.de/2010/mit_screenreadern_testen_1_zitatauszeichung/</feedburner:origLink></item>
		<item>
		<title>Rückschau auf 2009 und Ausblick auf 2010</title>
		<link>http://feedproxy.google.com/~r/SprungmarkerKompakt/~3/dLOYu8iJTzA/</link>
		<comments>http://sprungmarker.de/2010/rueckschau_auf_2009_und_ausblick_auf_2010/#comments</comments>
		<pubDate>Fri, 05 Feb 2010 19:39:01 +0000</pubDate>
		<dc:creator>Egger Sylvia</dc:creator>
				<category><![CDATA[Intern]]></category>

		<guid isPermaLink="false">http://www.sprungmarker.de/?p=890</guid>
		<description><![CDATA[Obwohl ich schon etwas spät dran bin in Sachen Rückschau, finde ich es wichtig, gerade das letzte Jahr damit für mich abzuschliessen und 2010 als eine Art für mich adaptiertes Sabbatical zu nehmen.
Das war 2009 für mich
Auch wenn ich ...]]></description>
			<content:encoded><![CDATA[<p class="summary">Obwohl ich schon etwas spät dran bin in Sachen Rückschau, finde ich es wichtig, gerade das letzte Jahr damit für mich abzuschliessen und 2010 als eine Art für mich adaptiertes <a href="http://de.wikipedia.org/wiki/Sabbatical" title="zur Information in der Wikipedia">Sabbatical</a> zu nehmen.</p>
<h3>Das war 2009 für mich</h3>
<p><img src="http://www.sprungmarker.de/wp-content/uploads/2009/06/ritter_picto.jpg" alt="Buch-Cover Sylvia Egger: Still dialing Alice" width="200" height="306" class="ImgRight" />Auch wenn ich hier vom barrierefreien Thema etwas abschweifen muss, aber nach all den Jahren meines <em>Doppellebens</em> müssen meine Leser auch mal aushalten können, dass sich nicht immer alles um Barrierefreiheit dreht. :) Das letzte Jahr habe ich damit verbracht, <a href="http://dadasophin.de/2010/01/still-dialing-alice/" title="zur Webseite des Buches">mein Buch <span lang="en">Still Dialing Alice</span></a> zu konzipieren, in einem Affenzahn und unter lautstarken Eigenverschwünschungen &#8211; nach dem Motto, warum tu ich mir das alles nur an ;) &#8211; zu schreiben und dann auch die Druckfahnen mehrfach haarklein durchzugehen &#8211; dafür opfert man schon gerne mal seinen gesamten Urlaub an der Küste. ;) Nach einigen Verzögerungen im Druck ging es Ende des Jahres endlich in die Buchhandlungen. Eine kleine Leseprobe für die Mutigen gibt es nun auch: Leseprobe <a href="http://dadasophin.de/wp-content/uploads/2010/01/still_dialing_alice_leseprobe.pdf">Still Dialing Alice (PDF-Datei, 620 Kb – nicht barrierefrei)</a>. </p>
<p><span id="more-890"></span><br />
Und für die absolut Wagemutigen hab ich auch noch 3 Belegexemplare zu vergeben, den Verteilerschlüssel &#8211; also wer das Belegexemplar erhält &#8211; lege ich nach Lust und Laune fest. :) Einfach melden mit einer DM auf <a href="http://twitter.com/sprungmarkers">twitter</a> oder schlicht über das <a href="http://www.sprungmarker.de/kontakt/">Kontaktformular</a> hier im Blog oder auf welchem Weg auch immer (ich freue mich auch immer über Postkarten ;). Und wenn keiner eins will, dann behalte ich alle selbst und mach schöne Scherenschnitte draus &#8211; nee, dann gehen die wieder an so Rezensenten. ;) Ach so ja &#8211; und es gibt <strong>keine</strong> signierten Exemplare &#8211; auch wenn es schon Anfragen dazu gab, ich lehne derartige bildungsbürgerliche Attitüden und Beiwerk schlicht ab &#8211; oder ich mach ein Projekt draus, dann kann ich aber für das Buch nicht mehr garantieren. ;)</p>
<p>Apropos Scherenschnitt: das Zerschneiden eines meiner Texte immer genau nach 140 Zeichen war ein wichtiges Element meiner Grazer Performance <a href="http://www.forumstadtpark.at/index.php?idcatside=275" title="zur Veranstaltungsinfo im Forum Stadtpark Graz" lang="en">Laut Computing</a>. Eine Netzkünstlerin &#8211; also ich &#8211; sollte mit einem Komponisten eine Aktion machen &#8211; mir fiel natürlich nur wieder twitter ein. :) Samt meiner bei Ebay erstandenen lebensnahen Bewegungsmelder &#8211; einer Vogelschar, die die Besucher auf Schritt und Tritt entnervten ;) -, dem etwas hakeligen Twitter<span lang="en">stream</span>, den sehr guten <span lang="en">Soundpieces</span> von <a href="http://instru.ment.org/bios/bio.html?l=en&amp;who=n" title="mehr Infos zu Norbert Math">Norbert Math</a> und dem etwas schöpfintensiven Trockeneis-in-ein-Computergehäuse-Verfrachten war das eine wirklich lustige <span lang="en">Performance</span>. Und Dank an den NCC09 für die tolle <a href="https://wiki.mur.at/ncc09/ForumStadtpark" title="NCC09 Infos zur Veranstaltung">Einladung</a>.</p>
<p>Es wird wohl noch die eine oder andere Lesung aus und zum Buch geben, aber eher weniger als mehr, das ist aber in Ordnung. :) Obwohl ich doch recht gut performiere. ;) Sei&#8217;s drum. Ich arbeite schon an einem weiteren Buch, da bin ich aber noch mehr im inhaltlichen Konzipieren, ich lass mir da Zeit. Derzeit arbeite ich mit der freien Tanzszene zusammen und wir erarbeiten den <span lang="en">Background</span> für ein neues Stück. Für mich was ganz neues und vor allem ein spannendes Thema. Also um es abzukürzen: Das Jahr 2009 hat für mich seit langem mal wieder richtig Arbeit im Literaturbereich gebracht, das hat ne Weile eher still gelegen und hat mich daran erinnert, dass ich da etwas säumig war in meinem <em>Doppelleben</em>. Mal sehen, was die Zukunft da weiterhin bringt. Absolut spannend &#8211; auch wenn es nicht um Barrierefreiheit geht. :)</p>
<p>Aber keine Angst, die Barrierefreiheit bleibt mir erhalten. :) Das Jahr 2009 war auch für die Barrierefreiheit ein gutes Jahr. Ich habe mich sehr über den <a href="http://www.sprungmarker.de/2009/a_tag_09_praesentation_mit_screencasts/" title="weitere Infos">Vortrag auf dem  Wiener A-TAG</a> gefreut, man könnte sich doch tatsächlich an so was gewöhnen. Auch die beiden <a href="http://www.sprungmarker.de/2010/extern_technikwuerze_formulare_total/">Technikwürzen zu Formularen</a> habe ich dann Ende des Jahres noch gemacht, das hat das Jahr ganz gut abgeschlossen.</p>
<h3>Das wird 2010</h3>
<p>Was meine ich mit meiner Art von Sabbatical: Damit meine ich jetzt keine wirkliche Auszeit &#8211; was ja Sabbatical ursprünglich meint -, sondern ich muss mich ein wenig wieder dorthin begeben, wo das <span lang="en">Frontend</span> sich entwickelt, sprich &#8211; mir fiel das letzte Jahr auf, dass es viele neue Themen gibt, die ich mal aufarbeiten, richtig aufarbeiten möchte. Dazu mache ich mal aus meinem Blog hier eine kleine Baustelle, um die Themen auch mal real und für die Barrierfreiheit durchzutesten: HTML 5, neuer Schrifteinsatz, WAI-ARIA, Optimierung für <span lang="en">Mobile</span>, mal Video genauer durchtesten, vor allem den <span lang="en">Flowplayer</span> mal abklopfen und und und. Es wird mal wieder Zeit für mich, mich zu vertiefen. Ich versuche das alles hier soweit wie möglich am Funktionieren zu halten, aber es kann durchaus sein, dass es Phasen gibt, wo die Barrierefreiheit eher kippt oder alles etwas durchhängt. Aber wenn ich das hier nicht machen kann, auf meinem Privathanger. :)</p>
<p>Mit der mobilen Optimierung habe ich schon angefangen, zwei Webinare hinter mir, das eine vom W3C &#8211; <a href="http://www.w3.org/2009/03/mobitrain_course_description.html" hreflang="en" lang="en">Introduction to W3C&#8217;s Mobile Web Best Practices</a> &#8211; war eher schlicht und grundlegend, aber wenn man sich mit den Hausaufgaben Mühe gegeben hat, dann konnte man schon einen ersten Eindruck kriegen, welche Bandbreite einen da erwartet. Da ist ein <span lang="en">Browserwar</span> ein Spaziergang dagegen. Das zweite von <span lang="en">O&#8217;Reilly</span> &#8211; <a href="http://training.oreilly.com/iphonewebapps/" hreflang="en" lang="en">Learn to Build iPhone Apps with HTML, CSS, and JavaScript</a> &#8211; war dann speziell nur für das <span lang="en">iPhone</span> und natürlich ungleich spannender, weil man nur den Fokus auf einen Aspekt legen kann. Webinare habe ich schlicht für mich entdeckt, die Qualitäten variieren dabei, ganz klar. Aber trotzdem fand ich das so spannend, dass ich da dran bleiben will.</p>
<p>Ich hab auch noch ein paar Ideen, was im barrierefreien Sektor an Standardisierung noch fehlt, daran werde ich dieses Jahr auch arbeiten und das dann entsprechend hier anbieten. :) </p>
<p>Okay, mal sehen, ob ich das alles so schaffe dieses Jahr, aber wir haben ja erst Februar. ;)</p>
<p class="wp-flattr-button"></p> <p><a href="http://sprungmarker.de/?flattrss_redirect&amp;id=890&amp;md5=7adfa28f103a510c5bf3880d7ad4d3e0" title="Flattr" target="_blank"><img src="http://sprungmarker.de/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=dLOYu8iJTzA:qqFPjfu8yME:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?i=dLOYu8iJTzA:qqFPjfu8yME:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=dLOYu8iJTzA:qqFPjfu8yME:ewi2tLLrNnk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=ewi2tLLrNnk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=dLOYu8iJTzA:qqFPjfu8yME:eYgBPDbq7UE"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=eYgBPDbq7UE" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=dLOYu8iJTzA:qqFPjfu8yME:MxV00nO3qFw"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=MxV00nO3qFw" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=dLOYu8iJTzA:qqFPjfu8yME:aVEt4g-unHM"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=aVEt4g-unHM" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=dLOYu8iJTzA:qqFPjfu8yME:I9og5sOYxJI"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=I9og5sOYxJI" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SprungmarkerKompakt/~4/dLOYu8iJTzA" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://sprungmarker.de/2010/rueckschau_auf_2009_und_ausblick_auf_2010/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://sprungmarker.de/2010/rueckschau_auf_2009_und_ausblick_auf_2010/</feedburner:origLink></item>
		<item>
		<title>Kurz kommentiert: Einfach-teilhaben.de im Usability-Test mit Menschen mit Behinderungen</title>
		<link>http://feedproxy.google.com/~r/SprungmarkerKompakt/~3/_Gftgw5p9hA/</link>
		<comments>http://sprungmarker.de/2010/kurz_kommentiert_einfach_teilhaben_de_im_usabilitytest/#comments</comments>
		<pubDate>Wed, 03 Feb 2010 17:46:46 +0000</pubDate>
		<dc:creator>Egger Sylvia</dc:creator>
				<category><![CDATA[Barrierefreiheit]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[aperto]]></category>
		<category><![CDATA[JAWS]]></category>
		<category><![CDATA[Kontrast]]></category>
		<category><![CDATA[Screenreader]]></category>
		<category><![CDATA[Testen]]></category>
		<category><![CDATA[WCAG]]></category>
		<category><![CDATA[WCAG2]]></category>

		<guid isPermaLink="false">http://www.sprungmarker.de/?p=886</guid>
		<description><![CDATA[Die Agentur Aperto hat für das Bundesministerium für Arbeit und Soziales einen Usability-Test mit Menschen mit Behinderungen durchgeführt und die Webseite einfach-teilhaben.de aufgabenorientiert benutzen und bewerten lassen. Die Ergebnisse wurden nun online präsentiert: Einfach-teilhaben.de im Usability-Test mit Menschen mit ...]]></description>
			<content:encoded><![CDATA[<p class="summary">Die Agentur <a href="http://www.aperto.de/" title="zur Agenturinfo">Aperto</a> hat für das <a href="http://www.bmas.de">Bundesministerium für Arbeit und Soziales</a> einen <span lang="en">Usability</span>-Test mit Menschen mit Behinderungen durchgeführt und die Webseite <a href="http://www.einfach-teilhaben.de" title="zur Webseite">einfach-teilhaben.de</a> aufgabenorientiert benutzen und bewerten lassen. Die Ergebnisse wurden nun online präsentiert: <a href="http://blog.aperto.de/?p=635" title="zu den Testergebnissen">Einfach-teilhaben.de im <span lang="en">Usability</span>-Test mit Menschen mit Behinderungen</a>.</p>
<p>In unserer barrierefreien Arbeit fehlen uns immer praktische Daten. Der herkömmliche Kontext ist ja, dass wir als Entwickler die ersten Nutzer sind, dann geht noch der <span lang="en">Controller</span> ran, danach der Kunde und irgendwann nach <span lang="en">Launch</span> der eigentliche Nutzer. Hat der Kunde noch <span lang="en">Feedback</span>schleifen eingebaut, erhalten wir wieder von den Nutzern Rückmeldungen, wenn sie mit der Benutzung der Webseite Schwierigkeiten haben. Das hört sich oftmals dann eher sehr allgemein an, unsere Aufgabe ist es dann, diese allgemeinen Aussagen zu überprüfen, die Schwierigkeiten zu finden &#8211; das heißt immer so schön <em><span lang="en">debuggen</span></em> -, den Aufwand zu schätzen und dann wieder in die Entwicklungsschleife einzubinden. Das ist quasi der 08/15 Prozess bei den meisten Agenturen.</p>
<p><span id="more-886"></span></p>
<p>Daher bin ich immer doppelt gespannt und erfreut, wenn ich Ergebnisse von Nutzertests lesen und sie mit den bisherigen Ergebnissen, seien sie nun theoretischer oder praktischer Natur, abgleichen kann. Ich bin einerseits zufrieden mit den Ergebnissen, nicht viel neues würde ich sagen, und andererseits auch ein wenig verwirrt, warum die <em>altgediente</em> Schere zwischen Theorie und Praxis wieder aufgemacht wurde. Aber nun mal alles der Reihe nach.</p>
<h3>Der Kontext des <span lang="en">Usability</span>-Tests</h3>
<p>Vielleicht ist es ja allen bekannt, vielleicht dann aber wieder nicht, die Agentur Aperto ist auch <a href="http://www.einfach-teilhaben.de/cln_093/DE/Service/Impressum/impressum_node.html" title="zum Impressum von einfach-teilhaben.de">verantwortlich</a> für Design und <span lang="en">Frontend</span>-Programmierung des Webauftritts einfach-teilhaben.de und der Test beschränkt sich im Wesentlichen auf das <span lang="en">Frontend</span>. Die <a href="http://www.einfach-teilhaben.de/cln_093/DE/Service/Hilfe/hilfe_node.html" title="Informationen zur Barrierefreiheit von einfach-teilhaben.de">Umsetzung des Webauftritts</a> ist explizit barrierefrei und auch für Menschen mit Behinderung realisiert, also ist schon ein hohes Niveau in der Umsetzung zu erwarten. Liest man sich die <a href="http://www.einfach-teilhaben.de/cln_093/DE/Service/Hilfe/hilfe_node.html" title="Informationen zur Barrierefreiheit von einfach-teilhaben.de">Informationen zur barrierefreien Umsetzung</a> von einfach-teilhaben.de durch, dann wird klar, warum etwa im <span lang="en">Usability</span>-Test explizit auf <acronym title="Web Accessibility Initiative" lang="en">WAI</acronym>-<acronym title="Accessible Rich Internet Application" lang="en">ARIA</acronym> und <span lang="en">JAWS</span> getestet wird. Auch wird der spezielle Fokus auf die beiden dann doch konkurrierenden Suchmöglichkeiten auf einer Seite &#8211; der generellen Suche und der Spezialsuche von Arzt und Kliniken &#8211; deutlicher. Spannend auch das Thema der Farbkontraste.</p>
<p>Was ich hier vorausschicken will, ist, dass man einen expliziten Vergleich zwischen den Ansprüchen der eigentlichen Umsetzung von einfach-teilhaben.de und den Ergebnissen aus dem <span lang="en">Usability</span>-Test ziehen kann. Im Video <a href="http://www.bmas.de/portal/41744/einfach__teilhaben.html" title="zur Webseite mit dem Video">Noch einfacher teilhaben</a>, das wichtige Funktionen und barrierefreie Umsetzungen des Webauftritts erklärt, wird nochmals speziell auf die guten Kontraste &#8211; vor allem auch auf die Möglichkeit, den Kontrast zu wechseln, hingewiesen, auf die unterschiedlichen Suchmöglichkeiten und, was ja besonders gut und präsent umgesetzt ist, die Videos in Gebärdensprache und die Möglichkeit, die Inhalte auch in leichter Sprache zu lesen. Wahrscheinlich werden die Ergebnisse des <span lang="en">Usability</span>-Tests noch umfassender dokumentiert werden und dann vielleicht vergleichender angelegt sein. Gerade damit würde sich für mich die angemahnte Lücke zwischen Theorie und Praxis schließen, wenn man die real programmierten Ergebnisse mit praktischen Nutzertests abgleicht.</p>
<h3>Nicht viel neues aus der Praxis</h3>
<p>Sieht man sich die angeführten Ergebnisse des <span lang="en">Usability</span>-Tests an, ist nicht viel neues zu lesen, fast alle Ergebnisse sind soweit bekannt. Dass eine Überschriftenhierarchie, wenn gut durchdacht und logisch, auch eine gute Nutzung bietet, dass Inhalte einer Webseite übersichtlich, einheitlich und gut strukturiert angeboten werden sollen und sich durchaus gängige und bekannte Semantik wie <span lang="en">Summary</span>, Listen und Zwischenüberschriften positiv bemerkbar macht und lesbarer ist, war zu erwarten. Hier stelle ich mir eher die Fragen, in wieweit die Option für Inhalte in leichter Sprache auch angenommen und genutzt  wurde. In den Ergebnissen werden sie nur im Kontext der Gebärdensprachvideos erwähnt, dass es optimal sei, zusätzlich zu den Gebärdensprachvideos noch ein Inhaltsverzeichnis in leichter Sprache anzubieten.</p>
<p>Formulare und deren Nutzbarkeit sind ja immer noch ein heikles Kapitel. Dass dabei oftmals die Formulierung ein Pferdefuß sein kann &#8211; <em>senden</em> für eigentlich <em>suchen</em> ist auch eher suboptimal, kann aber passieren -, ist bekannt. Gerade bei komplexeren Formularen wie Arztsuchen &#8211; also Suchanfragen in komplexen, oftmals Drittanbieter-Datenbanken &#8211; kann zu nicht immer alltagssprachlich verständlichen Formulierungen führen. Hier auch wieder der Hinweis in den Testergebnissen, Komplexität aufzulösen. Das genannte Beispiel hätte auch ich falsch genutzt und schön die Schrägstriche gesetzt. ;) Dass das erste Suchfeld &#8211; damit ist immer die generelle Suche über die ganze Webseite gemeint &#8211; möglichst weit oben und gerne im Kopf der Webseite erwartet wird, ist aus der <span lang="en">Usability</span>  bekannt. Zu gerne werden auch merkwürdige Layoutkonstrukte generiert, nur damit die Suche ja ganz am Anfang der Seite steht. Dass mehrere Suchangebote auf einer Seite verwirren, ist nachvollzieh- und erwartbar, schließlich steigt die Komplexität der Webseite dann insgesamt gehörig. Bei der Vorschlags-Suche sollte vielleicht erwähnt werden, dass sie stark <span lang="en">browser</span>abhängig ist, ich müsste dafür wohl erst meine virtuelle Umgebung anwerfen. Aber klar &#8211; gerade die <span lang="en">Suggest</span>-Suche gehört zu jenen <span lang="en">Features</span>, die sogar das <acronym title="Web Content Accessibility Guidelines" lang="en">WCAG</acronym> 2 empfiehlt.</p>
<h3>Die diskussionsfreudigen Ergebnisse</h3>
<p>Vorsichtiger sollte man jedoch an jene Ergebnisse herangehen, die sich so in der Form nicht wirklich verallgemeinern lassen oder zumindest diskussionswürdig sind. Anschauliche Wissensvermittlung ja, aber alles jetzt auf Videos zu verlagern, weil es einfach sei, einen <span lang="en">Play-Button</span> zu drücken, halte ich für eher wenig praxisnah. Das Zitat des Nutzers bezieht sich dabei auf das Lesen <em>langer</em> Texte. Ich stelle mir gerade vor, lange Text ins Videoformat zu transferieren. Alles möglich, keine Frage, aber weder robust in die Zukunft noch sinnvoll. Videos können ergänzen, aber sollten nicht ersetzen. Sich auf den <span lang="en">Back-Button</span> zu 100% zu verlassen, mag ja eine gute, alte Angewohnheit der Nutzer sein, aber ich würde hierzu lieber mehr Praxisdaten haben wollen, bevor man hochdynamische Seiten wieder so runterregelt, dass der <span lang="en">Back-Button</span> auch wieder auf die Vorseite zurückführt. Irgendwie erinnert mich das an die Anfangszeiten des <span lang="en">Webs</span> und der PHP-Programmierung &#8230;</p>
<p>Dass der <span lang="en">Screenreader</span> in seiner aktuellen Version nicht immer Standard ist, ist bekannt. Aber der Weg kann doch nicht sein, dass man auf WAI-ARIA <span lang="en">Landmarks</span> verzichtet, weil einige Nutzer noch <span lang="en">JAWS</span> 4 haben. Die Darstellung der Testergebnisse erwecken etwas ungeschickt jedoch den Eindruck, wir sollten uns jetzt wieder mehr nach unten hin orientieren, dabei ist ein Einsatz von <span lang="en">Landmarks</span> nach unten ja kompatibel, der alte <span lang="en">Screenreader</span> ignoriert das einfach. Ein generelles Verdikt gegen den alleinigen Einsatz von WAI-ARIA auszusprechen, ist derzeit doch gar nicht notwendig. Ich denke, niemand setzt WAI-ARIA derzeit ausschließlich ein, die Frage ist doch, ist WAI-ARIA dafür überhaupt gedacht?</p>
<p>Mich würde in diesem Zusammenhang interessieren, mit welchen <span lang="en">Screenreadern</span> wurde getestet und sind <span lang="en">Opensource-Reader</span> wie NVDA überhaupt eine Option für die Nutzer? Gerade bei so einer spezialisierten Webseite wie einfach-teilhaben.de wäre die Nutzung von <span lang="en">Screenreadern</span> interessant, vielleicht wäre eine Umfragemöglichkeit da spannend. Wir haben ja für den deutschsprachigen Raum immer noch zu wenig Daten zur <span lang="en">Screenreader</span>-Nutzung, ist <span lang="en">JAWS</span> wirklich Marktführer. Sieht man sich im Vergleich dazu die <a href="http://www.webaim.org/projects/screenreadersurvey2/" title="zur Umfrage von WebAIM" hreflang="en"><span lang="en">Screenreader</span>-Umfrage von <span lang="en">WebAIM</span></a> für den englischsprachigen Bereich an, fällt auf, dass <span lang="en">JAWS</span> auch Marktführer ist, aber NVDA als Zweit<span lang="en">reader</span> durchaus gängiger wird. Die <span lang="en">Update</span>freudigkeit liegt viel höher bei über 80% und sieht man sich die Nutzung von WAI-ARIA <span lang="en">Landmarks</span> an, liegt die fehlerhafte Nutzung nur zu 5% daran, dass der <span lang="en">Screenreader</span> sie nicht interpretiert. Über 40% der Nutzer wissen schlicht nicht, dass es <span lang="en">Landmarks</span> gibt. <span lang="en">WebAIM</span> summiert daraus, dass es eben eine bessere Informationspolitik dahingehend geben muss.</p>
<p>Ein weiteres schwieriges Terrain ist tatsächlich die Kontrastproblematik. Zwar haben wir jetzt durch das WCAG 2 eine neue Kontrastformel, sämtliche Tools testen auch schon wunderbar darauf ab. Aber &#8211; und das ist für mich wirklich das einzige wirklich spannende Ergebnis des <span lang="en">Usability</span>-Tests &#8211; was ist, wenn zwar alles richtig zahlentechnisch validiert, aber der Nutzer nach wie vor meldet, dass der Kontrast undeutlich oder zu schwach ist? Interessanterweise erhalte ich, wenn ich die entsprechenden Farbwerte in den <a href="http://snook.ca/technical/colour_contrast/colour.html" title="zum Colour Contrast Check" hreflang="en" lang="en">Colour Contrast Check</a> eingebe, wieder andere Werte als die in der Studie ausgewiesenen im Kontrastchecker, vor allem validieren sie nicht auf AA für normale Texte. Ein weiterer problematischer Punkt bei diesen Kontrasten ist, dass sie auf einem Verlauf liegen. Dadurch kann man gut nachvollziehen, dass Nutzer von Flimmern sprechen. Immer eine problematische Geschichte: Fliesstext auf Verläufen.</p>
<h3>Barrierefreiheit ist alles zusammen: Theorie, Technik und Praxis.</h3>
<p>Ein wenig schade ist, dass die Testergebnisse dann auf diese Schere zwischen Theorie und Praxis zusammengestutzt werden. Dabei fußt der Test doch auf beidem: Theorie und Praxis. Es wäre doch arg verkürzt zu sagen, wir entwickeln Webseiten aus einer, wenn auch gängigen Theorie? Ich denke, diese Schere beruht auf einem Missverständnis von Theorie. Vielleicht ist das auch das falsche Wort dafür &#8211; eher meint es so was wie <em>etablierte Standards</em>. Und etablierte Standards entstehen und entwickeln sich weiter aus beidem: Theorie und Praxis. Wenn uns freilich immer eher Input aus der konkreten Nutzerpraxis fehlt.</p>
<p>Ohne diese etablierten Standards könnten wir barrierefreie Seiten niemals professionell umsetzen. Wir müssen uns auf Standards und deren Werkzeuge verlassen können. Bei der Kontrastproblematik fehlt mir oft der ganze praktische Rahmen, also muss ich mich auf die Testwerkzeuge verlassen können. Und wir haben mittlerweile gute Standards, wir haben ein WCAG 2, das uns die Standards auch noch technisch unterfüttert, uns Werkzeuge, <span lang="en">Best Practice</span> liefert und uns auf Fehler aufmerksam macht. Nur auf diesem etablierten Standard können die Testergebnisse dann kritisch hinterfragt und bewertet werden. Ich bin völlig einverstanden mit der Aussage, dass sich jeder Test mit Nutzern lohnt. Aber wir sollten immer daran denken, dass sich Theorie aus Praxis und umgekehrt speist.</p>
<p>Insofern plädiere ich immer zuallerst für eine barrierefreie Theorie, auch wenn der Nutzer &#8211; wie im WAI-ARIA <span lang="en">Landmark</span>-Fall &#8211; noch nicht davon gehört hat. Ich bin Entwicklerin.</p>
<p class="wp-flattr-button"></p> <p><a href="http://sprungmarker.de/?flattrss_redirect&amp;id=886&amp;md5=99d51c9347c0e9304370f74c060e3fbc" title="Flattr" target="_blank"><img src="http://sprungmarker.de/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=_Gftgw5p9hA:l5St_qmfOtQ:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?i=_Gftgw5p9hA:l5St_qmfOtQ:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=_Gftgw5p9hA:l5St_qmfOtQ:ewi2tLLrNnk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=ewi2tLLrNnk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=_Gftgw5p9hA:l5St_qmfOtQ:eYgBPDbq7UE"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=eYgBPDbq7UE" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=_Gftgw5p9hA:l5St_qmfOtQ:MxV00nO3qFw"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=MxV00nO3qFw" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=_Gftgw5p9hA:l5St_qmfOtQ:aVEt4g-unHM"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=aVEt4g-unHM" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=_Gftgw5p9hA:l5St_qmfOtQ:I9og5sOYxJI"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=I9og5sOYxJI" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SprungmarkerKompakt/~4/_Gftgw5p9hA" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://sprungmarker.de/2010/kurz_kommentiert_einfach_teilhaben_de_im_usabilitytest/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		<feedburner:origLink>http://sprungmarker.de/2010/kurz_kommentiert_einfach_teilhaben_de_im_usabilitytest/</feedburner:origLink></item>
		<item>
		<title>Kurz kommentiert: Der Quellcode gehört nur zur Aufgabe, nicht zur Lösung</title>
		<link>http://feedproxy.google.com/~r/SprungmarkerKompakt/~3/_1-BApZl_3o/</link>
		<comments>http://sprungmarker.de/2010/kk_der_quellcode_gehoert_nur_zur_aufgabe_nicht_zur_loesung/#comments</comments>
		<pubDate>Fri, 08 Jan 2010 15:39:20 +0000</pubDate>
		<dc:creator>Egger Sylvia</dc:creator>
				<category><![CDATA[Barrierefreiheit]]></category>
		<category><![CDATA[Webstandards]]></category>
		<category><![CDATA[BIENE]]></category>
		<category><![CDATA[kompakt]]></category>
		<category><![CDATA[Manufactum]]></category>
		<category><![CDATA[Validität]]></category>
		<category><![CDATA[W3C]]></category>

		<guid isPermaLink="false">http://www.sprungmarker.de/?p=877</guid>
		<description><![CDATA[Oliver Heeger hat in seinem Blog den BIENE Preisträger Manufactum auf Validität geprüft, war mit dem Ergebnis nicht zufrieden und versucht es an die herkömmliche Bedeutung einer Goldmedaille rückzubinden: Gold heißt für mich GOLD, 10 von 10 Punkten, besser ...]]></description>
			<content:encoded><![CDATA[<p class="summary">Oliver Heeger hat in seinem <cite><a href="http://poetry-spam.de/ok-dann-muss-ich-wohl…/" title="zum Artikel von Oliver Heeger">Blog</a></cite> den <a href="http://www.biene-award.de/award/" title="zur Presseinformation der BIENE">BIENE Preisträger</a> <a href="http://www.manufactum.de/" title="zur Webseite von Manufactum">Manufactum</a> auf Validität geprüft, war mit dem Ergebnis nicht zufrieden und versucht es an die herkömmliche Bedeutung einer Goldmedaille rückzubinden: <q>Gold heißt für mich GOLD, 10 von 10 Punkten, besser geht’s nicht, Top of the Pops, 1a, FEHLERFREI!!!</q></p>
<p>Den <a href="http://validator.w3.org/" title="zur Webseite des W3C Validators" hreflang="en"><acronym title="World Wide Web Consortium" lang="en">W3C</acronym> Validator</a> zu nutzen, um eine Webseite auf ihre Validierung zu prüfen, ist ja für uns alle Tagesgeschäft, wir sollten aber, wenn wir eine Webseite prüfen, uns auch das <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.manufactum.de%2Fhome.html&amp;charset=%28detect+automatically%29&amp;doctype=Inline&amp;ss=1&amp;group=0&amp;verbose=1&amp;user-agent=W3C_Validator%2F1.654#line-81" title="zum Prüfprotokoll der Webseite Manufactum" hreflang="en">Prüfprotokoll genau ansehen</a> und die aufgeführten Fehler in einen entsprechenden Kontext setzen. Und weil es mir gerade Spass macht, greife ich ein wenig plagiathaft dabei auf Wittgensteins <a href="http://de.wikipedia.org/wiki/Tractatus_Logico-Philosophicus" title="zum Wikipedia-Eintrag des Tractatus Logico-Philosophicus">Tractatus Logico-Philosophicus</a> zurück &#8211; sehr bescheidene Reminiszenz an mein Salzburger Philosophiestudium. ;)</p>
<p><span id="more-877"></span></p>
<h3>Im Quellcode ist nichts zufällig</h3>
<p>Sehen wir uns doch mal genauer an, was im Quellcode bei Manufactum nicht validiert. Oliver Heeger hat das nur kurz angerissen, hier ein wenig detailierter: Nicht-maskiertes <span lang="en">Javascript</span> (1x), Schachtelungsfehler (5x) und <span lang="en">Doctype</span>-Warnungen (25x). Führt man die Fehler und Warnungen des Validators so auf, relativiert sich schon einiges.</p>
<p>Geht man nun noch genauer an die einzelnen Fehlerquellen ran, kann man gut festmachen, woher die Fehler kommen. Gut, das nicht-maskierte Javascript muss schlicht maskiert werden, das tritt an einer Stelle auf und ist schnell behoben. Spannender wird es bei den <span lang="en">Doctype</span>-Warnungen. Fast ein <em>Klassiker</em> dürfte es sein, das Meta-Element von <span lang="en">Google</span> in der XHTML-Variante schlicht zu kopieren. Die Seite selbst nutzt ja den <span lang="en">Doctype</span> HTML 4.01 <span lang="en">Strict</span>, daraus ergeben sich sämtliche <span lang="en">Doctype</span>-Warnungen. Ein weiterer, mir sehr bekannter Klassiker ist das Input-Feld <code><span lang="en">type</span>=<span lang="en">hidden</span></code>, das xhtml-konform mit <span lang="en">Slash</span> geschlossen und so eingebaut wird. Höchstwahrscheinlich kommen die Formularelemente xhtml-konform aus einer dynamischen <span lang="en">Engine</span>.</p>
<p>Für die Überschriften wird ein System verwendet, dass den Inhalt der Überschrift aus dem CMS in eine Grafik <span lang="en">rendert</span>. Leider schließt diese Grafik auch wieder mit einem <span lang="en">Slash</span> xhtml-konform ab und wirft daher eine <span lang="en">Doctype</span>-Warnung. Auch hier vermute ich, dass dieses System die Grafik automatisch ins Template packt, eventuell kann man im Backend an die Generierung rangehen und den <span lang="en">Slash</span> entfernen. Wenn es im <span lang="en">Template</span> dynamisiert ist, dann geht das quasi sofort. :) Da die Überschrift natürlich mehrmals auf der Webseite eingesetzt ist, ergeben sich daraus dann mehrfache Warnungen. Auch <code>br</code>-Elemente sind immer mal wieder xhtml-konform geschlossen, aber &#8211; soweit ich das erkennen kann &#8211; immer nur in Teil<span lang="en">template</span>-Kontexten. Daraus lässt sich schließen, dass hier wohl ein Editor, der xhtml-konform arbeitet, im Einsatz ist.</p>
<p>Bei den Schachtelungsfehlern, dass etwa in ein <code>p</code>-Element ein <code>div</code>-Element verschachtelt ist &#8211; da kommen sich zwei Blockelemente in die Quere -, bin ich noch unsicher, wie die wirklich zustande kommen. Sie treten innerhalb Teiltemplates auf und das <code>p</code>-Element umschließt dabei stets andere Blockelemente wie <code>div</code>. Zuerst dachte ich, dass das <code>p</code>-Element eventuell durch den Einsatz eines Editors entsteht, aber es ist eher unwahrscheinlich, dass im Editor fest benamte <code>div</code>-Elemente eingebaut sind. Okay, möglich ist immer alles. :) Sieht man sich jedoch den gesamten Aufbau der Seite an, fällt diese Block-in-Block-Schachtelung eher singulär auf. Interessant wäre für mich, wie das genau in der <span lang="en">Template</span>generierung passiert.</p>
<h3>Der Quellcode gehört nur zur Aufgabe, nicht zur Lösung</h3>
<p>Zugegeben das ist jetzt Wittgenstein sehr zugespitzt formuliert, aber es soll darauf hinweisen, dass Quellcode Aufgaben erfüllt und nicht Selbstzweck ist. Es ist natürlich wunderbar, wenn die Aufgabe soweit erfüllt wird, dass sie auch gelöst und valide ist. :) Sehen wir uns jedoch die Validierungsprobleme von Manufactum genauer unter diesem Aspekt an, fallen uns zwei Stichworte ein: Dynamisierung und Fremdsysteme. Manufactum wurde von der Agentur <a href="http://neuland-bfi.de/" title="zur Webseite der Agentur">neuland</a> bereits 2007 realisiert, die sich <a href="http://www.ibusiness.de/dienstleister/jb/3673890070.html" title="zu den Referenzen der Agentur bei ibusiness">auf <span lang="en">Shop</span>systeme spezialisiert</a> und den <span lang="en">Relaunch</span> auf der  Basis von <a href="http://en.wikipedia.org/wiki/Spring_Framework" title="zum Wikipedia-Eintrag Spring Framework"><span lang="en">spring/hibernate</span></a> realisiert hat. Abgesehen davon, dass Shopsysteme lange Zeit &#8211; wer schon damit Erfahrung gewonnen hat, wird mir zustimmen &#8211; ohnehin oft eine Webstandards-Wüste waren, scheint die Kombination von <span lang="en">Spring</span>- und <a href="http://de.wikipedia.org/wiki/Hibernate_%28Framework%29" title="zum Wikipedieintrag Hibernate Framework"><span lang="en">Hibernate</span></a>-<span lang="en">Framework</span> in der Ausgabe richtig gut anpassbar zu sein. Leider kenne ich beide <span lang="en">Frameworks</span> nicht, aber ich nehme an, dass da &#8211; sieht man sich die Kommentare an &#8211; auch ein <span lang="en">Template</span>system zur Verfügung steht. Und was da an Teil<span lang="en">templates</span> ausgegeben wird, ist durchaus sehr semantisch, weitgehend reduziert und standardkonform.</p>
<p>Templatesysteme bringen uns endlich Dynamisierung und daher kann man die Validierungsprobleme bei Manufactum auch sicherlich schnell beheben. Nimmt man die Fehler und Warnungen nur 1x, sieht das dann wirklich schon fast beiläufig aus: Nicht-maskiertes <span lang="en">Javascript</span> (1x), Schachtelungsfehler (2x) und <span lang="en">Doctype</span>-Warnungen (5x). Es ist schlicht wichtig, sich die Anzahl der Fehler im Hinblick auf den dynamischen Aspekt anzusehen. Schließlich wird der schließende <span lang="en">Slash</span> dann x-mal durch die mehrmalige <span lang="en">Template</span>einbindung ausgegeben. Andererseits muss der <span lang="en">Slash</span> dann auch nur an einer Stelle in einigen Teil<span lang="en">templates</span> entfernt werden, auch so ein wunderbares Ergebnis des <span lang="en">Templating</span>.</p>
<h3>Und außerhalb der Validität ist alles Zufall?</h3>
<p>Nein. :) Aber seit Jahren warten wir auf BIENE-Preisträger die hochkomplexe, dynamische Systeme barrierefrei gestalten. Und wer mit hochdynamischen Systemen täglich arbeitet, wird mir wieder zustimmen, dass das für die Barrierefreiheit zweierlei bedeuten kann: einen Fluch und einen Segen. Zum einen wird es mit <span lang="en">Template</span>systemen und <span lang="en">Engines</span> etwa für Formulare einfacher, an genau abgegrenzten Stellen Barrierefreiheit einzuarbeiten und in hoher Dynamik dann auch verlässlich auszugeben und zur Verfügung zu stellen. Andererseits steigt durch hochdynamische Systeme auch die Fehlerhäufigkeit, die Komplexität von Modulen und Techniken oder auch die Einbindung von Fremdanteilen. Mitunter hat man auf etliche Module und Anteile dann kaum oder gar keinen Zugriff mehr.</p>
<p>Was bleibt? Oliver Heeger hat natürlich recht, Validitätsprobleme einzuklagen. Aber &#8211; und da sollten wir einfach mal mindestens einen Schritt in der Argumentation zurückgehen &#8211; angesichts dessen, was an Dynamik hinter Manufactum steht, sind die Validitätsfehler und -warnungen doch minimal. Das finde ich spannend an so einem Preisträger, zu verfolgen und mir genau anzusehen, wie er mit diesen komplexen Anforderungen im Hinblick auf Webstandards und Barrierefreiheit umgeht. Und es gibt ja noch mehr Preisträger dieses Jahr, die mit hochdynamischen Systemen arbeiten. Eben genau auf solche Ergebnisse und Preisträger haben wir doch gewartet oder?!</p>
<p>Insofern kann man Wittgenstein nur zustimmen: Einen a priori <em>wahren</em> Quellcode gibt es nicht. Wir müssen ihn immer wieder mit der (<em>dynamischen</em>) Wirklichkeit vergleichen.</p>
<h3><span lang="en">Update</span></h3>
<p>Mathias Schäfer hat hier in <a href="http://www.sprungmarker.de/2010/kk_der_quellcode_gehoert_nur_zur_aufgabe_nicht_zur_loesung/#comment-10808" title="zum Kommentar">seinem Kommentar</a> sehr richtig darauf hingewiesen, dass es sich bei <code>p &gt; div</code> nicht um Schachtelungsfehler handelt, sondern das schliessende p in HTML 4 optional ist und daher im Validator nur der Hinweis auf ein schliessendes p steht, das keine Entsprechung mehr zu einem öffnenden hat.</p>
<p class="wp-flattr-button"></p> <p><a href="http://sprungmarker.de/?flattrss_redirect&amp;id=877&amp;md5=1cfce372cd63eb85e72e79025636efe8" title="Flattr" target="_blank"><img src="http://sprungmarker.de/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=_1-BApZl_3o:WhQ32KY7U0Y:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?i=_1-BApZl_3o:WhQ32KY7U0Y:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=_1-BApZl_3o:WhQ32KY7U0Y:ewi2tLLrNnk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=ewi2tLLrNnk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=_1-BApZl_3o:WhQ32KY7U0Y:eYgBPDbq7UE"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=eYgBPDbq7UE" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=_1-BApZl_3o:WhQ32KY7U0Y:MxV00nO3qFw"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=MxV00nO3qFw" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=_1-BApZl_3o:WhQ32KY7U0Y:aVEt4g-unHM"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=aVEt4g-unHM" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=_1-BApZl_3o:WhQ32KY7U0Y:I9og5sOYxJI"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=I9og5sOYxJI" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SprungmarkerKompakt/~4/_1-BApZl_3o" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://sprungmarker.de/2010/kk_der_quellcode_gehoert_nur_zur_aufgabe_nicht_zur_loesung/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		<feedburner:origLink>http://sprungmarker.de/2010/kk_der_quellcode_gehoert_nur_zur_aufgabe_nicht_zur_loesung/</feedburner:origLink></item>
		<item>
		<title>sprungmarkers Termine 2010</title>
		<link>http://feedproxy.google.com/~r/SprungmarkerKompakt/~3/c53Vzr2osWc/</link>
		<comments>http://sprungmarker.de/2010/sprungmarkers_termine_2010/#comments</comments>
		<pubDate>Tue, 05 Jan 2010 22:35:40 +0000</pubDate>
		<dc:creator>Egger Sylvia</dc:creator>
				<category><![CDATA[Barrierefreiheit]]></category>
		<category><![CDATA[Intern]]></category>
		<category><![CDATA[Webstandards]]></category>
		<category><![CDATA[A-TAG]]></category>
		<category><![CDATA[Konferenz]]></category>
		<category><![CDATA[republica]]></category>
		<category><![CDATA[Termin]]></category>
		<category><![CDATA[Wekongress Erlangen]]></category>

		<guid isPermaLink="false">http://www.sprungmarker.de/?p=867</guid>
		<description><![CDATA[Eigentlich würde vor den Terminen 2010 der Jahresrückblick stehen, aber für Rückblicke nehme ich mir immer noch ein wenig mehr Zeit. Daher habe ich mal die Uhr nach vorne gestellt und die sprungmarker Termine für 2010 schon mal ausgelegt, ...]]></description>
			<content:encoded><![CDATA[<p class="summary">Eigentlich würde vor den Terminen 2010 der Jahresrückblick stehen, aber für Rückblicke nehme ich mir immer noch ein wenig mehr Zeit. Daher habe ich mal die Uhr nach vorne gestellt und die sprungmarker Termine für 2010 schon mal ausgelegt, die man auf der Webseite immer im rechten Bereich aktuell verfolgen kann &#8211; aber es wird sich nur im Kleinen noch was ändern, das große Raster sitzt. :)</p>
<h3>Februar: transmediale (Berlin)</h3>
<p>Da ich arbeitsbedingt Anfang Februar in Berlin sein werde, habe ich mich gleich zur <a href="http://www.transmediale.de/" title="zur Webseite der transmediale">transmediale</a> aufgerafft. Da werde ich dann vom 2.-7.2. Performance, Film, Ausstellung und Konferenz in Sachen <em><span lang="en">Futurity Now</span></em> genießen &#8211; endlich mal wieder ein richtiger medialer Kulturlandschaftsstrich. Vor allem für mich spannend meinen ehemaligen Medientheorie-Professor wieder zusehen &#8211; <a href="http://www.gwk.udk-berlin.de/fachgebiete/audiovisuelle-kommunikation/personen/zielinski/">Siegfried Zielinski</a>.  Grade erfreut gesehen, dass er erst am Samstag seinen Vortrag hält, freitags wäre das kritisch gewesen, weil ich da ja den ganzen Tag arbeitsbedingt okkupiert bin, aber die haben <span lang="en">Long Conversation</span> bis 22:00 Uhr &#8211; da kann ich ja danach mich in den Konversations-<span lang="en">Chair</span> setzen. Ach so, weiß ja kaum einer, ich habe Medientheorie und -geschichte mit Schwerpunkt Geschichte der Medien studiert, deswegen freu ich mich bannig auf die Ausstellung zur <a href="http://www.transmediale.de/en/node/10669" hreflang="en" title="zur Ausstellungsinformation">Futura Obscura</a>. Das erinnert mich wieder daran, dass mein Aufsatzentwurf zu Goethes Wahlverwandtschaften und dem Camera-Obscura-Motiv noch immer unfertig in der Schublade liegt. Für mich ist die transmediale quasi wieder eine Rückkehr zu meinen medientheoretischen <em>Wurzeln</em>, die vernachlässige ich derzeit sehr, leider.</p>
<p><span id="more-867"></span></p>
<h3>April: re:publica (Berlin)</h3>
<p>Hatte ich ja letztes Jahr nicht geschafft, die <a href="http://re-publica.de/10/" title="zur Webseite der re:publica">re:publica</a>.  Ich könnte jetzt sagen, ich hab schon gebloggt, da hieß das noch gar nicht so. ;) Nee, wirklich &#8211; ich kenne sogar die Vor-Nucleus-Zeiten. ;) Insofern ist es endlich ein Muss, als Urgestein da mal aufzutauchen und sei es nur, um alles ganz schön langweilig und kommerzialisiert vorzufinden. Und ist ja auch in Berlin, da weiß ich mir sonst schon zu helfen &#8211; hab mich ja jahrelang in Berlin gut durchgebracht. Nee, ich freu mich wirklich drauf, werde mich da wieder ne Woche in Berlin an- und einschließen. Fein.</p>
<h3>Herbst: stARTconference (Duisburg), Webkongress Erlangen (Nürnberg), A-TAG (Wien) und <span lang="en">Fronteers </span>2010 (Amsterdam)</h3>
<p>Irgendwie bündelt sich immer dann alles in Richtung Herbst, das scheint schon fast ein Konferenzgesetz zu sein. ;) Letztes Jahr habe ich es nicht auf die <a href="http://www.startconference.org/" title="zur Konferenzwebseite">stARTconference</a> geschafft, dieses Jahr habe ich ja auch zu meinem Kulturjahr ernannt, also habe ich da auch so meine Verpflichtungen (transmediale, re:publica) und fahre im September nach Duisburg. 2 Jahre haben wir ja nun gewartet auf den <a href="http://www.webkongress.uni-erlangen.de/" title="zur Kongresswebseite">Webkongress Erlangen</a>, nun ist es wieder soweit, diesmal dann wohl in Nürnberg und zum Thema <em>Lösungen / <span lang="en">Solutions</span></em>. Ergo also mustergültige Lösungen, <span lang="en">Best Practices</span>. Ich fand den Kongress <a href="http://www.sprungmarker.de/2008/webkongress_erlangen_fazit_erster_tag/" title="mein Fazit zum Kongress vor 2 Jahren">schon vor 2 Jahren</a> sehr spannend und unkompliziert im Umgang, daher freu ich mich auf ein <span lang="en">Update</span>.</p>
<p>Der <a href="http://atag.accessiblemedia.at" title="zur Konferenzseite">A-Tag</a> in Wien ist ja immer eine Reise wert, nicht nur wegen Wien. ;) Im <a href="http://twitter.com/atag" title="zum Twitter der Konferenz">Twitter</a> war zu lesen, dass es auch dieses Jahr wieder einen A-Tag geben wird, also werde ich schon mal einen <span lang="en">Timeslot</span> freimachen von Oktober bis November &#8230; Die <a href="http://fronteers.nl/congres" lang="en" hreflang="en" title="zur Konferenzwebseite">Fronteers 2010</a> ist ein Musstermin für mich &#8211; wahrscheinlich wieder November -, letztes Jahr war das meine erste ausländische Konferenz und bis auf ein paar Abstriche fand ich das sehr spannend. Auf ihrer Konferenzwebseite haben sie ihre Besuchererwartungen noch mal um 100 Teilnehmer hochgeschraubt. Gut, spätestens dann brauche ich ein größeres Hotelzimmer in Amsterdam (<a href="http://www.sprungmarker.de/2009/fronteers09_meine_erste_internationale/" title="zu meinem Bericht über die Fronteers 2009">mein Bericht</a> aus dem letzten Jahr lässt dahingehend und überhaupt nichts zu wünschen übrig).</p>
<p>Höchstwahrscheinlich werde ich noch auf der <a href="http://it-republik.de/konferenzen/webtech09/" title="zur Konferenzwebseite">Webtech</a> sein, weil unsere Programmierung festgestellt hat, dass letztes Jahr auch was für uns Frontend-Entwickler da dabei gewesen wäre. Ach nee! ;) Wenn ich mir das grade jetzt noch mal so durchsehe, ist das im Grunde schon wieder alles zu üppig, aber was soll&#8217;s, ich habe mich letztes Jahr schlicht an dieses unstete Leben gewöhnt und finde es irgendwie auch gut so. Auch wenn mich dann nachts im Hotelzimmer der Katzenjammer einholt und ich mir vornehme, endlich diesen vermaledeiten Aufsatz zu Goethes Wahlverwandtschaften durchzuarbeiten. Aber irgendwie ahne ich, der wird auch dieses Jahr nicht fertig werden. ;)</p>
<p class="wp-flattr-button"></p> <p><a href="http://sprungmarker.de/?flattrss_redirect&amp;id=867&amp;md5=298eb9e74195838dbbefa13801254fcf" title="Flattr" target="_blank"><img src="http://sprungmarker.de/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=c53Vzr2osWc:j_-tIOB2eic:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?i=c53Vzr2osWc:j_-tIOB2eic:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=c53Vzr2osWc:j_-tIOB2eic:ewi2tLLrNnk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=ewi2tLLrNnk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=c53Vzr2osWc:j_-tIOB2eic:eYgBPDbq7UE"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=eYgBPDbq7UE" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=c53Vzr2osWc:j_-tIOB2eic:MxV00nO3qFw"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=MxV00nO3qFw" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=c53Vzr2osWc:j_-tIOB2eic:aVEt4g-unHM"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=aVEt4g-unHM" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=c53Vzr2osWc:j_-tIOB2eic:I9og5sOYxJI"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=I9og5sOYxJI" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SprungmarkerKompakt/~4/c53Vzr2osWc" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://sprungmarker.de/2010/sprungmarkers_termine_2010/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://sprungmarker.de/2010/sprungmarkers_termine_2010/</feedburner:origLink></item>
		<item>
		<title>Jeder kann mithelfen und übersetzen!</title>
		<link>http://feedproxy.google.com/~r/SprungmarkerKompakt/~3/IthNXzLi2GM/</link>
		<comments>http://sprungmarker.de/2010/jeder_kann_mithelfen_und_uebersetzen/#comments</comments>
		<pubDate>Sun, 03 Jan 2010 22:35:25 +0000</pubDate>
		<dc:creator>Egger Sylvia</dc:creator>
				<category><![CDATA[Barrierefreiheit]]></category>
		<category><![CDATA[Einfach für Alle]]></category>
		<category><![CDATA[W3C]]></category>
		<category><![CDATA[WAI]]></category>
		<category><![CDATA[WCAG]]></category>
		<category><![CDATA[WCAG2]]></category>

		<guid isPermaLink="false">http://www.sprungmarker.de/?p=865</guid>
		<description><![CDATA[Seit November gibt es ja nun eine offizielle deutsche Version der WCAG 2, dankenswerter Weise durch eine von der Aktion Mensch ins Leben gerufenen Arbeitsgruppe realisiert. Aber das ist noch nicht alles: In loser Folge werden nun weitere Dokumente ...]]></description>
			<content:encoded><![CDATA[<p class="summary">Seit November gibt es ja nun eine <a href="http://www.einfach-fuer-alle.de/wcag2.0/" title="zur Ankündigung bei Einfach für Alle">offizielle deutsche Version</a> der <acronym title="Web Content Accessibility Guidelines" lang="en">WCAG</acronym> 2, dankenswerter Weise durch eine von der Aktion Mensch ins Leben gerufenen Arbeitsgruppe realisiert. Aber das ist noch nicht alles: In loser Folge werden nun <a href="http://www.einfach-fuer-alle.de/blog/id/2555/" title="zum Artikel bei Einfach für Alle">weitere Dokumente</a> der <acronym title="Web Accessibility Initiative" lang="en">WAI</acronym> des <acronym title="World Wide Web Consortium" lang="en">W3C</acronym> veröffentlicht.</p>
<p>Die übersetzten Dokumente &#8211; derzeit sind es schon 7 &#8211;  werden auf der Webseite von <a href="http://www.einfach-fuer-alle.de">Einfach für Alle</a> jeweils angekündigt, sind Rohfassungen und können jederzeit von <strong>allen</strong> im Kommentarbereich kommentiert und verbessert werden. Ich habe schon damit begonnen, immer wenn ich ein wenig Zeit habe, die Texte durchzukommentieren. Das geht recht flott und es würde helfen, wenn sich da mehr aufraffen würden. Je mehr Leute sich ein wenig Zeit nehmen, desto weniger ist es insgesamt für den Einzelnen. :) Also wirklich, bis dato hat kaum einer versucht, da ein wenig gegenzulesen. Schliesslich hat man selten die Gelegenheit, aktiv an Übersetzungen für den eigenen Fachbereich mitzuarbeiten und auch noch so einfach mit ein paar Kommentaren.</p>
<p><strong>Also los und danke!</strong> :)</p>
<p class="wp-flattr-button"></p> <p><a href="http://sprungmarker.de/?flattrss_redirect&amp;id=865&amp;md5=94556abea0a7a0750a05ca7d024e6cf8" title="Flattr" target="_blank"><img src="http://sprungmarker.de/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=IthNXzLi2GM:4SDPGL4il5M:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?i=IthNXzLi2GM:4SDPGL4il5M:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=IthNXzLi2GM:4SDPGL4il5M:ewi2tLLrNnk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=ewi2tLLrNnk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=IthNXzLi2GM:4SDPGL4il5M:eYgBPDbq7UE"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=eYgBPDbq7UE" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=IthNXzLi2GM:4SDPGL4il5M:MxV00nO3qFw"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=MxV00nO3qFw" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=IthNXzLi2GM:4SDPGL4il5M:aVEt4g-unHM"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=aVEt4g-unHM" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=IthNXzLi2GM:4SDPGL4il5M:I9og5sOYxJI"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=I9og5sOYxJI" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SprungmarkerKompakt/~4/IthNXzLi2GM" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://sprungmarker.de/2010/jeder_kann_mithelfen_und_uebersetzen/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<feedburner:origLink>http://sprungmarker.de/2010/jeder_kann_mithelfen_und_uebersetzen/</feedburner:origLink></item>
		<item>
		<title>Kurz kommentiert: Die "Gestandenheit" des barrierefreien Entwicklers</title>
		<link>http://feedproxy.google.com/~r/SprungmarkerKompakt/~3/np-Ktp6gp_A/</link>
		<comments>http://sprungmarker.de/2010/kk_gestandheit_barrierefreier_entwickler/#comments</comments>
		<pubDate>Sun, 03 Jan 2010 22:14:48 +0000</pubDate>
		<dc:creator>Egger Sylvia</dc:creator>
				<category><![CDATA[Barrierefreiheit]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Webstandards]]></category>
		<category><![CDATA[Screenreader]]></category>
		<category><![CDATA[WAI-ARIA]]></category>

		<guid isPermaLink="false">http://www.sprungmarker.de/?p=857</guid>
		<description><![CDATA[Alexander Farkas versucht in seinem Artikel WAI-ARIA - Epic Fail (Too much accessibility - good intentions, badly implemented) und vor allem in seiner Serie WAI-ARIA Epic Fail zu ergründen, warum in der Implementierung von WAI-ARIA doch noch einiges unrund ...]]></description>
			<content:encoded><![CDATA[<p class="summary">Alexander Farkas versucht in seinem Artikel <cite><a href="http://www.protofunc.com/2009/12/30/wai-aria-epic-fail-too-much-accessibility-good-intentions-badly-implemented/" title="zum Artikel von Alexander Farkas" lang="en">WAI-ARIA &#8211; Epic Fail (Too much accessibility &#8211; good intentions, badly implemented)</a></cite> und vor allem in seiner Serie <span lang="en"><acronym title="Web Accessibility Initiative" lang="en">WAI</acronym>-<acronym title="Accessible Rich Internet Application" lang="en">ARIA</acronym> Epic Fail</span> zu ergründen, warum in der Implementierung von WAI-ARIA doch noch einiges <em>unrund</em> ist.</p>
<p>Kurz kommentiert: Die Implementierung von <acronym title="Web Accessibility Initiative" lang="en">WAI</acronym>-<acronym title="Accessible Rich Internet Application" lang="en">ARIA</acronym> ist ohne <span lang="en">Screenreader</span>-Test zwar machbar, aber wenig sinnvoll. Abgesehen davon zeichnet sich barrierefreie Entwicklung großteils durch das Testen mit <span lang="en">Screenreadern</span> aus. WAI-ARIA ist ein aktueller Standard, der von Elementen und Attributen her unterschiedlich gut schon von assistiven Technologien unterstützt wird &#8211; das konnte ich vor kurzem bei den <a href="http://www.sprungmarker.de/2010/extern_technikwuerze_formulare_total/" title="zum Artikel [extern] Technikwürze – Formulare total 1+ 2">Attributen für Formulare</a> feststellen. Es war nicht immer einfach zu entscheiden, liegt es am gewählten <span lang="en">Screenreader</span>, <span lang="en">Browser</span> oder an einer Kombination von beidem, dass das WAI-ARIA-Attribut nicht vorgelesen wurde. Man hat sich also immer auf dem Laufenden zu halten, was die Implementierungstiefe betrifft, insofern muss man auch mit den aktuellsten <span lang="en">Updates</span> arbeiten.</p>
<p><span id="more-857"></span></p>
<p>Ob man jetzt eher mit der konkreten Spezifikation von WAI-ARIA oder dem von der WAI ebenso zur Verfügung gestellten <span lang="en">Best-Practice</span>-Dokument, sollte man jedem dann selbst überlassen. Ich fand letzthin der Gang durch die WAI-ARIA-Spezifikation sehr spannend, weil mir klar wurde, wie umfassend und detailliert der Standard letztlich dann ist. Durch die allgemeine Diskussion laufen ja eher nur die <span lang="en"><em>landmark roles</em></span>, die <span lang="en"><em>live regions</em></span> zu einem gewissen Teil und ein paar Attribute für Formulare &#8211; das war es dann aber auch schon. Aber davon gleich abzuleiten, gut &#8211; der <q>gestandene</q> barrierefreie Entwickler setzt dann das schnell irgendwo ein und <em>hübscht</em> sich seine barrierefreien Seiten auf, ohne sich intensiver sowohl mit Standard als auch der praktischen Ausgabe auseinandergesetzt zu haben, ist schlicht nicht stimmig. Und ich kenne nun doch schon einige barrierefreie Entwickler.</p>
<p>Letztlich glaube ich, dass ein Missverständnis bei Farkas vorliegt, was das Thema <span lang="en">Liveregions</span> und sein Verständnis bei den barrierefreien Entwicklern betrifft. Ich denke, jeder der sich mit dem Thema beschäftigt, sich die Ausgaben angehört und die Spezifikation oder ähnliches dazu gelesen hat, weiss, dass der Nutzer nur über Änderungen auf der Webseite informiert wird, aber auch nicht mehr &#8211; also keine sonstigen Aktionen oder Fokusänderungen daran gebunden sind. Nichts andres besagt der Abschnitt in der <span lang="en">Best-Practice</span> &#8211; aber ich lasse mich gerne korrigieren:</p>
<blockquote cite="http://www.w3.org/WAI/PF/aria-practices/#LiveRegions" lang="en"><p>Live regions enable assistive technologies, such as screen readers, to be informed of updates without losing the users&#8217; place in the content. Live region settings provide hints to assistive technologies about how to process updates. Note that the assistive technology is responsible for handling these updates and enabling users to override these hints.</p></blockquote>
<p class="quelle">Quelle: <cite><a href="http://www.w3.org/WAI/PF/aria-practices/#LiveRegions" hreflang="en" lang="en" title="zum Bereich Liveregions der WAI-ARIA-Practices">5.2. Implementing Live Regions</a></cite></p>
<p>Ich denke trotzdem, dass die Reihe von Farkas wichtig ist, weil es eben gerade bei Standards, die noch nicht vollständig in der Praxis umgesetzt sind &#8211; <span lang="en">Browser</span>, <span lang="en">Screenreader</span> &#8211; eben <em>Graubereiche</em> gibt, geben muss. Das meint nicht, dass wir als barrierefreie Entwickler mal wieder nicht alles gelesen oder fertig implementiert haben, sondern dass wir uns sehr wohl der <em>Graubereiche</em> bewusst sind und erst lernen, wie man damit am besten umgeht. Hat man sich mehrmals das Attribut <span lang="en"><code>aria-required</code></span> in <span lang="en">Screenreadern</span> angehört, kann man dieses Attribut dann getrost in die Breitenwirkung geben. Erst wenn assistive Technologien auch Attribute aus HTML 5 auslesen &#8211; wie etwa <span lang="en"><code>required</code></span> &#8211; muss man sehen, wie man mit dieser Mehrfachbelegung dann umgeht, geht es wieder darum, Standards abzuwägen. Und: ich halte es für wichtig, das immer wieder zu tun.</p>
<p class="wp-flattr-button"></p> <p><a href="http://sprungmarker.de/?flattrss_redirect&amp;id=857&amp;md5=5d2ac5b9b29a7aa6b88854a02ea698e0" title="Flattr" target="_blank"><img src="http://sprungmarker.de/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=np-Ktp6gp_A:xTABMAFHKUk:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?i=np-Ktp6gp_A:xTABMAFHKUk:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=np-Ktp6gp_A:xTABMAFHKUk:ewi2tLLrNnk"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=ewi2tLLrNnk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=np-Ktp6gp_A:xTABMAFHKUk:eYgBPDbq7UE"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=eYgBPDbq7UE" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=np-Ktp6gp_A:xTABMAFHKUk:MxV00nO3qFw"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=MxV00nO3qFw" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=np-Ktp6gp_A:xTABMAFHKUk:aVEt4g-unHM"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=aVEt4g-unHM" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?a=np-Ktp6gp_A:xTABMAFHKUk:I9og5sOYxJI"><img src="http://feeds.feedburner.com/~ff/SprungmarkerKompakt?d=I9og5sOYxJI" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SprungmarkerKompakt/~4/np-Ktp6gp_A" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://sprungmarker.de/2010/kk_gestandheit_barrierefreier_entwickler/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		<feedburner:origLink>http://sprungmarker.de/2010/kk_gestandheit_barrierefreier_entwickler/</feedburner:origLink></item>
	</channel>
</rss>

