[IMP] Improve compatibility with screen readers (accessibility) (#24574)

Today, Odoo is really tricky to use without seeing the screen, it must be improved to be usable.

This PR forbid to use labels without a "for" attribute, add some title, rule and aria attributes in HTML. With that, Odoo will be fully usable with a screen reader.


* [IMP] Labels must have a for attribute. Improve accessibility.
* [IMP] Better error message when trying to read a missing cached value
* [FIX] Add some aria-label and title attributes for screen readers.
* [FIX] Template name is not included in the error message in case of SyntaxError in QWeb
* [FIX] Improve the Tour failed at step error message to be more explicit.
* [IMP] Add aria-labels
* [FIX] Add missing aria-label on failing test
* [IMP] aria-hidden means hidden. Fix all bad aria-hidden and hide aria-hidden for all.
* [IMP] Color names on kanban views and many2many tags
* [IMP] Add some checks on views for accessibility.
* [IMP] Add `alt` attribute on `img` tags.
* [IMP] Add aria-label and title on non-described icons
* [IMP] Add button role to widgets with btn class
* [IMP] Translate aria and formatted attributes.
* [IMP] Remove wrong aria-labelledby
* [IMP] Add menu role on dropdowns
* [IMP] Buttons must be focusable
* [IMP] Add aria attributes on progress bars
* [IMP] Improve accessibility of basic widgets
* [IMP] Change main layout to more semantic tags
* [IMP] Add menuitem role when missing
* [IMP] Remove wrong role='presentation'
* [IMP] Improve accessibility of tab panels
* [IMP] Add aria-invalid on invalid fields
* [IMP] Add aria-sort on ordered columns
* [IMP] Add role on alerts
* [IMP] Use dialog role, header, main and footer tags for modals
* [IMP] Add labels on o_status
* [IMP] Improve accessibility of kanban view with feeds and articles
* [IMP] Add alerts in case of new messages
* [IMP] Add widget, navigation or img role to aria-labelled items

12 files changed, 153 insertions, 158 deletions

diff --git a/addons/mail/static/src/xml/activity.xml b/addons/mail/static/src/xml/activity.xml
index 9bdcfcdcb90..9d2f0d72ed8 100644
--- a/addons/mail/static/src/xml/activity.xml
+++ b/addons/mail/static/src/xml/activity.xml
@@ -2,22 +2,22 @@
 <templates xml:space="preserve">
     <t t-name="mail.activity_items">
         <div class="o_thread_date_separator o_border_dashed" data-toggle="collapse" data-target="#o_chatter_planned_activities">
-            <span class="o_thread_date btn">
-                <i class="fa fa-fw fa-caret-down"/>
-                Planned activities
+            <a href="#" role="button" class="o_thread_date btn">
+                <span class="fa fa-fw fa-caret-down">
+                Planned activities</span>
                 <small class="o_chatter_planned_activities_summary ml8">
                     <span class="label img-circle label-danger"><t t-esc="nbOverdueActivities"/></span>
                     <span class="label img-circle label-warning"><t t-esc="nbTodayActivities"/></span>
                     <span class="label img-circle label-success"><t t-esc="nbPlannedActivities"/></span>
                 </small>
-            </span>
+            </a>
         </div>
         <div id="o_chatter_planned_activities" class="collapse in">
             <t t-foreach="activities" t-as="activity">
                 <div class="o_thread_message" style="margin-bottom: 10px">
                     <div class="o_thread_message_sidebar">
                         <div class="o_avatar_stack">
-                            <img t-attf-src="/web/image#{activity.user_id[0] >= 0 ? ('/res.users/' + activity.user_id[0] + '/image_small') : ''}" class="o_thread_message_avatar img-circle mb8" t-att-title="activity.user_id[1]"/>
+                            <img t-attf-src="/web/image#{activity.user_id[0] >= 0 ? ('/res.users/' + activity.user_id[0] + '/image_small') : ''}" class="o_thread_message_avatar img-circle mb8" t-att-title="activity.user_id[1]" t-att-alt="activity.user_id[1]"/>
                             <i t-att-class="'o_avatar_icon fa ' + activity.icon + ' bg-' + (activity.state == 'planned'? 'success' : (activity.state == 'today'? 'warning' : 'danger')) + '-full'"
                                t-att-title="activity.activity_type_id[1]"/>
                         </div>
@@ -30,7 +30,7 @@
                             <em> for </em>
                             <t t-esc="activity.user_id[1]" />
                             <a class="btn btn-link btn-info text-muted collapsed o_activity_info ml4" role="button" data-toggle="collapse" t-attf-data-target="#o_chatter_activity_info_#{activity.id}">
-                                <i class="fa fa-info-circle"></i>
+                                <i class="fa fa-info-circle" role="img" aria-label="Info" title="Info"></i>
                             </a>
                             <div class="o_thread_message_collapse collapse" t-attf-id="o_chatter_activity_info_#{activity.id}">
                                 <dl class="dl-horizontal well">
@@ -44,7 +44,7 @@
                                     </dd>
                                     <dt>Assigned to</dt>
                                     <dd class="mb8">
-                                        <img t-attf-src="/web/image#{activity.user_id[0] >= 0 ? ('/res.users/' + activity.user_id[0] + '/image_small') : ''}" height="18" width="18" class="img-circle mr4" t-att-title="activity.user_id[1]"/>
+                                        <img t-attf-src="/web/image#{activity.user_id[0] >= 0 ? ('/res.users/' + activity.user_id[0] + '/image_small') : ''}" height="18" width="18" class="img-circle mr4" t-att-title="activity.user_id[1]" t-att-alt="activity.user_id[1]"/>
                                         <b><t t-esc="activity.user_id[1]"/></b>
                                         <em>, due on </em><span t-attf-class="o_activity_color_#{activity.state}"><t t-esc="activity.date_deadline.format(date_format)"/></span>
                                     </dd>
@@ -55,14 +55,14 @@
                             <t t-raw="activity.note"/>
                         </div>
                         <div class="o_thread_message_tools btn-group">
-                            <a href="#" class="btn btn-link btn-success text-muted btn-sm o_activity_done o_activity_link mr8" t-att-data-activity-id="activity.id" t-att-data-previous-activity-type-id="activity.activity_type_id[0]" data-toggle="popover">
-                                <i class="fa fa-check"/> Mark Done
+                            <a role="button" href="#" class="btn btn-link btn-success text-muted btn-sm o_activity_done o_activity_link mr8" t-att-data-activity-id="activity.id" t-att-data-previous-activity-type-id="activity.activity_type_id[0]" data-toggle="popover">
+                                <span class="fa fa-check">Mark Done</span>
                             </a>
-                            <a href="#" class="btn btn-link btn-default text-muted btn-sm o_activity_edit o_activity_link" t-att-data-activity-id="activity.id">
-                                <i class="fa fa-pencil"/> Edit
+                            <a role="button" href="#" class="btn btn-link btn-default text-muted btn-sm o_activity_edit o_activity_link" t-att-data-activity-id="activity.id">
+                                <span class="fa fa-pencil">Edit</span>
                             </a>
-                            <a href="#" class="btn btn-link btn-sm btn-danger text-muted o_activity_unlink o_activity_link" t-att-data-activity-id="activity.id">
-                                <i class="fa fa-times"/> Cancel
+                            <a role="button" href="#" class="btn btn-link btn-sm btn-danger text-muted o_activity_unlink o_activity_link" t-att-data-activity-id="activity.id">
+                                <span class="fa fa-times">Cancel</span>
                             </a>
                         </div>
                     </div>
diff --git a/addons/mail/static/src/xml/chat_window.xml b/addons/mail/static/src/xml/chat_window.xml
index f1138db71d5..7d0fce19ee6 100644
--- a/addons/mail/static/src/xml/chat_window.xml
+++ b/addons/mail/static/src/xml/chat_window.xml
@@ -20,15 +20,15 @@
 
     <t t-name="mail.ChatWindowsDropdown">
         <div t-attf-class="o_chat_window o_in_home_menu o_chat_window_dropdown dropup #{open ? 'open' : ''}">
-            <span class="o_chat_window_dropdown_toggler dropdown-toggle" data-toggle="dropdown">
-                <i class="fa fa-comments-o"/> <t t-esc="sessions.length"/>
+            <span role="alert" class="o_chat_window_dropdown_toggler dropdown-toggle" data-toggle="dropdown" title="Unread messages">
+                <i class="fa fa-comments-o" role="img" aria-label="Messages"/> <t t-esc="sessions.length"/>
                 <span class="o_total_unread_counter">
                     <t t-if="unread_counter"><t t-esc="unread_counter"/></t>
                 </span>
             </span>
-            <ul class="dropdown-menu">
+            <ul class="dropdown-menu" role="menu">
                 <t t-foreach="sessions" t-as="session">
-                    <li class="o_chat_header" t-att-data-session-id="session.id">
+                    <li role="menuitem" class="o_chat_header" t-att-data-session-id="session.id">
                         <t t-call="mail.ChatWindowHeaderContent">
                             <t t-set="status" t-value="session.window.status"/>
                             <t t-set="title" t-value="session.window.title"/>
@@ -42,7 +42,7 @@
 
     <t t-name="mail.ChatWindowHeaderContent">
         <span t-if="widget.isMobile">
-            <a href="#" class="o_chat_window_close fa fa-1x fa-arrow-left mr4"/>
+            <a href="#" class="o_chat_window_close fa fa-1x fa-arrow-left mr4" aria-label="Close chat window" title="Close chat window"/>
         </span>
         <span class="o_chat_title">
             <t t-if="status" t-call="mail.chat.UserStatus"/>
@@ -50,7 +50,7 @@
             <span t-if="unread_counter"> (<t t-esc="unread_counter"/>)</span>
         </span>
         <span t-if="!widget.isMobile" class="o_chat_window_buttons">
-            <a href="#" class="o_chat_window_close fa fa-close"/>
+            <a href="#" class="o_chat_window_close fa fa-close" aria-label="Close chat window" title="Close chat window"/>
         </span>
     </t>
 
diff --git a/addons/mail/static/src/xml/chatter.xml b/addons/mail/static/src/xml/chatter.xml
index 70f98258fc8..e6cd3995bc7 100644
--- a/addons/mail/static/src/xml/chatter.xml
+++ b/addons/mail/static/src/xml/chatter.xml
@@ -42,7 +42,7 @@
 
         <!-- Add a button to open the full composer dialog -->
         <t t-jquery=".o_composer_button_add_attachment" t-operation="after">
-            <button tabindex="6" class="btn btn-sm btn-icon fa fa-expand o_composer_button_full_composer" type="button"/>
+            <button tabindex="6" class="btn btn-sm btn-icon fa fa-expand o_composer_button_full_composer" type="button" title="Full composer" aria-label="Full composer"/>
         </t>
     </t>
 
@@ -57,7 +57,7 @@
             Log note
         </button>
         <button t-if="schedule_activity_btn" class="btn btn-sm btn-link o_chatter_button_schedule_activity" title="Log or schedule an activity" disabled="disabled">
-            <i class="fa fa-clock-o"/> <t t-if="isMobile">Activity</t><t t-else="">Schedule activity</t>
+            <i class="fa fa-clock-o" role="img" aria-label="Dates" title="Dates"/> <t t-if="isMobile">Activity</t><t t-else="">Schedule activity</t>
         </button>
     </t>
 
@@ -65,9 +65,9 @@
         Chatter main div
     -->
     <t t-name="mail.Chatter">
-        <div class="o_chatter">
+        <aside class="o_chatter">
             <div class="o_chatter_topbar"/>
-        </div>
+        </aside>
     </t>
 
 </templates>
diff --git a/addons/mail/static/src/xml/composer.xml b/addons/mail/static/src/xml/composer.xml
index d09b6bc4f22..752b9febdf9 100644
--- a/addons/mail/static/src/xml/composer.xml
+++ b/addons/mail/static/src/xml/composer.xml
@@ -3,7 +3,7 @@
 
      <div t-name="mail.ChatComposer" t-attf-class="o_chat_composer #{widget.extended ? 'o_chat_composer_extended' : (widget.notInline ? '' : 'o_chat_inline_composer')} #{widget.isMini ? 'o_chat_mini_composer' : ''}">
          <div class="o_composer_container">
-             <img t-if="widget.avatarURL" height="36" width="36" class="o_thread_message_sidebar o_chatter_avatar img-circle" t-att-src="widget.avatarURL"/>
+             <img t-if="widget.avatarURL" height="36" width="36" class="o_thread_message_sidebar o_chatter_avatar img-circle" t-att-src="widget.avatarURL" alt="Avatar"/>
              <div t-if="widget.extended" class="o_composer_subject">
                  <input tabindex="1" type="text" placeholder="Subject" class="o_input"/>
              </div>
@@ -11,9 +11,9 @@
                 <div class="o_composer_input">
                     <textarea class="o_input o_composer_text_field" tabindex="2" placeholder="Write something..."/>
                     <div class="o_chatter_composer_tools">
-                        <button tabindex="4" class="btn btn-sm btn-icon fa fa-smile-o o_composer_button_emoji" type="button" data-toggle="popover"/>
-                        <button tabindex="5" class="btn btn-sm btn-icon fa fa-paperclip o_composer_button_add_attachment" type="button"/>
-                        <button t-if="widget.options.isMobile" tabindex="3" class="btn btn-sm btn-icon fa fa-paper-plane-o o_composer_button_send" type="button"/>
+                        <button tabindex="4" class="btn btn-sm btn-icon fa fa-smile-o o_composer_button_emoji" type="button" data-toggle="popover" title="Emojis" aria-label="Emojis"/>
+                        <button tabindex="5" class="btn btn-sm btn-icon fa fa-paperclip o_composer_button_add_attachment" type="button" aria-label="Add attachment" title="Add attachment"/>
+                        <button t-if="widget.options.isMobile" tabindex="3" class="btn btn-sm btn-icon fa fa-paper-plane-o o_composer_button_send" type="button" title="Send" aria-label="Send"/>
                     </div>
                 </div>
              </div>
@@ -36,18 +36,18 @@
 
     <div t-name="mail.ChatComposer.emojis" class="o_mail_emoji_container">
         <t t-foreach="emojis" t-as="emoji">
-            <button t-att-data-emoji="emoji.source" class="btn btn-link o_mail_emoji" t-att-title="emoji.description">
+            <button t-att-data-emoji="emoji.source" class="btn btn-link o_mail_emoji" t-att-title="emoji.description" t-att-aria-label="emoji.description">
                 <t t-raw="emoji.unicode_source"/>
             </button>
         </t>
     </div>
 
     <t t-name="mail.AbstractMentionSuggestions">
-        <ul class="dropdown-menu" aria-labelledby="dropdownMailMentionMenu">
+        <ul class="dropdown-menu" role="menu">
             <t t-foreach="suggestions" t-as="suggestion">
-                <li t-if="suggestion.divider" class="divider"/>
+                <li role="separator" t-if="suggestion.divider" class="divider"/>
                 <li t-if="!suggestion.divider" class="o_mention_proposition" t-att-data-id="suggestion.id">
-                    <a href="#"/>
+                    <a role="menuitem" href="#"/>
                 </li>
             </t>
         </ul>
@@ -79,15 +79,15 @@
     </t>
 
     <t t-name="FieldMany2ManyTagsEmail" t-extend="FieldMany2ManyTag">
-        <t t-jquery="span[t-attf-class*=badge]" t-operation="replace">
+        <t t-jquery="button[t-attf-class*=badge]" t-operation="replace">
             <t t-set="email_error" t-value="''"/>
             <t t-if="el.email.indexOf('@') &lt; 0">
                 <t t-set="email_error" t-value="'o_tag_error'"/>
             </t>
-            <span t-attf-class="badge dropdown o_tag_color_0 #{email_error}" t-att-data-color="color" t-att-data-index="el_index" t-att-data-id="el.id">
+            <button t-attf-class="badge dropdown o_tag_color_0 #{email_error}" t-att-data-color="color" t-att-data-index="el_index" t-att-data-id="el.id">
                 <span class="o_badge_text" t-attf-title="#{el.email}"><t t-esc="el.display_name"/></span>
-                <span t-if="!readonly" class="fa fa-times o_delete"/>
-            </span>
+                <span t-if="!readonly" class="fa fa-times o_delete" role="img" aria-label="Delete" title="Delete"/>
+            </button>
         </t>
     </t>
 </templates>
diff --git a/addons/mail/static/src/xml/discuss.xml b/addons/mail/static/src/xml/discuss.xml
index 1eda1dfec1b..7901a870ea3 100644
--- a/addons/mail/static/src/xml/discuss.xml
+++ b/addons/mail/static/src/xml/discuss.xml
@@ -9,7 +9,7 @@
                 <t t-if="widget.notification_bar">
                     <div class="o_mail_annoying_notification_bar">
                         <span class="o_mail_request_permission">Odoo needs your permission to <a href="#"> enable desktop notifications</a>.</span>
-                        <span class="fa fa-close"></span>
+                        <span class="fa fa-close" role="button" aria-label="Close" title="Close"></span>
                     </div>
                 </t>
             </div>
@@ -19,13 +19,13 @@
         <div class="o_mail_chat_sidebar">
             <div t-attf-class="o_mail_chat_title_main o_mail_chat_channel_item #{(active_channel_id === 'channel_inbox') ? 'o_active': ''}"
                  data-channel-id="channel_inbox">
-                <span class="o_channel_name"><i class="fa fa-inbox mr8"/>Inbox</span>
+                <span class="o_channel_name fa fa-inbox mr8">Inbox</span>
                 <t t-set="counter" t-value="needaction_counter"/>
                 <t t-call="mail.chat.SidebarNeedaction"/>
             </div>
             <div t-attf-class="o_mail_chat_title_main o_mail_chat_title_starred o_mail_chat_channel_item #{(active_channel_id === 'channel_starred') ? 'o_active': ''}"
                  data-channel-id="channel_starred">
-                <span class="o_channel_name"><i class="fa fa-star-o mr8"/>Starred</span>
+                <span class="o_channel_name fa fa-star-o mr8">Starred</span>
                 <t t-set="counter" t-value="starred_counter"/>
                 <t t-call="mail.chat.SidebarNeedaction"/>
             </div>
@@ -87,10 +87,10 @@
         <t t-if="!disable_add_channel || !empty">
             <div class="o_mail_sidebar_title">
                 <h4 t-att-class="channel_type == 'public' ? 'o_mail_open_channels' : ''">
-                    <i t-if="channel_icon" t-attf-class="mr4 fa-fw fa #{channel_icon}"></i>
+                    <i t-if="channel_icon" t-attf-class="mr4 fa-fw fa #{channel_icon}" role="img" aria-label="Channel" title="Channel"></i>
                     <b><t t-esc="channel_title"/></b>
                 </h4>
-                <span t-if="!disable_add_channel" class="fa fa-plus o_add" title="Add" t-attf-data-type="#{channel_type}"/>
+                <span t-if="!disable_add_channel" class="fa fa-plus o_add" title="Add" t-attf-data-type="#{channel_type}" role="img" aria-label="Add"/>
             </div>
         </t>
     </t>
@@ -111,21 +111,21 @@
                     </span>
                     <span t-if="display_hash" class="o_mail_hash">#</span>
                     <t t-esc="channel.name"/>
-                    <i t-if="channel.mass_mailing" class="fa fa-envelope-o" title="Sends messages by email"/>
+                    <i t-if="channel.mass_mailing" class="fa fa-envelope-o" title="Sends messages by email" role="img" aria-label="Send by mail"/>
                 </span>
                 <span t-attf-class="fa fa-cog o_mail_channel_settings"
-                      title="Channel settings" t-att-data-channel-id="channel.id"/>
+                      title="Channel settings" role="img" aria-label="Channel settings" t-att-data-channel-id="channel.id"/>
                 <t t-call="mail.chat.SidebarNeedaction"/>
                 <span t-if="! channel.group_based_subscription" t-attf-class="fa fa-times o_mail_partner_unpin #{counter ? 'hide' : ''}"
-                      title="Leave this channel" t-att-data-channel-id="channel.id"/>
+                      title="Leave this channel" role="img" aria-label="Leave this channel" t-att-data-channel-id="channel.id"/>
             </div>
         </t>
     </t>
 
     <t t-name="mail.chat.UserStatus">
-        <i t-if="status == 'online'" class="o_mail_user_status o_user_online fa fa-circle" title="Online"/>
-        <i t-if="status == 'away'" class="o_mail_user_status o_user_idle fa fa-circle" title="Idle"/>
-        <i t-if="status == 'offline'" class="o_mail_user_status fa fa-circle-o" title="Offline"/>
+        <i t-if="status == 'online'" class="o_mail_user_status o_user_online fa fa-circle" title="Online" role="img" aria-label="User is online"/>
+        <i t-if="status == 'away'" class="o_mail_user_status o_user_idle fa fa-circle" title="Idle" role="img" aria-label="User is idle"/>
+        <i t-if="status == 'offline'" class="o_mail_user_status fa fa-circle-o" title="Offline" role="img" aria-label="User is offline"/>
     </t>
 
     <t t-name="mail.chat.MessageSentSnackbar">
@@ -174,20 +174,16 @@
             <div class="o_mail_chat_content"/>
             <div class="o_mail_mobile_tabs">
                 <div class="o_mail_mobile_tab" data-type="channel_inbox">
-                    <span class="fa fa-inbox"/>
-                    <span class="o_tab_title">Inbox</span>
+                    <span class="o_tab_title fa fa-inbox">Inbox</span>
                 </div>
                 <div class="o_mail_mobile_tab" data-type="dm">
-                    <span class="fa fa-user"/>
-                    <span class="o_tab_title">Chat</span>
+                    <span class="o_tab_title fa fa-user">Chat</span>
                 </div>
                 <div class="o_mail_mobile_tab" data-type="public">
-                    <span class="fa fa-users"/>
-                    <span class="o_tab_title">Channels</span>
+                    <span class="o_tab_title fa fa-users">Channels</span>
                 </div>
                 <div class="o_mail_mobile_tab" data-type="private">
-                    <span class="fa fa-eye-slash"/>
-                    <span class="o_tab_title">Private Channels</span>
+                    <span class="o_tab_title fa fa-eye-slash">Private Channels</span>
                 </div>
             </div>
         </div>
@@ -212,9 +208,9 @@
         <div t-attf-class="o_mail_channel_preview #{channel.unread_counter ? 'o_channel_unread' : ''}"
              t-att-data-channel_id="channel.id" t-att-data-res_id="channel.res_id" t-att-data-res_model="channel.model">
             <div t-attf-class="o_mail_channel_image #{channel.model? 'o_mail_channel_app' : ''}">
-                <img class="o_mail_channel_image" t-att-src="channel.image_src"/>
-                <i t-if="channel.status === 'online'" class="o_mail_user_status o_user_online fa fa-circle" title="Online"/>
-                <i t-if="channel.status === 'away'" class="o_mail_user_status o_user_idle fa fa-circle" title="Idle"/>
+                <img class="o_mail_channel_image" t-att-src="channel.image_src" alt="Channel"/>
+                <i t-if="channel.status === 'online'" class="o_mail_user_status o_user_online fa fa-circle" title="Online" role="img" aria-label="User is online"/>
+                <i t-if="channel.status === 'away'" class="o_mail_user_status o_user_idle fa fa-circle" title="Idle" role="img" aria-label="User is idle"/>
             </div>
             <div class="o_channel_info">
                 <div class="o_channel_title">
@@ -228,7 +224,7 @@
                 </div>
                 <div t-if="channel.last_message" class="o_last_message_preview">
                     <t t-if="channel.last_message.is_author">
-                        <span class="fa fa-mail-reply"/> You:
+                        <span class="fa fa-mail-reply" role="img" aria-label="Reply"/> You:
                     </t>
                     <t t-else="">
                         <t t-if="channel.last_message.displayed_author">
diff --git a/addons/mail/static/src/xml/extended_chat_window.xml b/addons/mail/static/src/xml/extended_chat_window.xml
index 3e183d99bd2..c5188feadfa 100644
--- a/addons/mail/static/src/xml/extended_chat_window.xml
+++ b/addons/mail/static/src/xml/extended_chat_window.xml
@@ -12,7 +12,7 @@
 
     <t t-extend="mail.ChatWindowHeaderContent">
         <t t-jquery=".o_chat_window_buttons" t-operation="prepend">
-            <a href="#" class="o_chat_window_expand fa fa-expand" title="Open in Discuss"/>
+            <a href="#" class="o_chat_window_expand fa fa-expand" title="Open in Discuss" aria-label="Open in discuss"/>
         </t>
     </t>
 
diff --git a/addons/mail/static/src/xml/followers.xml b/addons/mail/static/src/xml/followers.xml
index d50d334cb4f..89df5c48b2c 100644
--- a/addons/mail/static/src/xml/followers.xml
+++ b/addons/mail/static/src/xml/followers.xml
@@ -7,9 +7,9 @@
     <t t-name="mail.Followers">
         <div class="o_followers">
             <div class="o_followers_title_box">
-                <button class="btn btn-sm btn-link dropdown-toggle"
+                <button class="btn btn-sm btn-link dropdown-toggle" title="Dropdown menu - Followers"
                         data-toggle="dropdown" aria-expanded="false">
-                    <i class="fa fa-user"></i>
+                    <i class="fa fa-user" role="img" aria-label="Dropdown menu - Followers"></i>
                     <span class="o_followers_count"/>
                 </button>
                 <ul class="dropdown-menu o_followers_list" role="menu"></ul>
@@ -18,12 +18,10 @@
                 <div class="btn-group btn-group-sm o_subtypes_list">
                     <button class="btn btn-sm btn-link o_followers_follow_button o_followers_notfollow">
                         <span class="o_follow">Follow</span>
-                        <span class="fa fa-times o_followers_unfollow"/>
-                        <span class="o_followers_unfollow"> Unfollow</span>
-                        <span class="fa fa-check o_followers_following"/>
-                        <span class="o_followers_following"> Following</span>
+                        <span class="fa fa-times o_followers_unfollow"> Unfollow</span>
+                        <span class="fa fa-check o_followers_following"> Following</span>
                     </button><button class="btn btn-sm btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
-                        <span class="fa fa-bell"/>
+                        <span class="fa fa-bell" role="img" aria-label="Alarm menu" title="Alarm menu"/>
                     </button>
                     <ul class="dropdown-menu" role="menu"/>
                 </div>
@@ -35,8 +33,8 @@
         Partner or channel following the record
     -->
     <t t-name="mail.Followers.partner">
-        <li class='o_partner'>
-            <img t-att-src="record.avatar_url"/>
+        <li role="menuitem" class='o_partner'>
+            <img t-att-src="record.avatar_url" alt="Avatar"/>
             <a class="o_mail_redirect"
                href="#"
                t-att-title="record.name"
@@ -44,10 +42,12 @@
                t-att-data-oe-id="record.res_id"><t t-esc="record.name"/></a>
             <i t-if="record.is_editable" class="fa fa-pencil o_edit_subtype hide"
                title="Edit subscription"
+               aria-label="Edit subscription" role="img"
                t-att-data-follower-id="record.id"
                t-att-data-oe-id="record.res_id"
                t-att-data-oe-model="record.res_model"/>
             <i t-if="widget.isEditable" class="fa fa-remove o_remove_follower"
+               aria-label="Remove this follower" role="img"
                title="Remove this follower"/>
         </li>
     </t>
@@ -57,13 +57,13 @@
     -->
     <t t-name="mail.Followers.add_more">
         <t t-if="widget.isEditable">
-            <li class="o_add_follower">
+            <li role="menuitem" class="o_add_follower">
                 <a href="#"> Add Followers </a>
             </li>
-            <li class="o_add_follower_channel">
+            <li role="menuitem" class="o_add_follower_channel">
                 <a href="#"> Add Channels </a>
             </li>
-            <li t-if="widget.followers.length > 0" class="divider"/>
+            <li role="separator" t-if="widget.followers.length > 0" class="divider"/>
         </t>
     </t>
 
@@ -71,7 +71,7 @@
         Message subtypes of a follower subscription
     -->
     <t t-name="mail.Followers.subtype">
-        <li class="o_subtype">
+        <li role="menuitem" class="o_subtype">
             <div class="o_checkbox">
                 <input type="checkbox" t-att-checked="record.followed"
                        t-att-id="'input_mail_followers_subtype_'+record.id+(dialog ? '_in_dialog': '')"
@@ -81,12 +81,12 @@
             <span t-att-for="'input_mail_followers_subtype_'+record.id+(dialog ? '_in_dialog': '')">
                 <t t-esc="record.name"/>
             </span>
-            <i t-if="display_warning" class="fa fa-warning text-warning"/>
+            <i t-if="display_warning" class="fa fa-warning text-warning" role="img" aria-label="Warning" title="Warning"/>
         </li>
     </t>
     <t t-name="mail.Followers.subtypes.warning">
-        <span class="text-warning">
-            <i class="fa fa-warning"/> Be careful with channels following internal notifications
+        <span class="text-warning" role="alert">
+            <span class="fa fa-warning"> Be careful with channels following internal notifications</span>
         </span>
     </t>
 
diff --git a/addons/mail/static/src/xml/systray.xml b/addons/mail/static/src/xml/systray.xml
index a6e52ab555a..6350e07d2da 100644
--- a/addons/mail/static/src/xml/systray.xml
+++ b/addons/mail/static/src/xml/systray.xml
@@ -4,15 +4,15 @@
     <t t-name="mail.chat.MessagingMenu">
         <li class="o_mail_navbar_item">
             <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Conversations" href="#">
-                <i class="fa fa-comments"/> <span class="o_notification_counter badge"/>
+                <i class="fa fa-comments" role="img" aria-label="Messages"/> <span class="o_notification_counter badge"/>
             </a>
             <ul class="o_mail_navbar_dropdown dropdown-menu" role="menu">
-                <li t-if="widget.isMobile">
+                <li role="menuitem" t-if="widget.isMobile">
                     <div class="o_mail_navbar_mobile_header">
                         <button type="button" class="btn btn-default btn-sm o_new_message"> New message </button>
                     </div>
                 </li>
-                <li t-if="!widget.isMobile" class="o_mail_navbar_dropdown_top">
+                <li role="menuitem" t-if="!widget.isMobile" class="o_mail_navbar_dropdown_top">
                     <div>
                         <button type="button" class="btn btn-sm btn-link o_filter_button active"> All </button>
                         <button type="button" class="btn btn-sm btn-link o_filter_button" data-filter='chat'> Chat </button>
@@ -20,20 +20,17 @@
                     </div>
                     <button type="button" class="btn btn-sm btn-link o_new_message"> New message </button>
                 </li>
-                <li class="o_mail_navbar_dropdown_channels"/>
-                <li t-if="widget.isMobile">
+                <li role="menuitem" class="o_mail_navbar_dropdown_channels"/>
+                <li role="menuitem" t-if="widget.isMobile">
                     <div class="o_mail_mobile_tabs">
                         <div class="o_mail_mobile_tab o_filter_button active">
-                            <span class="fa fa-envelope"/>
-                            <span class="o_tab_title">All</span>
+                            <span class="o_tab_title fa fa-envelope">All</span>
                         </div>
                         <div class="o_mail_mobile_tab o_filter_button" data-filter='chat'>
-                            <span class="fa fa-user"/>
-                            <span class="o_tab_title">Chat</span>
+                            <span class="o_tab_title fa fa-user">Chat</span>
                         </div>
                         <div class="o_mail_mobile_tab o_filter_button" data-filter='channels'>
-                            <span class="fa fa-users"/>
-                            <span class="o_tab_title">Channels</span>
+                            <span class="o_tab_title fa fa-users">Channels</span>
                         </div>
                     </div>
                 </li>
@@ -61,7 +58,7 @@
         <t t-foreach="activities" t-as="activity">
             <div class="o_mail_channel_preview" t-att-data-res_model="activity.model" t-att-data-model_name="activity.name" data-filter='my'>
                 <div class="o_mail_channel_image o_mail_channel_app">
-                    <img t-att-src="activity.icon"/>
+                    <img t-att-src="activity.icon" alt="Activity"/>
                 </div>
                 <div class="o_channel_info">
                     <div class="o_channel_title">
@@ -85,10 +82,10 @@
     <t t-name="mail.chat.ActivityMenu">
         <li class="o_mail_navbar_item">
             <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Activities" href="#">
-                <i class="fa fa-clock-o"/> <span class="o_notification_counter badge"/>
+                <i class="fa fa-clock-o" role="img" aria-label="Activities"/> <span class="o_notification_counter badge"/>
             </a>
             <ul class="o_mail_navbar_dropdown dropdown-menu" role="menu">
-                <li class="o_mail_navbar_dropdown_channels"/>
+                <li role="menuitem" class="o_mail_navbar_dropdown_channels"/>
             </ul>
         </li>
     </t>
diff --git a/addons/mail/static/src/xml/thread.xml b/addons/mail/static/src/xml/thread.xml
index ca8ae9b8319..60779ea6563 100644
--- a/addons/mail/static/src/xml/thread.xml
+++ b/addons/mail/static/src/xml/thread.xml
@@ -23,20 +23,20 @@
         <div class="o_viewer_content">
             <div class="o_viewer-header">
                 <span class="o_image_caption">
-                    <i class="fa fa-picture-o mr8" t-if="widget.activeAttachment.type == 'image'"/>
-                    <i class="fa fa-file-text mr8" t-if="widget.activeAttachment.type == 'application/pdf'"/>
-                    <i class="fa fa-video-camera mr8" t-if="widget.activeAttachment.type == 'video'"/>
+                    <i class="fa fa-picture-o mr8" t-if="widget.activeAttachment.type == 'image'" role="img" aria-label="Image" title="Image"/>
+                    <i class="fa fa-file-text mr8" t-if="widget.activeAttachment.type == 'application/pdf'" role="img" aria-label="PDF file" title="PDF file"/>
+                    <i class="fa fa-video-camera mr8" t-if="widget.activeAttachment.type == 'video'" role="img" aria-label="Video" title="Video"/>
                     <t t-esc="widget.activeAttachment.name"/>
-                    <a href="#" class="o_download_btn ml8 small" data-toggle="tooltip" data-placement="right" title="Download"><i class="fa fa-fw fa-download"/></a>
+                    <a role="button" href="#" class="o_download_btn ml8 small" data-toggle="tooltip" data-placement="right" title="Download"><i class="fa fa-fw fa-download" role="img" aria-label="Download"/></a>
                 </span>
-                <a class="o_close_btn pull-right" href="#">×</a>
+                <a role="button" class="o_close_btn pull-right" href="#" aria-label="Close" title="Close">×</a>
             </div>
             <div class="o_viewer_img_wrapper">
                 <div class="o_viewer_zoomer">
                     <div t-if="widget.activeAttachment.type == 'image'" class="o_loading_img text-center">
-                        <i class="fa fa-circle-o-notch fa-spin text-gray-light fa-3x fa-fw" aria-hidden="true"/>
+                        <i class="fa fa-circle-o-notch fa-spin text-gray-light fa-3x fa-fw" role="img" aria-label="Loading" title="Loading"/>
                     </div>
-                    <img t-if="widget.activeAttachment.type == 'image'" class="o_viewer_img" t-attf-src="/web/image/#{widget.activeAttachment.id}?unique=1"/>
+                    <img t-if="widget.activeAttachment.type == 'image'" class="o_viewer_img" t-attf-src="/web/image/#{widget.activeAttachment.id}?unique=1" alt="Viewer"/>
                     <iframe class="mt32 o_viewer_pdf" t-if="widget.activeAttachment.type == 'application/pdf'" t-attf-src="/web/static/lib/pdfjs/web/viewer.html?file=/web/content/#{widget.activeAttachment.id}" />
                     <video t-if="widget.activeAttachment.type == 'video'" class="o_viewer_video" controls="controls">
                         <source t-attf-src="/web/image/#{widget.activeAttachment.id}" t-att-data-type="widget.activeAttachment.mimetype"/>
@@ -45,31 +45,31 @@
             </div>
             <div t-if="widget.activeAttachment.type == 'image'" class="o_viewer_toolbar btn-toolbar" role="toolbar">
                 <div class="btn-group ml0" role="group">
-                    <a href="#" class="o_viewer_toolbar_btn btn o_zoom_in" data-toggle="tooltip" title="Zoom In"><i class="fa fa-fw fa-plus"/></a>
-                    <a href="#" class="o_viewer_toolbar_btn btn o_zoom_reset disabled" data-toggle="tooltip" title="Reset Zoom"><i class="fa fa-fw fa-search"/></a>
-                    <a href="#" class="o_viewer_toolbar_btn btn o_zoom_out disabled" data-toggle="tooltip" title="Zoom Out"><i class="fa fa-fw fa-minus"/></a>
+                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_zoom_in" data-toggle="tooltip" title="Zoom In"><i class="fa fa-fw fa-plus" role="img" aria-label="Zoom In"/></a>
+                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_zoom_reset disabled" data-toggle="tooltip" title="Reset Zoom"><i class="fa fa-fw fa-search" role="img" aria-label="Reset Zoom"/></a>
+                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_zoom_out disabled" data-toggle="tooltip" title="Zoom Out"><i class="fa fa-fw fa-minus" role="img" aria-label="Zoom Out"/></a>
                 </div>
                 <div class="btn-group ml8" role="group">
-                    <a href="#" class="o_viewer_toolbar_btn btn o_rotate" data-toggle="tooltip" title="Rotate"><i class="fa fa-fw fa-repeat"/></a>
+                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_rotate" data-toggle="tooltip" title="Rotate"><i class="fa fa-fw fa-repeat" role="img" aria-label="Rotate"/></a>
                 </div>
                 <div class="btn-group ml8" role="group">
-                    <a href="#" class="o_viewer_toolbar_btn btn o_print_btn" data-toggle="tooltip" title="Print"><i class="fa fa-fw fa-print"/></a>
-                    <a href="#" class="o_viewer_toolbar_btn btn o_download_btn" data-toggle="tooltip" title="Download"><i class="fa fa-fw fa-download"/></a>
+                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_print_btn" data-toggle="tooltip" title="Print"><i class="fa fa-fw fa-print" role="img" aria-label="Print"/></a>
+                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_download_btn" data-toggle="tooltip" title="Download"><i class="fa fa-fw fa-download" role="img" aria-label="Download"/></a>
                 </div>
             </div>
         </div>
     </t>
 
     <t t-name="DocumentViewer">
-        <div class="modal o_modal_fullscreen" tabindex="-1" data-keyboard="false" role="dialog" aria-hidden="true">
+        <div class="modal o_modal_fullscreen" tabindex="-1" data-keyboard="false" role="dialog">
             <t t-call="DocumentViewer.Content"/>
 
             <t t-if="widget.attachment.length != 1">
                 <a class="arrow arrow-left move_previous" href="#">
-                    <span class="fa fa-chevron-left"/>
+                    <span class="fa fa-chevron-left" role="img" aria-label="Previous" title="Previous"/>
                 </a>
                 <a class="arrow arrow-right move_next" href="#">
-                    <span class="fa fa-chevron-right"/>
+                    <span class="fa fa-chevron-right" role="img" aria-label="Next" title="Next"/>
                 </a>
             </t>
         </div>
@@ -88,7 +88,7 @@
                 </script>
             </head>
             <body onload='onload_img()'>
-                <img t-att-src='src' />
+                <img t-att-src='src' alt=""/>
             </body>
         </html>
     </t>
@@ -129,6 +129,7 @@
             <div t-if="options.display_avatar" class="o_thread_message_sidebar">
                 <t t-if="!message.mailto and message.author_id[0]">
                     <img t-if="message.avatar_src and message.display_author"
+                        alt=""
                         t-att-src="message.avatar_src"
                         data-oe-model="res.partner"
                         t-att-data-oe-id="message.author_redirect ? message.author_id[0] : ''"
@@ -136,6 +137,7 @@
                 </t>
                 <t t-if="message.mailto || !message.author_id[0]">
                     <img t-if="message.avatar_src and message.display_author"
+                        alt=""
                         t-att-src="message.avatar_src"
                         class="o_thread_message_avatar img-circle"/>
                 </t>
@@ -144,7 +146,7 @@
                 </span>
                 <i t-if="!message.display_author and options.display_stars and message.message_type != 'notification'"
                     t-att-class="'fa o_thread_message_star o_thread_icon ' + (message.is_starred ? 'fa-star' : 'fa-star-o')"
-                    t-att-data-message-id="message.id" title="Mark as Todo"/>
+                    t-att-data-message-id="message.id" title="Mark as Todo" role="img" aria-label="Mark as todo"/>
             </div>
             <div class="o_thread_message_core">
                 <p t-if="message.display_author" class="o_mail_info text-muted">
@@ -183,11 +185,11 @@
                         <span class="o_thread_tooltip_content">
                             <t t-foreach="message.customer_email_data" t-as="customer">
                                 <span>
-                                    <t t-if="customer[2] === 'sent'"><i class='fa fa-check'/></t>
-                                    <t t-if="customer[2] === 'bounce'"><i class='fa fa-exclamation'/></t>
-                                    <t t-if="customer[2] === 'exception'"><i class='fa fa-exclamation'/></t>
-                                    <t t-if="customer[2] === 'ready'"><i class='fa fa-send-o'/></t>
-                                    <t t-if="customer[2] === 'canceled'"><i class='fa fa-trash-o'/></t>
+                                    <t t-if="customer[2] === 'sent'"><i class='fa fa-check' title="Sent" role="img" aria-label="Sent"/></t>
+                                    <t t-if="customer[2] === 'bounce'"><i class='fa fa-exclamation' title="Bounced" role="img" aria-label="Bounced"/></t>
+                                    <t t-if="customer[2] === 'exception'"><i class='fa fa-exclamation' title="Error" role="img" aria-label="Error"/></t>
+                                    <t t-if="customer[2] === 'ready'"><i class='fa fa-send-o' title="Ready" role="img" aria-label="Ready"/></t>
+                                    <t t-if="customer[2] === 'canceled'"><i class='fa fa-trash-o' title="Canceled" role="img" aria-label="Canceled"/></t>
                                     <t t-esc="customer[1]"/>
                                 </span>
                                 <br />
@@ -197,13 +199,13 @@
                     <span t-attf-class="o_thread_icons">
                         <i t-if="options.display_stars and !message.is_system_notification and !message.needsModeration"
                             t-att-class="'fa fa-lg o_thread_icon o_thread_message_star ' + (message.is_starred ? 'fa-star' : 'fa-star-o')"
-                            t-att-data-message-id="message.id" title="Mark as Todo"/>
+                            t-att-data-message-id="message.id" title="Mark as Todo" role="img" aria-label="Mark as Todo"/>
                        <i t-if="message.record_name &amp;&amp; message.model != 'mail.channel' &amp;&amp; options.display_reply_icon"
                            class="fa fa-reply o_thread_icon o_thread_message_reply"
-                           t-att-data-message-id="message.id" title="Reply"/>
+                           t-att-data-message-id="message.id" title="Reply" role="img" aria-label="Reply"/>
                         <i t-if="message.is_needaction &amp;&amp; options.display_needactions"
                            class="fa fa-check o_thread_icon o_thread_message_needaction"
-                           t-att-data-message-id="message.id" title="Mark as Read"/>
+                           t-att-data-message-id="message.id" title="Mark as Read" role="img" aria-label="Mark as Read"/>
 
                         <t t-if="message.needsModeration and message.model === 'mail.channel'">
                             <t t-if="message.isModerator">
@@ -279,7 +281,7 @@
                     <t t-esc="value.changed_field"/>:
                     <t t-if="value.old_value">
                         <span> <t t-esc="value.old_value || ((value.field_type !== 'boolean') and '')"/> </span>
-                        <span t-if="value.old_value != value.new_value" class="fa fa-long-arrow-right"/>
+                        <span t-if="value.old_value != value.new_value" class="fa fa-long-arrow-right" role="img" aria-label="Changed" title="Changed"/>
                     </t>
                     <span t-if="value.old_value != value.new_value">
                         <t t-esc="value.new_value || ((value.field_type !== 'boolean') and '')"/>
@@ -307,7 +309,7 @@
                     <div t-attf-class="o_image_overlay o_attachment_view"  t-att-data-id="attachment.id">
                         <span class="o_attachment_title text-white"><t t-esc="attachment.name"/></span>
                         <a class="o_attachment_download" t-att-href='attachment.url'>
-                            <i t-attf-class="fa fa-download text-white" t-att-title="'Download ' + attachment.name" aria-hidden="true"></i>
+                            <i t-attf-class="fa fa-download text-white" t-att-title="'Download ' + attachment.name" role="img" aria-label="Download"></i>
                         </a>
                     </div>
                 </div>
@@ -328,10 +330,10 @@
                          t-att-style="type == 'image' ? 'background-image:url(/web/image/' + attachment.id + '/38x38/?crop=true' : '' "
                          t-att-data-mimetype="attachment.mimetype">
                     </div>
-                    <a t-elif="!editable" t-att-href='attachment.url' t-att-title="'Download ' + attachment.name">
+                    <a t-elif="!editable" t-att-href='attachment.url' t-att-title="'Download ' + attachment.name" aria-label="Download">
                         <span class="o_image o_hover" t-att-data-mimetype="attachment.mimetype" t-att-data-ext="ext"/>
                     </a>
-                    <span t-else="" class="o_image" t-att-data-mimetype="attachment.mimetype" t-att-data-ext="ext"/>
+                    <span t-else="" class="o_image" t-att-data-mimetype="attachment.mimetype" t-att-data-ext="ext" role="img" aria-label="Document not downloadable"/>
                 </div>
 
                 <div class="caption">
@@ -347,10 +349,10 @@
                 <div t-if="!editable" class="caption small">
                     <b t-if="has_preview" class="ml4 small text-uppercase o_attachment_view" t-att-data-id="attachment.id"><t t-esc="ext"/></b>
                     <a t-else="" class="ml4 small text-uppercase" t-att-href="attachment.url" t-att-title="'Download ' + attachment.name"><b><t t-esc='ext'/></b></a>
-                    <a class="ml4 o_attachment_download pull-right" t-att-title="'Download ' + attachment.name" t-att-href='attachment.url'><i t-attf-class="fa fa-download"/></a>
+                    <a class="ml4 o_attachment_download pull-right" t-att-title="'Download ' + attachment.name" t-att-href='attachment.url'><i t-attf-class="fa fa-download" role="img" aria-label="Download"/></a>
                 </div>
-                <div t-if="editable" class="o_attachment_uploaded"><i class="text-success fa fa-check"/></div>
-                <div t-if="editable" class="o_attachment_delete" t-att-data-id="attachment.id"><span class="text-white">×</span></div>
+                <div t-if="editable" class="o_attachment_uploaded"><i class="text-success fa fa-check" role="img" aria-label="Uploaded" title="Uploaded"/></div>
+                <div t-if="editable" class="o_attachment_delete" t-att-data-id="attachment.id"><span class="text-white" role="img" aria-label="Delete" title="Delete">×</span></div>
             </div>
         </div>
     </t>
@@ -358,7 +360,7 @@
      <t t-name="mail.ChatThread.LoadMore">
         <div class="o_thread_show_more">
             <t t-if="options.loadMoreOnScroll">
-                <span><i class="fa fa-spinner fa-spin"/> Loading older messages... </span>
+                <span><i class="fa fa-spinner fa-spin" role="img" aria-label="Please wait" title="Please wait"/> Loading older messages... </span>
             </t>
             <t t-else="">
                 <button class="btn btn-sm btn-link">-------- Show older messages --------</button>
diff --git a/addons/mail/static/src/xml/web_kanban_activity.xml b/addons/mail/static/src/xml/web_kanban_activity.xml
index dff33f6465a..b078e280722 100644
--- a/addons/mail/static/src/xml/web_kanban_activity.xml
+++ b/addons/mail/static/src/xml/web_kanban_activity.xml
@@ -3,8 +3,8 @@
 
 <t t-name="mail.KanbanActivity">
     <div class="o_kanban_inline_block dropdown o_kanban_selection o_mail_activity">
-        <a class="dropdown-toggle o_activity_btn" data-toggle="dropdown">
-            <span class="fa fa-clock-o fa-lg fa-fw" t-att-title="widget.selection[widget.activity_state]"/>
+        <a role="button" class="dropdown-toggle o_activity_btn" data-toggle="dropdown">
+            <span class="fa fa-clock-o fa-lg fa-fw" t-att-title="widget.selection[widget.activity_state]" role="img" t-att-aria-label="widget.selection[widget.activity_state]"/>
         </a>
         <ul class="dropdown-menu o_activity" role="menu">
         </ul>
@@ -13,49 +13,49 @@
 
 <t t-name="mail.KanbanActivityLoading">
     <li class="text-center o_no_activity">
-        <span class="fa fa-spinner fa-spin fa-2x" />
+        <span class="fa fa-spinner fa-spin fa-2x" role="img" aria-label="Loading..." title="Loading..."/>
     </li>
 </t>
 
 <t t-name="mail.KanbanActivityDropdown">
-    <li t-if="_.isEmpty(records)" class="text-center o_no_activity">
+    <li role="menuitem" t-if="_.isEmpty(records)" class="text-center o_no_activity">
         <span>No activities planned.</span>
     </li>
-    <li t-if="!_.isEmpty(records)">
-        <ul class="nav o_activity_log">
+    <li t-if="!_.isEmpty(records)" aria-haspopup="true" role="menu">
+        <ul class="nav o_activity_log" role="menu">
             <t t-foreach="_.keys(records)" t-as="key">
                 <t t-set="logs" t-value="records[key]" />
-                <li class="o_activity_label">
+                <li role="menuitem" class="o_activity_label">
                     <strong t-attf-class="o_activity_color_#{key}">
                         <t t-esc="selection[key]" /> (<t t-esc="logs.length"/>)
                     </strong>
                 </li>
-                <li t-foreach="logs" t-as="log" t-att-data-activity-id="log.id" class="o_schedule_activity">
+                <li role="menuitem" t-foreach="logs" t-as="log" t-att-data-activity-id="log.id" class="o_schedule_activity">
                     <div class="o_activity_title pull-left">
-                        <span t-attf-class="fa #{log.icon} fa-fw" />
+                        <span t-attf-class="fa #{log.icon} fa-fw" role="img" aria-label="Log" title="Log"/>
                         <strong>
                             <t t-esc="log.title_action or log.activity_type_id[1]" />
                         </strong>
                         <div>
-                            <span class="fa fa-clock-o fa-fw" />
+                            <span class="fa fa-clock-o fa-fw" role="img" aria-label="Deadline" title="Deadline"/>
                             <span t-att-title="log.date_deadline"><t t-esc="log.label_delay" /></span>
                             <t t-if="log.user_id[0] != uid">
-                                <span class="ml4 fa fa-user" />
+                                <span class="ml4 fa fa-user" role="img" aria-label="User" title="User"/>
                                 <span><t t-esc="log.user_id[1]" /></span>
                             </t>
                         </div>
                     </div>
                     <div class="pull-right">
-                        <span class="o_mark_as_done o_activity_link o_activity_link_kanban fa fa-check-circle fa-2x mt4" t-att-data-activity-id="log.id" title="Mark as done" />
+                        <span class="o_mark_as_done o_activity_link o_activity_link_kanban fa fa-check-circle fa-2x mt4" t-att-data-activity-id="log.id" title="Mark as done" role="img" aria-label="Mark as done"/>
                     </div>
                 </li>
             </t>
         </ul>
     </li>
-    <li class="o_schedule_activity text-center">
-        <span class="btn btn-link btn-block">
-            <i class="fa fa-plus fa-fw" aria-hidden="true"></i><strong>Schedule an activity</strong>
-        </span>
+    <li role="menuitem" class="o_schedule_activity text-center">
+        <a role="button" class="btn btn-link btn-block">
+            <strong class="fa fa-plus fa-fw">Schedule an activity</strong>
+        </a>
     </li>
 </t>
 
diff --git a/addons/mail/static/tests/chatter_tests.js b/addons/mail/static/tests/chatter_tests.js
index 46de2e22d3f..f42170c696e 100644
--- a/addons/mail/static/tests/chatter_tests.js
+++ b/addons/mail/static/tests/chatter_tests.js
@@ -690,7 +690,7 @@ QUnit.test('chatter: Attachment viewer', function (assert) {
     assert.strictEqual($('.o_modal_fullscreen img.o_viewer_img[data-src="/web/image/1?unique=1"]').length, 1,
         "Modal popup should open with first image src");
     //  click on next button
-    $('.modal .arrow.arrow-right.move_next span').click();
+    $('[role="dialog"] .arrow.arrow-right.move_next span').click();
     assert.strictEqual($('.o_modal_fullscreen img.o_viewer_img[data-src="/web/image/2?unique=1"]').length, 1,
         "Modal popup should have now second image src");
     assert.strictEqual($('.o_modal_fullscreen .o_viewer_toolbar .o_download_btn').length, 1,
@@ -1172,8 +1172,8 @@ QUnit.test('followers widget: follow/unfollow, edit subtypes', function (assert)
 
     // click to unfollow
     form.$('.o_followers_follow_button').click(); // click to open the dropdown
-    assert.ok($('.modal').length, 'a confirm modal should be opened');
-    $('.modal .modal-footer .btn-primary').click(); // click on 'OK'
+    assert.ok($('[role="dialog"]').length, 'a confirm modal should be opened');
+    $('footer.modal-footer .btn-primary').click(); // click on 'OK'
     assert.strictEqual(form.$('.o_followers_count').text(), "0", 'should have no followers');
     assert.ok(form.$('.o_followers_follow_button.o_followers_notfollow').length,
         'should display the "Follow" button');
@@ -1366,9 +1366,9 @@ QUnit.test('fieldmany2many tags email', function (assert) {
     }).then(function (form) {
         // should read it 3 times (1 with the form view, one with the form dialog and one after save)
         assert.verifySteps([[12, 14], [14], [14]]);
-        assert.strictEqual(form.$('.o_field_many2manytags[name="timmy"] span.o_tag_color_0').length, 2,
+        assert.strictEqual(form.$('.o_field_many2manytags[name="timmy"] button.o_tag_color_0').length, 2,
             "two tags should be present");
-        var firstTag = form.$('.o_field_many2manytags[name="timmy"] span.o_tag_color_0').first();
+        var firstTag = form.$('.o_field_many2manytags[name="timmy"] button.o_tag_color_0').first();
         assert.strictEqual(firstTag.find('.o_badge_text').text(), "gold",
             "tag should only show display_name");
         assert.strictEqual(firstTag.find('.o_badge_text').attr('title'), "coucou@petite.perruche",
@@ -1377,16 +1377,16 @@ QUnit.test('fieldmany2many tags email', function (assert) {
         done();
     });
 
-    assert.strictEqual($('.modal-body.o_act_window').length, 1,
+    assert.strictEqual($('main.modal-body.o_act_window').length, 1,
         "there should be one modal opened to edit the empty email");
-    assert.strictEqual($('.modal-body.o_act_window input[name="display_name"]').val(), "silver",
+    assert.strictEqual($('main.modal-body input[name="display_name"]').val(), "silver",
         "the opened modal should be a form view dialog with the partner_type 14");
-    assert.strictEqual($('.modal-body.o_act_window input[name="email"]').length, 1,
+    assert.strictEqual($('main.modal-body input[name="email"]').length, 1,
         "there should be an email field in the modal");
 
     // set the email and save the modal (will render the form view)
-    $('.modal-body.o_act_window input[name="email"]').val('coucou@petite.perruche').trigger('input');
-    $('.modal-footer .btn-primary').click();
+    $('main.modal-body input[name="email"]').val('coucou@petite.perruche').trigger('input');
+    $('footer.modal-footer .btn-primary').click();
 });
 
 QUnit.test('fieldmany2many tags email (edition)', function (assert) {
@@ -1421,7 +1421,7 @@ QUnit.test('fieldmany2many tags email (edition)', function (assert) {
     });
 
     assert.verifySteps([[12]]);
-    assert.strictEqual(form.$('.o_field_many2manytags[name="timmy"] span.o_tag_color_0').length, 1,
+    assert.strictEqual(form.$('.o_field_many2manytags[name="timmy"] button.o_tag_color_0').length, 1,
         "should contain one tag");
 
     // add an other existing tag
@@ -1429,18 +1429,18 @@ QUnit.test('fieldmany2many tags email (edition)', function (assert) {
     $input.click(); // opens the dropdown
     $input.autocomplete('widget').find('li:first').click(); // add 'silver'
 
-    assert.strictEqual($('.modal-body.o_act_window').length, 1,
+    assert.strictEqual($('main.modal-body.o_act_window').length, 1,
         "there should be one modal opened to edit the empty email");
-    assert.strictEqual($('.modal-body.o_act_window input[name="display_name"]').val(), "silver",
-        "the opened modal should be a form view dialog with the partner_type 14");
-    assert.strictEqual($('.modal-body.o_act_window input[name="email"]').length, 1,
+    assert.strictEqual($('main.modal-body input[name="display_name"]').val(), "silver",
+        "the opened modal in edit mode should be a form view dialog with the partner_type 14");
+    assert.strictEqual($('main.modal-body input[name="email"]').length, 1,
         "there should be an email field in the modal");
 
     // set the email and save the modal (will rerender the form view)
-    $('.modal-body.o_act_window input[name="email"]').val('coucou@petite.perruche').trigger('input');
-    $('.modal-footer .btn-primary').click();
+    $('main.modal-body input[name="email"]').val('coucou@petite.perruche').trigger('input');
+    $('footer.modal-footer .btn-primary').click();
 
-    assert.strictEqual(form.$('.o_field_many2manytags[name="timmy"] span.o_tag_color_0').length, 2,
+    assert.strictEqual(form.$('.o_field_many2manytags[name="timmy"] button.o_tag_color_0').length, 2,
         "should contain the second tag");
     // should have read [14] three times: when opening the dropdown, when opening the modal, and
     // after the save
diff --git a/addons/mail/static/tests/discuss_moderation_tests.js b/addons/mail/static/tests/discuss_moderation_tests.js
index da8e8b1c68d..97ea5cb3c1d 100644
--- a/addons/mail/static/tests/discuss_moderation_tests.js
+++ b/addons/mail/static/tests/discuss_moderation_tests.js
@@ -551,7 +551,7 @@ QUnit.test('moderator: discard pending moderation message (reject without explan
         // check discard dialog prompt
         assert.strictEqual($('.modal-dialog').length, 1,
             "a dialog should be prompt to the moderator on click discard");
-        assert.strictEqual($('.modal-body').text(),
+        assert.strictEqual($('.modal-body:first').text(),
             "You are going to discard 1 message. Do you confirm the action?",
             "should warn the user on discard action");
         assert.strictEqual($('.modal-footer button').length, 2,