Welcome to Online Express Ideas!

Multiple accessibility issues are found in the HTML code the Online Express javascript creates.

Why are resolving these issues useful? Resolving these issues is useful to ensure that disabled people have the same ability to access and read your website.

Many people would benefit from resolving the issues, especially those in government and higher education as our websites are required by law to be accessible. Accessibility is useful for companies as well to ensure that disabled people have the same ability to access and read your website, if not to avoid ADA compliance lawsuits.

How should it work? Take for example the example donation form http://bboxdemo.com/sample-online-express-donation-form/.

A quick accessibility check can be accomplished by usign a web browser plugin such as the WAVE tool or Siteimprove. These are both available for Google Chrome. The web accessibility evaluation tool (WAVE) is also available for Firefox.

The WAVE tool for Chrome lists 19 errors.

One of the more basic issues to fix is adding alternative text to images. For instance, looking at the VISA card image.
<img id="bboxdonation_payment_lvwCardTypes_imgCardImage_0" class="BBCardImage" data-card-type="visa" data-card-type-id="5963a708-fc7f-48af-952f-16d574c4b833" src="https://bbox.blackbaudhosting.com/webforms/images/cards/visa_normal.png">

I’m suggesting an alt tag to the image HTML be added; alt=”visa” or alt="Visa credit card" would work.
<img id="bboxdonation_payment_lvwCardTypes_imgCardImage_0" class="BBCardImage" data-card-type="visa" alt=”visa” data-card-type-id="5963a708-fc7f-48af-952f-16d574c4b833" src="https://bbox.blackbaudhosting.com/webforms/images/cards/visa_normal.png">

Since the online express code produces a web form it’s a best practice to include accessibility built in. Here is a website that shows how to build accessible web form controls, https://webaim.org/techniques/forms/controls.

The example donation form includes some accessibility features, however some are not implemented correctly. Take for instance the titles of the sections. They each have a label tag on them.

Gift Preferences

<label id="bboxdonation_giftattributes_lblHeadingAttributes" class="BBFormAttribsHeading BBFormFieldLabelEdit">Gift Preferences</label>

Labels are useful for text inputs.

<label for="name">Name:</label>
<input id="name" type="text" name="textfield">

The FOR of the label matches the ID for the input field. There is no corresponding text field on the title 'Gift Preferences'.

Thanks,
Russell