--- title: "Accessibility" date: "2018-12-20T11:05:16+00:00" summary: "Discover essential features and recommendations for building accessible websites with Site Studio. Learn about keyboard navigation, ARIA attributes, and best practices for creating inclusive web experiences for all users." image: type: "page" url: "/drupal-starter-kits/add-ons/site-studio/accessibility" id: "23b1f789-3681-4b0b-a1a4-3fee2214aa99" --- 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](https://www.w3.org/TR/html-aria/) 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-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="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 ### 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](https://www.drupal.org/project/ckeditor_a11ychecker) You can find out more about this plugin [here](http://ckeditor.com/addon/a11ychecker) and download the library required. [CKEditor Balloon Panel](https://www.drupal.org/project/ckeditor_balloonpanel) You can find out more about this plugin [here](http://ckeditor.com/addon/balloonpanel) and download the library required. CKSource have a demo of the plugin so you can see it in action [here](https://ckeditor.com/ckeditor-4/accessibility-checker/). 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.