diff --git a/docs/a11y-support.md b/docs/a11y-support.md
new file mode 100644
index 0000000..d445716
--- /dev/null
+++ b/docs/a11y-support.md
@@ -0,0 +1,27 @@
+# A11y Support
+
+## Tested devices
+* Google Chrome + ChromeVox
+* Windows + Firefox + NVDA
+* Windows + Firefox + JAWS
+
+## What to expect
+
+### Navigation
+Tab and Shift + Tab are supported when navigating between tokens, it can't be
+used to navigate menus.
+Navigation inside the menus is entirely done with the arrow keys. 
+
+### Speech pattern
+A Token should be spoken in its entirety adding a menu notification when the
+dropdown menu is available (expanded and compressed)
+
+The input itself should notify when the suggestions dropdown is available.
+
+Inside the suggestions dropdown there are a number of lists with options.
+The desired behaviour is that when focusing an option it is read out with its
+position in the list and the name of the current list.
+
+Inside the dropdown menu the behaviour is similar, it should read the name of
+the option with the indication of the checked status of the menu item. The
+status is *true* if it's the currently selected facet, it's *false* otherwhise.
diff --git a/package.json b/package.json
index afc5956..68c8e3d 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "express": "^4.13.3",
     "jest-cli": "^0.8.2",
     "react": "^0.14.5",
+    "react-a11y": "^0.3.1",
     "react-addons-test-utils": "^0.14.7",
     "react-dom": "^0.14.5",
     "rimraf": "^2.5.0",
diff --git a/src/DropdownMenu.js b/src/DropdownMenu.js
index 5cb0df8..8649d70 100644
--- a/src/DropdownMenu.js
+++ b/src/DropdownMenu.js
@@ -1,6 +1,8 @@
 import React from 'react';
 
-const DropdownMenuSeparator = () => <hr />;
+import { UNIQUE_ID } from './FacetedTokenInput';
+
+const DropdownMenuSeparator = () => <hr aria-hidden="true" />;
 
 const DropdownMenuItem = ({
   selected,
@@ -8,10 +10,18 @@ const DropdownMenuItem = ({
   sectionIndex,
   index,
   addToken,
-  setSelected
+  setSelected,
+  sectionTitle
 }) => (
-  <li className={ selected ? 'active' : '' }>
+  <li
+    role="option"
+    className={ selected ? 'active' : '' }
+    id={ UNIQUE_ID + 'section_0' + sectionIndex + '_0' + index }
+    aria-labelledby={ UNIQUE_ID + sectionTitle + ' ' + UNIQUE_ID + 'section_0' + sectionIndex + '_0' + index + '_1' }
+  >
     <a
+      id={ UNIQUE_ID + 'section_0' + sectionIndex + '_0' + index + '_1' }
+      role="button"
       href="javascript: void 0"
       onClick={ () => addToken(suggestion.result) }
       onMouseMove={ () => setSelected({ sectionIndex, index }) }
@@ -22,9 +32,21 @@ const DropdownMenuItem = ({
 );
 
 const DropdownMenuSection = ({ section, sectionIndex, ...props }) => (
-  <ul>
+  <ul
+    role="listbox"
+    id={ UNIQUE_ID + 'section_0' + sectionIndex }
+    // different approach to read the section title
+    // aria-labelledby={ UNIQUE_ID + section.title }
+  >
+
     {
-      section.title && <li key="header" className="header">
+      section.title &&
+      <li
+        key="header"
+        className="header"
+        aria-label={ section.title }
+        id={ UNIQUE_ID + section.title }
+      >
         { section.title }
       </li>
     }
@@ -41,13 +63,14 @@ const DropdownMenuSection = ({ section, sectionIndex, ...props }) => (
         suggestion={ suggestion }
         sectionIndex={ sectionIndex }
         index={ index }
+        sectionTitle={ section.title }
       />
     ))}
   </ul>
 );
 
 const DropdownMenu = ({ sections, ...props }) => (
-  <div className="dropdown input-dropdown">
+  <div className="dropdown input-dropdown" id="suggestions_box" >
     { sections.map((section, sectionIndex) => (
           <DropdownMenuSection
             { ...props }
diff --git a/src/FacetedTokenInput.js b/src/FacetedTokenInput.js
index 0ea30c1..3e004d5 100644
--- a/src/FacetedTokenInput.js
+++ b/src/FacetedTokenInput.js
@@ -7,6 +7,10 @@ import DropdownMenu from './DropdownMenu';
 
 import onLeftRight from './onLeftRight';
 
+// if react-a11y is not used delete line 11 and 12
+import a11y from 'react-a11y';
+import ReactDOM from 'react-dom';
+
 import {
   BACKSPACE,
   ENTER,
@@ -29,10 +33,22 @@ import {
   isBackward
 } from './key-utils';
 
+// Abilitate accessibility test only in development mode
+// a11y(React, { ReactDOM: ReactDOM });
+
 export const DIRECTION_NONE = 'none';
 export const DIRECTION_BACKWARD = 'backward';
 export const DIRECTION_FORWARD = 'forward';
 
+export const UNIQUE_ID = 'fti_';
+
+let tokensLength = 0;
+let tempFacet = '';
+let tempDescription = '';
+let supportText = '';
+let tempToken = [];
+
+
 const INPUT_STYLE = {
   font: 'inherit',
   lineHeight: 'inherit',
@@ -45,7 +61,6 @@ const INPUT_STYLE = {
 
 const INPUT_SPY_WRAPPER_STYLE = {
   position: 'absolute',
-  visibility: 'hidden',
   top: '0px',
   left: '0px',
   width: '100%',
@@ -53,6 +68,18 @@ const INPUT_SPY_WRAPPER_STYLE = {
   overflow: 'hidden'
 };
 
+const A11Y_HELPER_STYLE = {
+  position: 'absolute',
+  height: '0px',
+  width: '0px',
+  margin: '0px',
+  padding: '0px',
+  overflow: 'hidden',
+  top: '0px',
+  bottom: '0px',
+  fontSize: '0px'
+};
+
 const INPUT_SPY_STYLE = {
   display: 'block',
   whiteSpace: 'pre',
@@ -102,7 +129,9 @@ export default class FacetedTokenInput extends Component {
       searchText,
       showDropDown,
       focused,
-      textDirection
+      textDirection,
+      selectedSectionIndex,
+      selectedIndex
     } = this.state;
 
     const facetedTokenInputClass = classNames('compound-input', {
@@ -119,11 +148,30 @@ export default class FacetedTokenInput extends Component {
         onFocus={ event => this.onFocus(event) }
         onBlur={ event => this.onBlur(event) }
       >
+
         { tokens.map(this.renderToken, this) }
 
+
+        { /*
+          I'm an experiment to delete tokens in mobile
+          <a
+            style={ { width: '20px', background: 'pink', textAlign: 'center', display: (tokens.length) ? 'inline-block' : 'none' } }
+            onClick={ event => this.onBackspace() }
+          >
+            { 'X' }
+          </a>
+        */ }
+
         <input
           key="input"
           ref="input"
+          role="combobox"
+          aria-expanded={ showDropDown }
+          aria-autocomplete="list"
+          aria-owns="suggestions_box"
+          aria-activedescendant={ UNIQUE_ID + 'section_0' + selectedSectionIndex + '_0' + selectedIndex }
+          aria-label="input"
+          aria-describedby="number_tokens"
           style={ INPUT_STYLE }
           className="compound-input-field"
           placeholder={ tokens.length ? '' : placeholder }
@@ -149,10 +197,105 @@ export default class FacetedTokenInput extends Component {
         { this.props.children }
 
         { showDropDown && this.renderDropdown() }
+
+
+
+        { /* start test code */ }
+
+        { /*
+          the following div needs to be hidden if this code is going into the
+          master branch (see A11Y_HELPER_STYLE)
+          style={ A11Y_HELPER_STYLE }
+          */ }
+        <div
+          id="a11ysupport"
+          role="log"
+          aria-live="polite"
+          aria-relevant="all"
+          aria-atomic={ true }
+          style={ A11Y_HELPER_STYLE }
+        >
+
+        { /*
+          <span id="tagsupport">
+              simply add all the tokens that exist in the input
+
+              <p></p>
+
+              this adds only the last token, it doesn't solve the current
+              problem since the additions count from the second one onwards
+
+              (tokens.length) ? this.a11ySupport(tokens[tokens.length - 1], tokens.length - 1) : ''
+
+              GOOGLE
+              <div aria-live="polite" aria-atomic="true">
+                pierpaolo.ramon aggiunto. Premi backspace per rimuovere il destinatario.
+              </div>
+
+
+              { tokens.map(this.a11ySupport, this) }
+          </span>
+        */ }
+
+          { this.a11ySupport() }
+        </div>
+
+        { /*
+          this adds a string that thanks to aria-describedby present in the
+          input reads out the number of tokens present in the input in addition
+          to the specifics of the input
+          */ }
+        <div id="number_tokens" style={ A11Y_HELPER_STYLE }>
+          { tokens.length }
+          { '  tokens in input' }
+        </div>
+
+        { /* end test code */ }
+
+
+
       </div>
     );
   }
 
+
+  // start experimental method
+
+  // this should add a node that should be detected by aria-live="true"
+  a11ySupport() {
+    const { tokens } = this.state;
+    const { facet, description } = this.props.renderToken(tokens[tokens.length - 1] || []);
+
+    if (tokens.length === tokensLength + 1) {
+      supportText = 'added';
+      tempFacet = facet;
+      tempDescription = description;
+      tempToken[tokens.length - 1] = { facet, description };
+    }
+    else if (tokens.length === tokensLength - 1) {
+      supportText = 'deleted';
+      tempFacet = tempToken[tokens.length].facet;
+      tempDescription = tempToken[tokens.length].description;
+    }
+
+    tokensLength = tokens.length;
+
+    return (
+      <span
+        key={ 'test' + tokensLength }
+      >
+        { tempFacet }
+        { '  ' }
+        { tempDescription }
+        { '  ' }
+        { supportText }
+      </span>
+    );
+  }
+
+  // end experimental method
+
+
   renderDropdown() {
     const { dropdownSections } = this.props;
 
@@ -223,7 +366,9 @@ export default class FacetedTokenInput extends Component {
       if (noSelection || this.isInTokenSelection(tokens.length)) {
         this.refs.input.focus();
       }
-      else if (tokenSelectionDirection === DIRECTION_NONE) {
+      else if (tokenSelectionDirection === DIRECTION_NONE &&
+        this.refs['token' + tokenSelectionStart]) {
+
         this.refs['token' + tokenSelectionStart].focus();
       }
       else {
@@ -272,9 +417,19 @@ export default class FacetedTokenInput extends Component {
 
     const searchText = this.refs.input.value;
 
+    if (searchText) {
+      this.setState({
+        showDropDown: true
+      });
+    }
+    else {
+      this.setState({
+        showDropDown: false
+      });
+    }
+
     this.setState({
       searchText: searchText,
-      showDropDown: true,
       selectedSectionIndex: -1,
       selectedIndex: -1
     });
@@ -425,7 +580,8 @@ export default class FacetedTokenInput extends Component {
       tokenSelectionStart
     } = this.state;
 
-    const keyDirection = isForward(event, dir || textDirection) ? DIRECTION_FORWARD
+    const keyDirection = isForward(event, dir || textDirection)
+      ? DIRECTION_FORWARD
       : isBackward(event, dir || textDirection) ? DIRECTION_BACKWARD
       : DIRECTION_NONE;
 
@@ -521,7 +677,9 @@ export default class FacetedTokenInput extends Component {
       });
     }
 
-    if (event.target !== this.refs.input) {
+    if (event.target !== this.refs.input ||
+      (event.target === this.refs.input && !searchText)) {
+
       event.preventDefault();
     }
   }
diff --git a/src/Token.js b/src/Token.js
index f690d65..8548524 100644
--- a/src/Token.js
+++ b/src/Token.js
@@ -1,19 +1,11 @@
-
 import React, { Component } from 'react';
 import classNames from 'classnames';
 
 import { ENTER, UP, DOWN } from './key-codes';
 
-const CHECK = <span className="check">✓</span>;
+import { UNIQUE_ID } from './FacetedTokenInput';
 
-export const TokenDropDownItem = ({ selected, current, view, ...props }) => (
-  <li className={ selected ? 'active' : ''}>
-    <a { ...props }>
-      { current && CHECK}
-      { view }
-    </a>
-  </li>
-);
+const CHECK = <span className="check">✓</span>;
 
 export default class Token extends Component {
 
@@ -35,10 +27,11 @@ export default class Token extends Component {
       selected,
       facet,
       description,
-      dropdownMenu
+      dropdownMenu,
+      index
     } = this.props;
 
-    const { showDropDown } = this.state;
+    const { showDropDown, selectedIndex } = this.state;
 
     const containerClassName = classNames({
       'token-container': true,
@@ -49,19 +42,27 @@ export default class Token extends Component {
       <div
         ref={ 'container' }
         tabIndex={ 0 }
+        // this will make desktop screen readers work properly
+        role={ dropdownMenu ? 'menu' : '' }
+        aria-haspopup={ dropdownMenu ? showDropDown : 'false' }
+        aria-owns={ UNIQUE_ID + 'facet_menu' }
+        aria-expanded={ dropdownMenu ? showDropDown : 'false' }
+        aria-activedescendant={ UNIQUE_ID + 'facet_0' + selectedIndex }
+        aria-labelledby={ UNIQUE_ID + 'token_0' + index }
+        // end screen reader compatibility
         className={ containerClassName }
         onContextMenu={ event => this.onContextMenu(event) }
         onKeyDown={ event => this.onKeyDown(event) }
         onFocus={ event => this.onFocus(event) }
         onBlur={ event => this.onBlur(event) }
       >
-        { this.renderContent({ facet, description, dropdownMenu }) }
+        { this.renderContent({ facet, description, dropdownMenu, selectedIndex, index }) }
         { showDropDown && dropdownMenu && this.renderDropdown(dropdownMenu)}
       </div>
     );
   }
 
-  renderContent({ facet, description, dropdownMenu }) {
+  renderContent({ facet, description, dropdownMenu, selectedIndex, index }) {
     const onClick = event => this.setState({ showDropDown: true });
 
     const showFacet = !!(facet || dropdownMenu);
@@ -73,10 +74,16 @@ export default class Token extends Component {
 
     if (showFacet) {
       return (
-        <span className={ className }>
-          <span className="facet-type" onClick={ onClick }>
+        <span className={ className } id={ UNIQUE_ID + 'token_0' + index } >
+          <span
+            id={ UNIQUE_ID + 'facet' }
+            className="facet-type"
+            onClick={ onClick }
+          >
             { facet }
-            { dropdownMenu && ' ▾' }
+            <span aria-hidden="true">
+              { dropdownMenu && ' ▾' }
+            </span>
           </span>
           <span className="facet-value">
             { description }
@@ -86,7 +93,7 @@ export default class Token extends Component {
     }
     else {
       return (
-        <span className={ className }>
+        <span className={ className } role="tab">
           { description }
         </span>
       );
@@ -96,7 +103,7 @@ export default class Token extends Component {
   renderDropdown(dropdownMenu) {
     return (
       <div className="dropdown token-dropdown">
-        <ul>
+        <ul id={ UNIQUE_ID + 'facet_menu' } role="menu" >
           { dropdownMenu.map(this.renderDropdownItem, this) }
         </ul>
       </div>
@@ -109,12 +116,25 @@ export default class Token extends Component {
     const selected = (index === selectedIndex);
 
     return (
-      <li key={ 'menuItem' + index } className={ selected ? 'active' : '' }>
+      <li
+        key={ 'menuItem' + index }
+        className={ selected ? 'active' : '' }
+        id={ UNIQUE_ID + 'facet_0' + index }
+        role="menuitemradio"
+        aria-checked={ item.current }
+        aria-label={ item.label }
+        aria-controls={ UNIQUE_ID + 'facet' }
+      >
+
         <a
           onMouseEnter={ event => this.setState({ selectedIndex: index }) }
           onClick={ event => this.select(index) }
         >
-          { !item.current ? null : CHECK }
+
+          <span aria-hidden="true">
+            { !item.current ? null : CHECK }
+          </span>
+
           { item.label }
         </a>
       </li>