testing

Color contrast

Keyboard accessibility

Main flow: Log in and get to the enquete page

Filling in the form

Summary

Almost everything worked from the start except that the button was not tabbable so I've decided that i added a tabindex of 0 on the element:

<button class="submit next" type="submit" tabindex="0">Volgende stap</button>

Testing different browsers & devices

Goals:

• Able to login
• Fill in the form
• Send the form

Desktop Firefox

Desktop Edge

Mobile Android Chrome

Mobile Safari IOS

Summary

Spacing was not working correctly, so I added an extra layer for mobile with a margin-bottom if grid-gap is not supported:

.class {
    margin-bottom: 4rem;
}

Also I am starting to notice that some variables did not work on older browsers so that is why I figured the following out:

Css variables not supported

@supports(--css: variables) {
     :root {
        --wit: #FFFF;
        --backgroundColor: #1a1f2b;
        --blauw: rgb(38, 114, 236);
        --roze: #e94560
    }
}

Also some of the browsers did not support flex or grid

@supports (display: grid) {
    .grid-container {
        display: grid;
        justify-items: center;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(auto-fill, 30rem);
        grid-gap: 4rem;
    }
}


@supports (display: flex) {
    .login {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .form {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
    }
    .header img {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .formhome {
        display: flex;
        flex-direction: column;
    }
    .text_container {
        display: flex;
        flex-direction: column;
    }
    .locked:hover .overlay {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    nav div {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .enquete {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .form-container {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .enquete-form {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .buttons {
        display: flex;
    }
}

Disabling core browser features: JS & CSS

In this step, I will try to achieve the same goals as above, while disabling some core browser functionalities.

Firefox

Disable cookies/javascript

Disable localstorage

Edge

Disable cookies/javascript

Unable to find how to disable localstorage in Edge, I spent hours to find a solutions but could not find anything about this particular topic