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

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.
* [FIX] Update some title attributes for a11y.
* [IMP] Add aria-labels
* [IMP] aria-hidden means hidden. Fix all bad aria-hidden and hide aria-hidden for all.
* [IMP] Color names on kanban views
* [IMP] Add 'alt' attribute on 'img' tags
* [IMP] Add aria-label and title on icons.
* [IMP] Add dialog role on modals.
* [IMP] Remove wrong aria-labelledby
* [IMP] Add menu role on dropdowns
* [IMP] Buttons must be focusable
* [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 role on alerts
* [IMP] Add role="button" on simili buttons
* [IMP] Use dialog role, header, main and footer tags for modals
* [FIX] Set all tabs aria-selected since we don't have proper script to set the attribute correctly.
* [IMP] Add widget, navigation or img role to aria-labelled items

report/sale_coupon_report_templates.xml

@@ -52,11 +52,11 @@
                                     <strong t-esc="o.program_id.rule_minimum_amount" t-options="{'widget': 'monetary', 'display_currency': o.program_id.currency_id}"/>
                                 </h4>
                                 <br/>
-                                <img t-att-src="'/report/barcode/Code128/%s' % o.code"/>
+                                <img alt="Barcode" t-att-src="'/report/barcode/Code128/%s' % o.code"/>
                                 <br/>
                                 <div class="mt64">
                                     <div class="col-xs-6 text-right">
-                                    <img t-att-src="'/logo?company=%d' % (o.program_id.company_id)" t-att-alt="'%s' % (o.program_id.company_id.name)" style="border:0px solid transparent; height: 50; width: 200px;" height="50"/>
+                                    <img alt="Logo" t-att-src="'/logo?company=%d' % (o.program_id.company_id)" t-att-alt="'%s' % (o.program_id.company_id.name)" style="border:0px solid transparent; height: 50; width: 200px;" height="50"/>
                                     </div>
                                     <div class="col-xs-6 text-left">
                                         <span t-field="o.program_id.company_id.partner_id"

views/sale_coupon_program_views.xml

@@ -105,7 +105,7 @@
                 <label for="validity_duration" string="Validity Duration"/>
                 <div>
                     <field name="validity_duration" class="oe_inline"/>
-                    <label string=" Days" class="oe_inline"/><span class="oe_grey">if 0, infinite use</span>
+                    <span class="o_form_label oe_inline"> Days</span> <span class="oe_grey">if 0, infinite use</span>
                 </div>
             </xpath>
         </field>