Accessibility

This documentation describes features and recommendations to help you build an accessible website using Site Studio. Please note that accessibility isn't achieved automatically, as it requires decisions to be made by the site builder. This documentation also provides accessibility information for users of the Site Studio user interface. 

Making your website accessible

• Always add labels to buttons and inputs
• If the label shouldn't be visible, wrap it in a span element with a class of visually-hidden (label if an input)
• Ensure all non-decorative images have alt text
• Ensure contrast ratio of text and background content is sufficient
• Use semantic HTML5 elements to structure page regions (e.g. header, main, footer, section, article)
• Always add main-content as an id to your main content region, so that the Drupal skip link is functional
• Provide focus styling for keyboard-focusable elements, so that focus is visible
• Use buttons instead of links for toggling visibility of content, e.g. mobile navigation, search and language selector blocks

Focus styling

The Site Studio minimal theme includes a CSS reset to provide a blank canvas that is consistent across all major browsers, including removal of focus styles.

Some people can't use, or prefer not to use a pointing device (mouse or trackpad) and often rely on their keyboard to navigate web pages.

It's therefore very important that you create focus styles for all focusable elements on your website, so that they have a visual cue when focused by the keyboard. The easiest way to do this is through Site Studio base styles, eg. for buttons and links.

There are different techniques for implementing this, often making use of CSS outline or box-shadow properties. Bear in mind that you may need to use one or both of these for general styling, so ensure when an element is focused it still looks right.

ARIA attributes

Whilst some of the elements Site Studio provides includes built-in ARIA support (detailed below), you may find it necessary to add additional syntax to your elements to support the latest standards. This can be done through the elements Markup tab.

Please refer to the W3C Working Draft - ARIA in HTML for the latest guidelines.

Menus created with Site Studio

When creating menus using Site Studio, the following accessible functionality is included:

Keyboard navigation

• Space - toggles child menu visibility. If no child menu will follow the link
• Return / Enter - always follows menu link
• Down Arrow / Right Arrow - open child menu and/or moves onto next menu item
• Up Arrow / Left Arrow - closes child menu and/or moves onto the previous menu item
• Escape - closes child menu and restores focus to the parent menu item.

ARIA support

• aria-haspopup - added to menu links that have sub-menus.
• aria-expanded - added to menu links that have sub-menus and toggles between true and false, when the sub-menu is visible and hidden respectively.

Button element

Keyboard navigation

• Return / Enter / Space - press button

ARIA support

• aria-haspop="true" and aria-expanded="false" - added to buttons that have their modifier type set to Toggle modifier (as accessible popup - collapsed)
• aria-haspop="true" and aria-expanded="true" - added to buttons that have their modifier type set to Toggle modifier (as accessible popup - expanded)

Slider

Keyboard navigation

• Left Arrow / Right Arrow - allows navigation to previous and next slide when focus is within the slider. Focus will then move to either the previous or next navigation button, depending on which keyboard arrow is pressed.
• Return / Enter / Space - when slider navigation buttons are enabled, will go to previous or next slide (depending on which button has focus)
• Tab - when pagination is focused, will move focus through other pagination items.

ARIA support

• aria-label="Previous slide" - added to previous slide navigation button
• aria-label="Next slide" - added to previous slide navigation button
• aria-label - user can define a custom aria label on the slider container
• aria-label="slide x" - added to each slide item, where x is the numerical index in total number of slides
• (centered) - is appended to the centered slides aria-label when Center mode is enabled
• aria-hidden="false" - added to slide items that are in view
• aria-hidden="true" - added to slide items that are out of view
• aria-describedby and aria-controls - links out of view slide items with their corresponding pagination button
• aria-label="x of y" - added to each pagination button, where x is the index in number of pages and y is total number of pages
• aria-selected="true" - added to the active pagination button
• role="group" - added to each slide item
• role="tablist" - added to the pagination ul
• role="presentation" - added to each pagination li
• role="tab" - added to each pagination button
• role="region" - added to the slide container

Screen reader instructions

Instructions can be provided for screen reader users on the Slider container. This is added as a visually-hidden paragraph within the Slider container but before the slides.

Accordion tabs

Keyboard navigation

• Return / Enter - expands or collapses an accordion/tab panel when nav item is focused.

Read more

Keyboard navigation

• Return / Enter / Space - expands or collapses the content within the Read more element, when the button is focused

ARIA support

• aria-haspop="true" and aria-expanded="false" - added to Read more buttons that have their Initial state set to Initially hidden
• aria-haspop="true" and aria-expanded="true" - added to Read more buttons that have their Initial state set to Initially visible

Modal

Keyboard navigation

• Escape - closes modal when open
• Tab - moves focus through focusable elements within the modal.

ARIA support

• role="dialog" - added to the outermost element of the modal (has class coh-modal).
• role="document" - added to the inner element of the modal (has class coh-modal-inner).
• aria-hidden="true" and inert="true" - added to all HTML elements outside of the modal, when modal is open. Focus stays inside the modal thanks to this feature.

CKEditor

There is a plugin available for CKEditor that inspects the accessibility level of WYSIWYG-generated content and can immediately resolve issues that are found This can be installed on Drupal 8 with the following modules and CKEditor plugins:

CKEditor Accessibility Checker
You can find out more about this plugin here and download the library required.

CKEditor Balloon Panel
You can find out more about this plugin here and download the library required.

CKSource have a demo of the plugin so you can see it in action here.

Site Studio UI accessibility

We are taking steps to improve the accessibility of our interface, to ensure as many people as possible can use Site Studio effectively.

Layout canvas

Keyboard navigation

• Return / Enter / Space - opens the sidebar browser when a layout canvas/form builder item that can have child items is focused
• Return / Enter / Space - opens sidebar editor when a layout canvas/form builder item that cannot have child items is focused
• Return / Enter / Space - opens sidebar editor when a layout canvas/form builder item toolbar is focused

Color picker

Keyboard navigation

• Return / Enter / Space - opens the color picker when focused

Style tree

Keyboard navigation

• Tab - navigate down expanded levels and their controls
• Shift + Tab - navigate up expanded levels and their controls
• Return / Enter / Space - expand or collapse a style tree level when expand/collapse button is focused
• Return / Enter / Space - select a style tree level when tree level label is focused
• Escape - closes the blade menu or current blade menu level (if a single level or multiple are active respectively)

General focus enhancements

• All focusable elements have a consistent yellow outline applied when focused, so that they are clearly visible when using keyboard for navigation.
• When a blade menu is launched, the back button is focused. This also happens when navigating between blade levels so that focus stays within the blade.
• When the sidebar editor is launched, the close button is focused.