Barrierefreies Design

[Dan]

Hallo,
ich bin leider sehr unerfahren was webdesign im Allgemeinen betrifft (ich hab Anleitungen gelesen und Übungen gemacht) und auch noch sehr neu hier bei SELFHTML. Ich muss für meinen Chef eine Webseite barrierefrei gestalten, also nur mit HTML und CSS wenn es geht und habe dazu ein paar Fragen:
1. Wie mache ich eine Schaltfläche, die pro Knopfdruck den Schriftgrad vergrößert/verkleinert? Also ein Knopfdruck = 1 Punkt unterschied.

2. Wie kann ich auf Knopfdruck eine Nur-Text-Version meiner Seite darstellen, ohne eine neue Seite erstellen zu müssen?

Es muss alles mit HTML und CSS gemacht werden. JavaScript ist ok wenn es nicht anders geht.
Ich bin dankbar für alle Codes und Links.

Dan

[Marco Krings]

Moin,

1. Wie mache ich eine Schaltfläche, die pro Knopfdruck den Schriftgrad vergrößert/verkleinert? Also ein Knopfdruck = 1 Punkt unterschied.

Wozu brauchst du das? Sehbehinderte die eien größere Schrift benötigen, benutzen technsiche Hilfsmittel oder benutzen die Funktionen des Browsers.
Sowas lässt sich mit PHP lösen.

2. Wie kann ich auf Knopfdruck eine Nur-Text-Version meiner Seite darstellen, ohne eine neue Seite erstellen zu müssen?

Wozu eine eigene Nur-Text-version? Wenn die Webseite barrierefrei erstellt wird, benötigst du keine extra Nur-text-version. Das Wiederspricht sogar dem Grundgedanken der barrierefreiheit.

Viele Grüße
Marco

[Dan]

moin,
das weiß ich alles auch. mein chef will das aber. er hat es woanders gesehen und denkt es sei cool, wenn wir das auch hätten. php kann ich nun wieder gar nicht. kannst du mir nicht doch helfen?
danke,
dan

[wahsaga]

hi,

1. Wie mache ich eine Schaltfläche, die pro Knopfdruck den Schriftgrad vergrößert/verkleinert? Also ein Knopfdruck = 1 Punkt unterschied.

was soll das mit barrierefreiheit zu tun haben?
möglichkeiten zum ändern des schriftgrades sind in jedem browser bereits enthalten - so etwas wäre also überflüssiger schnickschnack.
achte also nur darauf, dass die schriftgrößen nicht in einheiten wie px oder pt angegeben werden, sondern in relativen einheiten wie bspw. em.

2. Wie kann ich auf Knopfdruck eine Nur-Text-Version meiner Seite darstellen, ohne eine neue Seite erstellen zu müssen?

auch eine nur-text-version hat im allgemeinen wenig bis gar nichts mit barrierefreiheit zu tun.
"kommst mit der seite auf grund bestimmter gegebenheiten des designs nicht klar? gut, kriegste eben gar kein design emrh, ätsch!"
ein schlag ins gesicht jedes etwas gehandicapten internetnutzers.

(wenn trotzdem so sein soll - amen - dann geht das natürlich am einfachsten, in dem man alle formatierungen in ein externes CSS auslagert, bilder mölichst als hintergrundbilder einbindet - und in der nur-text-version dann einfach die referenzierung des CSS weglässt.
hier ist dann natürlich eine gute HTML-struktur notwendig, damit das so gut wie möglich nutzbar ist.)

gruß,
wahsaga

[Dan]

moin,
ich habe mich ja grundlegend informiert und weiß bescheit was man als z.b. blinder für techniken nutzt und dass man den schriftgrad im browser ändern kann, aber das ist halt order vom chef, dass ich den "überflüssigen schnickschnack" einbaue. also bitte ich nochmal um hilfe. er hat das auf anderen seiten gesehen und findet das gut.
mfg,
dan

[Ashura]

Hallo Dan.

er hat das auf anderen seiten gesehen und findet das gut.

Dann obliegt es dir, ihm diesen Schnickschnack auszureden und ihm Sinnvolleres vorzuschlagen.
Ich kenne keinen Browser, in dem man die Schriftgröße nicht verändern könnte. In den Browsern, in denen es doch nicht möglich ist, in denen ist die Schrift sowieso überall gleich groß. (Textbrowser, Screenreader, Braille)

Gruß, Ashura

[Biesterfeld]

Hej,

1. Wie mache ich eine Schaltfläche, die pro Knopfdruck den Schriftgrad vergrößert/verkleinert? Also ein Knopfdruck = 1 Punkt unterschied.
   was soll das mit barrierefreiheit zu tun haben?

Es gibt sogar zwei Zusammenhänge zu Barrierefreiheit: Einmal, dass skalierbare Seite einen wichtigen Aspekt von Barrierefreiheit erfüllen.
Zum anderen ein Beispiel: Meine Oma (75) war letztens zu Besuch und ich dachte mir 'Oma, heute zeig ich dir mal das Internet'! Sie war hellauf begeistert. NAtürlich brauchte meine Oma eine etwas andere Schriftgrößeneinstellung als ich. Also habe ich ihr das auch gezeigt wie das geht. Nun kamen wir aber wirklich in den Bereich (Tastenkombination, Programmmenüs)  der sie zu überfordern begann.
Hätten die Seiten einen Button "Schrift vergrößern" gehabt, wäre meiner Oma definitiv eine Barriere genommen worden.

auch eine nur-text-version hat im allgemeinen wenig bis gar nichts mit barrierefreiheit zu tun.

s.o.

hier ist dann natürlich eine gute HTML-struktur notwendig, damit das so gut wie möglich nutzbar ist.)

Genau das war ja per se vorrausgesetzt und macht doch Barrierefreiheit aus!

Beste Grüße
Biesterfeld

[Struppi]

Hätten die Seiten einen Button "Schrift vergrößern" gehabt, wäre meiner Oma definitiv eine Barriere genommen worden.

Naja, das aller Anfang schwer ist gilt nicht nur für unerfahrene Webdesigner sondern sicher genauso für Omas.

Letztlich ist es ja so, dass, wenn es solche denn überhupt auf einer Seite Buttons gibt, diese entweder schwer zu finden sind und sowieso immer woanders auf einer Seite sein werden und sicher nie an den gleichen stellen.

Ich denke das früher oder später ein [STRG]+ [+] auch für deine Oma einfacher sein wird, als auf jeder Seite nach einer Option zu suchen.

Struppi.

[Biesterfeld]

Hej,

1. Wie mache ich eine Schaltfläche, die pro Knopfdruck den Schriftgrad vergrößert/verkleinert? Also ein Knopfdruck = 1 Punkt unterschied.

2. Wie kann ich auf Knopfdruck eine Nur-Text-Version meiner Seite darstellen, ohne eine neue Seite erstellen zu müssen?

Schau dir mal Ingos Styleswitcher an. Ist genau das was du suchst.

Beste Grüße
Biesterfeld

[Biesterfeld]

Hej,

Schau dir mal Ingos Styleswitcher an. Ist genau das was du suchst.

Ähm, habe grade erst gesehen, dass da gar nichts zu der eigentlichen switch-Technik geschrieben steht, also noch kurz soviel:

Du wirst eine Programmiertechnik dafür benötigen: Entweder eine serverseitige (wie z.B. php oder perl) oder eine Clientseitige, namentlich Javascript.

1. Wie mache ich eine Schaltfläche, die pro Knopfdruck den Schriftgrad vergrößert/verkleinert? Also ein Knopfdruck = 1 Punkt unterschied.

Da empfehle ich style.fontsize auf <body> anzuwenden.

Beste Grüße
Biesterfeld

[Ingo Turski]

Hi,

Schau dir mal Ingos Styleswitcher an. Ist genau das was du suchst.
Ähm, habe grade erst gesehen, dass da gar nichts zu der eigentlichen switch-Technik geschrieben steht

hehe... die ist ja auch nicht Thema der Seite sondern nur Mittel zum Zweck (nicht zig Seiten erstellen zu müssen und zu demonstrieren, daß sich das HTML nicht ändert). Außerdem ist das Script viel zu komplex, da es nicht nur die Styles ändert, sondern auch den angezeigten CSS-Code.

Du wirst eine Programmiertechnik dafür benötigen: Entweder eine serverseitige (wie z.B. php oder perl) oder eine Clientseitige, namentlich Javascript.

Hierzu mein Tip an Dan: Wenn Du mit PHP noch gar keine Erfahrung hast, reicht Javascript auch. Zwar kann Javascript nicht vorausgsetzt werden, aber es handelt sich ja nur um ein für Barrierefreiheit nicht notwendiges Feature - vorausgesetzt, die Schriftgrößen werden in em oder % angegeben und lassen sich dadurch auch im IE skalieren. Einige Seiten definieren die Schriftgrößen aber in px und verwenden einen Styleswitcher (für den IE) als Ersatzlösung - was nun wirklich nicht mehr barrierefrei ist.

Kurz zum grundsätzlichen Prinzip eines Javascript-Styleswitchers (vielleicht schreibe ich ja doch mal einen Artikel darüber?):
1. Es werden Schaltflächen zur Einstellung über Javascript onload ins Dokument geschrieben; dies verhindert, daß diese bei deaktiviertem Javascript sichtbar sind.
2. Bei Auswahl einer Option werden entweder (kleine Lösung) bestimmte Styles umdefiniert, z.B. fontSize für body. Oder es wird (evtl. zusätzlich) ein ergänzendes Stylesheet deaktiviert oder zusätzlich geladen; meine o.g. Seite macht das z.B. so.
3. Damit die Einstellungen nicht nur einmalig vorgenommen werden, sondern sowohl für andere Seiten als auch beim nächsten Besuch noch gelten, werden sie in ein Cookie geschrieben. Dieses Cookie wird dann bei jedem Seitenaufruf abgefragt und die entsprechenden Operationen vorgenommen.

Wirklich zur Barrierefreiheit gehört allerdings

• eine sinnvolle und gut strukturierte HTML-Auszeichnung
• ein flexibles Layout in angemessener Schriftgröße und mit ausreichenden Kontrasten über CSS
• eine klare und übersichtliche Navigation
• u.v.m.

Dabei würde ich folgende Faustregel sehen: je sparsamer die HTML-Auszeichnung und je einfacher das Layout, desto leichter wird es, dies barrierefrei umzusetzen. Beispiele hierzu sind meine o.g. Seite und natürlich die hier im Kapitel CSS-basierte Layouts angegebenen Beispiele.

freundliche Grüße
Ingo