Special Need Supports, ARIA with Elevate Web Builder

April 14, 2023

I have added ARIA capability to Elevate Web Builder and am making the feature open source, so you can freely use it in your projects.

ARIA stands for Accessible Rich Internet Applications, which are internet applications that provide additional accesssible Web content useful for assistive devices such as screen readers.

Many of us are facing legislation which requires accessible applications, and anyways it’s the right thing to do to empower people who might otherwise be unable to use your applications. It would be nice if EWB included ARIA in its components, but this buys us compliance until that date.

My sample application can be found here. It doesn’t look any different than a typical web page. However, when you load ChromeVox into your Chrome browser, the page comes alive. I’ve recorded the ChomeVox screen: here.

The complete source can be downloaded: from source

Essentially, you add the webaria to the EWB uses line, then add text labels to various edits, forms, etc.

procedure TForm1.Form1Show(Sender: TObject);
begin
   AddAria( Form1, 'aria-label','Welcome to the tool that lets you introduce yourself');

   AddAria( Edit1,'aria-label','enter name');

   AddAria( Image1, 'aria-label','Image of programmer');

   AddAria( EditComboBox1,'aria-label','Specify preferred gender');

end;

I’ve also found a simple way to update most of your applications in bulk. The AddAriaFromDataset() function uses the ARIA-label’s from the datacolumns where you have them defined. That way, as long as your database labels make sense to users (eg. Name, gender, etc.) your ARIA labels are autogenerated.

procedure TForm1.Form1Show(Sender: TObject);
begin

{$IFDEF OLDWAY}

   // manually set the fields for each field, a lot of work

   AddAria( Edit1,'aria-label','enter name');

   AddAria( EditComboBox1,'aria-label','Specify preferred gender');

{$ELSE}

   // auto add all field "names" from the dataset datacolumn value
   // MUCH easier
   AddAriaFromDataset( form1 );

{$ENDIF}


   // handle any not handled above

   AddAria( Form1, 'aria-label','Welcome to the tool that lets you introduce yourself');

   AddAria( Image1, 'aria-label','Image of programmer');

end;

For an explanation of how Cracker classes are used, such as I did to add ARIA values see my blog on crackers.