Skip to main content

WebARIA

Provides a system to add advanced accessibility features to a Wisej.NET application by adding WAI-ARIA properties to all controls in the designer. Includes several WAI-ARIA properties and it's open to be extended and modified as needed to meet the accessibility requirements on an application.

WebARIA Source Code

Features​

  • Adds ARIA attributes to Wisej controls without subclassing them.
  • Works as an extender provider for any Wisej.Web.Control.
  • Supports common state attributes:
    • Hidden
    • Required
    • ReadOnly
    • Selected
    • Expanded
  • Supports labeling and descriptions:
    • Label
    • LabeledBy
    • DescribedBy
  • Supports value-related accessibility metadata:
    • ValueNow
    • ValueMin
    • ValueMax
    • ValueText
  • Supports validation state through aria-invalid internally.

It also applies some values automatically based on the control type:

  • TextBoxBase: text and read-only state
  • NumericUpDown: min, max, current value
  • CheckBox: selected state from CheckState
  • RadioButton: selected state from Checked
  • Button: text and enabled/read-only mapping

Code Example​

public partial class Page1 : Page
{
    private readonly WebARIA webAria1 = new WebARIA();

    public Page1()
    {
        InitializeComponent();

        var label = new Label()
        {
            Text = "Email",
            Location = new System.Drawing.Point(20, 20)
        };

        var textBox = new TextBox()
        {
            Location = new System.Drawing.Point(20, 50),
            Width = 220
        };

        this.Controls.Add(label);
        this.Controls.Add(textBox);

        var aria = webAria1.GetAria(textBox);
        aria.Label = "Email address";
        aria.Required = TriState.True;
        aria.DescribedBy = label;
    }
}

Let's break down what this code snippet does. First, it creates a WebARIA object (webAria1), whose purpose is to attach ARIA accessibility data to Wisej controls. Then it creates a label and a textbox.

Next. this line of code: var aria = webAria1.GetAria(textBox); means "get the ARIA configuration object for this textBox control and store it in aria."

Finally, the ARIA properties of the textbox are set- The label is "email address", required is true, and it is described by the label object

When you run this project, it will just look like a textbox with a label- you can't see the ARIA information. You need to press F12 to open the Developer Tools and then inspect the textbox. Here's what it looks like with the dev tools open:

Note that it says aria-required="true" aria-label="Email address" aria-describedBy="id_4" This is the HTML that the WebARIA control added.

How to Use​

The WebARIA extension can be added to a Wisej.NET project using NuGet Package Manager.

https://www.nuget.org/packages/Wisej-3-WebARIA