WebStyleBoard

versuche doch einmal, für solchen Fragen das richtige Forum zu treffen ... oder was glaubst du, weswegen ich es eingerichtet habe?

Zitat von »ARESOL«

ist diese Seite barrierefrei [...]?

Zitat von »http://validator.w3.org/check?verbose=1&uri=http%3A//www.der-belegungsplan.de/neu2/«

This page is not Valid XHTML 1.0 Strict!

Der CSS_Validator meckert auch (tipp: cursor:hand ist böse, cursor:help ist gut)

Web Content Accessibility Report



noch fragen?

Zitat von »ARESOL«

Ist diese Seite barrierefrei[?]

IMO nein, da sich selbst bei einer geringfügigen Schriftvergrößerung Seitenelemente überlagern. Außerdem kann seltsamerweise der Lynx-Viewer nicht darauf zugreifen.

Zitat von »ARESOL«

[...]oder muss ich nochmal von vorne anfangen?

IMO ja. Schau dir aber vorher mal http://einfach-fuer-alle.de/ an, dort wird der Begriff "Barrierefreiheit" recht anschaulich dargestellt.

Hi,
eine erste Anlaufstelle ist für mich immer Bobby. Hier bekommst Du schonmal einige konkrete Hinweise zu möglichen Schwachstellen. Bei Deiner Seite meint Bobby auch "repair needed", wenn ich auf AAA teste.
Die konkreten Mängel:
- Provide an explicit label for each form control. (2 instances)
Lines 67, 69

- Identify the language of the text. (1 instance)
Line 2
Include default, place-holding characters in edit boxes and text areas. (2 instances)
Lines 67, 69

Priority 2 User Checks:
- If there are logical groupings of form controls, use FIELDSET with LEGEND on each group. (1 instance)
Line 65
Is the user made aware that there will be pop-up windows or changes in the active window? (1 instance)
Line 75

Davon abgesehen bekommt Bobby auch keine Styles ausgeliefert und wenn ich mir die Seite text-only so ansehe, dann finde ich einiges nicht optimal gelöst:

- Sie befinden sich auf www.edanet.de
Was soll mir diese Überschrift sagen? Nichts, das ich nicht bereits wüßte. Aber auch nichts, was mir beim Betreten doch mitgeteilt werden sollte, nämlich um was für ein Angebot es sich hier handelt. Die ganzen Grafiken zählen hier (mangels ALT-Text) nicht.

- Nachricht: Haus Sine Cura mit einer neuen Internetpräsenz
oops... darum geht es also auf der Seite?

- Liink zur Startseite
aber da bin ich doch schon!?

- diverse andere Links
eigentlich würde ich ja doch gern zunächst mal wissen, worum es hier überhaupt geht. Und wenn ich mir die Seite vorlesen lassen muß, dann nervt das Menü hier ziemlich.

- Herzlich Willkommen auf der Medienpräsenz der EDANET GmbH
Aha. Endlich. Aber wieso ist hier nochmal eine Überschrift erster Ordnung? Wenn ich in meinem Textbrowser zum Anfang (über H1) springen will, bin ich wieder ganz woanders. Irgendwie mißverständlich das Ganze.

- EDVElektronische Datenverarbeitung mittels Rechenmaschinen
(Bsp.: Computer)
oops. Das ist aber ein merkwürdiger Verweistext. Was ist denn nur "EDVElektronische"? Und bekomme ich da nun Computer zu sehen? hmm...

Soweit jetzt mal Deine Seite aus der Sicht eines Users mit Textbrowser bzw. Screenreader.
Du siehst die Barrieren?

Ach ja... da sind dann noch Deine gelibten Acronyme. Ich frage mich natürlich, wofür eigentlich z.B.
"ProdukteUnsere Produkte

Internetdesign
Netzwerklösungen
Hard- und Software
Businesslösungen
Schulungen
Telefonanlagen"
steht... (beachte auch das fehlende Leerzeichen).

Positiv immerhin die Skalierbarkeit, obwohl es nicht besonders schön (wenn auch noch barrierefrei) ist, daß bei Schriftvergrößerung der Inhaltsbereich unter die Navigation rutscht.
Nicht mehr barrierefrei ist allerdings, daß in standardkonformen Browsern gerade die " Nachricht: Die EDANET schreibt barrierefreie Internetseiten" die Navigation überlagert.

Apropos Navigation: im Mozilla sehe ich plötzlich noch eine Top-Navigation. Wenn diese wichtig ist, muß sie auch ohne Javascript verfügbar sein.

Gruß
Ingo

Hi ARESOL.

[q]Line 49, column 44: document type does not allow element "form" here; missing one of "object", "ins", "del", "map" start-tag

<form action="senden.php" method="post"/>[/q]Das form-Element darf nicht direkt wieder geschlossen werden! Warum sollte dies eigentlich? Zum schließen von <form> gibt es doch </form>!
Funktioniert eigentlich das Formluar? Mich würde wundern, wenn ja.

[q]Line 50, column 8: document type does not allow element "p" here; missing one of "object", "ins", "del", "map", "button" start-tag[/q]
[q]Line 53, column 8: document type does not allow element "p" here; missing one of "object", "ins", "del", "map", "button" start-tag[/q]Die p-Tags haben an dieser stelle nichts verlohren, denn sie sind so nicht erlaubt. Außerdem ist es reichlich Sinnfrei, einen Textabsatz zu definieren, wenn es keinen Textabsatz gibt!

[q]Line 57, column 10: end tag for element "form" which is not open

</form>[/q]S.o.

MfG Arne

Hi,
die meisten Kritikpunkte bzgl. Barrierefreiheit bestehen weiterhin.

Was den Screenshot betrifft: Installiere Dir mal Mozilla oder einen anderen Gecko-Browser und Du siehst das Problem mit der Nachrichtenzeile (übrigens sogar ohne Schriftvergrößerung) selbst.
Es ist grundsätzlich ohnehin zu empfehlen, eine Seite erst im Gecko-Browser zu testen und dann ggfls. Korrekturen für den IE vorzunehmen.

Jetzt hast Du ja Acronym sinnvoll angewendet..;-)
Allerdings frage ich mich gerade - auch wenn ich es ja auf meinen Seiten selbst so mache - ob es tatsächlich barrierefrei ist, in acronym auch die einzublendende Beschreibung mit einzubeziehen. Die Konstruktion
<acronym><a href>Begriff<span> Erklärung </span></a></acronym>
(beachte übrigens das Leerzeichen, das Du schon setzen solltest!)
hat zwar den Vorteil, daß man auf eine CSS-Klasse zur Formatierung verzichten kann, aber
<a class="infobox" href><acronym>Begriff</acronym><span> Erklärung </span></a>
könnte korekter sein.
Gruß
Ingo

p.s.: Deine Fehlerseite ist übrigens wegen dem Javascript-back nicht barrierefrei und außerdem leider wenig hilfreich.

Zitat von »ARESOL«

Wo überlagert sich etwas Duke, Screens wären hilfreich.

Gerne doch! Übrigens ist es IMO recht unsinnig eine seperate "Druckversion" anzubieten, da du dieses Medium auch mit einem entsprechenden Stylesheet optimal bedienen kannst.

Der Text verschiebt sich bei dir nicht, weil Du die Schrift nicht vergrößerst... Siehe:

[q=DukeXP]IMO nein, da sich selbst bei einer geringfügigen Schriftvergrößerung Seitenelemente überlagern.[/q]

Erhöhe also einfach mal die Schriftgröße und Du siehst, was der Duke meint...

Hi,
wie ich schon schrieb, wird die Nachrichtenzeile im Mozilla bereits ohne Schriftvergrößerung falsch positioniert (auch wenn es hier so gerade eben noch zu keiner Überlagerung kommt.

ist wirklich nicht geeignet, um einen Text an eine bestimmte Stelle zu positionieren. Abgesehen davon sind die Zeilenvorschübe in Textbrowsern völlig unmotiviert.
Gruß
Ingo

Mir fällt auf, das bei den beiden Input-Feldern des "Persönliche Beratung von Anfang an kostenlos!"-Formulars keine Beschriftungen sind! Was soll man also in die Felder Eintragen? Mach also besser Besriftungen an die Felder, sonst tragen manche Leute irgendwas ein, aber nicht was du willst (falls überhaupt).

MfG Arne .

Jupp. Da kannst du noch was verbessern.


Du benutzt zweimal das h1-Tag, was man nicht umbedingt machen sollte. Nimm lieber für die Seitenüberschrift h1 und für die zweite Überschrift (die mit "Herzlich Wilkommen") h2 und die nächste Unterüberschrift h3 und so weiter ...


Zudem fällt mir gerade auf, was ist das?Wo für soll das gut sein?


Du benutzt an einigen Stellen fett formatierte Textabsätzte, die man besser durch Überschriften (3. Ordnung) ersetzten könnte. Dazu gehören zum Beispiel:


Zudem gibt es noch Probleme beim Formular. Dazu muss ich sagen, dass ich mich bezüglich der Textabsätze geirrt habe. Diese sind durch aus erlaubt, aber etwas anderes ist nich erlaubt:Und zwar ist der form-Tag nicht im p-Tag erlaubt! Das hat wahrscheinlich auch den Fehler mit den Textabsätzen bei den Textfeldern verursacht.


So, dass war eigentlich alles, was mir so grob aufgefallen ist. Man könnte den Quellcode sicherlich noch übersichtlicher gestallten, aber sonst ist er soweit ganz augeräumt.

MfG Arne .

Hi,
Formulare haben in XHTML sehr strenge Vorgaben.
Setze das form-Tag in ein blocklevel-Element (kein P - dieses darf nur inline-Elemente enthalten) und schließe die input-Felder ebenfalls in einem (aber anderem) oder mehreren blocklevel-Elementen ein (das darf dann auch ein P sein).

z.B


Gruß
Ingo