Add brandImageOptions to NavBar.php to ensure accessibility.
Closed this issue · 0 comments
EvilKarter commented
What steps will reproduce the problem?
This code:
<?php
NavBar::begin([
'brandLabel' => Yii::$app->name,
'brandUrl' => Yii::$app->homeUrl,
'brandImage' => ['@web/img/logo.svg'],
'options' => ['class' => 'navbar-expand-md navbar-dark bg-dark fixed-top']
]);
NavBar::end();
?>
will generate something like this:
<nav id="w0" class="navbar-expand-md navbar-dark bg-dark fixed-top navbar">
<div class="container">
<a class="navbar-brand" href="/"><img src="/img/logo.svg" alt=""></a>
....
</div>
</nav>
The problem is that when I now try to make my website accessible, I get the following errors, for example, with the WAVE browser plugin:
1.1.1 Non-text Content (Level A)
2.4.4 Link Purpose (In Context) (Level A)
Decorative images don't need alt text, but as soon as they contain a link, logo, lettering or other text related content e.g. home page it must be present.
What is your proposed solution
Add a new attribute brandImageOptions to NavBar.php
This code:
<?php
NavBar::begin([
'brandLabel' => Yii::$app->name,
'brandUrl' => Yii::$app->homeUrl,
'brandImage' => ['@web/img/logo.svg'],
'brandImageOptions' => ['alt' => 'Logo of company XYZ'],
'options' => ['class' => 'navbar-expand-md navbar-dark bg-dark fixed-top']
]);
NavBar::end();
?>
will generate something like this:
<nav id="w0" class="navbar-expand-md navbar-dark bg-dark fixed-top navbar">
<div class="container">
<a class="navbar-brand" href="/"><img src="/img/logo.svg" alt="Logo of company XYZ"></a>
....
</div>
</nav>
Additional info
Q | A |
---|---|
Yii vesion | 2.0.49.2 |
yii2-bootstrap5 version | 2.0.4 |
PHP version | 8.0 |
Operating system | linux |