Buttons ohne INhalte

[xwolfde]

if( (int)$ilifautpl_slider_has_arrows === 1 ) {
    echo '<button class="ilifautpl-arrow prev"></button>';
    echo '<button class="ilifautpl-arrow next"></button>';
}

Nicht konform mit WCAG 2.1 AA. Besser so:

<button class="slick-next slick-arrow" aria-label="Next" >Next</button>

CSS könnte so sein (auf keinen Fall das umrandende #ilifautpl-hero vergessen, da dieser Code an anderer Stelle des Themes vorhanden ist und ein Überschreiben nicht gut wäre :P) :

#ilifautpl-hero {
   .slick-prev,
    .slick-next {
        position: absolute;
        display: block;
        height: 40px;
        width: 40px;
        line-height: 0px;
        font-size: 0px;
        cursor: pointer;
        background: transparent;
        color: transparent;

        top: 75%;
        @include transform-translate(0, -75%);

        @media (min-width: $screen-xs) {
            top: 50%;
            @include transform-translate(0, -50%);
        }

        padding: 0;
        border: none;
        outline: none;

        &:hover,
        &:focus {
            outline: none;
            background: transparent;
            color: $slick-arrow-color;

            &:before {
                opacity: $slick-opacity-on-hover;
            }
        }

        &.slick-disabled:before {
            opacity: $slick-opacity-not-active;
        }

        &:before {
            font-size: 40px;
            line-height: 1;
            color: $colorPrimary;
            opacity: $slick-opacity-default;

            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;

        }

    }

    .slick-prev {
        left: -40px;

        [dir="rtl"] & {
            left: auto;
            right: -40px;
        }

        @media (min-width: $break-1360) {
            left: -50px;
            [dir="rtl"] & {
                left: auto;
                right: -50px;
            }
        }

        &:before {
            @extend .fa;
            @extend .fa-chevron-left;

            [dir="rtl"] & {
                @extend .fa-chevron-right;
            }
        }

    }

    .slick-next {
        right: -40px;

        [dir="rtl"] & {
            left: -40px;
            right: auto;
        }

        @media (min-width: $break-1360) {
            right: -50px;
            [dir="rtl"] & {
                left: -50px;
                right: auto;
            }
        }

        &:before {
            @extend .fa;
            @extend .fa-chevron-right;

            [dir="rtl"] & {
                @extend .fa-chevron-left;
            }
        }

    }
}

[SebastianHonert]

OK, Aria Labels hinzugefügt.