Issues:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title>Tipps und Hilfe - Pahl 4u - Webdesign ohne Barrieren aus Potsdam</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Ingo Pahl - Potsdam" />
<meta name="copyright" content="Ingo Pahl - Webdesign 4u" />
<meta name="description" content="Tipps und Hilfe zum barrierefreien Webdesign auf pahl-4u.de. Webseiten ohne Barrieren sind für jeden gleichermaßen zugänglich und zu lesen." />
<meta name="keywords" content="Barrierefreies Webdesign, Barrierefreie Webseiten, Tipps, Webseiten ohne Barrieren" />
<meta name="robots" content="index, follow, noodp, noydir" />
<meta http-equiv="language" content="de" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<link rel="shortcut icon" type="image/x-icon" href="../img/favicon.ico" />
<link rel="P3Pv1" href="http://www.pahl-4u.de/w3c/p3p.xml" />
<link rel="canonical" href="http://www.pahl-4u.de/start/hilfe.html" />
<link rel="apple-touch-icon" href="http://www.pahl-4u.de/img/iphoneicon.png" />
<link rel="stylesheet" type="text/css" href="../styles/mobile.css" media="handheld" />
<link rel="stylesheet" type="text/css" href="../styles/styles.css" media="screen, projection and (min-device-width: 480px)" />
<link rel="stylesheet" type="text/css" href="../styles/print.css" media="print" />
<link rel="alternate" type="application/rss+xml" title="Pahl 4u - Barrierefreies Webdesign aus Potsdam" href="http://www.pahl-4u.de/news.rss" />
<link rel="alternate" type="application/rss+xml" title="Digital und Print - von A bis Z" href="http://www.pahl-4u.de/glossar/medien.rss" />
<script type="text/javascript" src="../styles/x_tra.js"></script>
<script type="text/javascript" src="../styles/menue.js"></script>
<!--[if lt IE 7]><script defer type="text/javascript" src="../styles/pngfix.js"></script><![endif]-->
</head>
<body>
<div id="jump"><ol><li><a href="#jump" title="Navigation mit Tasten" rel="nofollow">Weiter mit Tasten » Tab</a></li></ol>
<ol><li><a href="#content" title="Zum Text" rel="nofollow">Zum Text » Enter</a></li>
<li><a href="../sitemap/sitemap.html" title="Zum Menü">Zum Inhaltsverzeichnis » Enter</a></li>
<li><a href="#navi_2" title="Zur Fußleiste" rel="nofollow">Zur Fußleiste » Enter</a></li>
<li><a href="#jump" title="Noch einmal beginnen" rel="nofollow">Noch einmal beginnen » Enter</a></li></ol>
</div><div class="clear"></div>
<div id="big">
<div id="oben">
<div id="logo"><img src="http://www.pahl-4u.de/img/4u.gif" width="100" height="100" alt="Logo - Pahl 4u - Webdesign Potsdam" title="Logo | Pahl 4u | Webdesign Potsdam" /></div>
<div id="head">
<h1>Tipps und Hilfe</h1>
<h2>Barrierefreie Webseiten</h2>
</div>
</div>
<div id="breadcrumb"><p class="crumb"><a href="../index.html" title="Webdesign aus Potsdam">| Startseite</a> >> Sie befinden sich hier >> </p>
<p class="crumb"><a href="../index.html" title="Startseite"> Start >> </a></p>
<p class="crumb"><a href="hilfe.html" title="Tipps und Hilfe für barrierefreie Webseiten"> Tipps und Hilfe</a></p></div>
<div id="navi1">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="../index.html" title="Pahl 4u" class="MenuBarItemSubmenu" accesskey="1">| Start</a>
<ul>
<li><a href="../profil/aktuell.html" title="Nachrichten aus Potsdam" accesskey="2"> Aktuelles</a></li>
<li><a href="../start/hilfe.html" title="Webdesign ohne Barrieren" accesskey="3"> Tipps und Hilfe</a></li>
<li><a href="../glossar/glossar.html" title="Artikel und Glossar - Mediengestaltung von A bis Z" accesskey="4"> Digital und Print</a></li>
</ul>
</li>
<li><a href="../profil.html" class="MenuBarItemSubmenu" title="Ingo Pahl - Profil">| Profil</a>
<ul>
<li><a href="../profil/stein1.html" title="Steinmetz in Potsdam und Berlin"> Meilensteine</a></li>
<li><a href="../comments/gast.php" title="Shoutbox - Nachrichten - Neuigkeiten - Kommentare"> Kommentare</a></li>
</ul>
</li>
<li><a href="../web.html" title="Web- und Screendesign">| Web</a>
<ul>
<li><a href="../web/seo.html" title="Suchmaschinenoptimierung - SEO - Marketing im Webdesign"> Optimierung</a></li>
<li><a href="../start/wall.html" title="Barrieren im Internet"> Die Barrieren</a></li>
<li><a href="../quiz/frage.php" title="Digital und Print - Test für Mediengestalter"> Nachgefragt</a></li>
</ul>
</li>
<li><a href="../pixel.html" title="Bildbearbeitung - Digital und Print" class="MenuBarItemSubmenu">| Pixel</a>
<ul>
<li><a href="../web/flash2.html" title="Urlaub im Kalender - 365 Tage Urlaub"> Kalenderblätter</a></li>
</ul>
</li>
<li><a href="../vektor.html" title="Grafik- und Logodesign" class="MenuBarItemSubmenu">| Grafik</a>
<ul>
<li><a href="../web/flash1.html" title="Flash - Grafiken animieren"> Bewegte Grafiken</a></li>
</ul>
</li>
<li><a href="../sitemap/sitemap.html" title="Sitemap - Übersicht" accesskey="5">| Inhalt</a></li>
<li><a href="hilfe.html" title="Hilfe zur Barrierefreiheit">| ?</a></li></ul></div>
<div id="big2">
<div id="bild"><img src="http://www.pahl-4u.de/img/home.gif" width="250" height="345" alt="Eingang | Barrierefreies Webdesign aus Potsdam" title="Eingang | Barrierefreies Webdesign aus Potsdam" />
<form method="get" action="http://www.google.de/search" accept-charset="utf-8">
<div id="suche2">
<label for="suchfeld">Suche: </label><input id="suchfeld" class="suchfeld" type="text" name="q" value=" Suchbegriff" onfocus="this.value=''" size="25" maxlength="150" title="Suchbegriff eingeben" />
<input class="suchfeld" type="hidden" name="q" value="site:www.pahl-4u.de" />
<input class="suche" type="submit" name="suchen" value="Suchen" title="Diese Domain mit Google durchsuchen" />
</div></form>
</div>
<div id="content">
<p class="top"><a href="#copy" title="Seitenende - Navigation - Fußleiste"> ⇓</a></p>
<h3>Webseiten ohne Barrieren mit der Tastatur bedienen</h3>
<h4>Barrierefreies Webdesign funktioniert ohne JavaScript </h4>
<noscript><p class="info">ACHTUNG - Sie haben JavaScript deaktiviert. Für Hilfe oder Infor­mationen klicken Sie bitte auf das Fragezeichen in der Menüleiste.</p></noscript>
<p>Gründe, um Webseiten mit der Tastatur zu bedienen, gibt es viele. Für Menschen mit körperlichen Einschränkungen, Nutzer von Laptops und eine ganze Reihe weiterer Anwender, ist es sinnvoll diese Möglichkeit anzubieten.</p>
<p>Webdesigner und Betreiber von Webseiten sollten darauf achten, einen Internetauftritt ohne Barrieren präsentieren. Dem Nutzer die Bedienung von Webseiten mittels Tastatur zu ermöglichen ist jedoch nur ein kleiner Schritt zu einer barrierefreien Webseite.<br /> </p>
<h4 class="linie">Webseiten - ohne JavaScript per Tastatur bedienen</h4>
<p>Drücken Sie die <span class="fliess_b">Tabulatortaste</span> dann erscheint rechts neben dem Logo eine Infoleiste. Dort erfahren Sie wie sie weiter vorgehen können.
Wie oft Sie die Taste betätigen müssen, ist abhängig von Ihrem Browser.</p>
<p class="top"><a href="#jump" title="nach oben"> ⇑</a></p>
<h4 class="linie">Tastaturbedienung wenn JavaScript aktiviert ist</h4>
<p>In diesem Fall können Sie auch im Hauptmenü mit den Tasten navigieren. Hierzu betätigen Sie bitte die <span class="fliess_b">Tabulatortaste</span> so oft, bis der Menüpunkt "Start" markiert ist.</p>
<p>Innerhalb des Hauptmenüs können Sie die <span class="fliess_b">4 Pfeiltasten</span> benutzen um ein gewünschtes Untermenü auszuwählen. Um eine Seite auszuwählen be­tätigen Sie bitte die <acronym title="Enter">Eingabetaste</acronym>.</p>
<p>Möchten Sie das Hauptmenü verlassen dann betätigen Sie die <span class="fliess_b">Tabulator­taste</span>. Die weitere Navigation durch diese Webseite erfolgt ebenfalls mittels dieser Taste.</p>
<p class="top"><a href="#jump" title="nach oben"> ⇑</a></p>
<h4 class="linie"><acronym title="engl. = Tastaturkürzel">Accesskeys</acronym></h4>
<p>Durch Tastaturkürzel können bestimmte Links, innerhalb einer Webseite, direkt über die Tastatur erreicht werden. Diese Methode erfordert, je nach Browser und System, andere Tastenkombinationen. Zum Beispiel:</p>
<h5>Windows:</h5>
<p>Firefox: » Alt + Umschalt + Tastaturkürzel<br /
><abbr xml:lang="en" title="Internet Explorer" lang="en">IE</abbr>: » Alt + Tastaturkürzel + <acronym title="Enter">Eingabetaste</acronym>.</p>
No tooltip will appear for the abbreviation in older versions of Internet Explorer.
><abbr xml:lang="en" title="Internet Explorer" lang="en">IE</abbr>: » Alt + Tastaturkürzel + <acronym title="Enter">Eingabetaste</acronym>.</p>
<h5>Macintosh:</h5>
<p>Firefox: » ctrl + Tastaturkürzel<br />Safari: » ctrl + alt + Tastaturkürzel</p>
<h5>Tastaturkürzel für pahl-4u.de:</h5>
<p class=" map1">1 » Startseite</p>
<p class=" map1">2 » Aktuell</p>
<p class=" map1">3 » Hilfe</p>
<p class=" map1">4 » A - Z</p>
<p class=" map1">5 » Inhalt</p>
<p class=" map1">6 » Kontakt</p>
<p class=" map1">7 » Impressum</p>
<p class=" map1">8 » Datenschutz</p>
<p class=" map1">9 » Nutzungsbedingungen<br /> </p>
<p>Nachteil - Die Ziffern können nicht über den numerischen Block, auf der rechten Seite der Tastatur, eingegeben werden. Ich persönlich finde diese Methode unbequem, aber das ist vermutlich eine Geschmackssache.</p>
<p class="top"><a href="#jump" title="nach oben"> ⇑</a></p>
<h3 class="linie">Externe Verweise öffnen</h3>
<p>Um die Barrierefreiheit zu gewährleisten werden <em>externe Textlinks so</em> <img src="../img/ext.gif" width="19" height="20" alt="Kennzeichet einen externen Link" title="Kennzeichet einen externen Link" /> gekennzeichnet und im gleichen Fenster geöffnet. Jeder Nutzer ent­scheidet selbst darüber ob- und wann er Ihre Webseite verlassen möchte.</p>
<p>Um zurück zu dieser Webseite zu gelangen müssen Sie lediglich die <acronym title="Backspace">Zurück-Taste</acronym> betätigen. Alternativ kann auch der Zurück-Button Ihres Browsers verwendet werden.<br /> </p>
<h4>Neues Fenster für externen Verweis</h4>
<p>Um einen Link im neuen Fenster zu öffnen, klicken Sie bitte einfach mit der rechten Maustaste auf den Link und wählen die entweder die Option:<br />
<span class="fliess_b">"Link in neuem Tab öffnen"</span> oder <span class="fliess_b">"Link in neuem Fenster öffnen"</span>.</p>
<p class="top"><a href="#jump" title="nach oben"> ⇑</a></p>
<h4 class="linie">Ein Bild in der Galerie aufrufen</h4>
<p>Für das erste Bild müssen Sie die <span class="fliess_b">Tabulatortaste</span> betätigen und dann mit der <acronym title="Enter">Eingabetaste</acronym> bestätigen.</p>
<p>Mit den <span class="fliess_i">Pfeiltasten</span> können Sie sich vor- oder rückwärts durch eine Galerie bewegen. Haben Sie das letze Bild erreicht, oder genug gesehen, können Sie die Galerie mit <span class="fliess_b">Esc</span> verlassen.</p>
<p>Zum Menü gelangen Sie wieder mit der <span class="fliess_b">Tabulatortaste</span>. Wie oft Sie diese Taste betätigen müssen, ist abhängig von Ihrem Browser.</p>
<p class="top"><a href="#jump" title="nach oben"> ⇑</a></p>
<h4 class="linie">Das Kontaktformular ausfüllen</h4>
<p>Um das Formular auszufüllen, können Sie wie überall auf dieser Seite die <span class="fliess_b">Tabulatortaste</span> bnutzen. Um eine Auswahl für die Anrede zu treffen müssen Sie die <span class="fliess_i">Pfeiltasten</span> benutzen.</p>
<p>Das Absenden bestätigen Sie einfach mit der Taste <acronym title="Enter">Eingabetaste</acronym>. Die Be­stätigung, ob Ihre E-Mail ordnungsgemäß abgesendet wurde, können Sie über der Betreffzeile lesen.</p>
<p class="top"><a href="#jump" title="nach oben"> ⇑</a></p>
<h3 class="linie">Das sollten Sie auf jeder Webseite können</h3>
<h4>Schriftgöße ändern</h4>
<p>Zum vergrößern halten Sie die Taste <span class="fliess_b">Strg</span> fest und drücken dabei gleich­zeitig so oft auf die Taste <span class="fliess_b">+</span> bis Sie die gewünsche Lesegröße erreicht haben.</p>
<p>Alternativ können Sie zum Vergrößern oder Verkleinern bei gedrückter <span class="fliess_b">Strg-Taste</span> das Rad Ihrer Maus betätigen.</p>
<p>Originalzustand: <span class="fliess_b">Strg</span> drücken und dabei gleichzeitig die Taste <span class="fliess_b">0</span> betätigen.<br /> </p>
<h4>Sie haben einen kleinen Bildschirm?</h4>
<p>Viele Webseiten beinhalten häufig mehr als ein kleiner Bildschirm er­fassen kann. Sehen was andere sehen - halten dazu Sie die Taste <span class="fliess_b">Strg</span> fest und drücken dabei gleichzeitig so oft auf die Taste <span class="fliess_b">- </span> (Minus) bis Sie glauben alles entdeckt zu haben.</p>
<p>Originalzustand: <span class="fliess_b">Strg</span> drücken und dabei gleichzeitig die Taste <span class="fliess_b">0</span> betätigen.</p>
<p class="top"><a href="#jump" title="nach oben"> ⇑</a></p>
<h4 class="linie">Inhalte Drucken</h4>
<p>Um die Inhalte einer Webseite auszudrucken, drücken Sie bitte gleichzeitig <span class="fliess_b">Strg</span> und <span class="fliess_b">P</span>.</p>
<p>Oder... direkt im Browser über: » <span class="fliess_b">Datei</span> » <span class="fliess_b">Druckvorschau</span> » <span class="fliess_b">Drucken</span></p>
<p class="top"><a href="#jump" title="nach oben"> ⇑</a></p>
<h4 class="linie">Webseite mit der Tastatur scrollen</h4>
<p>Manchmal ist es notwendig eine Webseite zu Scrollen. Auch dies können Sie über die Tastatur tun.</p>
<p>Um eine Webseite nach oben- oder unten zu scrollen, bedienen Sie die <span class="fliess_b">Pfeiltasten</span> auf Ihrer Tastatur. Sollte es, bedingt durch die Bildschirmgröße, notwendig sein eine Webseite rechts- oder links zu scrollen, können Sie dazu ebenfalls die Pfeiltasten benutzen.</p>
<p class="top"><a href="#jump" title="nach oben"> ⇑</a></p>
<h4 class="linie">Ihr Problem wurde hier leider nicht geklärt?</h4>
<p>Barrieren im Internet, das muss nicht sein! Kontaktieren Sie mich bitte, ich suche und finde auch für Sie eine Lösung.</p>
<p class="top"><a href="#jump" title="nach oben"> ⇑</a></p>
</div>
</div><!--big2 ende--><div class="clear">
</div>
<div id="footer">
<div id="navi_2"><ul><li><a href="../kontakt.php" title="Kontakt per E-Mail" accesskey="6">| Kontakt </a></li>
<li><a href="../impressum.html" title="Autor und Ansprechpartner" accesskey="7">| Impressum </a></li>
<li><a href="../privacy.html" title="Ihre Daten bei mir" accesskey="8">| Datenschutz </a></li>
<li><a href="../nutzung.html" title="Was es zu beachten gibt" accesskey="9">| Nutzungsbedingungen </a></li>
<li><a href="../profil/newsletter.php" title="Neuigkeiten beim Datenschutz">| Newsletter </a></li>
<li><a href="../links.html" title="Andere interessante Seiten">| Links</a></li></ul></div>
<div id="qual">
<div class="qual1"><p class="abstand">Pahl 4u - analysiert von:</p></div>
<div class="qual2">
<p><a href="http://try.powermapper.com/Reports/3f6a85ab-b899-41dc-b13f-827b1ded1d16/report/map.ACC.htm" title="Externer Link - pahl-4u mit Powermapper analysieren" class="extern" rel="external nofollow">» Powermapper</a><img src="../img/ext.gif" width="19" height="20" alt="Kennzeichen - für externe Links 1" title="Kennzeichen - externer Link 1" /></p>
<p><a href="http://www.webseitenbewertung.com/seo/report/?url=pahl-4u.de" title="Externer Link - pahl-4u mit Webseitenbewertung analysieren" class="extern" rel="external nofollow">» Webseitenbewertung</a><img src="../img/ext.gif" width="19" height="20" alt="Kennzeichen - für externe Links 2" title="Kennzeichen - externer Link 2" /></p>
</div>
<div class="qual3">
<p><a href="http://www.qualidator.com/Wqm/de/TestWebsite/http_www.pahl-4u.de/.aspx" title="Externer Link - pahl-4u mit Qualidator analysieren" class="extern" rel="external nofollow">» Qualidator</a><img src="../img/ext.gif" width="19" height="20" alt="Kennzeichen - für externe Links 3" title="Kennzeichen - externer Link 3" /></p>
<p><a href="http://www.seitoskop.de/result.php?url=www.pahl-4u.de/start/hilfe.html" title="Externer Link - pahl-4u mit Seitoskop analysieren" class="extern" rel="external nofollow">» Seitoskop</a><img src="../img/ext.gif" width="19" height="20" alt="Kennzeichen - für externe Links 4" title="Kennzeichen - externer Link 4" /></p>
</div>
</div>
<div id="copy">
<p class="copy">© by Ingo Pahl » <a href="../humans.txt" class="text" title="I'm a human" onclick="humanstxt2();return false" onkeypress="humanstxt();return false">Humanstext</a> » <a href="../news.rss" title="Pahl 4u - Webdesign aus Potsdam">
<abbr xml:lang="en" title="Really Simple Syndication" lang="en">RSS</abbr></a> » <a href="../glossar/medien.rss" class="text" title="Digital und Print | RSS-Feed">A bis Z</a> <span title="Zuletzt aktualisiert">Aktualisiert am: <!-- #BeginDate format:Ge1 -->05.09.2013<!-- #EndDate --></span></p>
No tooltip will appear for the abbreviation in older versions of Internet Explorer.
<abbr xml:lang="en" title="Really Simple Syndication" lang="en">RSS</abbr></a> » <a href="../glossar/medien.rss" class="text" title="Digital und Print | RSS-Feed">A bis Z</a> <span title="Zuletzt aktualisiert">Aktualisiert am: <!-- #BeginDate format:Ge1 -->05.09.2013<!-- #EndDate --></span></p>
<div class="clear"></div>
</div>
</div>
</div><!--big ende-->
<script type="text/javascript">var MenuBar1=new Spry.Widget.MenuBar("MenuBar1");</script>
</body>
</html>