Verlinkungen

Links im Text werden immer in der Farbe der Einrichtung dargestellt. Zusätzlich kann dem Link ein kleiner Pfeil vorangestellt werden. Externe Links sind die Links, die Seiten markieren, welche die TU-Chemnitz-Webseiten verlassen. Diese Links sollten entsprechend gekennzeichnet werden. Zur Kennzeichnung wird das Symbol   verwendet.

<a href="#link">Hier steht der Standard-Link.</a><br />
<a class="link" href="#link">Hier steht ein Link mit Pfeil.</a><br />
<a class="linkextern" href="#link" target="_blank">Hier steht ein Link, der auf eine externe Seite verweist.</a>

Hinweis:

Mit dem Zusatz target="_blank" wird der Link in einem neuen Tab geöffnet. Achten Sie in diesem Fall im Sinne der Barrierefreiheit darauf, dass die Kontextänderung (neuer Tab) im Linktext angegeben wird. Weitere Hinweise zu barrierefreien Linktexten finden Sie in unserem Leitfaden.

Tabellen

Den Vorgaben des Corporate Designs folgend, werden Tabellen mit horizontalen schwarzen Linien (Standard) dargestellt. Alternativ können auch graue Linien (class="horizontal grey") verwendet werden.

Sollen Tabellen mit einer Tabellenüberschrift versehen werden, wird hierfür das Element caption genutzt, welches direkt auf das table-Element folgt.

Das summary-Element sollte nur dann eingesetzt werden, wenn besondere Hinweise notwendig sind, damit Screenreader-Nutzer die komplexe Tabelle erschließen können.

<table class="horizontal">
  <caption>Tabellen&uuml;berschrift</caption>
  <tbody>
    <tr>
      <th>Tabellenkopf <a href="">Link</a></th>
      <th>Tabellenkopf <a href="">Link</a></th>
      <th>Tabellenkopf <a href="">Link</a></th>
    </tr>
    <tr>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
    </tr>
    <tr>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
    </tr>
  </tbody>
</table>

<table class="horizontal grey">
  <tbody>
    <tr>
      <th>Tabellenkopf <a href="">Link</a></th>
      <th>Tabellenkopf <a href="">Link</a></th>
      <th>Tabellenkopf <a href="">Link</a></th>
    </tr>
    <tr>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
    </tr>
    <tr>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
    </tr>
  </tbody>
</table>

<table class="zeile">
  <tbody>
    <tr>
      <th>Tabellenkopf <a href="">Link</a></th>
      <th>Tabellenkopf <a href="">Link</a></th>
      <th>Tabellenkopf <a href="">Link</a></th>
    </tr>
    <tr>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
    </tr>
    <tr>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
    </tr>
  </tbody>
</table>

Abbildungen/Fotos auf der Webseite

Bitte verwenden Sie nur Abbildungen bzw. Fotos, an denen Sie die Rechte zur Online-Veröffentlichung haben! Bilder, die bspw. unter einer Creative-Commons-Lizenz veröffentlicht sind, können verwendet werden – jedoch nur, wenn die in der entsprechenden Lizenz genannten Bedingungen eingehalten werden (bei Lizenz CC-BY: Nennung des Namens des Urhebers).

Bilder sollten immer mit gesetztem alt-Attribut veröffentlicht werden:

<img src="image.png" alt="Bildbeschreibung">

Beachten Sie dazu die Hinweise zu Alternativtexten im Kapitel Barrierefreiheit.

Copyright-Hinweis definieren

<figure class="imgtitle black left" title="Copyright-Hinweis">
  <img class="img-responsive" src="images/responsive-design.jpg"
       alt="Smartphone und Laptop mit aufgerufener TU-Seite">
</figure>

Symbole

Benannte Zeichen

Das Corporate Design der TU Chemnitz umfasst Symbole, die Sie auf Ihren Seiten verwenden können. Zusätzlich dazu bietet Bootstrap selbst über 200 sogenannte Glyphs aus der Zeichenmenge von Glyphicons Halflings. Weitere Informationen dazu entnehmen Sie bitte der Dokumentation von Bootstrap.

• tucicon-nav-up
• tucicon-nav-right
• tucicon-nav-left
• tucicon-nav-down
• tucicon-link
• tucicon-link-extern
• tucicon-link-download
• tucicon-check
• tucicon-error
• tucicon-rss
• tucicon-key-closed
• tucicon-key-open
• tucicon-feedback-good
• tucicon-feedback-neutral
• tucicon-feedback-bad
• tucicon-telephone
• tucicon-search
• tucicon-video
• tucicon-emergency
• tucicon-contact
• tucicon-mail
• tucicon-pdf
• tucicon-sm-fb
• tucicon-sm-tw
• tucicon-sm-xi
• tucicon-sm-yt
• tucicon-sm-in
• tucicon-sm-li
• tucicon-sm-ma
• tucicon-sm-sc
• tucicon-sm-tt

Verwendung

Die Zeichen „tucicon-nav-…“ sollen dabei zur Navigation auf der Seite und zwischen Seiten genutzt werden. Die Symbole „tucicon-link“ und „tucicon-link-extern“ dienen der Kennzeichnung von Verweisen/Verlinkungen. Und die Zeichen „tucicon-sm-…“ dienen der Kennzeichnung von Social-Media-Inhalten (in = Instagram, fb = Facebook, tw = Twitter/X, xi = Xing, yt = YouTube, li = LinkedIn).

Die Icons sind in Klassen vordefiniert und werden mit Angabe der entsprechenden Bezeichnung eingebunden.

Icons sind standardmäßig schwarz, können aber durch die CSS-Eigenschaft color beliebig eingefärbt werden. Auch die Änderung der Größe ist möglich.

<button class="btn btn-info" type="button">
 <span class="tucicon-search">Suche</span></button>
<button class="btn btn-info" type="button">
 <span class="tucicon-search" style="color:red">Suche</span></button>

Alle Zeichen der Iconsammlung der TU Chemnitz (Stand: August 2023)

Die Iconsammlung der TU Chemnitz umfasst noch viel mehr (zweckgebundene) Symbole. Diese sollen nicht alle als CSS-Klasse benannt zur Verfügung gestellt werden, können aber unter Eingabe der jeweiligen Zeichensatzposition verwendet werden:

<span class="tucicon" aria-hidden="true">&#x1f44d;</span>

Hervorhebungen

Besondere Textauszeichnungen können farblich hervorgehoben werden. Dazu stehen drei unterschiedliche Boxen-Typen zur Verfügung.

Hinweisboxen für besondere Hervorhebungen im Text

Hinweisboxen werden üblicherweise direkt im Text für besondere Hervorhebungen verwendet. Sie haben keinen farbigen Hintergrund, sind jedoch durch eine farblich passende Markierung auf der linken Seite sowie einen Rahmen gekennzeichnet. Die Basisklasse ist mit "tucbox-tip" bezeichnet und hat standardmäßig die Hausfarbe.

<div class="tucbox-tip">
<h4>&Uuml;berschrift Hinweisbox <code>tucbox-tip</code> <a href="#">Link</a></h4>
<p>Diese Box erscheint in der Hausfarbe&hellip; <a href="#">Link</a></p>
</div>

<div class="tucbox-tip-info">
<h4>&Uuml;berschrift Hinweisbox <code>tucbox-tip-info</code> <a href="#">Link</a></h4>
<p>Diese Box ist grau&hellip; <a href="#">Link</a></p>
</div>

<div class="tucbox-tip-warning">
<h4>&Uuml;berschrift Hinweisbox <code>tucbox-tip-warning</code> <a href="#">Link</a></h4>
<p>Diese Box soll Warnungen kennzeichnen&hellip; <a href="#">Link</a></p>
</div>

<div class="tucbox-tip-danger">
<h4>&Uuml;berschrift Hinweisbox <code>tucbox-tip-danger</code> <a href="#">Link</a></h4>
<p>Diese Box kennzeichnet besonders wichtige, dringende und besonders hervorzuhebende Hinweise&hellip; <a href="#">Link</a></p>
</div>

Textauszeichnung

Diese Flächen sollen Informationen innerhalb von Texten besonders hervorheben. Textauszeichnungen tragen standardmäßig die Fakultäts- oder Einrichtungsfarbe, können aber auch in grau verwendet werden.

<div class="tucbox-area">Dies stellt eine besondere <strong>Hervorhebung</strong> im Text dar
und kann beliebig erweitert werden.  <a href="#">Link</a></div>

<div class="tucbox-area-info">Dies stellt eine besondere <strong>Hervorhebung</strong> im Text dar
und kann beliebig erweitert werden. <a href="#">Link</a></div>

Panels

Panels können ebenfalls der Hervorhebung im Text dienen. Anders als bei den Textauszeichnungen sind Panels nicht im gesamten Bereich farblich hinterlegt. Lediglich die Überschrift und die Umrandung ist farblich der jeweiligen Klasse angepasst. Auch Panels sind standardmäßig in Fakultäts- oder Einrichtungsfarbe und können alternativ in grau verwendet werden.

<div class="tucbox-panel">
<div class="panel-heading">
<h3 class="panel-title">&Uuml;berschrift im Panel, <a href="#">auch mit Link</a></h3>
</div>
<div class="panel-body">Hier steht der Inhalt.</div>
</div>

<div class="tucbox-panel-info">
<div class="panel-heading">
<h3 class="panel-title">&Uuml;berschrift im Panel <code>tucbox-panel-info</code>, <a href="#">auch mit Link</a></h3>
</div>
<div class="panel-body">Hier steht der Inhalt.</div>
</div>

Alert-Boxen

„Alerts“ haben keine runden Ecken und keine Schatten. Es sind vier Farben (Fakultäts- bzw. Einrichtungsfarbe, grau, orange für Warnungen, rot für Gefahr/Verbote) verfügbar. Eine typische Verwendung für Alerts ist die Warnung bei fehlender Eingabe in ein Formular.

<div class="alert alert-success"><strong>Gut gemacht!</strong> Sie haben eben <a href="#">diese Botschaft</a> gelesen.</div>
<div class="alert alert-info"><strong>Obacht!</strong> Dieser Text braucht <a href="#">Ihre Aufmerksamkeit,</a> ist aber nicht extrem wichtig.</div>
<div class="alert alert-warning"><strong>Warnung!</strong> Sie sollten diesem Text schon <a href="#">Bedeutung</a> zumessen!</div>
<div class="alert alert-danger"><strong>Fehler!</strong> Diese <a href="#">wichtigen Informationen</a> beschreiben die Details.</div>

Buttons

Die in Bootstrap enthaltenen Standard-Button-Klassen wurden wie folgt umdefiniert. Der Button der Klasse btn-default wird in Einrichtungs- bzw. Fakultätsfarbe dargestellt.

<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>

Gleiches gilt für alle Klassen, die Buttons verwenden, wie beispielsweise die Klasse btn-group.

Schaltflächen sind eigentlich für Aktionen gedacht. Ab und zu werden aber Links auch wie Schaltflächen gestaltet. Im Sinne der Barrierefreiheit ist in solchen Fällen daran zu denken, dem Screenreader diese Information über die WAI-ARIA-Rolle mitzugeben.:

<a class="btn btn-default" href="/urz/www/bf" role="button">Hinweise zur Barrierefreiheit</a>

Formulare

Für webbasierte Formulare ist das Responsive Design besonders nützlich, damit sowohl auf kleinen Mobilgeräten als auch am normalen PC-Bildschirm sinnvolle Eingaben gemacht werden können. Dafür ist die Verwendung des Grids sehr nützlich, wie man am folgenden Beispiel schon sieht:

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputTerm" class="col-xm-3 control-label">Suchbegriff</label>
    <div class="col-xm-9">
      <input type="text" class="form-control" id="inputTerm" placeholder="Suchbegriff">
    </div>
  </div>
  <div class="form-group">
    <label for="inputCategory" class="col-xm-3 control-label">Kategorie</label>
    <div class="col-xm-9">
      <select class="form-control" id="inputCategory">
        <option value="web" selected>Webseite</option>
        <option value="dict">Wörterbuch</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <div class="col-xm-offset-3 col-xm-9">
      <div class="checkbox">
        <label><input type="checkbox" id="checkCase"> Groß-/Kleinschreibung beachten</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-xm-offset-3 col-xm-9">
      <button type="submit" class="btn btn-default">Suchen</button>
    </div>
  </div>
</form>

Hinweise

• Mehr Beispiele finden Sie auf der Bootstrap-Seite.
• Spaltenbreiten mit col-xm-… angeben statt mit col-sm-…!
• Hinweise zur Formularauswertung mit PHP

Mathematische Formeln

Auf dieser Seite zeigen wir Ihnen eine Methode, wie mathematische Formeln optisch ansprechend und gleichzeitig barrierefrei auf Webseiten dargestellt werden können. Formeln können dabei in verschiedenen Formaten eingegeben werden, in unserem Beispiel haben wir LaTeX benutzt. Über die rechte Maustaste hat der Webseitenbetrachter die Möglichkeit, die Ausgabe anzupassen.

Genutzt wird dafür MathJax, das wir lokal gespiegelt haben, damit die Webseitenbesucher die notwendigen Ressourcen nur von unseren Webservern beziehen. Die Einbindung sollte ressourcenschonend nur auf Seiten geschehen, die tatsächlich Formeln enthalten. Um die aktuelle Version 3 von MathJax mit TeX-Code zu nutzen, müssen diese beiden JavaScript-Dateien im Header angegeben werden:

• https://www.tu-chemnitz.de/static/mathjax/polyfill-3-es6.min.js (für Internet-Explorer-11-Kompatibilität)
• https://www.tu-chemnitz.de/static/mathjax/3/es5/tex-mml-chtml.js

Vor dem Aufruf von seite() sollten also diese Definitionen vorgenommen werden:

$javascript[] = '//www.tu-chemnitz.de/static/mathjax/polyfill-3-es6.min.js';
$javascript[] = '//www.tu-chemnitz.de/static/mathjax/3/es5/tex-mml-chtml.js';

Im Inhalt kann man dann einfach eine Mathe-Umgebung öffnen und darin Formeln angeben:

<div class="tucbox-tip">
Ohmsches Gesetz: \[ R = \frac{U}{I} \]
<p>(Die Stromstärke berechnet man demnach mit \( I = \frac{U}{R} \).)</p>
</div>

Mit Rechtsklick auf die Formeldarstellung erhält man ein Kontextmenü, in dem bspw. Sprachausgabeeinstellungen vorgenommen werden können.

Für weitere Informationen verlinken wir auf die MathJax-Dokumentation:

• TeX und LaTeX in HTML-Dokumenten
• Beispiele im Browser