Foxit PDF SDK For Web - V10.0.0

# ARIA

This section mainly includes how to quickly use the built-in features of the UIExtension framework to achieve accessibility, as well as the introduction of the related tools. If you want to learn more about ARIA's technical specifications and best practices, you can refer to the following addresses:

# How to use UIExtension to enable accessibility

When initializing PDFUI, we need to load the aria add-on:

new UIExtension.PDFUI({
    addons: [
        // .... other Add-on
        'path/to/lib/uix-addons/aria/addon.info.json' // Make sure that aria is loaded last.
    ]
    // ... other options
})

If the plugins in your app are loaded via allInOne.js, it has already contained aria, then you don't need to load it additionally:

new UIExtension.PDFUI({
    addons: 'path/to/lib/uix-addons/allInOne.js'
    // ... other options
})

For more information about how to load add-on, you can refer to Here.

# The built-in components in UIExtension

# aria-label attribute

After specifying the text or label parameter for the built-in components, the aria-label attribute will be added to the generated DOM node automatically. You can click run button to run the demo, and then use a screen reader to see the effect:

# Visually hidden content

In some scenarios, we need to provide content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, the content can be styled using the .fv__ui-aria-sr-only class. This can provide useful information or cues for visually impaired users, for example, sometimes we can use different colors to indicate different types of information, such as dangers and warnings, in that case we need to add additional text content to inform visually impaired users of what type of the information.

<p class="text-danger">
    <span class="fv__ui-aria-sr-only">Danger:</span>
    This action is not reversible.
</p>

# aria directive

# @aria:attr directive

This directive is used to set the attribute which is at the beginning of aria-. The directive is written as @aria:attr.${aria-property-name}. aria-property-name can be referred to Here (opens new window), the value of the parameter is an executable expression:

# @aria:label directive

This directive is used to set the aria-label (opens new window) attribute, and the directive value is i18n entry.

# @aria:labelledby directive

@aria:labelledby directive is used to generate the aria-labelledby attribute. The directive value is using the selector syntax of UIExtension rather than the element's id. This is because the aria-labelledby attribute needs to be associated with another element via id, and id may cause global conflicts, so handwriting id to index elements is not recommended. The selector syntax of this directive can avoid this problem.

For more information about the aria-labelledby attribute, please refer to Here (opens new window).

In the above example, @aria:labelledby="::parent()::childAt(0),,a-colon" specifies the id of the two span components before <input> as label. For more information about the selector syntax, please refer to Here.

# @aria:describedby directive

The usage and principle of the @aria:describedby directive are basically the same as @aria:labelledby, so we will not repeat it here.

For more information about aria-describedby, please refer to Here (opens new window).

# @aria:rel directive

In ARIA specification, in addition to aria-labelledby and aria-describedby, there are also many attributes that need to be associated with other elements. @aria:rel directive encapsulates these commonly used attributes:

# @aria:circular-focus directive

This directive is used to control the focus of elements within the components and implement the loop jump function. It is typically used for pop-ups, or a separate UI area.

Refer to the following example and click run button to run it.

← Shortcuts →