Developer Space/Components

From wiki.gpii
Revision as of 11:22, 15 January 2018 by Till (talk | contribs)
Jump to: navigation, search

Open component repository

Executive Summary

This document contains a accompanying user guide and developer documentation for the GPII Developer Space Component Repository, which is online as part of the GPII Developer Space at. If you are interested in contributing visit the site directly at and refer directly to the relevant section in this document.

The repository is constantly extended and allows structured search in a compehensive list of building blocks for Assistive Technology development and implementation. The repository is as inclusive as possible, addressing different needs and solutions by a diverse set of software and hardware. The components listed on this page fulfil some minimal requirements for documentation and categorisation, that we define in this document. If you want to add a component to the list please go to, drop a mail on or post to our twitter account at

The goal of this public deliverable of the Prosperity4All Project is to provide particularly technical documentation about the background of the site and the curation process, which aims to be transparent, sustainable and scalable. The document is the last one in a range of documents (D202.1 and D202.2) where we have described, how we created and designed this repository and looked at technical convergence of components through standards and APIs. If you want more detailed information about the underlying architecture of the whole Developer Space refer to D201.5 as this document documents particularly the component listing. Additionally you should visit and browse the actual main deliverable of the project, which is online at

Background and Related Efforts

The component repository is not a unique effort in the sense that it collects accessibility related components. However, it differs from existing efforts in multiple ways. Even before the efforts started in this project the Spotlight / featured tools and components on the RaisingTheFloor web site provided a listing of developer targeted tools and components. This listing has been incorporated into the GPII Developer Space along with other developer targeted content. RaisingTheFloor is committed to curate this content beyond the project via the GPII Developer Space. The original listing also contains project specific listings like the AEGIS: Overview of demonstrators . It is the goal of the GPII Developer Space to provide a platform for such listings in the future and interlink open project results from commercial or academic endeavours in more sustainable way. Today many AEGIS demonstrators live on github such as where there can be easily forked and used by developers. We want to encourage projects to bring content to places where the developers actually are, without creating a new place that diverts traffic. This is why we also provide an interface that just provides an alternative interface to existing sites. The same goes for technology specific efforts like the W3C WAI Component Gallery. We were easily able to incorporate most content as it was hosted here as well as we also depend on external activities like Project A11y to identify open source content. The biggest difference of the component repository is that we have identified over 1000 accessibility related open source components, that we started to categorize on .

The Interface for Searching, Browsing and Bookmarking Components

Error creating thumbnail: Unable to save thumbnail to destination

The above screenshot shows the current interface to the component repository with more than 700 curated component listing (the rest is still in the moderation queue). In the main part (1) a summary of different components. For components that were imported the number of followers (stars) and code forks is shown as an indicator for the popularity and distribution is shown (2) . Additionally can quickly bookmark or rate a component (3).

Instead of having many subcategories (like tools, code, hardware) the interface relies solely on a so called faceted search. The search field (4) can be used to query the collection. This collection can then be narrowed down by selecting facets that are shown on left hand side of the screen (5). Based on earlier user research we currently support filtering by the following facets:

  • Technology: mostly the used programming language
  • Licence: open source licence type specifying permitted distribution
  • User Needs: Major disability categories
  • Type: related to the usage as independent developer tools or e.g. as programming framework
  • Technique: what strategies to solve accessibility needs can be applied using the component
Error creating thumbnail: Unable to save thumbnail to destination

Using this interface the user can quickly apply different browsing strategies such as exploring all MIT licenced components that help with physical disabilities or specifically searching for a reactive web component that changes contrast on a web site. Once interesting components have been discovered

Error creating thumbnail: Unable to save thumbnail to destination

The site consequently interlinks content providing a rich browsing experience. By clicking e.g. on a technique the user is redirected towards the solution masterlist which in turn lists all possible components but also other educational material. Through the applied categorization the site thus provide a rich experience and fosters learning and expoloration. It also provides a like to practical material such as the components from the theoretical background to motivate real implementations.

Roles within the Developer Space

The concept of roles as we will describe it here is the basis for access control and defining content management processes. A natural person that logs in to the developer


Users of the GPII Developer Space are described using the following four "epics":

  • I develop AT I want to make my product more accessible
  • I want to make an accessible website
  • I teach and research accessibility
  • I make policies on accessibility
  • I want to get the latest on accessibility

While the searching the GPII Developer Space can be done spontaneously (and should not require any documentation or a technical role), we also want to engage those users as pro-sumers. Logged in users contribute in multiple ways to the site:

  • Provide useful comment and feedback on components
  • Suggest new components and other content
  • Provide feedback on the overall site


Editors are community members or power users. Their main work is to organize the collection of resources thus adding value beyond quantity. In this document we describe how editors should categorize content.

Editors are typically volunteers from the RaisingTheFloor consortium and the overall GPII. Categorizing one thousand components needs a large number of volunteers initially. Currently partners from the funded Prosperity4All project took on this job. We believe less volunteers are needed once most of the content is categorized.


Curators are needed to release components. The role of the curator is to assure the quality of the content concerning both the usefulness and the legal compliance of the content.

The the checks to be done are described in the last section of this document. It should suffice to have a single curator for the component registry. It makes sense in terms of quality assurance to separate curation from editing. Curators should be contractually bound to the operator of the site (RaisingTheFloor International) in order to protect the operator from potential legal complications by enforcing some rules. Curators could also be seen as community managers or moderators. They have the right to modify, release or withdraw any content.

A special task for the curators is currently maintaining the GitHub interface to the developer space and to add content into the categorization cue for the Editors.


The role of the administrator is to maintain the necessary software, define roles and access policies and to oversee the curation process.

One important prerequisite of the whole system is that the administrator can assign roles to users. In case the system needs to scale also other roles might assign less privileged roles. Currently we are envisioning that most users do not need special privileges, so the administrator knows and manages all curators and editors.

Currently the administrator is meant to be a web developer with skills in HTML, PHP and Drupal. The development of the code for the repository is coordinated by RaisingTheFloor International as part of the overall DeveloperSpace with contributions by KIT (repository imports), Pushing7 (drupal integration) and Illunion (feedback).

The overall Developer Space site is built on Drupal 7 technology (for the underlying architecture please refer to D201.5 of the Prosperity4AllProject). The component repository specifically relies on the Search and Facets API, that provides the necessary interfaces for efficient browsing via an Apache SOLR server. The curation scheme above is implemented using the Workbench Moderation module . Those parts are shared with the other content of the Website.

Specific attention to administrators should be given to the Github Feeds Importer that is described as part of this document.

Adding Components

Suggesting New Components

New Components can be suggested using the Issue tracker on Github: . Please share direct links to github repositories if possible. In case the project (source code) is hosted in other places please leave a comment here.

Error creating thumbnail: Unable to save thumbnail to destination

As explained above the DSpace lives from the fact that if features a diverse set of components that an implementer can build into his products or can help him improve his product in other ways (e.g. by testing). The listing lives from suggestions from the community. As most open source development has moved to GitHub as a platform (Google Code as well as Microsoft Codeplex have been archived with migration paths to Github), it became more and more apparent that we need to support a Github centric workflow to cover the majority of open source developments. This includes particularly component from the GPII projects, such as Cloud4All and Prosperity4All.

You may also use this issue tracker to update or remove project URLs.

New components can be scheduled for inclusion by "staring" the project via github's native interface. This provides an ease two-click workflow to review new suggestions. Using the DSpace user account in Github the curator can follow the link in the issues (or also e.g. an email with a suggestion), quickly assess the relevance of the suggestion (not categorizing at this point) and click the "star" icon. The item will be automatically scheduled for addition on the DSpace website (see below).

Error creating thumbnail: Unable to save thumbnail to destination

Another important aspect of this workflow is that it allows us to disseminate components over github's social network. Additions to the DSpace will be fed to all followers on github automatically via the timeline visible on github's homepage to signed in users:

Error creating thumbnail: Unable to save thumbnail to destination

Strategies for finding new components

One important feature of the staring feature is that it works both ways. In a addition to having followers, that are informed about new findings, we are informed about new finds from the people in our social developer network. While the automatic suggestion feature of github mostly focusses on popular content that is either too unspecific to assistive technology or already included, the simple timeline view helps to find new things quickly as we are following accessibility related developer profiles. See image.

Error creating thumbnail: Unable to save thumbnail to destination

Another strategy to find new content is to identify early adopters of accessibility related technology (e.g. by following git commits to knowledge basis such as the A11Y projects). By listing all starred components from their github profiles we are quickly able to find new components (see below). If the user shares relevant findings, we will continue to follow this user to get updates via our own timeline.

Error creating thumbnail: Unable to save thumbnail to destination

Understanding the Importing and Updating Pipeline

Drupal Feeds Plugin

New github projects are periodically imported via a Feeds plugin on

Error creating thumbnail: Unable to save thumbnail to destination

The whole workflow for aggregating new github projects is backed by a Drupal module that was developed at KIT in the prosperity project to particularly fit the needs of the DSpace (but can be used beyond this). The module still supports two interfaces to github. One remote entity interface, that allows interfacing github content as Drupal entities via GitHubs API and one to autofill content using fields from Github.

Currently the following information is sourced automatically from github and mapped into Drupal:

  • Component name
  • Component author
  • Short Description
  • Readme file
  • Licence
  • Programming Language
  • Descritive Tags
  • Number of stars
  • Number of forks
  • Website link

The Mapping of Github information to DSpace

We use the same internal mapping logic to extend the Feeds interface that is used to import new component listings that are displayed on the GPII Developer Space. The API particularly supports the pagination of queries to Githubs open API and calls to fill out child elements such as the description.

The listings are automatically updated (due to some performance issues on caching, currently you need to clear the drupal cache manually to accept updates). Newly imported content is not yet published but must undergo categorization first. We use the github URL as a unique identifier for updates. This means that renaming of repositories might lead to duplicates. The next image shows the current mapping of the importing workflow that might be adapted to future needs.

Error creating thumbnail: Unable to save thumbnail to destination

In order to support such a large number of queries a github API token is needed. The API token can be configured inside drupal. The API token also identifies the account that will be used to base the import upon. Future versions might support an even more integrated workflow, e.g. for unlisting components simultaneously or for feeding suggestions via the web interface directly to the issue list. The current source code of the components is available at:

Using the Feeds important we can add fields to each component listing that will be retained during synchronization. This particularly includes the categorization (see below)

Also other content such as reviews and comments can be added to the component. Components can also be interlinked throughout the site, e.g. in tutorials or through the categorization.

Editing and Categorizing Components

Once the component is successfully imported it will be added to a editing and curation queue as unpublished content. The editor prepares the document for publication and puts it into the curation queue where the curator schedules it for publishing (see next section).

Error creating thumbnail: Unable to save thumbnail to destination

0. Read the description of the component: if you don't understand what its about or why it has to do wit accesibilty , don't bother and go to the next one, this is the first filter

1. Decide if it is a component at all: not everything from github is actually a component, there is also things like documentation. We consider automatically crawling other parts from github later. The editor should in any case ignore such items for now

2. Decide if the components is either a framework (like infusion, AsTerRICS, react): The editor should decide if something is framework specific (like a react autocomplete field, ...), a testing tool, a code snippet or a whole implementation or neither of the above. This is important to narrow down common use cases of developers.

3. Check if the component is particularly addressing a need of one of the major disability classes: We have tried multiple classification schemes for disabilities. This is the most pragmatic one we found and it helps especially people new to the domain.

4. Specify the type of solution in terms of the masterlist: This is the preferred way of looking for many components. An educated developer can first look at the problems, find a solution and chose (sometime ready-made) implementations that provide such a solution.

5. Check if the components relates to a requirement as specified by the EN (Section 5-13 of We currently have not implemented that in the search, but we believe that an integration with procurement regulations provides much benefit for commercial developers.

6. If you are done mark the component for publishing and go to the next one: An editor may leave comments for review by a curator if he is unsure or discovers any problems.

The screenshot below shows the interface for categorization.

Error creating thumbnail: Unable to save thumbnail to destination


Many developers come with a certain problem at hand. This normally means that they are looking for a specific kind of thing, they can build in, use themselves for development or add e.g. as extra hardware. We currently have identified the following classes:

  • Libraries & Snippets: independent components, that can be build in
  • Framework-specific: things that work in the context of certain development framework
  • Framework: a complete set of APIs and components
  • Testing & Development: typically tools that help during development to increase quality or save time
  • Hardware: things that need to be produced physically
  • Web API: hosted APIs that can be used easily

We have found that those categories or combinations of them help finding fitting components for many use cases. They might be efficiently used in combination with the full-text search (e.g. looking for "framework-specific" (facet) "react" (full-text components). When categorizing, please keep in mind this use. "Overtagging" might lead to many irrelevant hits (e.g. every "Framework" contains "Snippets and Libraries", but most commonly it is used as whole, so do normally not tag both). "Undertagging" might lead to few things being categorized. We provide an "other" category to identify missing categories, but this should not be used too often: the editor should specify in the comments why something was hard/impossible to categorize).

Note: We are focussing on open source components, while also listing commercial solutions that help developers. Particularly the last item can also contain interfaces to non-free interfaces. Sometime here the licence filter is misleading as the code for accessing the API is free but you need access to commercial services (we might add something like: in the future). Same might be true for hardware. The minimum criterium should be that those things can be openly build into existing or new solutions.


In D202.1 we have looked at many categorization schemes. While most schemes fall short of describing the specific needs of a person and do not really address the idea of inclusive design or inclusion by design, particularly easy categorization helps novice developers to understand the domain. The following categories can be selected:

We understand this approach focussing firstly on on "major" classes, this often leaves out the tails of the tails and sometimes might lead to addressing "red flags" only. But providing this major categories helps developers finding what they want more easily. Categorization is semantically always discrimination, with a faceting approach we, however we offer this only as one way of browsing and refining. Also multiple facets can be selected: e.g. "Blind" and "Deaf", but we cannot ensure that the component might help a deaf and blind individual, however it will narrow down the number of items. This speeds up the search drastically.


As stated above the solution masterlist is our own developer focussed ontology for categorizing solutions (and thus components, which are hopefully part of a solution). A component should be part of a solution to a problem commonly found in accessibility. The developer space constantly looks for new strategies and solutions, however, the list as it is currently maintained, contains most individual strategies that have been followed. However, categorization of components is a good way to constantly look for new approaches. If you cannot find a matching masterlist item, please provide detailed comments. It makes sense for an editor to be become familiar with all masterlist items on a high level, this can partially be done while categorization. A good starting point is looking also at existing similiar items that are already categorized.

Two problems typically occur. Firstly the item is only helping development and can be widely used. This is true for many testing tools. It is difficult to specify concretely the addressed solution. However, we do also not want to have e.g. common continuous integration frameworks with no specific link to accessibility listed here. So tagging a solution is also a check for relevance. One solution is finding more fitting subcomponents (e.g. accessibility related plugins or workflows) to be listed here. Many testing and development tools are currently tagged as "Transform content to conform to accessibility standards" , although still manual effort is needed. This seems acceptable in the context of this component. While tagging e.g. a testing tool with "Help Minimize Errors" is likely not correct if it relates to the developer (although it leads to interesting thoughts around usability). Therefore the editor should be sure that he understand the description linked to the tag, in this case e.g.: "This is an overarching feature that includes many error-minimizing technique. [...]Any disability may increase the risk of an error, and may also make it difficult to recover from mistakes. This feature helps to reduce the number of errors "(see

Secondly many inclusive AT frameworks provide many different solutions. Here it is again important to understand that the reader should understand the connection to the AT domain when reading the description. The editor should not add too many solutions to an item that require in-depth knowledge of a framework to understand them. It might be important to link tutorials and other content (that address specific solutions). The same is actually true for frameworks with all disability groups. A user that looks for a specific solution will typically not understand the link between a general plugin framework and cognitive disabilities, although one might build solutions for this user group with this framework. Categorization should always been seen as providing added value for people using the search interface.

Procurement Requirements

A separate categorization strategy for procurement scenarios that we are following does not originate from the user research on the search interface, but was motivated particularly through potential business cases and the work on standardization (and consequently regulation). The process initiated by mandate 376 will have a major impact on procurement of IT with relationship to accessibility. Many companies will be faced with the need to fulfil technical requirements, that are specified as part of standard EN 301 549 "Accessibility requirements suitable for public procurement of ICT products and services in Europe". The standards is aligned with existing standards like WCAG2 (which is a subset of this categorization). Consequently the standard is quite complex for categorization. Integrating this part is the latest addition to the Developer Space component repository and thus still incomplete and under testing.

The idea is to support a work flow that starts with the creation of a "Call for Tenders" as it is supported by . The typical output will contain references to technical requirements that need to be evaluated for someone answering the tender ( This amounts to a gap analysis for many existing products. By tagging components (and other resources in the GPII Developer Space) by requirements from the standard, we can extend this work flow to enable companies to answer to tenders by extending their products through new solutions. This is a critical interaction for globally improving accessibility (as not all IT (non-public) will be required to fulfil strict requirements). It provides furthermore an important potential entrypoint to the Developer Space.

While the idea is intriguing that anyone can by including just bits of open source software can make their products fit for public procurement, this raises far too high expectations. Thus we decided in collaboration with the standardization task to add a qualification attribute to the categorization interface (see screenshot below).

Curating and Publishing Components

Minimal Requirements

Scheduling for Publication

Once an editor has changed the state to "Needs Review" the item will appear in the queue of any user with a curator role. The curator checks the categorization for soundness and might resolve any comments left by the editor. Once this is done the curator schedules the content for submission. As we expect curators to work e.g. once a week on components, but we want to have the repository grow as people visit the site regularly, the publishing of the content is scheduled, so that users see new content each day. The image below shows recently scheduled content.

Error creating thumbnail: Unable to save thumbnail to destination

Summary and Future Work