Use 'aria-invalid' and 'required' attributes for WCAG compliance

Are you requesting a feature, reporting a bug or asking a question?

Requesting a feature to use certain HTML and ARIA attributes, for WCAG compliance

Suggestions

1. Add the aria-invalid attribute to text input elements that have an invalid value (from any custom validators) after clicking the “Next” or “Submit” button.

2. Add the required attribute to all input elements that are required to complete the survey. This will indicate to screen readers that the input is required when the element is focused. However, there are some rules that need to be followed for certain inputs, as noted on the w3 site: https://www.w3.org/TR/html5/sec-forms.html#the-required-attribute

• For regular text inputs: adding required to the input element is sufficient, if it’s required to complete the survey

• For radio button inputs: add required to all of the radio button inputs in a radiogroup if it’s required (i.e. radio inputs that have the same name attribute)

• For checkbox inputs: unfortunately this one is more complicated. If there is a list of checkboxes, and you need to validate that one of them has been selected, adding required to the checkbox inputs will not work the same way with radio buttons, as that would specify that all the checkboxes need to be checked. It seems that the only workaround is adding the required attribute to all the checkbox inputs, then manually removing all the required attributes when an option has been selected. (Solution found here: https://teamtreehouse.com/community/html5-required-checkbox-in-group)

Provide the test code

Test code for radio buttons: For example, modify SurveyQuestionRadioItem, in reactquestionradiogroup.tsx

...
// if this is the first radio input in the radiogroup, add required attribute
var required = this.index === 0 ? true : false;

...

return (
      <div className={itemClass}>
        <label className={this.cssClasses.label}>
          <input
            required={required}                       // add required variable
            className={this.cssClasses.itemControl}
            id={id}
            type="radio"
            name={this.question.name + "_" + this.question.id}
            checked={this.isChecked}
            value={this.item.value}
            disabled={this.isDisplayMode || !this.item.isEnabled}
            onChange={this.handleOnChange}
            aria-label={this.item.locText.renderedHtml}
          />
          <span className={this.cssClasses.materialDecorator} />
          <span className="check" />
          <span className={this.cssClasses.controlLabel}>{itemText}</span>
        </label>
        {otherItem}
      </div>
    );

Test code for checkbox inputs: Can reference solution here: https://teamtreehouse.com/community/html5-required-checkbox-in-group

I was thinking it would be possible to use an onChange event for the checkbox input to check whether the inputs should have required attribute or not, but it seems that onClick would be best due to browser inconsistencies: http://form.guide/html-form/html-checkbox-events.html

Specify your

• browser: Chrome
• browser version: 70.0.3538.77
• surveyjs platform (angular or react or jquery or knockout or vue): React
• surveyjs version: 1.0.58

[ekim-novus]

Hey @tsv2013! I know that there’s an endless list of enhancements that are on the back-burner for the surveyJS team, but I thought I’d try to bring this back to the surface.

We are trying to get our website a stamp of approval as WCAG-compliant within the next couple weeks, but can’t do so until this is resolved. Do you know if there are any plans to look into this ticket in the near future?

[dszewczyk1]

@tsv2013 the problem is that with radio buttons it’s not that a single radio button is invalid, but rather the whole radiogroup - as you need to select one of the buttons. So the group is invalid, as you need to select one of the options, but not that every individual radio button is invalid. MDN also doesn’t have it associated with radio role, but with radiogroup https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid