Skip to content

Latest commit

 

History

History
90 lines (64 loc) · 5.08 KB

accessibility-value.md

File metadata and controls

90 lines (64 loc) · 5.08 KB

Accessibility value

An accessibility value helps users of assistive technologies to understand the state of elements on the screen. A slider should indicate the currently selected value, and ideally also it's minimum and maximum value. The screen reader announces the value of elements as it reads the screen. It is important to assign correct values to elements to avoid misunderstanding.

WCAG

Relates to 4.1.2

Android

Android has limited support to provide a dedicated accessibility value for assistive technologies. The AccessibilityNodeInfoCompat object contains a couple of methods, such as the setChecked method.

Unfortunately the desired value is often not available. If your desired value is not included, you can append it to the contentDescription attribute.

ViewCompat.setAccessibilityDelegate(
    element,
    object : AccessibilityDelegateCompat() {
        override fun onInitializeAccessibilityNodeInfo(
            host: View,
            info: AccessibilityNodeInfoCompat
        ) {
            super.onInitializeAccessibilityNodeInfo(host, info)
            info.isChecked = true
        }
    }
)

element.contentDescription = "Name (Value)"

iOS

On iOS, you can set an accessibility value with the accessibilityValue or accessibilityAttributedValue property.

When using the semantically correct element, you usually do not need to modify the accessibilityValue. For example, a UISwitch sets the accessibilityValue to selected or not selected and a UISlider sets the accessibilityValue to the current value. If the default value is incorrect or unclear, you can override the value manually.

element.accessibilityValue = "Custom"

Flutter

With Flutter, you can set an accessibility value by using the value or attributedValue property of Semantics.

When using the semantically correct element, you usually do not need to modify the accessibility value. For example, Slider, Switch and CheckBox, and others automatically assign accessibiluty values.

It is also possible to set an increasedValue and decreasedValue or attributedDecreasedValue and attributedIncreasedValue to indicate what the value will become when the user decreases or increases the value.

Some widgets include additional methods, such as semanticFormatterCallback.

Semantics(
  value: 'Custom',
  increasedValue: 'Custom + 1',
  decreasedValue: 'Custom - 1',
  child: Widget(),
);

React Native

In React Native you can use the accessibilityValue and accessibilityState props to set an accessibility value. The accessibilityValue indicates the current value of a component. You can indicate a range, using min, max, and no, or text using text. The accessibilityState indicates the current state of a component, for example disabled or checked.

<View
  accessibilityValue={{min: 0, max: 100, now: 50}}
  accessibilityState="busy" />

<View 
  accessibilityValue={{text: "Custom"}}
  accessibilityState="disabled" />

Xamarin

Xamarin Forms elements such as Button and Entry automatically include an accessibility value. When you make custom elements you have to set these properties yourself.

However, there is no dedicated property to set an accessibility value. You can embed the value inside the label by using MultiBinding inside the AutomationProperties.Name property.

<Label
    <AutomationProperties.Name>
        <MultiBinding StringFormat="{}{0}, {1}">
            <Binding Source="The value is: " />
            <Binding Source="{BindingValue}" />
        </MultiBinding>
    </AutomationProperties.Name>
</Label>