WebAIM - Web Accessibility In Mind

E-mail List Archives

Announcing accessible ARIA Carousels plus other updates.


From: Bryan Garaventa
Date: Nov 19, 2021 1:52PM

As a quick update, fully scalable ARIA Carousels have been added to the Apex 4X Repo, which includes responsive breakpoints and can be populated with any type of content such as images, plain text, links buttons and form fields, or any other types of structural markup. Process events can even be optionally set to create dynamic wizards if desired as well.

These can be accessed for testing on the CAROUSELS TEMPLATE page, by following the “Test Pages” links at the top of the page. (E.G. “AutoRotate”, “ManualRotate”, and “Slideshow”)

(These may need some styling changes in the near future to make them more visually appealing, I personally cannot see them.)

ARIA Templates

The full index of available ARIA widgets can be accessed from the main Templates page, which now includes all of the following ARIA design patterns:

(None of these require any prior knowledge of ARIA to implement.)

Accordions, Buttons, Carousels, Checkboxes, Comboboxes, Datepickers, Dialogs, Drag and Drop, Footnotes, Grids, Listboxes, Menus, Popups, Radios, Sliders, Switches, Tabs, Tooltips, and Trees.

Other Updates

The current 4X version has been updated to Virtual Light (2021.1.6), which includes a new ARIA development function, “nearestHeadingLevel”, which will return the nearest heading level that is prior to the specified element in the reading order. This is useful when creating dynamically rendered components that are inserted within a variable document structure and it is necessary to provide a heading to aid navigation for end users. The returned level can be incremented by 1 to create a sub heading for the newly rendered component to automatically ensure document structure continuity.

To view the help documentation for this, plus all of the other ARIA development functions provided within 4X, view the folder “Help/ARIA Development” within the Apex 4X repo download.

This folder includes help docs for all of the following ARIA development features :

Announcements and Alerts (subfolder), Browser History and Permalinks (subfolder), Disabled Objects (subfolder), Events (subfolder), Id Reference Attributes (subfolder), State Properties (subfolder), Visibility and Exposure (subfolder), Controls (doc), DescribedBy (doc), FlowsTo (doc), Focus (doc), GetActiveElements (doc), GetOrientation (doc), LabelledBy (doc), NearestHeadingLevel (doc), Owns (doc), PreloadImages (doc), SetCircularTabbing (doc), SetKeyboardA11Y (doc), and SvgFix (doc).

All other development features are documented within the root Help folder as well.

As always, if you encounter any issues, please file them as an Apex 4X Issue so it can be tracked and updated accordingly. The same goes for submitting feature requests and questions.

All the best,

Bryan Garaventa
Principal Accessibility Architect
Level Access, Inc.
415.624.2709 (o)