https://github.com/canaxess/fenton
Accessible UI for chatbots built on the Microsoft Azure platform.
https://github.com/canaxess/fenton
accessibility chatbot-accessibility-fundamentals chatbot-framework chatbots wcag
Last synced: 10 months ago
JSON representation
Accessible UI for chatbots built on the Microsoft Azure platform.
- Host: GitHub
- URL: https://github.com/canaxess/fenton
- Owner: canaxess
- License: gpl-3.0
- Created: 2018-09-21T23:04:08.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-06-24T10:11:50.000Z (over 6 years ago)
- Last Synced: 2025-05-06T23:17:05.790Z (10 months ago)
- Topics: accessibility, chatbot-accessibility-fundamentals, chatbot-framework, chatbots, wcag
- Language: JavaScript
- Homepage:
- Size: 43 KB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# fenton
fenton is an accessible UI which has been tested against WCAG 2.0 AA. The script is for bots developed on the Microsoft Bot Framework, the code uses the Directline channel API to communicate with the bot.
**Built by following the principles in our [CHATBOT Accessibility Fundamentals YouTube series](https://www.youtube.com/playlist?list=PLknXoWiYr_QynKoP276ZlGV73aM8uWdq_)**
* [CHATBOT Accessibility Fundamentals repository](https://github.com/canaxess/canaxess-teaches/tree/master/chatbot-accessibility-fundamentals)
## Features
1. Each message in the conversation history is accessible from the keyboard
2. A non-visual indication of which part of the conversation has been spoken by using the `aria-label` attribute
3. Conversation contained within an aria live region
4. Accessibility markup for several predefined rich media card types including Hero cards
5. Markdown support
## How to create and use fenton
### Obtain security credentials for your bot:
1. Make sure you've [registered your bot](https://dev.botframework.com/bots/new)
2. Add a DirectLine channel, and generate a Direct Line Secret. Make sure Direct Line 3.0 is enabled
3. Add the Directline secret into the `bot.secret` property
4. Add the chatbot name to the `bot.id` property
### Enter your details in the bot object
```js
var bot = new Object();
bot.userId='';
botname='';
bot.email='';
bot.organisation='';
bot.site='';
bot.id='';
bot.secret='*************************************************';
```
### Add the HTML
Enter the HTML exactly as it is displayed
```html
Hello, how are you?
Ask me a question
Send
Start
```
### JQuery usage
JQuery is used to add click events to Hero cards. All buttons with a class `.actionable` may have a `data-type`, if this has openUrl it will open the page URL in a separate window, else it'll be a response which will carry on the conversation.
```js
$(function(){
$(document).on("click", ".actionable", function(){
var obj = $(this);
switch(obj.attr('data-type'))
{
case "openUrl":
window.open(obj.attr('data-value'), '_blank');
break;
default:
$('#' + UI.userinputId).val(obj.attr('data-value'));
$('#' + UI.submitbuttonId).click();
break;
}
});
});
```
## Browser and AT support
The support offered between browsers and assistive technology is increasing and has been tested and passed against the following combinations.
- JAWS 16 and Internet Explorer 11
- NVDA 2018.2.1 and Google Chrome
## Mandatory dependencies
- [RxJS 5.0](https://github.com/ReactiveX/rxjs)
- [Directline.js](https://github.com/Microsoft/BotFramework-DirectLineJS)
- [Showdown 1.8.6](http://showdownjs.com/) used for displaying markdown
## Optional dependencies
- [JQuery 3.3.1](https://jquery.com/download/) used for quick event handling on rich media cards
- [Foundation 6.4.3](https://foundation.zurb.com/sites/download.html/) used for basic styling of this example
> This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.