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
spanelement with a class of
labelif an input)
- Ensure all non-decorative images have
- Ensure contrast ratio of text and background content is sufficient
- Use semantic HTML5 elements to structure page regions (e.g.
- Always add
idto 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
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
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.
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
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:
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-haspopup- added to menu links that have sub-menus.
aria-expanded- added to menu links that have sub-menus and toggles between
false, when the sub-menu is visible and hidden respectively.
Return / Enter / Space- press button
aria-expanded="false"- added to buttons that have their modifier type set to
Toggle modifier (as accessible popup - collapsed)
aria-expanded="true"- added to buttons that have their modifier type set to
Toggle modifier (as accessible popup - expanded)
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-label="Previous slide"- added to previous slide navigation button
aria-label="Next slide"- added to previous slide navigation button
aria-hidden="false"- added to slide items that are in view
aria-hidden="true"- added to slide items that are out of view
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="tabpanel"- 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
Return / Enter- expands or collapses an accordion/tab panel when nav item is focused.
Return / Enter / Space- expands or collapses the content within the
Read moreelement, when the button is focused
aria-expanded="false"- added to
Read morebuttons that have their
Initial stateset to
aria-expanded="true"- added to
Read morebuttons that have their
Initial stateset to
Escape- closes modal when open
Tab- moves focus through focusable elements within the modal.
role="dialog"- added to the outermost element of the modal (has class
role="document"- added to the inner element of the modal (has class
inert="true"- added to all HTML elements outside of the modal, when modal is open. Focus stays inside the modal thanks to this feature.
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:
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.
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
Return / Enter / Space- opens the color picker when focused
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.