ASP.NET Core unassociated input fix

#webdev #dotnetcore #css #ui

Introduction

When developing a web page to collect information from users many times either a team leader or a developer does not account for vision impaired visitors to a site as shown below.

Note, this not just for a street secondary input but for other types of inputs that may require additional information.

Why is this important? Because when a visitor, new potential customer attempts to input information without a label they have no clue that the input is for. They may become frustrated and leave without completing the form.

A solid recommendation when creating any web page is to continually use an accessibility tool to see if the page is WCAG AA compliant. Check out Wave accessibility tool for Chrome, Firefox and Microsoft Edge.

Combine this with screen reader testing where NVDA is a free tool for this to mimic what a visually impaired user experience.

TIP

A simple solution is to add aria-label and aria-describeby for the input as shown below.

Alternate

Dependent on a third-party library being used such as Bootstrap or Tailwind, another option would be floating labels as shown below.

Source code

In the project which demonstrates the above tip, there are several extras.

JavaScript for assisting with debugging CSS. The code shown below adds or removes a simple style sheet to the page.

For production is shown below, for other environments pass true to toggle to enable debugging.

<script src="lib/payne-debugger/debugHelper.js"></script>
<script>
    document.addEventListener('keydown', function (event) {

        if (event.key === '1' && event.altKey && event.ctrlKey) {
            $debugHelper.toggle();
        }

    });
</script>

Custom H1 style shown above resides in wwwroot\css\headers.css

fieldset and legend styles reside in wwwroot\css\site.css

Summary

The tip for providing information on what an input is for without associating an input with a label may seem trivial and/or an inconvenience but to a vision impaired visitor is not trivial at all and may lead to a loss of visitors or income.

When accessibility is considered while developing a page from the start is less costly than having to go back and add code for accessibility.

🛑 And if the web application is for a state or government entity, they must be WCAG AA certified by April 2026.