Kann mir jemand bei ein paar Problemen helfen?

Hallo.

Zitat

Da ich nicht weiß, ob die es gutheißen würden, wenn ich den Quellcode hier veröffentliche, versuche ich meine Fragen so gut wie möglich zu beschreiben.

Keine Angst, dir klaut hier niemand was, und bei deinen Fragen wird es unverzichtbar sein, dass du deinen Code postest. Zudem ist da nichts dabei, was es wert wäre, zu klauen (was nicht abwertend gemeint sein soll).

Zu deinen Fragen:

Zitat

Sie enthält oben auf der Seite ein großes Logo, in das mehrere Info´s eingebaut werden sollen. Das Logo erstreckt sich über die ganze Kopfzeile und an 4 verschiedenen Stellen im Logo stehen jeweils ein Link, eine Liste mit Telefonnummern,
ein Suchfeld und zwei Icons zum festlegen der Seite als bookmark und als Startseite.

Am besten ist es, wenn du hier einen div mit dem Logo als Hintergrund nutzt, du kannst hier ruhig feste Breiten und Höhen nutzen. Wichtig für die Barrierefreiheit ist vor allem eine semantisch korrekte Textauszeichnung und die Angabe von ALternativtexten bei Bildern, zudem der Verzicht auf Javascript und Bildernavigationen.

Zitat

Nun zu meinen Fragen: Weiß jemand, wie ich diese 4 Infos am besten platziere?
Soll ich sie alle floaten lassen, oder absolut positionieren?

Hängt von 2 Dingen ab.
1. Stehen diese 4 Elemente geordnet zueinander oder "Frei im Raum verteilt" ?
Für ersteres bist du mit float besser bedient, sonst ist eine absolute Position einfacher.

2. Dein persönlicher Geschmack bzw. womit du besser arbeiten kannst. Für meinen Teil empfinde ich float als praktikabler, besser wäre es aber, wenn du einen Screen von deinen Vorstellungen machen könntest und den hier postest

Zitat

zwei Icons zum festlegen der Seite als bookmark und als Startseite.

Ist Mist, da nur mit Javascript machbar und auch dann nur für den IE.

Zitat

Außerdem muß ich, wegen der barrierefreiheit, alle Größen relativ angeben.
Zuerst hatte ich sie pixelgenau positioniert, doch sie sollen eben prozentual oder mit em Werten angegeben werden. Schön und gut, doch wenn ich das mache, dann stehen die Dinger in jedem Browser auf einmal wo anders.

Ein paar generelle Anmerkungen:
Ein Pixel-Layout ist nichts verwerfliches im Hinblick auf Barrierefreiheit, solange man darauf achtet, die Elemente korrekt auszuzeichnen (meint die Verwendung semantisch korrekter Tags, besonders für Textelemente) und genug Spielraum für die Vergrößerung der Schrift einräumt. Besonders, wenn du als Header ein festes Logo hast, wird es schwierig, ein sogenanntes "Fließlayout" umzusetzen, ohne dass das Logo verzerrt wird.
Um eine größtmögliche Kompatibilität deiner Seite bei verschiedenen Browsern zu erreichen, benötigst du einen Standard-Doctype, die penible Verwendung einer ausgelagerten CSS-Datei erleichtert die Arbeit (spätestens beim Fixen des IES) ungemein. Achte streng darauf, keine HTML-Formatierungen und zu verwenden, vermeide auch Inline-CSS-Angaben.

Mehr kann ich dir ohne Code oder Screen nicht weiterhelfen.

Gruß,
Jojo

Zitat von nienna

Die Seite ist xhtml 1.0 strict und css level 2.1 valide. Also in dem Bereich schon mal barrierefrei.

Diese Verknüpfung verstehe ich nicht, was vermutlich daran liegt dass sie falsch ist. Eine Seite ist nicht barrierefrei nur weil sie in XHTML und CSS realisiert wurde.

Zitat von nienna

Die Inhalte des Logos sind eher frei im Raum positioniert aber dennoch mit float zu realisieren.

Da position: absolut öfter Probleme macht, sollte man nach Möglichkeit darauf verzichten. Als Anfänger (keine Ahnung auf welchem Level Du bist) sollte man ganz davon Abstand nehmen.

Hi,

für eine barrierefreie Seite benötigst du noch "skiplinks" oben und unten auf der Seite,
normal einen zur Navi und einen zum Textbereich.

Die Seite muss einen ausreichenden Farbkontrast aufweisen, da 8-10% der männlichen Bevölkerung eine Farbsehschwäche haben.
Google mal nach "Colour Contrast Analyzer".

Wenn du Text in Bilder versteckst solltest du zusätzlich auch einen normalen Text hinterlegen.
Mit der Image replacement Technik (am besten Gilder/Levin) kannst du das Problem lösen.

koslowski

Moin,

ich geb dir mal ein Beispiel für skiplinks und skiplinktabs:

Skiplinks sind für screenreaderuser und für Leute, die sich HP's per Handy anschauen.
Skiplinktabs für Leute, die sich per Tabtaste durch die Hp hangeln.

XHTML:

<ul>
      <li class="skiplink">[url='#textbereich']Zum Inhalt springen[/url]
      <li class="skiplink">[url='#navigation1']Zur Navigation springen[/url]
[/list]

Diese Zeilen kommen in den Header direkt nach der Hauptüberschrift und in den footer. Die Bereiche wo er hinspringen soll brauchen eine id.

CSS dazu:

.skiplink  {
     position:absolute;
     top:-9999px;
     left:-9999px;
     width:0px;
     height:0px;
     display:inline;
       }
.skiplinktab:focus,
.skiplinktab:active  {
    position:absolute;
	top:9999px;
	left:9999px;
	display:inline;
	width:13em;
	height:auto;
	background-color:#fff;
	color:#000;
	padding:0.6em;
	border:2px solid #000;
         }

Sieht wilder aus , als es ist.

Was noch fehlt ist das header und footer position:relative brauchen, damit sich das absolut positionierte Element daran orientieren kann.

Zuerst werden die skiplinks aus dem Viewport geschoben und dann für Tabtasten-Hangler wieder reingeschoben.

Die Werte für left, top und die Gestaltung des Kastens für die skiplinktabs mußt du evtl. ein wenig anpassen, je nachdem wo im header und footer sie erscheinen sollen und wie der Kasten ausschauen soll.

Das mit den skiplinktabs funktioniert nur nicht im Opera.

Das XHTML und das CSS hab ich unter Vorlagen gespeichert, weil ich sie immer wieder hernehme.

koslowski

Tach!

Ich will vielleicht noch ergänzen, dass der Code einer barrierefreien Seite obligatorisch ohne Tabellen auskommen muss.

Hi

Zitat von nienna

Hallo Koslowski!
Wißt ihr, wie ich am besten ein Suchfeld in eine Seite einfügen kann? Man soll da halt nach schlagwörtern in der Seite suchen können.

Das geht whl auch wieder nicht komplett ohne Javascript oder php, oder?

für die Suche brauchst du ein Script, am besten PHP weil JS nicht überall zur Verfügung steht.

Folge diesem Link : Suchscript

Wenn du ihn verlinkst gibt es das soweit ich weiß kostenlos, eine Lizenz für kleines Geld.

Es ist gut dokumentiert, d.h. Eine Anleitung ist dabei, Faq gibts dazu und er hat ein kleines Supportforum wo du nachfragen kannst.

Es ist einigermaßen sicher im Gegensatz zu vielen anderen Scripten die es online kostenlos gibt.
Persönlich setze ich es auch mit Erfolg ein.

koslowski

ps. ich fange auch jetzt erst mit PHP an und habe den Einbau des Scripts problemlos bewältigen können.

Hi,

Zitat von nienna

Hallo Koslowski!
Nochmal Danke!
Die Seite ist echt gut!
Leider aber kann ich es nicht für dieses Projekt benutzen, da es ja keine private Seite ist und der Auftraggeber bestimmt keine Links auf andere Seiten haben will. Muss es wohl schon selbst hinbekommen ohne diese Lösung.

Liebe Grüße, Nienna

Lizenz für beliebig viele Webseiten kostet 24,90 €.
Das ist doch nicht wirklich teuer und halt ohne Verlinkung beliebig oft einsetzbar.

koslowski

@Jojo, warum braucht man für Barrierefreiheit eine ausgelagerte .css-Datei?
Angaben im <style type="text/css"> haben den selben Effekt.
Ich mache sowieso das ganze Layout zentral, eine index.php, die ein <style> hat, und die holt sich den Inhalt, das ist sinnvoll. Und leicht zum Arbeiten, alle wichtigen Formatierungen, Layout und CSS für alle Seiten, in einer Datei.
PHP ist für so was schon sehr sinnvoll. Dank mod_rewrite sind die URLs auch nicht kompliziert.

Verstehe nicht ganz, wofür man diese unsichtbaren Skiplinks braucht, die Links lassen sich doch so oder so per Tastatur selektieren, wofür müssen die tastaturbenutzer eigene Links haben?

Ein Hinweis noch:
Frames snd das allerletzte, führen zu Müll-Layout, fehlenden URLs, naja...
iFrames allerhöchstens für externe Inhalte, und auch dann sollte mit PHP für die eindeutige URL gesorgt werden.
Besser <div>s mit overflow-Angabe, wenn es einem nur um die Scrollbalken geht und position: fixed, wenn es nur darum gehen soll, dass Elemente immer an einer Stelle bleiben.
Das gibt einem dann Freiheit mit URLs, Hintergrund, Verschieben und Scrollbalken, während frames sich da nur sehr eingeschränkt einstellen lassen.

Viele liebe Grüße
The User

Hi,

Zitat von The User

@
Verstehe nicht ganz, wofür man diese unsichtbaren Skiplinks braucht, die Links lassen sich doch so oder so per Tastatur selektieren, wofür müssen die tastaturbenutzer eigene Links haben?
Viele liebe Grüße
The User

das ist ein kleiner Komfort für Tastaturbenutzer, deshalb die skiplinktabs.

Unsichtbare Skiplinks sind für Screenreaderuser sehr nützlich, sonst liest der Screenreder zuviel unerwünschtes vor.
So können sie direkt zum Inhalt oder zur Navi springen.

Barrierefrei heißt nämlich unter anderem das man Behinderten keine Steine beim Benutzen einer Webseite in den Weg legt.
Lies dich doch mal hier ein,
dann weißte Bescheid.

Zitat

warum braucht man für Barrierefreiheit eine ausgelagerte .css-Datei?
Angaben im <style type="text/css"> haben den selben Effekt.

Das ist strikte Trennung von Inhalt und Layout.
Einer der Vorteile von modernem Webdesign.

koslowski

Also für mich gehören auch zum Beispiel die <div>s oder die Navi zum Layout.
Und wenn ich kein XML kann, lassen die sich nicht extern angeben.
Ich trenn zwischen Layout und Inhalt, indem ich eine Datei mit Layout und etwas PHP habe, und die Texte da reingeladen werden (mit PHP).
Hab den Wikipedia-Artikel etwas reingelesen, das mit dem Cachen ist natürlich ein Vorteil.

Versteh jetzt immer noch nicht, warum Leute mit Screenreader oder Maus, nicht die selben Links haben sollen, wie die mit Tastatur?

The User

Hi,

Zitat von The User

Versteh jetzt immer noch nicht, warum Leute mit Screenreader oder Maus, nicht die selben Links haben sollen, wie die mit Tastatur?

The User

die haben dieselben Links, sie kommen bloß anders hin.

Screenreaderuser z.B. sind i.d.R. blind. Der Screenreader liest vor.

Lass dir mal immer alles von allen Webseiten vorlesen.
Du wärst froh wenn du direkt nach dem Titel entscheiden könntest: will ich zur navi oder direkt zum Inhalt.

Wenn nämlich im Quelltext zuerst die linke Spalte mit den Zusatzinfos steht, wird das auch zuerst vorgelesen.
Du kannst damit aber noch nichts anfangen, weil du den Hauptcontent noch nicht kennst.

Jetzt klarer?

koslowski

also es geht nur darum, den quelltext zu verschieben?

Klar stimmt schon, bei Heise haben die zum Beispiel so einen Screenreader eingebaut, da kommt immer erst eine Minute heise - heise - heise, die Überschriften, die Kategorien.
Ja, es ist klarer!

am einfachsten ist es natürlich mit php, dann gibst du einfach an site.php?version=print,
das <link rel> machst du dann so:

<?
if($_GET['version'] == "print")
    echo '<link rel="stylesheet" type="text/css" href="css/printsheet.css">';
else
    echo '<link rel="stylesheet" type="text/css" href="css/normalsheet.css">';
?>

Wenn dir kein PHP zur Verfügung steht, dann musst du wohl oder übel die html-dateien kopieren unds stylesheet einfügen, oder es mit Javascript machen, aber davon habe ich keine Ahnung.

Viele liebe Grüße
The User