Site Studio
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.
Site Studiospan element with a class of visually-hidden (label if an input)alt textheader, main, footer, section, article)main-content as an id to your main content region, so that the Drupal skip link is functionalThe 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.
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.
When creating menus using Site Studio, the following accessible functionality is included:
Space - toggles child menu visibility. If no child menu will follow the linkReturn / Enter - always follows menu linkDown Arrow / Right Arrow - open child menu and/or moves onto next menu itemUp Arrow / Left Arrow - closes child menu and/or moves onto the previous menu itemEscape - 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 true and false, when the sub-menu is visible and hidden respectively.Return / Enter / Space - press button
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)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 buttonaria-label="Next slide" - added to previous slide navigation buttonaria-hidden="false" - added to slide items that are in viewaria-hidden="true" - added to slide items that are out of viewaria-describedby and aria-controls - links out of view slide items with their corresponding pagination buttonaria-label="x of y" - added to each pagination button, where x is the index in number of pages and y is total number of pagesaria-selected="true" - added to the active pagination buttonrole="tabpanel" - added to each slide itemrole="tablist" - added to the pagination ulrole="presentation" - added to each pagination lirole="tab" - added to each pagination buttonReturn / Enter - expands or collapses an accordion/tab panel when nav item is focused.Return / Enter / Space - expands or collapses the content within the Read more element, when the button is focusedaria-haspop="true" and aria-expanded="false" - added to Read more buttons that have their Initial state set to Initially hiddenaria-haspop="true" and aria-expanded="true" - added to Read more buttons that have their Initial state set to Initially visibleEscape - closes modal when openTab - moves focus through focusable elements within the modal.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.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.
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 focusedReturn / Enter / Space - opens sidebar editor when a layout canvas/form builder item that cannot have child items is focusedReturn / Enter / Space - opens sidebar editor when a layout canvas/form builder item toolbar is focusedReturn / Enter / Space - opens the color picker when focusedTab - navigate down expanded levels and their controlsShift + Tab - navigate up expanded levels and their controlsReturn / Enter / Space - expand or collapse a style tree level when expand/collapse button is focusedReturn / Enter / Space - select a style tree level when tree level label is focusedEscape - closes the blade menu or current blade menu level (if a single level or multiple are active respectively)If this content did not answer your questions, try searching or contacting our support team for further assistance.
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.
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.
When creating menus using Site Studio, the following accessible functionality is included:
Space - toggles child menu visibility. If no child menu will follow the linkReturn / Enter - always follows menu linkDown Arrow / Right Arrow - open child menu and/or moves onto next menu itemUp Arrow / Left Arrow - closes child menu and/or moves onto the previous menu itemEscape - 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 true and false, when the sub-menu is visible and hidden respectively.Return / Enter / Space - press button
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)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 buttonaria-label="Next slide" - added to previous slide navigation buttonaria-hidden="false" - added to slide items that are in viewaria-hidden="true" - added to slide items that are out of viewaria-describedby and aria-controls - links out of view slide items with their corresponding pagination buttonaria-label="x of y" - added to each pagination button, where x is the index in number of pages and y is total number of pagesaria-selected="true" - added to the active pagination buttonrole="tabpanel" - added to each slide itemrole="tablist" - added to the pagination ulrole="presentation" - added to each pagination lirole="tab" - added to each pagination buttonReturn / Enter - expands or collapses an accordion/tab panel when nav item is focused.Return / Enter / Space - expands or collapses the content within the Read more element, when the button is focusedaria-haspop="true" and aria-expanded="false" - added to Read more buttons that have their Initial state set to Initially hiddenaria-haspop="true" and aria-expanded="true" - added to Read more buttons that have their Initial state set to Initially visibleEscape - closes modal when openTab - moves focus through focusable elements within the modal.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.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.
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 focusedReturn / Enter / Space - opens sidebar editor when a layout canvas/form builder item that cannot have child items is focusedReturn / Enter / Space - opens sidebar editor when a layout canvas/form builder item toolbar is focusedReturn / Enter / Space - opens the color picker when focusedTab - navigate down expanded levels and their controlsShift + Tab - navigate up expanded levels and their controlsReturn / Enter / Space - expand or collapse a style tree level when expand/collapse button is focusedReturn / Enter / Space - select a style tree level when tree level label is focusedEscape - closes the blade menu or current blade menu level (if a single level or multiple are active respectively)If this content did not answer your questions, try searching or contacting our support team for further assistance.