Color Alone

<section id="demoContentStart">
    <div class="demoPageContent">
        <h2>Contact Us</h2>
        <p>
            The Pearson Accessibility Team for Assessments is available to
            respond to questions regarding the accessibility of our products.
            Please provide your contact information and details about your
            questions or concerns.
        </p>
        <p>
        <h3>Pearson VUE:</h3>
        <p>
            For questions about account access, exam scheduling, rescheduling,
            or for other questions unrelated to exam access for individuals with
            a disability, please go to
            <a href="#">Customer Service for Test-Takers at Pearson VUE</a>.
        </p>
        <h2 style="margin-top: 1em;">Stay Informed</h2>
        <p>
            With Neo soon being retired, please subscribe to our
            <a href="#">a11y.training mailing list</a> to ensure you receive
            updates delivered directly to your inbox.
        </p>
    </div>
    <div class="frm-containor">
        <form id="registrationForm">
            <div class="container">
                <h2>Register</h2>
                <p>Please fill in this form to create an account.</p>
                <p>
                    <strong>Fields marked with asterisk
                    (<span class="span">*</span>) are mandatory.</strong>
                </p>
                <label for="firstname">Name<span class="span">*</span></label>
                <input type="text" id="firstname" required>
                <div>
                    <fieldset id="fieldset">
                        <legend>
                            <strong>Gender <span class="span">*</span></strong>
                        </legend>
                        <input type="radio" id="option1" name="options" value="1" required>
                        <label for="option1">Male</label>
                        <input type="radio" id="option2" name="options" value="2" required>
                        <label for="option2">Female</label>
                    </fieldset>
                </div>
                <label for="role_select">Role<span class="span">*</span></label>
                <select id="role_select" required>
                    <option value="">Select a Role</option>
                    <option value="Educator">Educator</option>
                    <option value="Learner">Learner</option>
                </select>

                <button type="button" onclick="validateForm()">Submit</button>
                <span class="mt5">
                    Have a Pearson account?
                    <a href="https://www.pearson.com/en-us.html"> Sign in.</a>
                </span>
            </div>
        </form>
    </div>
    <div class="containerimg">
        <h2>Review of Animal Cell Structure and Function</h2>
        <img src="./Microsoft-Teams-image-14.png" alt="Anatomical diagram of the cell"/>

        <button id="toggleButton">
            Description for Anatomical diagram of the cell
        </button>
        <p class="desc" id="mydesc">
            Anatomical diagram of the cell depicting Nucleus which includes
            Chromatin, Nucleolus, and Nuclear envelope. It also depicts other
            organelles namely Microfilaments, Mitochondrion, Centrioles,
            Microtubules, Ribosomes, Golgi apparatus, Rough Endoplasmic
            Reticulum, Smooth Endoplasmic Reticulum, Peroxisome, Lysosome,
            Plasma Membrane and flagellum.
        </p>
    </div>
</section>

body { font-family: Arial, Helvetica, sans-serif; }

form {
    display: flex;
    flex-direction: column;
    margin-bottom: 5rem;
}

.container {
    display: flex;
    flex-direction: column;
    width: 30vw;
    padding: 1rem;
    border: 3px solid #7f7f7f;
}

h1, h2, h3, p { margin: 0.5em; }

.mt5 { margin: 0.5rem }

input[type=text] {
    margin: 0.25em 0em 1em 0em;
    padding: 13px 12px 14px !important;
    border: 1px solid #333;
    background: none;
    border-radius: 0.25em;
}

select {
    margin: 0.25em 0em 1em 0em;
    padding: 13px 12px 14px !important;
    border: 1px solid #333;
    background: none;
    border-radius: 0.25em;
}

button {
    padding: 0.75em;
    border: none;
    background-color: #003057;
    color: white;
    border-radius: 40px;
    font-size: 16px;
}

button:hover { background-color: #037d76; }

button:focus {
    outline: .10em solid #000000;
    outline-offset: 1px;
}

fieldset {
    margin: 0.5em;
    border: 1px solid #333;
    border-radius: 0.25em;
}

.pageContent { flex-basis: 50%; }

#contentStart {
    display: flex;
    flex-wrap: wrap;
}

.frm-containor { flex-basis: 50%; }

@media screen and (max-width: 600px) {
    .containerimg { width: 70vw !important; }

    .containerimg button { width: 17rem !important; }

    #contentStart { display: block; }

    .pageContent > div { flex-basis: 100%; }

    .container { width: 80% !important; }

    img { width: 100% !important; }
}

.span { color: red; }

input[type=text].error,
select.error,
fieldset.error {
    border: 2px solid red !important;
}

input[type="text"]:focus,select:focus {
    border: 1px solid red !important;
    outline: none;
}

img {
    width: 80%;
    height: auto;
    display: block;
    margin-bottom: 2rem;
}

.desc { display: none; }

.containerimg {
    display: flex;
    flex-direction: column;
    width: 50vw;
    padding: 1rem;
}

.containerimg button { width: 22rem; }

function validateForm() {
    const firstname = document.getElementById('firstname');
    const option1 = document.getElementById('option1');
    const option2 = document.getElementById('option2');
    const role_select = document.getElementById('role_select');
    const fieldset = document.getElementById('fieldset');

    let errorMessage = '';
    let focusField = null;

    if (!firstname.value) {
        errorMessage += 'Please fill out the Name field.\n';
        firstname.classList.add('error');
        if (!focusField) {
            focusField = firstname;
        }
    } else {
        firstname.classList.remove('error');
    }

    if (!option1.checked && !option2.checked) {
        errorMessage += 'Please select a Gender.\n';
        fieldset.classList.add('error');
        if (!focusField) {
            focusField = option1;
        }
    } else {
        fieldset.classList.remove('error');
    }

    if (role_select.value === '') {
        errorMessage += 'Please select a Role.\n';
        role_select.classList.add('error');
        if (!focusField) {
            focusField = role_select;
        }
    } else {
        role_select.classList.remove('error');
    }
    if (errorMessage) {
        console.log(errorMessage);
        alert(errorMessage);
        if (focusField) {
            focusField.focus();
        }
        return false;
    }

    alert('Form submitted successfully!');
    return true;
}

const toggleButton = document.getElementById('toggleButton');
const mydesc = document.getElementById('mydesc');

toggleButton.addEventListener('click', function() {
    if (mydesc.style.display === 'none' || mydesc.style.display === '') {
        mydesc.style.display = 'block';
        toggleButton.setAttribute('aria-expanded','true')
    } else {
        mydesc.style.display = 'none';
        toggleButton.setAttribute('aria-expanded','false')
    }
});