UIkit 3.16 – Accessibility and Dropdown Menus

Today we are happy to introduce UIkit 3.16. It is all about accessibility and keyboard interaction, so everything to make your UIkit website WCAG-compliant. But that's not all. There is also a new flexible Dropnav component that adds dropdown menus to any navigation type. Want to know more? Let's take a look.

Make sure to subscribe to our YouTube channel and join our Discord Chat Server for all news and discussions.

Accessibility

Web accessibility is a very important part of any website as it ensures that all users have access to the content of your site. Finally, we made UIkit a fully accessible front-end framework. Now all JavaScript UI components, like slideshow, lightbox and dropdown, are accessible out of the box. They follow the Accessible Rich Internet Applications suite (WAI-ARIA) which defines a way to make web content accessible. Let's take a look in detail.

WAI-ARIA Roles, States and Properties

Our interactive JavaScript components now use all relevant WAI-ARIA roles, states and properties, so they are readable and operable using assistive technologies like screen readers. They automatically set the required HTML attributes in the markup.

This is different for each component, so if you are interested in all the details, take a look at the corresponding documentation: Accordion, Filter, Switcher, Tab, Slider, Slideshow, Lightbox, Modal, Offcanvas, Toggle, Close, Marker, Totop, Countdown, Notification, Spinner, Navbar, Tooltip and Form.

Keyboard Interaction

Additionally, all interactive JavaScript components are also keyboard-accessible. Here we implemented the common keyboard navigation convention in which you can use the tab and shift+tab keys to move focus from one component to another and other keys like arrow keys to move focus inside of components that include multiple focusable elements. For example, in a navbar you can use arrow-left and arrow-right keys to move between the main menu items and arrow-up and arrow-down keys to move inside a dropdown. Of course, each component has a dedicated documentation explaining the relevant keyboard keys.

Internationalization (I18N)

UIkit also supports language internationalization (i18n) of its components. Since we automatically add default texts for the aria-label attributes, these texts can be translated. You can find the translation strings in the corresponding component documentation. Learn how to translate them in the internationalization documentation.

WCAG 2.1 Standards

This release makes our JavaScript components fully accessible. But of course whether your website complies to the WCAG 2.1 standards also depends on the colors of your UIkit theme and your markup. We added a documentation on how to improve the color contrast as well as instructions for each component like Form and Breadcrumbs which WAI-ARIA roles, states and properties need to be set manually depending on the markup.

If you still find the components are lacking accessibility or the documentation needs further improvements, please let us know and open an issue or pull request for the documentation or UIkit on GitHub.

Dropnav Component

But that's not all. There is also a new Dropnav component. We abstracted the functionality to create dropdown menus from the navbar, so you can now create dropdown menus for any navigation, for example a subnav.

The dropnav will automatically initialize all dropdowns in the navigation with the same options, so there is no need to initialize them individually. By the way, did you know that dropdowns in UIkit are aim-aware? They stay open as long as the mouse pointer moves towards the dropdown. There is also an additional delay before closing even if the mouse pointer shortly moves in another direction. Finally, in hover mode the dropdowns immediately close when another menu item is hovered.

Another great feature of the dropnav is that it can show content of the dropdowns within a dropbar. The dropbar extends to the full width of the viewport and adjust its height to the open dropdown.

And of course the dropnav has the same accessibility pattern and keyboard interaction as the navbar.

Drop Parent Icon

The Drop component has a new parent icon to indicate that an element toggles a drop. It can be used in buttons, subnavs or tabs. Similar to the navbar parent icon, it inherits the text color. Additionally, we added a smooth transition to both the navbar and drop parent icon animation.

Icons

UIkit icon library got a small update as well. We added seven new icons, Eye, Eye Slash and Crosshairs as well as Android, Android Robot, Apple and Microsoft. We also updated the Lifesaver, Paint Bucket and Video Camera icons to fit the overall UIkit outline style.

Further Improvements

Of course, UIkit 3.16 comes with a lot of other smaller improvements and fixes. For example, the lightbox now supports YouTube Shorts URLs. And to ensure a smooth animation and a better performance, the Parallax component adds the will-change CSS property, and, whenever possible, the Sticky component uses the native CSS position: sticky property. For the full list of features and fixes, check out the changelog.

Migration to UIkit 3.16

There are breaking changes for the Dropdown and Navbar components. We moved functional CSS from Dropdown, Dropbar and Navbar component to Drop component which why we had to rename some HTML classes. So please take a look at the migration guide.

What's Next

We are happy that all our interactive JavaScript components are now fully accessible and meet the WAI-ARIA standards. And the new dropnav will give you great flexibility to create dropdown menus for any navigation. Now it is your turn to share your feedback, so let us know what you think about this release in the comments below.