How to Make Your Website Keyboard-Accessible in Drupal 8.8's Media Library (video)

More user-friendly, more intuitive, more accessible — this is what modern websites should be. One of the key aspects of improving website accessibility is enabling keyboard navigation.

The newly released Drupal 8.8 is great in this arena — it introduces keyboard accessibility for quickly adding media from Media Library to CKEditor’s content with no mouse.

Let’s see this in action — video included! And if you want to see this (and many other cool new features) right on your website, schedule an update to Drupal 8.8 with our Drupal experts.

Why keyboard accessibility is important

Undoubtedly, website accessibility is vital for business reputation, your website's traffic, audience, SEO, and overall user-friendliness. And website accessibility would be incomplete without keyboard accessibility — see why.

Many users prefer keyboard navigation to mouse navigation because they find it more efficient. However, for users with particular disabilities, it’s not a matter of preference — they simply have no choice, so keyboard accessibility is essential. These cases include:

• motor impairments, tremors, loss of muscle control (users cannot hold a mouse properly)
• visual impairments (users rely on screen readers and cannot see where to click the mouse)

That’s why respectful brands include keyboard accessibility in the requirements to their websites. And it’s now easy with D8.8!

The particular feature we are discussing today is about keyboard accessibility in creating content and adding multimedia. In addition to admins and content editors, it will be helpful to all users on a wide variety of websites that allows content creation. Let’s go.

Keyboard accessibility as final touch in Drupal’s media ecosystem

It looks like keyboard accessibility is the final stroke in Drupal 8’s perfect media handling ecosystem. Up until the D8.8 release, users and editors have been enjoying other new features in this sphere:

• With D8.6, came easy media handling with saving and reusing it in Media Library and embedding it into the content. The oEmbed feature allowed everyone to easily add YouTube or Vimeo videos through links.
• D8.7 gave us the new attractive and user-friendly Media Library interface with bulk uploads and other useful features.

Finally, Drupal 8.8 has introduced Media Library and WYSIWYG integration to add media with a simple icon in the content editor. It has also made the Library stable so it is absolutely ready for live sites. And keyboard accessibility has finally brought the beauty and interactivity of multimedia close to everyone — no need for a mouse!

How it works: Drupal 8's keyboard navigation in adding media to content

To embed some items from Media Library using keyboard accessibility opportunities, users can:

• move to the CKEditor toolbar (“Alt” + “F10” on the keyboard)
• find the Media Library icon (“Tab” + “arrow keys” on the keyboard)
• open the Library (“Space” or “Enter” on the keyboard)
• move around the Library interface to select items (“Tab” + “arrow keys” on the keyboard)
• select the desired item (“Space” on the keyboard)
• edit the item’s ALT tag, position, and caption (“Enter” on the keyboard)

• move to the “Insert selected” button (Tab + arrow keys on the keyboard)
• embed the item into the content (Enter)

Note: please keep in mind that the correct key commands may depend on the version of the OS.

A video is worth a hundred words, so see how keyboard accessibility works for media embedding in Drupal 8.8.

To get the Library icon on the CKEditor dashboard, it’s necessary to first add it to the active toolbar by dragging.

Drupal will also ask you to enable the “Embed Media” filter below.

Of course, the Media and Media Library modules should also be enabled. It is also possible to add multiple media fields as part of your content type structure, which is covered in the blog post on media handling by our colleagues from Drudesk. For example, every your blog post could have 3 videos, 5 photos, and so on, built into its structure.

Let your website have the latest features!

Indeed, keyboard accessibility in Drupal 8 looks great. We can help you with its setup on your website. Entrust our web development agency with smoothly updating your website to Drupal 8.8 — and let your website follow the best digital trends in keyboard accessibility and much more!