yiisoft/yii2-bootstrap5

Add brandImageOptions to NavBar.php to ensure accessibility.

Closed this issue · 0 comments

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