Page History

These guidelines help ensure that all DSpace components have a consistent layout and follow the essential Components of Web Content Accessibility ( https://www.w3.org/WAI/standards-guidelines/wcag/ Guidelines (WCAG). These guidelines have to MUST be followed by anyone who wants to contribute to the project.  See also our Code Contribution Guidelines

Overview

These guidelines apply primarily to the "Base Theme" for the DSpace User Interface.

• 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)
• Two additional themes are provided with DSpace out-of-the-box
  • 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.  It is a very simple example theme providing a custom color scheme & homepage on top of the Base Theme.
• More information on themes (in general) can be found in the User Interface Customization documentation

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.

Guiding Principles

• All templates in the Base Theme (/src/app directories) should only use default Bootstrap styling. Documentation at: https://getbootstrap.com/docs/4.6/getting-started/introduction/
  • Exceptions may be made for accessibility purposes. For example, Bootstrap notes their default color scheme does not always have sufficient color contrast
• When Bootstrap Components (accordion, dropdown, etc …) are required you MUST use the included ng-bootstrap library. Documentation at: https://ng-bootstrap.github.io/#/components/accordion/examples

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

User Interface Design Guidelines

This section provides basic guidelines on User Interface layout/design and the elements (or components) used by the DSpace User Interface.  DSpace developers strive to meet these guidelines in order to ensure consistent behavior/layout on all pages.  If you find a guideline is not met on a particular page, please report a bug ticket for that user interface page.

...

The DSpace User Interface strives to align with all WCAG 2.1AA criteria. Some AAA criteria may also be supported.

However, please be aware that DSpace has little control over the files/content uploaded into it.  Therefore, DSpace cannot promise accessibility of any uploaded files (such as captions/descriptions on audio/video or alt tags on images). That said, DSpace does its best to provide features that allow system administrators to achieve desired accessibility of these uploaded files (e.g. by supporting uploading of WebVTT captioning for the built in Media Viewer). If you have an idea for an accessibility feature which you'd like to see added to DSpace, you can create a ticket describing the feature. As DSpace is primarily maintained by volunteers / institutions using it, we also welcome new accessibility features to be contributed.

If you discover an accessibility issue or bug in the DSpace User Interface, we ask that you submit a bug ticket describing the issue.  If you have an immediate suggested fix, please either include the description in the ticket, or provide a Pull Request with the necessary code changes. 

To learn about specific accessibility issues in DSpace that are either pending or already addressed, you may search using the "accessibility" label across open or closed tickets: https://github.com/DSpace/dspace-angular/issues?q=label%3Aaccessibility+  For more information see Accessibility documentation.

Here are specific guidelines we strive to follow in the "Base Theme":

...