Element “td” is missing one or more of the following attributes: “aria-checked”, “role”.

In HTML, the <button> element is used to create interactive buttons. The W3C HTML Validator message suggests that your <button> element might be missing certain attributes that are typically expected for accessibility or functionality.

Understanding the Required Attributes

1. type Attribute:

   • The type attribute specifies the behavior of the button. It can take one of the following values:
     • submit: Submits the form data to the server.
     • reset: Resets the form data to its initial values.
     • button: A generic button with no default behavior.
   • If omitted, the default value is submit when the button is within a form.

   <button type="button">Click me</button>

2. role and aria-checked Attributes:

   • These attributes are related to ARIA (Accessible Rich Internet Applications) roles and states, which enhance accessibility by providing semantic meaning to assistive technologies.
   • The role attribute defines the type of widget the button is supposed to represent, for example, role="switch" or role="checkbox".
   • If using role="checkbox" or role="switch", the aria-checked attribute indicates whether the button is checked (true), unchecked (false), or if its state is indeterminate (mixed).

   <!-- Example for a button acting as a checkbox -->
   
   
   <button type="button" role="checkbox" aria-checked="false">Toggle Option</button>

Recommendations

• Always define the type attribute to clearly specify the button’s intended behavior, especially within forms.
• If the button acts like a toggle control such as a checkbox or switch, include the appropriate role and use aria-checked to reflect its current state.
• Ensure alignment of ARIA attributes with the intended behavior and visual representation of the button for users, both with and without assistive technologies.

A <a> tag element is missing required attributes, depending on other present attributes.

Depending on the use of other HTML attributes, an <a> tag may require additional attributes. For example, when using aria-selected to build a tab list, this is an example of valid code using role, aria-selected, aria-controls and aria-labelledby:

<div class="tab-interface">
  <div role="tablist" aria-label="Sample Tabs">
    <span
      role="tab"
      aria-selected="true"
      aria-controls="panel-1"
      id="tab-1"
      tabindex="0">
      First Tab
    </span>
    <span
      role="tab"
      aria-selected="false"
      aria-controls="panel-2"
      id="tab-2"
      tabindex="-1">
      Second Tab
    </span>
  </div>
  <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
    <p>Content for the first panel</p>
  </div>
  <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
    <p>Content for the second panel</p>
  </div>
</div>