HTML Snippet for error message

<div class="error-summary" role="alert" aria-labelledby="error-summary-heading-example-1" tabindex="-1">
    <h2 class="heading-medium error-summary-heading" id="error-summary-heading-example-1">
        Message to alert the user to a problem goes here
    </h2>
    <p>Optional description of the errors and how to correct them </p>
    <ul class="error-summary-list">
        <li><a href="#full-name">Descriptive link to full name question with an error</a></li>
        <li><a href="#email-address">Descriptive link to email address question with an error</a></li>
    </ul>
</div>
<h1 class="heading-large">Personal details</h1>
<form>
    <div class="form-group form-group-error">
        <fieldset>
            <legend id="personal-details" class="sr-only">Personal details</legend>
                <label class="form-label" for="full-name">
                    Full name
                    <span class="form-hint">
                    As shown on your birth certificate or passport
                    </span>
                </label>
                <span id="full-name-error" class="error-message"><span class="sr-only">Error: </span>Enter your full name</span>
                <input class="form-control form-control-error" id="full-name" type="text" name="full-name" aria-describedby="full-name-error">
            </div>
            <div class="form-group form-group-error">
                <label class="form-label" for="email-address">
                    Email address
                </label>
                <span id="email-address-error" class="error-message"><span class="sr-only">Error: </span>Enter your email address</span>
                <input class="form-control form-control-error" id="email-address" type="text" name="email-address" aria-describedby="email-address-error">
            </div>
        </fieldset>
    <div class="form-group">
        <button class="btn btn-primary btn-arrow">Continue</button>
    </div>
</form>