Versions Compared

Old Version 1

changes.mady.by.user Giuseppe Digilio (4Science)

Saved on

compared with

New Version 2

changes.mady.by.user Tim Donohue

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

These guidelines have been written to help the developer to ensure that all DSpace components have a consistent layout and follow the essential Components of Web Accessibility ( https://www.w3.org/WAI/standards-guidelines/wcag/ ). These guidelines have to be followed by anyone who wants to contribute to the project.

Scope

DSpace's interface (UI), has been developed with Angular, so it's composed of HTML5 code, present along with each component. These files, which reside under the /src/app directory are defined as basic templates. These guidelines only refer to basic templates and do not cover the development/editing of additional themes (within /src/themes).

Terminology used in this page

The following terms are used frequently in this page, and this is a quick reference to what we mean by these terms:

  • template = Angular template
  • component = Angular component
  • style = CSS/SCSS styles
  • theme = a set of templates that work together (along with the styling/CSS) to comprise the look & feel of the site 

Overview

The DSpace 7 User Interface / Design was built collaboratively by the DSpace 7 Working Group. It is developed with Angular, and is composed of HTML5 templates for each Angular "component".  Out of the box, there are three theming layers/directories to be aware of:

  • Base Theme (/src/app/ directories):  The primary look & feel of DSpace (e.g. HTML layout, header/footer, etc) is defined by the HTML5 templates under this directory. Each HTML5 template is stored in a subdirectory named for the Angular component where that template is used. The base theme includes very limited styling (CSS, etc), based heavily on default Bootstrap (4.x) styling, and only allowing for minor tweaks to improve accessibility (e.g. default Bootstrap's color scheme does not have sufficient color contrast)
  • Custom Theme (/src/themes/custom directories): This directory acts as the scaffolding or template for creating a new custom theme.  It provides (empty) Angular components/templates which allow you to change the theme of individual components.  Since all files are empty by default, if you enable this theme (without modifying it), it will look identical to the Base Theme.
  • DSpace Theme (/src/themes/dspace directories): This is the default theme for DSpace 7.  In version 7.0, it's a very simple example theme providing a custom color scheme & homepage on top of the Base Theme. In later versions of 7.x, this may be enhanced to provide additional theming examples (and to enhance the default DSpace theme itself).  It's important to note that this theme ONLY provides custom CSS/images to override our Base Theme. All HTML5 templates are included at the Base Theme level, as this ensures those HTML5 templates are also available to the Custom Theme.

At this time, the guidelines below refer primarily to the Base Theme, and do not cover either the Custom Theme or DSpace Theme.  Those other Theme directories will be covered in training materials around how to create a custom theme for the DSpace UIBelow are the elements that are part of these guidelines, divided into ‘Basics', ‘UI Elements’ and ‘Accessibility’.

Basics

How to use the available code and guidelines restrictions.

The use of the Bootstrap framework can help in achieving some WCAG 2.0 and WCAG 2.1 goals such as ‘Visual Presentation’ (AAA), 'Parsing' (A), ‘Orientation’ (AA), ‘Reflow’ (AA) and ‘Text Spacing’ (AA). See chapter ‘Accessibility’ for an explanation of WCAG and where to find additional information.

...

  • All the buttons should have a text description and an icon:

    If that it’s not possible (e.g. a small button with an icon) always use the ‘name’ and ‘title’ properties.

  • Use the tooltip component when you need a better explanation of a button funcionalityfunctionality. For example:

  • For the ‘anchor’ ( the ‘<a>’ element) that uses the ‘btn’ Bootstrap CSS class always use btn-outline-primary.

  • For the main action button use the Bootstrap CSS class btn-primary.

  • For buttons like ‘Cancel’ or ‘Back’ use che Bootstrap CSS class btn-outline-secondary.

  • For buttons that open a dropdown list use the Bootstrap CSS class btn-secondary.

  • In a button series, or group, only one ‘<button>’ has the Bootstrap CSS class btn-primary.

  • The buttons order, inside a group or a series, should follow the kind of action it performs. At the left side the most ‘light’ action, like ‘Back’ or ‘Cancel’, at the right side the most ‘changing’ action like ‘Delete’ or ‘Remove’. So, the order is:


    Back -> Cancel -> Submit/Edit/Save/Save for later/Deposit -> Discard/Delete/Remove

    Here an example:


  • Where possible, align the buttons to the right.

  • Ogni macro-funzionalità all’interno di una pagina può avere soltanto un button primary

  • If, after an action, there is a waiting time, e.g. for the server response, the control (e.g. the button) that launched the action must become disabled and show an animated waiting icon. All other associated controls must be disabled (property ‘disabled=”true”’).

  • Action confirmation should occur on cancellations or non-reversible operations; a modal should appear with a message giving the possibility to confirm or cancel the requested action:

...