Tips/Designing page - form eval example

Hi,

i just had a quick look at the Tips/Designing page 
(http://w3c.github.io/wai-quick-start/designing.html).
And first i want to congratulate you on the great work.

But what i was wondering about, are the form field error notifications 
in the example in 
http://w3c.github.io/wai-quick-start/designing.html#provide-clear-feedback .
The errors seem to be clear visually, but there is no programmatic 
markup (?).

I know this page is about design and not about programming, but wouldn't 
it be good, to present a "perfect" form eval version?

When i was once looking for some input on form eval markup, i found 
those 2 pages, which look very reasonable to me ...
http://www.w3.org/WAI/GL/wiki/Using_ARIA_role_of_alert_for_Error_Feedback_in_Forms
http://www.w3.org/WAI/GL/wiki/Using_Aria-Invalid_to_Indicate_An_Error_Field

According to this, the example could maybe look like this (changes in 
capital letters and bold):

<div>
       <div class="errors">
         <p>There were two problems with your submission.</p>
         <ol class="fa-ul">
           <li *ID="ERROR_EMAIL" ROLE="ALERT"*><span class="fa fa-li 
fa-exclamation-triangle"></span><a 
href="javascript:document.getElementById('email5').focus()">The email 
address provided does not seem to be valid</a></li>
           <li *ID="ERROR_COMMENT" ROLE="ALERT"*><span class="fa fa-li 
fa-exclamation-triangle"></span><a 
href="javascript:document.getElementById('comment3').focus()">There was 
no comment provided</a></li>
         </ol>
       </div>
       <form action="">
         <legend>Add a comment</legend>
         <div class="row">
           <label for="name5">Name</label>
           <input type="text" value="Superbear" name="name" id="name5">
         </div>
         <div class="row error">
           <label for="email5" class="required"><span class="fa 
fa-exclamation-triangle"></span> Email ✻</label>
           <input type="text" value="suberbear@@hq.space" name="email" 
id="email5" *ARIA-INVALID="TRUE" ARIA-DESCRIBEDBY="ERROR_EMAIL"*>
         </div>
         <div class="row">
           <label for="website2">Website</label>
           <input type="text" name="website" id="website3">
         </div>
         <div class="row error">
           <label for="comment3" class="required"><span class="fa 
fa-exclamation-triangle"></span> Comment ✻</label>
           <textarea id="comment3" name="comment" *ARIA-INVALID="TRUE" 
ARIA-DESCRIBEDBY="ERROR_COMMENT"*></textarea>
         </div>
       </form>
     </div>



Just my humble thoughts ...

All the best,
Mandana