A set of technologies in .NET for building web applications and web services. Miscellaneous topics that do not fit into specific categories.
I understand the frustration, but it is important to clarify that Blazor is fully capable of being ADA (and WCAG) compliant.
Blazor itself is a framework that renders standard HTML. It does not automatically force compliance, nor does it prevent it. ADA compliance depends almost entirely on the HTML output your code generates. If a tool like WAVE is flagging your page, it is usually because the rendered HTML is missing specific accessibility attributes (like id, aria-label, or role), not because Blazor cannot produce them.
The Specific Issue You Are Facing You mentioned that your labels are being flagged. The WAVE tool flags a label if it does not explicitly associate with an input. In HTML, a <label> must have a for attribute that matches the id of the input it describes.
By default, Blazor's built-in components (like InputText, InputSelect, etc.) do not automatically generate an id for you. You must provide one manually.
The Solution You asked if there is a "built-in way" to reference controls. The answer is yes: Blazor supports Attribute Splatting. Any attribute you add to a standard Blazor input component (that isn't a strict component parameter) gets "splatted" (passed through) to the underlying HTML element.
To fix your WAVE errors, you simply need to assign an id to your component and match it in your label:
<label>First Name</label>
<InputText @bind-Value="model.FirstName" />
<label for="firstNameInput">First Name</label>
<InputText id="firstNameInput" @bind-Value="model.FirstName" />
Why does this work? When Blazor renders the compliant code above, it produces this standard, accessible HTML:
<label for="firstNameInput">First Name</label>
<input id="firstNameInput" name="model.FirstName" value="...">
Screen readers can now successfully associate the label "First Name" with that specific input field.
Summary
- Blazor is not "non-compliant": It renders whatever HTML you tell it to.
- Manual Control: You have full control over
aria-*attributes,roles, andids. You can addaria-label,aria-describedby, ortitledirectly toInputTextcomponents, and they will render correctly in the browser. - Best Practice: Always explicitly set an
idon your input components and a matchingforon your labels.
Keep in mind, without seeing the actual code, we can only guess at the implementation details causing the compliance flag.