Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add brandImageOptions to NavBar.php to ensure accessibility. #78

Closed
EvilKarter opened this issue Oct 20, 2023 · 0 comments
Closed

Add brandImageOptions to NavBar.php to ensure accessibility. #78

EvilKarter opened this issue Oct 20, 2023 · 0 comments

Comments

@EvilKarter
Copy link
Contributor

EvilKarter commented Oct 20, 2023

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants