Accessibility for bot answers
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
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.
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.
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 (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.
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 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.
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.
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.
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:
The anchors must be identified in the source code with an unique ID automatically generated.
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
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.
Since you choose the text formatting “bold” B the proper html elements will then be automatically and correctly added.
Iframes (web page integration especially in the sidebar panel) must have a title.
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 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.
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.
