Create conform applications with Simplicité

Introduction

Simplicité can be used to build business applications that fully conform to the RGAA, but this requires sticking to a defined set of features and settings. Some features are usable as is, some require specific settings, and some cannot be used at all in a strictly compliant application.

This document tells you which is which, and what to do about it. It is written for designers building an application under strict compliance requirements.

warning

Digital accessibility is a continuous effort in our R&D: not every feature conforms to the RGAA yet. Our position on each of the 106 criteria is documented in the compliance document.

How to use this document

1. Read Cross-cutting concerns first. These rules apply everywhere and constrain everything the component guides describe.
2. Set the A11Y_DEV system parameter to yes for the whole design phase. Every field then carries a compliance icon in the field form, so you get the verdict where you work rather than here.
3. Open the relevant component guide when you configure a business object, a list, a form or a menu. Each one lists the settings to apply and the features to avoid.
4. Check your work with a11y-mode enabled — but read what it does not do before relying on it.

Platform features

Simplicité ships three accessibility features. Two act at runtime for end users, one assists you at design time.

Runtime a11y-mode

End users toggle Accessibility Mode from the .btn-a11y-mode button in the application header.

It disables or adapts interface behaviors and optional features that can block or hinder users relying on assistive technologies. It is absolute: when on, it applies to every affected feature at once.

Handled features:

• Form and list floating/sticky headers
• Customized colors for action and state buttons
• Splittable work areas
• Compact mode
• Collapse menu toggle
• Masonry layout for lists
• Menu trays and metrics from Status Objects
• Preset search from the search dialog
• Top menu
• Datetime pickers, replaced by a plain input with a format hint
• Ace editor inputs, replaced by plain textareas

User A11Y_OVERRIDE parameter

Where a11y-mode is all-or-nothing, A11Y_OVERRIDE is a per-user parameter: each user records their own preferences, component by component, according to their needs and habits.

It covers components that could not be made compliant because of their complexity or their third-party dependencies:

Component	Why
Date pickers	flatpickr is not compliant
HTML editor	quill is not compliant
Code editors	ace is not compliant
Trays	Drag-and-drop only
Top menu	Chained popups break keyboard navigation and screen reader output
Custom colors	Safety net for action and enum contrast
User guides	Popup-driven flows break keyboard navigation and screen reader output

Designer A11Y_DEV sysparam

Set the A11Y_DEV system parameter to yes to turn on the development helper.

Every field then carries a universal-access-circle icon next to its label in the field form, reporting the compliance of the underlying feature, along with the settings required to keep it compliant.

Significations for each icon (examples):

• Timestamp has text-light colored icon -> non-applicable, fld_compliance = NA
• Bulk update has danger colored icon -> non-compliant, fld_compliance = NC
• Copy enabled has warning-colored icon -> partially-compliant, fld_compliance = PC
• Bulk delete has success-colored icon -> compliant, fild_compliance = C

If no icon is visible then no verdict was given, assume that the feature/component was not evaluated yet, thus can be Precautiously be considered as Non-Compliant.

For the Partially Compliant features, a specific help is joined (same mechanism as the regular field-help) with the purpose of giving all required informations about the use and necessary precautions when using the feature.

Keep it on for the whole design phase: it gives you the verdict at the moment you make the choice, which is cheaper than auditing afterwards.

Compliance statuses

The same vocabulary is used by the A11Y_DEV icons, by the fld_compliance field and by every table in this document.

Status	Icon color	Meaning
Compliant (C)	success	Use freely. The feature meets the RGAA tests and WAI-ARIA rules.
Partially Compliant (PC)	warning	Usable, but only with the settings listed in this document and in fld_compliancehint.
Non-Compliant (NC)	danger	Do not use under strict compliance requirements.
Not Applicable	none	The feature has no bearing on RGAA compliance.
Not Evaluated	text	Not assessed yet. Avoid under strict requirements.

Features that have not been evaluated are not listed in this document. Their absence from a table is not a verdict.

The limits of these features

a11y-mode and A11Y_OVERRIDE are safety nets, not fixes. They neutralize behaviors that get in the way; they do not make a Non-Compliant feature compliant.

Two consequences. First, you must still disable the features listed as NC below, whether or not the mode is on. Second, do not rely on the mode during design: disable those features properly in your configuration, and use the mode only to verify the result.

Cross-cutting concerns

These rules apply across the whole application, independently of any component.

Themes and contrast

Colors are fully variabilized, which means a custom theme can break contrast compliance everywhere at once. Two options:

• Use the HighContrast theme, shipped with the platform in light and dark variants. It guarantees contrast and focus visibility with no further work.
• Build your own theme, and validate every color with the built-in contrast checker, available at each customization point.

The USE_COMPACT system parameter must be set to no: compact mode is NC.

Custom HTML

Several extension points let you inject markup the platform does not control: static texts, field help content, publication templates, JavaScript addons and external objects. Plain text is always safe. As soon as you write HTML, its compliance is entirely yours — see the resources for the WAI-ARIA rules to follow.

External objects are the extreme case: their markup is written in free code and cannot be checked at all by the platform.

Complex images

Charts, diagrams and infographics cannot be made compliant through alternative text alone. Either make sure your application does not need them, or plan an accessible alternative — a data table, a textual summary — alongside the image.

For regular images, the alt attribute is exposed and editable per image. Real-world compliance then depends on end users writing accurate alternatives, or explicitly marking images as decorative, which falls outside what the platform can guarantee. Say so in your application's own user documentation.

Internationalization

Partially Compliant. Translated content is your responsibility: a label left untranslated produces a language change the platform cannot declare in the markup.

Component guides

Business Objects

Settings that apply to the object as a whole, whatever its views.

Feature	Status	Context	Setting	Notes
Visible identifier field	—	Field	obf_order	Put the visible identifier field first in the order
Bookmarks	C	Business Object	—
Historics	NC	Business Object	obo_historic = no
Prints	NC	Business Object	obo_printable = no
Social posts	PC	Business Object	—	Relying on users not to use other language than the declared and supported one.
Constraints	C	Business Object	—
Contextual help	C	Business Object	—
Copy	C	Business Object	—	obo_copy
Export	C	Business Object	—	obo_export

Objects Rendering

Feature	Status	Context	Setting	Notes
Searches	PC	User Interface	—
Publications	NC	User Interface	—
Pivot Tables	NC	User Interface	—
Agendas	NC	User Interface	—
Places maps	NC	User Interface	—
Time sheets	NC	User Interface	—

Treeviews

Partially Compliant.

Only the docked version of treeviews is compliant, the one rendered in the menu is not.

Lists

Set in the List section of the business object settings.

Feature	Status	Context	Setting	Notes
Multi-column ordering	C	Business Object	—
Pagination	C	Business Object	—
Group-by	C	Business Object	—
List preferences	C	Business Object	—
List of values	C	Business Object	—
List filtering	C	Business Object	—
Docked search	NC	Business Object	obo_search_docked = no
Cards mosaic	NC	Business Object	obo_minifiable = no
Create on list	PC	Business Object	obo_list_edit, obo_btn_listedit
Update on list	NC	Business Object	obo_list_edit = no
Bulk edit	NC	Business Object	obo_btn_updall = no, obo_list_edit = no
Bulk delete	C	Business Object	—
Custom list actions	PC	Action	—	See Actions
List search	PC	Business Object	—	See Search
Row reordering	NC	Business Object	—

Forms

Set in the Form section of the business object settings. The layout itself is defined in the Template Editor, reachable from that same section.

Feature	Status	Context	Setting	Notes
Field areas	C	Template Editor	—
Columns	C	Template Editor	—
Tabs	C	Template Editor	—
Label and input layout	PC	Template Editor	"label + input" display	Never split a label from its input
Custom action with confirm fields	C	Action	—
Fields	PC	Field	fld_rendering	See Fields
Child lists	PC	Link	—	See below

Child lists

Feature	Status	Context	Setting	Notes
Panel	C	Link	—	Panels and sub-panels are compliant by design
Virtual link	C	Link	—	Rendered as an embedded list — follow the Lists rules
Inlined object	C	Link	—	Rendered as form elements — follow the Forms rules
Pillbox	NC	Link	—

Fields

The shared structure the platform generates around fields is compliant. Compliance depends on the type and, above all, on the rendering you pick — the fld_rendering field, labelled Display in the field form.

Type	Status	Context	Setting	Notes
Text	PC	Field	fld_rendering	QRCode and Icon picker renderings are NC
Validated text	NC	Field	—	Validation is not announced and no suggestion is offered
Boolean	C	Field	—	Every rendering is compliant
Long text	PC	Field	fld_rendering	Stick to the regular rendering. Expression, Fixed font, HTML, CSS, SQL, Markdown, JSON, Text editor, Grid, Count characters and Javascript are NC
Number	PC	Field	fld_rendering	Progress bars, Stars and With calculator are NC
Date / Time	PC	Field	—	Use a plain text field with a date format instead. a11y-mode replaces the picker with a plain input and a format hint
Enum	C	Field	—
File	C	Field	—
Image	PC	Field	—	alt is exposed per image. See Complex images
Referenced object	C	Field	—
Special	NC	Field	—	Only URL, Email, Phone and Password are compliant. Color, Coordinates and Notepad are NC

All addons available on regular typed fields — string, int, longstring, boolean, enum — are compliant.

Field-related features

Feature	Status	Context	Setting	Notes
Copy to clipboard	C	Field	—
Simple help	PC	Field	—	Text-only content is compliant. See Custom HTML

Both the "label + input + help" and "label + input" displays render help compliantly.

Search

Feature	Status	Context	Setting	Notes
Search dialog	C	—	—
Sort order	C	—	—
Global search	C	—	—
Menu search	C	—	—
Search form	PC	Business Object	obo_tpl_search_pos = top	Only the top position is compliant, and only with a11y-mode
Preset search	NC	—	—	From the search dialog
Predefined search	PC	—	—	Rendered as a list — follow the Lists rules for the underlying object
Form search	NC	—	—
Date / Period search	NC	—	—	Uses datetime fields, which behave differently in search than in a form
Geographical search	NC	—	—

Actions

Feature	Status	Context	Setting	Notes
Action icon	PC	Action	act_image	Prefer no icon. If you set one, use a monochrome icon
Action colors	PC	Action	act_color_bg, act_color	Check both against each other and against the header background

Use the built-in contrast checker rather than eyeballing it: an action placed in the header must contrast with the header background, not only with its own label.

Menu

Feature	Status	Context	Setting	Notes
Left menu	C	System parameter	—
Top menu	NC	System parameter	MENU_SETTINGS — top.active = false	Chained popups break keyboard navigation
Trays	NC	Business Object	obo_tray = no	Drag-and-drop only. Applies to every object with a status
Metrics	NC	Business Object	obo_dashboard = none	Applies to every object with a status

a11y-mode forces the left-only menu at runtime, but disable the top menu properly in your configuration rather than relying on it.

Business Process

Partially Compliant. The actions and DOM elements specific to business processes are compliant. A process being a particular use of the Form and List components, it is compliant as long as those only use compliant features.

Feature	Status	Context	Setting	Notes
Road rendering	PC	Business Process	pcs_road_render = VM or HM	Only the minimal versions — vertical or horizontal — are compliant

Links

Partially Compliant. The feature itself is compliant, but the lists it embeds carry flaws that rule them out of a compliant application.

Feature	Status	Context	Setting	Notes
Embedded list filters	NC	Link	—	Focus is not restored after the filter dialog closes. Disable the filters and the link becomes compliant

Static texts

Partially Compliant. Plain textual content is compliant. HTML content is your responsibility — see Custom HTML.

Domains

Widgets

Counters

Not Compliant

Carousel

Not Compliant

Cards

Not Compliant

Appendix: keyboard accessibility

This reference is worth copying into your own application's user documentation: end users have no other way of discovering these shortcuts.

Global

Keys	Action
TAB	Focus the next element in DOM order
SHIFT + TAB	Focus the previous element in DOM order
ESC	Close, by priority: the focused field or rich editor, then all modal dialogs, then the current form. Navigates back when nothing is focused
ALT + H	Display the Home page
ALT + M	Focus the main Menu, on the last selection or the first item
ALT + W	Wide screen, toggling the menu
ALT + B	Open the Bookmarks dialog
ALT + F	Focus the Finder, the global search in the header
ALT + L	Focus the first visible List
ALT + N	Focus the Next visible area or list, on the first .js-focusable element

Menu

Keys	Action
ALT + M	Focus the main menu, on the last selection or the first item
RIGHT / LEFT	Open / close a domain or a sub-menu
UP / DOWN	Previous / next menu item
ENTER	Open the item, list or view, or launch a business process

Lists and forms

Horizontal navigation, after a search:

Keys	Action
SHIFT + LEFT	Previous record on a form, previous page on a list
SHIFT + RIGHT	Next record on a form, next page on a list
CTRL + SHIFT + LEFT	First record on a form, first page on a list
CTRL + SHIFT + RIGHT	Last record on a form, last page on a list

Vertical navigation within a page of a list:

Keys	Action
UP / DOWN	Move across table rows: header row to focus columns and sort fields, search row to filter, then the records of the current page
TAB	Visit the focusable cells of a row. Long texts, markdown content and textareas are focusable so they can be scrolled with the arrow keys
ENTER	Open the record, when form access is granted for that row

Designer shortcuts

Shortcuts can define further access keys.

Keys	Action
ALT + I	XML import page
ALT + C, then C	Clear all caches
ALT + X	Open the script / code editor

Resources

• Our position on the RGAA criteria — the platform's verdict on each of the 106 criteria, and what is expected of you as a designer.
• Using ARIA
• ARIA in HTML
• ARIA Authoring Practices