Basiselemente

Logo, Schrift und Farbe bilden als Bildmarke die Grundelemente des visuellen Auftritts der Verwaltung des Kantons Basel-Landschaft.

Es werden keine Direktions- oder Dienststellen-Logos verwendet, sondern immer das rote BL-Logo. Das Logo darf nicht schwarz oder negativ (weiss auf farbigem Hintergrund) eingesetzt werden, um eine Verwechslung mit dem Baslerstab zu vermeiden.

Die Schriften für die Website des Kantons sind:

• OCR F versal in der Schriftfarbe Rot als Titelschrift (H1)
• Roboto als Grundschrift 

Folgende typografischen Elemente sind für die Strukturierung des Inhalts vorgesehen und definiert:

• Überschrift 1 (Title; Navigationstitel = h1)
• Überschrift 2 (= h2)
• Überschrift 3 (Zwischentitel; = h3)
• Lauftext: Schriftgrösse xx
• Link: Schriftgrösse wie Lauftext
• Bildlegende:  Schriftgrösse xx
• Tabelle
  • Schriftgrösse Tabellentitel
  • Schriftgrösse Tabelleninhalt
• Auszeichnungen: immer fett

Die wichtigste Farbe und massgeblich für die Wiedererkennung der Marke Basel-Landschaft ist das BL-Rot (Hex #ff0000). Es wird für das Logo sowie für Titel und besondere Hervorhebungen verwendet.

Schwarz wird für das Setzen von Schriften, Auszeichnungen und für Linien oder Grafiken eingesetzt.

Im Kanton gibt es drei Dienststellen, die bikantonal geführt werden:

• Amt für Wald beider Basel
• Lufthygieneamt
• Motorfahrzeugprüfstation

Für diese Ämter gilt ein eigenes Corporate Design. Die bikantonalen Ämter haben ein eigenes bikantonales Logo. Die bikantonalen Ämter publizieren ihren Inhalt innerhalb der Website des Kantons auf einer eigenen Subsite.

Die Website www.baselland.ch enthält verschiedene Subsites. Diese dienen dazu, für gewisse Dienststellen oder die Gemeinden eine eigene Navigation anzubieten. Zu den Subsites zählen beispielsweise die Polizei Basel-Landschaft oder das Ebenrain-Zentrum für Landwirtschaft, Natur und Ernährung. 

Damit die Inhalte einer Seite barrierefrei sind und von Screenreadern vorgelesen werden können, müssen für Überschriften, Zwischenüberschriften, Tabellen und Listen die Stilvorlagen des Editors verwendet werden. Fettung ist keine Überschrift und soll nur zur Hervorhebung in Fliesstexten verwendet werden.

Erläuterungen

Überschriften

• Die Struktur ist wichtig: H1, H2, H3 etc. Die Überschriften-Hierarchie entspricht der logischen Struktur der Inhalte.
• Überschriften weisen immer einen untergeordneten Inhalt auf.
• Es werden keine Überschriftenebenen übersprungen. Überspringen führt zu Desorientierung.
• Jeder eigene Seitenbereich weist eine Überschrift auf.

Listen

• Listen sind wichtige Elemente der semantischen Gruppierung und Gliederung. Nicht nur im Web, auch in Worddokumenten etc.
• Listen helfen insbesondere Screenreader-Nutzer/innen zu erkennen, wenn Informationen aufgelistet werden bzw. welche Links zusammen gehören und wo eine neue Linkgruppierung beginnt
•  Keine Listen mit nur einem Eintrag

Grafiken

Blinde und stark sehbehinderte Menschen können keine Grafiken sehen, deshalb braucht es je nach Grafik einen Alt-Text. 
Ist die Grafik …

•  … sinntragend? → aussagekräftigen Alternativtext erfassen
• … dekorativ? → als dekorativ markieren = leeren Alternativtext erfassen, alt=""
• Screenreader geben den Alternativtext anstelle der Grafik aus bzw. ignorieren die Grafik bei leerem alt-Tag.
• Der Alt-Text muss dieselbe Information transportieren, die man normalerweise aus dem Bild gewinnen würde.
• Ist das Bild oder eine Grafik verlinkt, sagt der Alt-Text, wohin dieser Link führt.
• Ohne alt-Tag werden im schlimmsten Fall die Dateinamen vorgelesen.

 Alt-Text

• Wer tut was wo? Kommen Farben prägnant vor, werden diese im Alt-Text aufgenommen.
  «Frau mit Tasche» ist zu wenig präzis. Besser: «Eine feine Dame trägt eine rote Designer-Handtasche»
• Alt-Text ist präzise und informativ, hilfreich, kurz und prägnant; Redundanz vermeiden.
• Schreiben Sie nicht "Bild von" oder "Darstellung von". Screenreader melden ein Bild automatisch als Bild. Der Alt-Text "Bild eines Apfels" würde als "Bild, Bild eines Apfels" vorgelesen. Bei Gemälden, Fotos, Illustrationen, Plänen, technischen Zeichnungen kann es sinnvoll sein, den Bild-Typ im Alt-Text einzubauen.
• Generell werden Alt-Texte nicht verwendet, um irrelevante Details zu beschreiben. Es geht darum, die Essenz des Bildes zu vermitteln.

Treffende Linkbezeichnungen

Links müssen eindeutig oder "sprechend" formuliert sein. Für die Barrierefreiheit ist es wichtig, dass alle Links ausserhalb ihres Kontextes für sich stehen können, damit z.B. in Sprachausgaben die Navigation mit der Tabulatorentaste möglich ist.

Wenn mehrere Textbeiträge auf einer Seite angerissen werden und im Anschluss der Teaser ein Link mit der Bezeichnung "mehr" zu weiteren Informationen führt, so sind die "mehr"-Links nicht eindeutig. Eindeutig wird der Link, indem:

• der Text des Links erweitert wird, etwa "mehr zum Beitrag XY", oder
• der Link ein title-Attribut mit der genaueren Bezeichnung erhält:
• <a href="ziel.html" title="Artikel XY">mehr </a>
• Verweise wie: "Hier", "Weitere Informationen finden Sie hier" oder "Klicken Sie hier" sollen aus diesem Grund ebenfalls nicht verwendet werden.
• Generell ist es nicht sinnvoll, Links in einem neuen Fenster oder Tab öffnen zu lassen. Die Nutzer/innen wissen selbst, ob sie ein neues Fenster öffnen möchten oder nicht. Für alle muss immer deutlich sein, wenn der Link nicht auf eine Webseite, sondern auf ein PDF oder einen multimedialen Inhalt verweist.
• Aus Usability-Sicht ist die Verlinkung im Text vorzuziehen.

Bedienelemente

Beim Verwenden von Schaltern, Dropdown etc. ist die korrekte Programmierung unerlässlich, damit Screenreader aufgrund der Semantik vorlesen können, um welches Bedienelement es sich handelt.

Farben, Kontraste

Für mehrfarbige Grafiken wird die  erweiterte Farbpalette gemäss der vom Statistischen Amt erstellen Farbtabelle verwendet.  Dieses Farbkonzept berücksichtigt eine Darstellung, die für sehbehinderte  Menschen lesbar ist. 

Siehe dazu CD-Manual: Kapitel 4.1.6  Grafiken mit erweiterter Farbpalette

Bildergalerien

Eine spezielle Herausforderung sind Bilder-Galerien. An sich ist eine Beschreibung jedes einzelnen Bildes nicht sinnvoll, weil hier tatsächlich die Bilder an sich wirken, nicht aber die Beschreibung. Hier reicht ein vorangestellter Satz, der darauf verweist, dass sich hier eine Bilder-Galerie befindet. Das Alt-Attribut kann leer gelassen werden, damit die Bilder als dekorativ erkannt werden.
Es sind Fälle denkbar, in denen die Beschreibung einzelner Bilder aus einer Galerie sinnvoll ist. Das sind zum Beispiel Artikel-Galerien, bei denen das Bild der einzige Hinweis auf das Angebot/Produkt ist. Hier gilt das, was für anklickbare/verlinkte Grafiken immer gilt: Entweder wird das Ziel oder der Zweck des Links beschrieben.