Icon austauschen

[Gunnar Bittersmann]

@@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 🖖