WCAG Multiple Violations - Non-Compliant Examples

BP-542: Non-informative Page Title

Home 
        

BP-3159 & BP-954: Interactive Elements Not Keyboard Accessible

Click Me (Mouse Only)

BP-2902: Character Key Shortcut Without Modifiers

document.addEventListener('keydown', function(e) {
    if (e.key === 's') {
        alert('Shortcut triggered! Cannot be disabled or reconfigured.');
    }
});
        

BP-796: Illogical Focus Order

#Link 3
        #Link 1
        #Link 2
        

BP-1249: No Visible Focus Indicator

Input field used to demonstrate a missing visible keyboard focus indicator.


    

Element With Empty Accessible Name

This element has an accessible description but no accessible name.

description only description only description only description only description only description only description only description only description only description only description only description only description only description only description only

Save Save Save Save Save Save Save Save Save Save Save Save Save Save Save Save Save Save Save Save Save Save Save

BP-1471: No Clear Indication of Error Fields

BP-368: Low Contrast Text

This text has insufficient contrast.

BP-566: Implicit List Markup

1. Item One 2. Item Two 3. Item Three

BP-457: Implicit Headings

This example uses bold text to visually indicate headings instead of semantic heading tags:

Section One

Content under section one...

Section Two

Content under section two...

Why this fails: Screen readers and assistive technologies cannot interpret visual styling as headings, breaking document structure.