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 ofvisually-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 anid
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 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 support
aria-haspopup
- added to menu links that have sub-menus.aria-expanded
- added to menu links that have sub-menus and toggles betweentrue
andfalse
, when the sub-menu is visible and hidden respectively.
Button element
Keyboard navigation
-
Return / Enter / Space
- press button
ARIA support
aria-haspop="true"
andaria-expanded="false"
- added to buttons that have their modifier type set toToggle modifier (as accessible popup - collapsed)
aria-haspop="true"
andaria-expanded="true"
- added to buttons that have their modifier type set toToggle 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 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
andaria-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 button
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 theRead more
element, when the button is focused
ARIA support
aria-haspop="true"
andaria-expanded="false"
- added toRead more
buttons that have theirInitial state
set toInitially hidden
aria-haspop="true"
andaria-expanded="true"
- added toRead more
buttons that have theirInitial state
set toInitially visible
Modal
Keyboard navigation
Escape
- closes modal when openTab
- moves focus through focusable elements within the modal.
ARIA support
role="dialog"
- added to the outermost element of the modal (has classcoh-modal
).role="document"
- added to the inner element of the modal (has classcoh-modal-inner
).aria-hidden="true"
andinert="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 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 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 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)
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.