[1.11.2] - better accessibility in HTML page

CHANGELOG.md

@@ -8,6 +8,9 @@ Tyto - Littérateur
 
 # CURRENTLY IN DEV (in devel branch) !
 
+## [1.11.2]
+- better HTML code for accessibility
+
 ## [1.11.1]
 - [help article]: added div box help
 - fix meta keywords, including domain tags in HTML pages

debian/control

@@ -1,5 +1,5 @@
 Package: tyto
-Version: 1.11.1
+Version: 1.11.2
 Section: custom
 Priority: optional
 Architecture: all

src/usr/bin/tyto

@@ -1,6 +1,6 @@
 #!/usr/bin/env python3
-# version: 1.11.1
+# version: 1.11.2
-# date: 2024-01-08 1704734310
+# date: 2024-01-11 1704988389
 # Tyto - Littérateur
 
 # Copyright (C) 2023 Cyrille Louarn <echolib+tyto@a-lec.org>

src/var/lib/tyto/program/modules.py

@@ -280,11 +280,14 @@ def set_footer_raw(mod):
    # ---------------------------------- "
    footer_menu = "<!-- Links from domain configuration [WEBSITE_FOOTER] -->"
    footer_link = \
-   '\n<li class="footer_item">' + \
+   '\n<li role="listitem" class="footer_item">' + \
    '<a class="footer_item_link" href="%s" title="%s %s">%s</a>' + \
    '</li>'
    
    for key, value in domain.cf.items("WEBSITE_FOOTER"):
+      if not value:
+         continue
+
       try:
          tupvalues = ast.literal_eval(value)
          footer_menu = footer_menu + \
@@ -315,10 +318,11 @@ def set_footer_raw(mod):
    tyto_site_link = "https://tyto.echolib.re/"
    tyto_code_link = "https://forge.a-lec.org/echolib/tyto-litterateur"
    footer_tyto = \
-   '%s <a class="footer_cr_link" href="%s" title="%s">'%(
+   '%s <a role="link" class="footer_cr_link" href="%s" title="%s">'%(
    langs.site.tyto_credit, tyto_site_link, langs.site.off_website) + \
    'Tyto - Littérateur' + \
-   '</a> [<a class="footer_cr_link" href="%s" title="Tyto - Littérateur">'%tyto_code_link + \
+   '</a> [<a role="link" class="footer_cr_link" href="%s" '%tyto_code_link + \
+   'title="Tyto - Littérateur">' + \
    '%s'%langs.site.source_code + \
    '</a>]'
 
@@ -565,7 +569,7 @@ metas_raw = """
 # Header #
 #--------#
 header_raw = """
-<a id="site_link" href="/" title="%s">
+<a role="link" id="site_link" href="/" title="%s">
 <header id="header">
 <div id="header_logo">
 <img id="header_logo_image" src="%s" alt="%s">
@@ -583,12 +587,12 @@ header_raw = """
 #--------#
 navbar_html = """
 <nav id="menu" aria-labelledby="navigation-1">
-<menu id="menu_items">
+<menu role="menu" id="menu_items">
 %s
 </menu>
 </nav>
 """
-navbar_link = '<li class="menu_item">' + \
+navbar_link = '<li role="menuitem" class="menu_item">' + \
               '<a class="menu_link" href="%s" title="%s">%s</a>' + \
               '</li>'
 
@@ -597,16 +601,18 @@ navbar_link = '<li class="menu_item">' + \
 #---------#
 sidebar_html = """
 <aside id="sidebar">
-<h2 id="sidebar_title">%s</h2>
+<div id="sidebar_title">%s</div>
-<nav id="sidebar_menu" aria-labelledby="navigation-2">
+<nav role="navigation" id="sidebar_menu" aria-labelledby="navigation-2">
-<ul id="sidebar_items">
+<ul role="list" id="sidebar_items">
 %s
 </ul>
 </nav>
 </aside>
 """
 sidebar_item = """<li class="sidebar_item">
-<h3 class="sidebar_post_title"><a class="sidebar_post_link" href="%s">%s</a></h3>
+<div class="sidebar_post_title">
+<a role="link" class="sidebar_post_link" href="%s">%s</a>
+</div>
 <div class="sidebar_post_about">
 <p class="sidebar_post_about_p" title="%s -- %s, %s">%s</p>
 </div>
@@ -617,13 +623,13 @@ sidebar_item = """<li class="sidebar_item">
 #--------#
 footer_raw = """
 <footer id="footer">
-<h2 id="footer_title">%s %s</h2>
+<div id="footer_title">%s <strong>%s</strong></div>
 <div id="footer_about_menu">
 <div id="footer_about">
 %s
 </div>
 <nav id="footer_menu" aria-labelledby="navigation-3">
-<ul id="footer_items">
+<ul role="list" id="footer_items">
 %s
 </ul>
 </nav>

src/var/lib/tyto/program/page.py

@@ -180,7 +180,7 @@ template = """<!-- %s - %s (page generated by Tyto - Littérateur) -->
 <time datetime="%s">
 <header id="article_header">
 %s
-<h1 id="article_title">
+<h1 role="heading" aria-level="1" id="article_title">
 <a id="article_title_link" href="%s" title="%s -- %s, %s">%s</a>
 </h1>
 %s

src/var/lib/tyto/program/wip.py

@@ -193,11 +193,13 @@ def titles():
    
    # loop into titles: first the the longer length
    for title in sorted_titles:
+      n = int(title[1]) + 1
       line = HTMLs["title"]%(
-                   (int(title[1]) + 1),    # #"1" = h"2"...
+                   n,
+                   n,    # #"1" = h"2"...
                    titles[title], domain.web["css"], # nbr fot toc_X CSS ID
                    title[3:],                        # title without marker
-                   (int(title[1]) + 1)     # </h of marker ID>
+                   n                                 # </h of marker ID>
                    )
       
       replace_article(title, line)
@@ -257,10 +259,10 @@ def toc():
       else:  tyto_list = "%s\n%s"%(tyto_list, line)
 
    l = convert_list(tyto_list, mark_ul, mark_ol)
-   l = l.replace(">",    ' class="toc_items">', 1) # First ul> or ol>
+   l = l.replace(">",    ' role="list" class="toc_items">', 1) # First ul> or ol>
-   l = l.replace("<li>", ' <li class="toc_item">')
+   l = l.replace("<li>", ' <li role="listitem" class="toc_item">')
-   l = '<h2 class="toc_title">%s</h2>\n'%langs.site.toc + \
+   l = '<h2 role="heading" aria-level="2" class="toc_title">%s</h2>\n'%langs.site.toc + \
-       '<nav class="toc" aria-labelledby="navigation-0">\n' + \
+       '<nav role="navigation" class="toc" aria-labelledby="navigation-0">\n' + \
        '%s'%l + \
        '</nav>'
    
@@ -294,8 +296,8 @@ def lists():
          else: tyto_list = "%s\n%s"%(tyto_list, line)
 
       cl = convert_list(tyto_list, mark_ul, mark_ol)
-      cl = cl.replace(">",    ' class="%s">'%css, 1)
+      cl = cl.replace(">",    ' role="list" class="%s">'%css, 1)
-      cl = cl.replace("<li>", ' <li class="%s">'%css)
+      cl = cl.replace("<li>", ' <li role="listitem" class="%s">'%css)
    
       replace_article(l, cl)
 
@@ -793,10 +795,10 @@ def create_db():
 # HTML (generic values) #
 #-----------------------#
 HTMLs = {
-         "link"       : '<a class="%s" href="%s" title="%s">%s</a>',
+"link"       : '<a role="link" class="%s" href="%s" title="%s">%s</a>',
-         "file"       : '<a class="%s file" href="%s" title="%s">%s</a>',
+"file"       : '<a role="link" class="%s file" href="%s" title="%s">%s</a>',
 "abbr"       : '<abbr class="%s" title="%s" lang="%s">%s</abbr>',
-         "title"      : '<h%s id="toc_%s" class="%s">%s</h%s>',
+"title"      : '<h%s role="heading" aria-level="%s" id="toc_%s" class="%s">%s</h%s>',
 "toc"        : '%s <a class="toc_item_link %s" href="#toc_%s">%s</a>',
 "strongs"    : ('<strong class="%s">', "</strong>"),
 "bolds"      : ('<b class="%s">', "</b>"),
@@ -810,8 +812,8 @@ HTMLs = {
 "bquotes"    : '<blockquote class="%s"%s%s%s>%s\n%s\n%s%s</blockquote>',
 "dels"       : ('<del class="%s">', "</del>"),
 "customs"    : ('<span class="%s">', "</span>"),
-         "image"      : '<a class="%s image" href="%s">%s</a>',
+"image"      : '<a role="link" class="%s image" href="%s">%s</a>',
-         "bcodes"     : '<li class="bcode_item">' + \
+"bcodes"     : '<li role="listitem" class="bcode_item">' + \
                '<code class="bcode_code">%s</code>' + \
                "</li>",
 "hrs"        : '<hr class="%s">',

src/var/lib/tyto/tpl_files/styles.css

@@ -122,11 +122,11 @@ a.menu_link {}
  * Sidebar navbar (Website)
 */
 aside#sidebar {}
-h2#sidebar_title {}
+div#sidebar_title {}
 nav#sidebar_menu {}
 ul#sidebar_items {}
 li.sidebar_item {}
-h3.sidebar_post_title {}
+div.sidebar_post_title {}
 a.sidebar_post_link {}
 div.sidebar_post_about {}
 p.sidebar_post_about_p {}
@@ -136,7 +136,7 @@ p.sidebar_post_about_p {}
  * Footer (Website) 
 */
 footer#footer {}
-h2#footer_title {}
+div#footer_title {}
 div#footer_about_menu {}
 div#footer_about {}
 p#footer_about_p {}