Accessibility for bot answers

Digital accessibility consists of making online services accessible to people with disabilities. The inter-ministerial digital department (DINUM in France) publishes the Web Content Accessibility Guidelines (WCAG).

In order to offer bot managers the possibility of configuring content that respects the WCAG standards without having to go through the source code, dydu has integrated the WCAG standards applied to the dydu content editor (WYSIWYG) into its Bot Management System. This concerns images, lists, attachments, anchors, bold formatting, iframes, links and tables. More details on the accessibility requirements for these elements and how to meet them with WYSIWYG can be found below.

Picture

Obligation on pictures

A picture can sometimes convey meaning and help to understand the rest of the content. If it doesn’t bring any additional information, it’s a “decorative” picture.

The “informative” pictures that “convey information” must have an alt attribute, as a textual alternative. That textual alternative should replace the picture and bring the same level of understanding.

Conversely the “decorative” picture must have an alt attribute empty.

How to integrate an image?​

• To integrate an image, you need to upload it first in the Gallery section.

• Go to Content > Gallery

• Click on Add

• If you don't have a folder yet, click on Create new folder in Root.

• Choose a folder name and click on Add.

• Click on Add > Import a file in Your folder name

• Choose a file, click on Import, your image is now in the folder.

• Go back to your knowledge answer, click on File Manager, select your picture.

It appears in the answer.

How to respect?​

Once your picture is added to your answer, click on the Insert/Edit image icon of the WYSIWYG.

By default a picture is considered as decorative, so its description/alternative (defined in the “Image description” text field) is empty. If your picture is “decorative” the checkbox “Decorative image” must stay selected and the “Image description” field must remain empty.

Conversely, if you consider that your picture conveys information to the user: unselect the “Decorative image” checkbox and add a clear and precise description in the “Image description” text field.

Lists​

Obligation on lists​

Lists (numbered lists or bulleted lists) and the list items must be identified as such in the html code. To do so, they must have the proper html tags.

How to respect?​

As soon as you choose a “Numbered list” type formatting or “bulleted list” the correct html elements will be properly set. Do not create lists from numbers and hyphens “-” followed by a blank space, this will only generate a continuation of paragraph without adequate qualification.

Links​

Obligation on links​

Links must be identified as such. When a link opens a new tab or a new window, this information must be observable for the user before he clicks on the link. The user should not be lost in his navigation.

How to respect?​

When you insert a link via the WYSIWYG (by clicking on the Insert link icon) you can choose if the link will redirect in the current window or in a new one with the “Target” field.

If the “Target” field is “None”: the link will redirect in the current window. If the “Target” field is registered on “New window”: then the link will open a new window or a new tab. In the second case an icon will be displayed automatically next to the link to inform the user of that behavior.

Besides, when you insert a link, the title will be displayed on mouseover, it must be clear and precise. This title must be added in the “Title” field.

Attachments​

Obligation on attachment​

Downloadable attachments must be identified as such. You can add them from the Content > Gallery menu. Then you can select them directly in the File Manager of the answer.

The user must know the name, the format and the size of the files before starting to download them.

How to respect?​

Since you choose to add an attachment to your answer, the title, the format and the size of this attachment will then be automatically displayed to the final user. It will be displayed like this:

Anchors​

Obligation on anchors​

The anchors must be identified in the source code with an unique ID automatically generated.

How to respect?​

The anchors are used here by the reword feature or the redirection towards another knowledge.

Since you add a reword or a redirection towards another knowledge then a unique ID will be generated in the source code and associated to this reword. Be careful not to delete it

Text formatting “bold”​

Obligation on “bold” text format​

The text element with the “bold” formatting must be identified in the html code with the “strong” tags. This makes it possible to identify the items on which this tag is applied as important items.

How to respect?​

Since you choose the text formatting “bold” B the proper html elements will then be automatically and correctly added.

Iframes​

Obligation on iFrames​

Iframes (web page integration especially in the sidebar panel) must have a title.

How to respect?​

When you add an iframe in the sidebar of your answer, add a concise and relevant title to your side panel.

This title will be displayed to the final user and will be present in the html code.

Tables​

Obligation on tables​

Tables must not be used as text or page formatting. They must respect a precise html structure. There are two kinds of tables: simple table and complex table.

• A simple table is a table in which the header cells consistently apply to all cells in a row or in a column.

• A complex table is a table with merged cells or merged columns.

From the WYSIWYG perspective, we only consider the creation of simple tables, with rows and columns.

How to respect?​

Do not create tables only for an esthetic or formatting purpose.

When you create a table via the WYSIWYG, make sure you add the correct properties to the cells.

Select the cells you want to set as header cells, then click on the Table icon and finally select > Cell > cell properties

You have now access to the cell properties. Go to the “Cell type” field and select “Header cell”:

Then select the desired scope depending on whether the heading concerns the column or the row.

If the header is for the column, select the column value in the scope field; if it concerns the row select the row value.

The cells considered as a header will be well marked and will have the correct html attributes.