Now that everyone can access the chatbot, make sure it is accessible. This also allows users to access the chat from the list of headings on the page. To make this heading not visible on the screen, it is enough to use an accessible hiding class ( visually-hidden). For robustness, we can also add a heading tag ( h1, h2.) before the chat. Use a title tagĪccording to recurring polls from WebAIM about screen reader users, landmarks are not known by everyone yet. So with only two little ARIA attributes, we greatly simplify navigation. The screenshot below was obtained by displaying the list of regions from the NVDA screen reader: This allows people who use a screen reader to access the chat from the list of regions. This code is used to define a “chat window” area in the page. ), it is possible to create “custom” landmarks using the ARIA region role. In addition to predefined HTML5 structure tags ( main, aside, footer and header. ![]() To make them appear, you can click in the address bar of your browser then press the Tab key several times (to locate the focus at the beginning of the page). They are hidden by default and become visible when the focus is on them. For example, on the page you are currently viewing, some skip links are available. The presence of skip links also has positive effects for people who navigate with the keyboard. These skip links can be hidden on the screen, even if it’s not the best choice (thanks to accessible hiding). The presence of a skip link “skip to chat” to go directly to the chatbot will allow the user to anticipate its use. They are inserted at the top of the page and thus, vocalized first. Skip links provide direct access to a specific area of the page. There are several ways to avoid this problem: In this case, a visually impaired user is not aware of this button, so they are not able to access the chat. Thus, they should listen to the whole footer generally containing many links. Indeed, to hear this button, often placed at the end of the code, it is necessary for the user to listen to the entire page to the last line. But, for blind or visually impaired users who are navigating with a screen reader, this may pose difficulties. The presence of a button to access the chatbot, in the lower right, is enough to make some users understand that a chatbot is available on the page. Same example but this time with a small margin between the button and the edge of the window: ![]() In the screenshot below taken on Windows, the button is hidden by a tooltip from an item in the Windows bar: In this case the user may not notice that a chat component is available. If the user does not target the contact button precisely, tooltips from items displayed outside the window may obscure the button. ![]() The screen moves caused by the use of the magnifier make the movements of the mouse pointer sometimes less accurate. ![]() Test them, using the mouse and using the keyboard:įor users with a screen magnifier, it is advisable not to locate the contact button too close to the edge of the window. In the latter case, a user who navigates using the keyboard will not be able to open the chatbot. However, if you try to use them when navigating with the Tab key, the second button (using a tag) is not focusable. The two buttons below look identical when used with the mouse. Be sure to use a real button ( ) in the code, as is the case on this page (contact button located at the bottom right of the page). It is sufficient to put a button in a corner of the page provided that it is accessible, in particular, using the keyboard only. It depend on the context: for example, on a e-commerce site, label such as “Contact us”, or “A problem with your order?” are valid proposals. This is why it is important to use a button whose label is sufficiently explicit. The user must be able to discover that he has the chance to use a chatbot on the page he consults. Go to the chatbotīefore using a chatbot, it is often necessary to make it appear by clicking on a button located in a corner of the page. If the objective is to develop a chatbot for an Orange site, it is advisable at first to be familiar with the Brand recommendations on this topic, available at (Conversational UI guideline). This article details a number of technical points. In this article, the terms “chatbot” and “chat” refer to a dialogue window that allows you to engage in a written conversation with an operator or an artificial intelligence, sometimes also called conversational agent. Designing an accessible chatbot Introduction
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |