✔ Barrierefreiheit / Barrierearm - Text als audio ausgabe

Status
Nicht offen für weitere Antworten.
M

Muckel1986

Erfahrenes Mitglied
Guten Tag zusammen,

ich bin gerade dabei, mein drittes, eigenes Layout zu erstellen. Aus gegebenen Anlass möchte ich dieses Layout Barrierearm bzw. frei erstellen. Wobei ich meine, dass eine komplette Barrierefreiheit nicht möglich ist, aber das ist nur meine Meinung.

Neben einem Layout, welches flexibel ist und somit unter allen Auflösungen funktioniert, ist es auch wichtig, dass zum Beispiel alternativen für Grafiken vorhanden sind und auch für den Text. Nun soll es Möglichkeiten geben, das der vorhandene Text als Audio wieder gegeben wird. Weiß jemand wie so etwas funktioniert und wie sich das nennt?

Gruß Muckel
 
wen ich das jetzt richtig verstanden hab sprichst du nen screenreader an, das sind programme die besucher deiner website installiert haben die zbs. ne sehschwäche haben, diese arbeiten im prinzip deinen quelltext ab und betonen zbs. formatierte texte anderst als standart text(software abhängig). bilder und links werden dann mittelst alternativ text beschrieben ect...wen du dich an den vom w3c vorgegeben standart hälst bist schonmal auf der sicheren seite.
 
@maniac323: Als neu registriertes Forumsmitglied möchte ich dich darauf aufmerksam machen, dass in unserem Forum großer Wert auf die Einhaltung der gültigen deutschen Rechtschreibung gelegt wird, und dazu zählt u.a. auch die Groß- und Kleinschreibung.

Nachlesen kannst du dies in der Netiquette unter Punkt 15. Vielen Dank!
 
Guten Abend,

naja nicht direkt einen sreenreader, denn der funktioniert automatisch, in dem er den Quellcode ließt. Hätte gerne einen Player, wie es ihnen hier gibt: DPB - Michael (Walter Jansen).

Aber ein Problem was ich zurzeit habe ist, dass ich gerne eine Schriftskalierung anbieten würde ala: Größer, kleiner, normal und eine Lupe. Habt ihr dazu evtl. Tutorials?

Gruß und Danke
Muckel

Edit: Habe ein Tutorial dazu gefunden, jenes nutzt leider cookies, was ich verhindern würde. Hoffe ihr könnt mir helfen.
 
Zuletzt bearbeitet:
Hallo!


Muckel1986 hat gesagt.:
Hätte gerne einen Player, wie es ihnen hier gibt: DPB - Michael (Walter Jansen).
Zum Vergrößern anklicken....
Der Player macht nichts anderes als die Datei "Biografie-von-Walter-Jansen.mp3" abzuspielen.
Solch einen (freien) Player zu finden, dürfte wahrscheinlich nicht das Problem sein.
Wie aber kommt man nun zu der mp3?
Ich vermute mal dass der Webmaster den Text durch einen Screenreader (evtl. in MS-Word oder so) hat vorlesen lassen und dieses mitgeschnitten hat.
Evtl. kann Dir der Webmaster von der genannten Seite ja auch weiter helfen. ;)


Muckel1986 hat gesagt.:
Edit: Habe ein Tutorial dazu gefunden, jenesnutzt leider cookies, was ich verhindern würde.
Zum Vergrößern anklicken....
Wenn ich es richtig verstehe, funktioniert das Tutorial nur mit dem Internet Explorer..... womit Benutzer anderer Browser schonmal ausgeschlossen werden.
Abgesehen davon, muss der Benutzer JavaScript aktiviert haben.

Cookies hätten den Vorteil, dass der User "seine" Schriftgrösse quasi speichern kann.
Darüber würde ich also nochmal nachdenken..... zumindest als zusätzliche Funktion.

Man könnte per URL auch eine Variable übergeben und so verschiedene Stylesheets einbinden (somit könnte nicht nur die Schriftgrössegeändert werden, sondern auch z.B. der Kontrast).
Um die Variable auswerten zu können, würde ich eine serverseitige Scriptsprache (z.B. PHP) verwenden, um die Funktionsfähigkeit vomBrowser (bzw. dessen Einstellungen) unabhängig zu machen.


Gruss Dr Dau
 
Zuletzt bearbeitet:
Vielen Dank für deine Antwort. Dann hat sich das mit der Audio wiedergabe erstmal erledigt, da ich gedacht hätte, das dieser Player den Content wiedergibt.

Zur Schrift geschichte: cookies haben halt immer Probleme mit der Sicherheit. Eine Variable ist eher nicht möglich, da ich das Layout auch für andere Systeme, wie zum Beispiel dem Wordpress aufarbeiten will. Also muss ich mir da nochmal Gedanken zu machen.

Aktuell habe ich bei meinem neuen Layout Listenmenüs. Eines für das Hauptmenue und eines für das submenü. Bei meinem Layout habe ich oben ein div, in dem der Titel der Seite steht. Dann kommt ein div logo welches float:links ist und danach das submenu welches auch float:links ist, damit es unter dem Logo erscheint.

Seid dem ich das submenu eingebaut habe, wir das hauptmenue nicht mehr oben angezeigt (siehe Bild). Woran liegt das? Bin da gerade ein wenig Betriebsblind. Wenn ihr euch den code anschaut, wäre es auch sehr nett, wenn ihr mir ein wenig feedback geben könntet. Ist eines meiner ersten Versuche, daher wäre ich euch sehr dankbar. Als nächstes will ich die skalierung der Schrift (größer, kleiner, normal), eine Lupe (soll es via javascript geben) noch einbauen.

Vielen Dank
Muckel

P.S. der Quellcode:
Code: 
/*Style Datei für die Internetseite von Tobias Müller.
Erstellt wurde diese Website für die Webblog Software
<a href="wordpress.org">Wordpress</a> (<a href="http://wordpress-deutschland.org">deutsch</a>). 
Das Layout ist in <a href="http://jurtenrunde.de/blog">Muckels Blog</a> zu finden.*/

html  {
	height:100%;
}
*  {
	padding:0;
	margin:0;
}
body  {
      color:#000;
      background-color:#fff;
      font:100.01%/1.5 verdana,arial,helvetica,sans-serif;
}
/*Größen definieren*/
p, li, dt, dd, input, textarea  {
     font-size:0.75em;
}
h1  {font-size:2.8em;}
h2  {font-size:2.4em;}
h3  {font-size:2.0em;}
h4  {font-size:1.6em;}
h5  {font-size:1.2em;}
h6  {font-size:0.8em;}
#titel h1  {font-size:2.4em; text-align:center; text-decoration:underline;}
#submenu h1  {font-size:1.0em; text-align:center; text-decoration:underline;}
img  {
	border:none;
}

#logo {
  float:left;
  display:block;
  width:15%;
  margin-top:0;
  margin-left:0;
  margin-right:5px;
  margin-bottom:0;
  padding:0px;
  background-color:/*transparent*/#000;
  border-right:3px solid #000;
  border-bottom:3px solid #000;
}

#submenu {
  clear:both;
  float:left;
  display:block;
  width:10%;
  margin-top:0;
  margin-left:0;
  margin-right:5px;
  margin-bottom:0;
  padding:5px;
  background:transparent;
  border-right:3px solid #000;
  border-bottom:3px solid #000;
  }

#submenu ul{ /*Kopfmenue*/
  list-style:none; /*Listen art*/
  height:15px; /*Höhe*/
  margin: 0 auto;
  border:none;
}
#submenu ul li{
  float:left;
}
#submenu ul li a{
  display:block; /*Art der Anzeige*/
  padding-left:5px;
  padding-right:5px;
  height:15px; /*Höhe*/
  line-height:1.25em /*20px*/; /*Zeilen Höhe*/
  background:#eeeeee; /*Hintergrundfarbe*/
  color:#000000; /*Schriftfarbe*/
  text-decoration:none; /*Unterstreichung?*/
  font-weight:bold; /*Schrift Fett*/
  font-size:0.94em /*15px*/; /*Schrift Größe*/
  border-right: 1px solid #000000; /*Rahmen*/
  border-bottom: 1px solid #000000; /*Rahmen*/
}
#submenu ul li a:hover, ul li#active a{
  color:#eeeeee;
  background:#000000;
  border-right: 1px solid #eeeeee; /*Rahmen*/
  border-bottom: 1px solid #eeeeee; /*Rahmen*/
}

#kopf {
  margin:0;
  padding:5px;
  background-color:#000;
  color:#eaeaea;
  text-align:center;
  border-top:none;
  border-left:none;
  border-right:none;
  border-bottom:2px #808080;
}

#menu ul{ /*Kopfmenue*/
  list-style:none; /*Listen art*/
  height:20px; /*Höhe*/
  margin: 0 auto;
  border:none;
}

#menu ul li{
  float:left;
}

#menu ul li a{
  display:block; /*Art der Anzeige*/
  padding-left:5px;
  padding-right:5px;
  height:20px; /*Höhe*/
  line-height:1.25em /*20px*/; /*Zeilen Höhe*/
  background:#eeeeee; /*Hintergrundfarbe*/
  color:#000000; /*Schriftfarbe*/
  text-decoration:none; /*Unterstreichung?*/
  font-weight:bold; /*Schrift Fett*/
  font-size:0.94em /*15px*/; /*Schrift Größe*/
  border-right: 1px solid #000000; /*Rahmen*/
  border-bottom: 1px solid #000000; /*Rahmen*/
}

#menu ul li a:hover, ul li#active a{
  color:#eeeeee;
  background:#000000;
  border-right: 1px solid #eeeeee; /*Rahmen*/
  border-bottom: 1px solid #eeeeee; /*Rahmen*/
}

#titel {
  margin:0;
  padding:5px;
}

#inhalt {
  margin:0;
  padding:5px;
}

#kommentare {
  margin:0;
  padding:5px;
}

#funktion ul{ /*Kopfmenue*/
  list-style:none; /*Listen art*/
  height:20px; /*Höhe*/
  width:20%;
  margin: 0 auto;
  border:none;
  float:left;
}

#funktion ul li{
  float:left;
}

#funktion ul li a{
  display:block; /*Art der Anzeige*/
  padding-left:5px;
  padding-right:5px;
  height:20px; /*Höhe*/
  line-height:1.25em /*20px*/; /*Zeilen Höhe*/
  background:#eeeeee; /*Hintergrundfarbe*/
  color:#000000; /*Schriftfarbe*/
  text-decoration:none; /*Unterstreichung?*/
  font-weight:bold; /*Schrift Fett*/
  font-size:0.94em /*15px*/; /*Schrift Größe*/
  border-right: 1px solid #000000; /*Rahmen*/
  border-bottom: 1px solid #000000; /*Rahmen*/
}

#funktion ul li a:hover, ul li#active a{
  color:#eeeeee;
  background:#000000;
  border-right: 1px solid #eeeeee; /*Rahmen*/
  border-bottom: 1px solid #eeeeee; /*Rahmen*/
}

#logo2 {
  float:right;
  display:block;
  width:30%;
  margin:0;
  padding:5px;
  background-color:transparent;
  border-top:3px solid #000;
  border-left:3px solid #000;
}

#fuss {
  clear:both;
  margin:0;
  padding:5px;
  background-color:#000;
  color:#eaeaea;
  border-top:2px #808080;
  border-left:none;
  border-right:none;
  border-bottom:none;
}

hr {
  border:none;
  background-color:#000;
  height:3px;
  width:80%;
  text-align:center;
}
und der html aufbau:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Muckels Internetseite</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="kopf">Aus dem Leben geschrieben</div>
<a href="#0" name="oben"><img id="logo" src="bilder/kompass1.jpg" alt="Kompass Logo"/></a>
<div id="submenu">
<h1>Untermenue</h1><ul>
<li><a href="test1">Test 1</a></li>
<li><a href="test2">Test 2</a></li>
<li><a href="test3">Test 3</a></li>
<li><a href="test4">Test 4</a></li>
<li><a href="test5">Test 5</a></li></ul></div>
<div id="menu"><ul>
    <li><a href="#1">Startseite</a></li>
    <li><a href="#2">Bilder</a></li>
    <li><a href="#3">Webblog</a></li>
    <li><a href="#4">Liedgut</a></li>
    <li><a href="#5">Links</a></li>
    <li><a href="#6">Kontakt</a></li>
    <li><a href="#7">Impressum</a></li>
    <li><a href="#8">-</a></li>
    <li><a href="#9">+</a></li>
    <li><a href="#10">=</a></li>
    <li><a href="#11">Audio</a></li>
</ul></div>
<div id="titel">
  <h1>der Titel eines Artikels</h1>
  <p>Geschrieben am <em>xx.xx.xxxx</em> um <em>xx:xx Uhr</em> von <em>User</em>.</p>
</div>
<hr>
<div id="inhalt"><p>Der Inhalt der Seite soll hier erscheinen.</p>
<h1>Überschrift Ebene 1</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<h2>Überschrift Ebene 2</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<h3>Überschrift Ebene 3</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<h4>Überschrift Ebene 4</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<h5>Überschrift Ebene 5</h5>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<h6>Überschrift Ebene 6</h6>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <div id="kommentare">Und im Inhalt auch die Kommentare...</div>
</div>
<div  id="funktion"><ul>
<li><a href="#12">größer</a></li>
<li><a href="#13">kleiner</a></li>
<li><a href="#14">normal</a></li>
<li><a href="#15">Lupe</a></li>
<li><a href="#16">Audio</a></li>
<li><a href="#17">Drucken</a></li>
<li><a href="#18">PDF</a></li>
<li><a href="#19">E-Mail</a></li>
<li><a href="#20">Favoriten</a></li>
<li><a href="#21">RSS-Feed</a></li>
<li><a href="#22">Atom-Feed</a></li>
</ul></div>
<a href="#0" name="oben"><img id="logo2" src="bilder/welt2.jpg" alt="Kompasslogo"/></a>
<div id="fuss">Abschluss der Seite</div>
</body>
</html>
fehler.jpg
 
Muckel1986 hat gesagt.:
Seid dem ich das submenu eingebaut habe, wir das hauptmenue nicht mehr oben angezeigt (siehe Bild). Woran liegt das? Bin da gerade ein wenig Betriebsblind.
Zum Vergrößern anklicken....
Wenn das Hauptmenü direkt am oberen Fensterrand angezeigt werden soll, dann notier es doch einfach mal gleich zu Beginn des Dokumentkörpers, und nicht erst an vierter Stelle ;-)

Code: 
<body>
<div id="menu"><ul>
    <li><a href="#1">Startseite</a></li>
    <li><a href="#2">Bilder</a></li>
    <li><a href="#3">Webblog</a></li>
    <li><a href="#4">Liedgut</a></li>
    <li><a href="#5">Links</a></li>
    <li><a href="#6">Kontakt</a></li>
    <li><a href="#7">Impressum</a></li>
    <li><a href="#8">-</a></li>
    <li><a href="#9">+</a></li>
    <li><a href="#10">=</a></li>
    <li><a href="#11">Audio</a></li>
</ul></div>

...
 
Das ganze ist nun online: http://jurtenrunde.de/blog/. Laut W3C ist der Quellcode CSS 2.1 valid. Laut validome gibt es noch einen Fehler, den ich leider nicht finde:
Dateiname: http://jurtenrunde.de/test2/
Zeile 41
Spalte: 6
Fehler: Ungültiges Byte 2 einer 2-byte UTF-8-Sequenz.
Fehlerstelle: <h1>
Zum Vergrößern anklicken....
Finde weder in meiner Datei noch im Quellcode der Seite (über Firefox) etwas. Und die normale validierung findet dort noch 5 Fehler, die ich auch nicht nachvollziehen kann.

Hoffe sehr, dass ihr mir helfen könnt.

Gruß und vielen Dank
Muckel
 
Dabei sind die Fehlermeldungen eigentlich eindeutig und aussagekräftig genug:

[Invalid] Markup Validation of http://jurtenrunde.de/test2/ - W3C Markup Validator

Code: 
<div id="kopf">Aus dem Leben geschrieben<a href="#0" name="oben">
</div>
Hier fehlt das schliessende </a>-Tag


Code: 
<img id="logo" src="bilder/kompass1.jpg" alt="Kompass Logo"/></a>
und hier wiederum das öffnende <a>-Tag. Oder du entfernst dazwischen mal den </div>-Tag.


Code: 
<ul> <li>
<a href="#1">Startseite</a></li> <li>
<a href="#2">Bilder</a></li> <li>
<a href="#3">Webblog</a></li> <li>
<a href="#4">Liedgut</a></li> <li>
<a href="#5">Links</a></li> <li>
<a href="#6">Kontakt</a></li> <li>
<a href="#7">Impressum</a></li> <li>
<a href="#8">-</a></li> <li>
<a href="#9">+</a></li> <li>
<a href="#10">=</a></li> <li>
</ul>
</div>
Durch deine unorthodoxe Schreibweise hast du zum Schluss ein <li>-Tag zuviel notiert.


Code: 
<hr>
Standalone-Tags werden in XHTML mit einem Schrägstrich geschlossen <hr />


Code: 
<div id="kommentare">Und im Inhalt auch die Kommentare...
</div>
</div>
</div>
Hier hast du wohl einen </div>-Tag zuviel notiert.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück