title: Must I use aria-invalid when I invalidate a field using the HTML5 constraint validation API?
body: <p>As I understand it's not recommended to add duplicate roles to an element:</p>
  
  <pre><code>&lt;nav role="navigation"&gt;&lt;/nav&gt;
  </code></pre>
  
  <p>This is redundant because <code>nav</code> tells the screen reader what the semantics of content is already. So far so good.</p>
  
  <hr>
  
  <p>Now I want to invalid a form field. I understand that classical I should transform this:</p>
  
  <pre><code>&lt;input type="text" name="username"&gt;
  </code></pre>
  
  <p>… into</p>
  
  <pre><code>&lt;input type="text" name="username" aria-invalid="true"&gt;
  </code></pre>
  
  <p>… after form submission.</p>
  
  <hr>
  
  <p>However, we are using JavaScript and the <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_forms_using_JavaScript" rel="noreferrer">HTML5 constraint validation API</a> to check the input before sending it to an API. And yes, the input is again tested on the server side.</p>
  
  <hr>
  
  <p>So, let's say I invalidate the field:</p>
  
  <pre><code>input.setCustomValidity('This value is invalid');
  </code></pre>
  
  <p><em>Do I still need to add <code>aria-invalid="true"</code> to the input?</em></p>
  
  <p>I'd say no, because it is redundant to what the engine already knows. But I can't find any source describing this scenario explicitly.</p>