[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

1 files changed, 6 insertions, 6 deletions

diff --git a/addons/website/data/website_demo.xml b/addons/website/data/website_demo.xml
index cf4f9453755..dda6c96a3f6 100644
--- a/addons/website/data/website_demo.xml
+++ b/addons/website/data/website_demo.xml
@@ -97,8 +97,8 @@ response = request.website.render("website.template_partner_post", {'partner': p
                     </div>
                     <div class="form-group">
                         <div class="col-sm-offset-2 col-sm-10">
-                            <button type="submit" class="btn btn-primary">
-                                Send <span class="fa fa-long-arrow-right"/>
+                            <button type="submit" class="btn btn-primary" aria-label="Send">
+                                <span class="fa fa-suffix-long-arrow-right">Send </span>
                             </button>
                         </div>
                     </div>
@@ -151,7 +151,7 @@ response = request.render("website.template_partner_comment", {
                                   <h2>Homepage 0.0.0.0</h2>
                                   <h3>Click to customize this text</h3>
                                   <p>
-                                    <a class="btn btn-success btn-large" href="/contactus">Contact us</a>
+                                    <a role="button" class="btn btn-success btn-large" href="/contactus">Contact us</a>
                                   </p>
                                 </div>
                                 <span class="carousel-img col-md-6 hidden-sm hidden-xs"> </span>
@@ -159,10 +159,10 @@ response = request.render("website.template_partner_comment", {
                             </div>
                           </div>
                         </div>
-                        <div class="carousel-control left hidden" data-slide="prev" data-target="#myCarousel0" href="#myCarousel0" style="width: 10%">
+                        <div class="carousel-control left hidden" data-slide="prev" data-target="#myCarousel0" href="#myCarousel0" style="width: 10%" role="img" aria-label="Previous" title="Previous">
                           <i class="fa fa-chevron-left"/>
                         </div>
-                        <div class="carousel-control right hidden" data-slide="next" data-target="#myCarousel0" href="#myCarousel0" style="width: 10%">
+                        <div class="carousel-control right hidden" data-slide="next" data-target="#myCarousel0" href="#myCarousel0" style="width: 10%" role="img" aria-label="Next" title="Next">
                           <i class="fa fa-chevron-right"/>
                         </div>
                       </div>
@@ -198,7 +198,7 @@ response = request.render("website.template_partner_comment", {
                                       </div>
                                   </div>
                                   <div class="text-center mt64" name="mail_button">
-                                      <a t-attf-href="mailto:{{ res_company.email }}" class="btn btn-primary" id="o_contact_mail">Send us an email</a>
+                                      <a role="button" t-attf-href="mailto:{{ res_company.email }}" class="btn btn-primary" id="o_contact_mail">Send us an email</a>
                                   </div>
                               </div>
                               <div class="col-md-4 mb32">