Merge pull request #11355 from akramcodez/fix/homepage-accessibility

fix: improve homepage accessibility for screen readers

Author: cdrini

openlibrary/i18n/messages.pot

@@ -5569,11 +5569,6 @@ msgstr ""
 msgid "Browse by Subject"
 msgstr ""
 
-#: home/categories.html
-#, python-format
-msgid "browse %(subject)s books"
-msgstr ""
-
 #: home/categories.html
 #, python-format
 msgid "%(count)s Book"

openlibrary/templates/home/about.html

@@ -7,16 +7,18 @@ <h2>$_('About the Project')</h2>
 
   <div id="home-about">
     <div id="home-about-mission">
-      <h3 id="home-about-mission-tldr">
+      <p id="home-about-mission-tldr">
         $_("Open Library is an open, editable library catalog, building towards a web page for every book ever published.")
         <a href="/about" class="small sansserif">$_("More")</a>
-      </h3>
+      </p>
       <p id="home-about-mission-desc">
         $:_('Just like Wikipedia, you can contribute new information or corrections to the catalog. You can browse by <a href="/subjects">subjects</a>, <a href="/authors">authors</a> or <a href="/lists">lists</a> members have created. If you love books, why not help build a library?')
       </p>
     </div>
     <div class="home-resource-section">
-      <h3 class="collapse"><a href="https://blog.openlibrary.org/" class="header">$_('Latest Blog Posts')</a></h3>
+      <h3 class="collapse">
+        <a href="https://blog.openlibrary.org/" class="header">$_('Latest Blog Posts')</a>
+      </h3>
       <ul id="olBlog">
         $if blog_posts:
           $for post in blog_posts[:3]:

openlibrary/templates/home/categories.html

@@ -19,7 +19,7 @@ <h2 class="home-h2"><a href="/subjects">$_('Browse by Subject')</a></h2>
                 <img class="category-img" src="/static/images/categories/$(icon).svg"
                     width="30" height="30"
                     loading="lazy"
-                    alt="$_('browse %(subject)s books', subject=presentable_subject_name)"/>
+                    alt=""/>
               </div>
               <p class="category-title">$presentable_subject_name</p>
               $if 'work_count' in subject:

openlibrary/templates/home/onboarding_card.html

@@ -20,6 +20,7 @@
     $data_ol_link_track
   >
     <img src="$img_src"
+      alt=""
       $# Could not set attribution in the same way as data_ol_link_track, because
       $# every other string in `attribution` became an attribute for this element.
       $if attribution:

openlibrary/templates/lib/nav_head.html

@@ -94,7 +94,7 @@
             </select>
           </label>
         </div>
-        <form class="search-bar-input" action="/search" method="get">
+        <form class="search-bar-input" action="/search" method="get" role="search">
           <input type="text" name="q" placeholder="$_('Search')" aria-label="Search" autocomplete="off">
           <input name="mode" type="checkbox" aria-hidden="true" aria-label="Search checkbox" checked="checked" value="" id="ftokenstop" class="hidden instantsearch-mode">
           <input type="submit" value="" class="search-bar-submit" aria-label="Search submit">

openlibrary/templates/site/body.html

@@ -22,7 +22,7 @@
     $:render_template("site/alert")
     $:render_template("lib/nav_head", None)
   $# don't render test-body-mobile for iframes
-  <div $:('id="test-body-mobile"' if show_ol_shell else '')>
+  <main $:('id="test-body-mobile"' if show_ol_shell else '')>
     $if show_ol_shell:
       $#print errors (hidden by default as styles are loaded via JS)
       <div class="flash-messages">
@@ -37,4 +37,4 @@
       $if announcement and cookie_name:
         $:render_template('site/banner', announcement, cookie_name, cookie_duration_days=30)
     $:page
-  </div>
+  </main>