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 at: http://www.eng.uwaterloo.ca/~erick/aria/aria.html 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 at:† https://youtu.be/yKogE_Ku_FY

The complete source can be downloaded: from http://www.eng.uwaterloo.ca/~erick/aria/aria.zip

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: http://erickengelke.com/blog/4.html

Copyright © 2023, Erick Engelke