You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The SwirlSwitch component uses an <input> element with type="role". Additionally, it sets the aria-checked property on the element.
This should be unnecessary, as the <input>-element has native semantics for the checked-state. Thus setting the aria-checked property is against the first rule of ARIA which recommends to not add any aria-properties unless strictly necessary.
We didn't encounter any usability issues due to this error. The application could be operated correctly using VoiceOver+Edge on MacOS.
The only impact we observed validation error, which is a failure of the WCAG Success Criterion 4.1.1 Parsing: https://www.w3.org/WAI/WCAG21/Understanding/parsing
Expected behavior
Using the <input type="radio"> should convey the semantics to screenreaders without the aria-checked property.
Issue summary
The SwirlSwitch component uses an
<input>
element withtype="role"
. Additionally, it sets thearia-checked
property on the element.This should be unnecessary, as the
<input>
-element has native semantics for the checked-state. Thus setting thearia-checked
property is against the first rule of ARIA which recommends to not add any aria-properties unless strictly necessary.This gets flagged as an error by the W3 HTML validator:
https://validator.w3.org/nu/#l26c32939
Impact
We didn't encounter any usability issues due to this error. The application could be operated correctly using VoiceOver+Edge on MacOS.
The only impact we observed validation error, which is a failure of the WCAG Success Criterion 4.1.1 Parsing: https://www.w3.org/WAI/WCAG21/Understanding/parsing
Expected behavior
Using the
<input type="radio">
should convey the semantics to screenreaders without thearia-checked
property.Actual behavior
Steps to reproduce the problem
Sample snippet:
<swirl-radio _ngcontent-ng-c2234221409="" input-id="first_half_day" input-name="radio" value="1" class="sc-swirl-radio-h sc-swirl-radio-s hydrated"><label class="radio radio--variant-default sc-swirl-radio radio--unchecked" for="first_half_day"><span class="radio__control sc-swirl-radio"><swirl-visually-hidden class="sc-swirl-radio sc-swirl-visually-hidden-h sc-swirl-visually-hidden-s hydrated"><!----><input aria-checked="false" class="radio__input sc-swirl-radio" id="first_half_day" name="radio" type="radio" value="1"></swirl-visually-hidden><span aria-hidden="true" class="radio__box sc-swirl-radio"></span></span><span class="radio__label-container sc-swirl-radio"><span class="radio__label sc-swirl-radio">First half of the day</span></span></label></swirl-radio>
Specifications
The text was updated successfully, but these errors were encountered: