@@Bernd
<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.
<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:
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">
) verlinken:
<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.
<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 • Teil 2), sähe da so aus:
<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:
<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:
nav svg { fill: currentColor }
LLAP 🖖
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann