Текстові мітки кнопок

дивитись опис критерію у WCAG 2.1

Кнопка зі стандартним виглядом

CSS

button {
cursor: pointer;
}

HTML

<button id="btn-send">Надіслати заявку</button>

Як виглядає

Кнопка зі стилізованим виглядом

CSS

.btn {
    background-color: #5f4ee4;
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 8px;
    font-weight: bold;
    padding: 8px;
}
.btn:hover { filter: brightness(0.94); }
.btn:active { filter: brightness(1.1); }
.btn:focus {
    outline: 3px solid #4444FF;
    outline-offset: 2px;
}

HTML

<button class="btn" id="btn-send">Надіслати заявку</button>

Як виглядає

Кнопка із зображенням замість тексту

CSS

.btn-image {
    background: none;
    border: none;
    cursor: pointer;
}
.btn-image:hover { filter: brightness(0.94); }
.btn-image:active { filter: brightness(1.1); }
.btn-image:focus {
    outline: 3px solid #4444FF;
    outline-offset: 2px;
}

.btn-image img {
    width: 48px;
}

HTML

Як виглядає

Кнопка із емоджі в якості піктограми замість тексту

CSS

.btn-emoji {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.8em;
}
.btn-emoji:hover { filter: brightness(0.94); }
.btn-emoji:active { filter: brightness(1.1); }
.btn-emoji:focus {
    outline: 3px solid #4444FF;
    outline-offset: 2px;
}

HTML

Як виглядає

Кнопка, що порушує вимоги

Список порушень в нижченаведеному прикладі:

для кнопки замість призначеного для цього тега <button> застосовано тег <div>, через шо на ній неможливо сфокусуватися клавішею "Tab";
маркер фокуса навмисно прихований для цієї кнопки (стиль "outline: none").
зображення кнопки (качка) за своєю суттю не відповідає її призначенню (надсилання заявки);
зображення кнопки не має атрибуту "alt", а сама кнопка не має атрибуту "aria-label", тож скрінрідер не озвучить призначення кнопки;

CSS

.btn-wild {
    border: none;
    cursor: pointer;
    outline: none;
}

.btn-wild img {
    width: 48px;
}

HTML