@@Bernd > ~~~html, bad > <img src="img/icons/next-green.png"> > ~~~ Da fehlt was! `img`-Elemente brauchen `alt`-Attribute, ansonsten lesen Screenreader den Dateinamen vor. Wenn kein Alternativtext vorhanden ist, dann `alt=""` setzen. Die Icons scheinen hier aber doch eher schmückendes Beiwerk zu sein, das man per CSS als Hintergrundbild einbinden sollte. > ~~~php > <li><a href="step-01.php"> > <?php if ($_SERVER['PHP_SELF'] == "/step-01.php"): ?> > <img src="img/icons/next-green.png"> > <?php else: ?> > <img src="img/icons/next.png"> > <?php endif ?>Grundinformationen</a></li> > ~~~ Der aktuelle Menüpunkt sollte nicht nur per Icon als solcher gekennzeichnet sein; das `a`-Element sollte ein Attribut `aria-current="page"` verpasst bekommen. Das lässt sich dann auch zur Anzeige das Icons nutzen: ~~~CSS nav a { background-image: url(img/icons/next.png) } nav a[aria-current="page"] { background-image: url(img/icons/next-green.png) } ~~~ Außerdem sollte die aktuelle Seite nicht verlinkt sein. Entweder gar kein `href`-Attribut (dann aber `tabindex="0"`) oder den Menüpunkt zum Hauptinhalt der Seite (bspw. `<main id="main">`{:.language-html}) verlinken: ~~~PHP <li> <a <?php if ($_SERVER['PHP_SELF'] == "/step-01.php"): ?> aria-current="page" tabindex="0" <?php else: ?> href="step-01.php" <?php endif; ?> > Grundinformationen </a> </li> ~~~ bzw. ~~~PHP <li> <a <?php if ($_SERVER['PHP_SELF'] == "/step-01.php"): ?> aria-current="page" href="#main" <?php else: ?> href="step-01.php" <?php endif; ?> > Grundinformationen </a> </li> ~~~ Wenn das Icon doch im Markup eingebunden wird (was auch bei SVG-Icons der Fall wäre ☞ [Teil 1](https://forum.selfhtml.org/self/2018/aug/23/icon-png-mit-transperenten-hintergrund-mittels-css-faerben/1729891#m1729891) • [Teil 2](https://forum.selfhtml.org/self/2018/aug/23/icon-png-mit-transperenten-hintergrund-mittels-css-faerben/1729898#m1729898)), sähe da so aus: ~~~PHP <li> <?php if ($_SERVER['PHP_SELF'] == "/step-01.php"): ?> <a aria-current="page" tabindex="0"> <svg><use xlink:href="img/icons.svg#next-green"/></svg> <?php else: ?> <a href="step-01.php"> <svg><use xlink:href="img/icons.svg#next"/></svg> <?php endif; ?> Grundinformationen </a> </li> ~~~ Wenn sich aber die Icons next-green und next lediglich in der Farbe unterscheiden sollen, braucht man nur ein Icon und die Farbe wäre ein Fall für CSS: ~~~PHP <li> <a <?php if ($_SERVER['PHP_SELF'] == "/step-01.php"): ?> aria-current="page" tabindex="0" <?php else: ?> href="step-01.php" <?php endif; ?> > <svg><use xlink:href="img/icons.svg#next"/></svg> Grundinformationen </a> </li> ~~~ Icon in der Schriftfarbe des jeweiligen Links: ~~~CSS nav svg { fill: currentColor } ~~~ LLAP 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann

@@Bernd > ~~~html, bad > <img src="img/icons/next-green.png"> > ~~~ Da fehlt was! `img`-Elemente brauchen `alt`-Attribute, ansonsten lesen Screenreader den Dateinamen vor. Wenn kein Alternativtext vorhanden ist, dann `alt=""` setzen. Die Icons scheinen hier aber doch eher schmückendes Beiwerk zu sein, das man per CSS als Hintergrundbild einbinden sollte. > ~~~php > <li><a href="step-01.php"> > <?php if ($_SERVER['PHP_SELF'] == "/step-01.php"): ?> > <img src="img/icons/next-green.png"> > <?php else: ?> > <img src="img/icons/next.png"> > <?php endif ?>Grundinformationen</a></li> > ~~~ Der aktuelle Menüpunkt sollte nicht nur per Icon als solcher gekennzeichnet sein; das `a`-Element sollte ein Attribut `aria-current="page"` verpasst bekommen. Das lässt sich dann auch zur Anzeige das Icons nutzen: ~~~CSS nav a { background-image: url(img/icons/next.png) } nav a[aria-current="page"] { background-image: url(img/icons/next-green.png) } ~~~ Außerdem sollte die aktuelle Seite nicht verlinkt sein. Entweder gar kein `href`-Attribut (dann aber `tabindex="0"`) oder den Menüpunkt zum Hauptinhalt der Seite (bspw. `<main id="main">`{:.language-html}) verlinken: ~~~PHP <li> <a <?php if ($_SERVER['PHP_SELF'] == "/step-01.php"): ?> aria-current="page" tabindex="0" <?php else: ?> href="step-01.php" <?php endif; ?> > Grundinformationen </a> </li> ~~~ bzw. ~~~PHP <li> <a <?php if ($_SERVER['PHP_SELF'] == "/step-01.php"): ?> aria-current="page" href="#main" <?php else: ?> href="step-01.php" <?php endif; ?> > Grundinformationen </a> </li> ~~~ Wenn das Icon doch im Markup eingebunden wird (was auch bei SVG-Icons der Fall wäre ☞ [Teil 1](https://forum.selfhtml.org/self/2018/aug/23/icon-png-mit-transperenten-hintergrund-mittels-css-faerben/1729891#m1729891) • [Teil 2](https://forum.selfhtml.org/self/2018/aug/23/icon-png-mit-transperenten-hintergrund-mittels-css-faerben/1729891#m1729891)), sähe da so aus: ~~~PHP <li> <?php if ($_SERVER['PHP_SELF'] == "/step-01.php"): ?> <a aria-current="page" tabindex="0"> <svg><use xlink:href="img/icons.svg#next-green"/></svg> <?php else: ?> <a href="step-01.php"> <svg><use xlink:href="img/icons.svg#next"/></svg> <?php endif; ?> Grundinformationen </a> </li> ~~~ Wenn sich aber die Icons next-green und next lediglich in der Farbe unterscheiden sollen, braucht man nur ein Icon und die Farbe wäre ein Fall für CSS: ~~~PHP <li> <a <?php if ($_SERVER['PHP_SELF'] == "/step-01.php"): ?> aria-current="page" tabindex="0" <?php else: ?> href="step-01.php" <?php endif; ?> > <svg><use xlink:href="img/icons.svg#next"/></svg> Grundinformationen </a> </li> ~~~ Icon in der Schriftfarbe des jeweiligen Links: ~~~CSS nav svg { fill: currentColor } ~~~ LLAP 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann