[1.11.2] - better accessibility in HTML page

This commit is contained in:
Cyrille L 2024-01-11 17:37:59 +01:00
parent b296223ec7
commit 3046899ae9
7 changed files with 68 additions and 57 deletions

View File

@ -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

2
debian/control vendored
View File

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

View File

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

View File

@ -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>
<nav id="sidebar_menu" aria-labelledby="navigation-2">
<ul id="sidebar_items">
<div id="sidebar_title">%s</div>
<nav role="navigation" id="sidebar_menu" aria-labelledby="navigation-2">
<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>

View File

@ -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

View File

@ -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>
title[3:], # title without marker
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("<li>", ' <li class="toc_item">')
l = '<h2 class="toc_title">%s</h2>\n'%langs.site.toc + \
'<nav class="toc" aria-labelledby="navigation-0">\n' + \
l = l.replace(">", ' role="list" class="toc_items">', 1) # First ul> or ol>
l = l.replace("<li>", ' <li role="listitem" class="toc_item">')
l = '<h2 role="heading" aria-level="2" class="toc_title">%s</h2>\n'%langs.site.toc + \
'<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("<li>", ' <li class="%s">'%css)
cl = cl.replace(">", ' role="list" class="%s">'%css, 1)
cl = cl.replace("<li>", ' <li role="listitem" class="%s">'%css)
replace_article(l, cl)
@ -793,30 +795,30 @@ def create_db():
# HTML (generic values) #
#-----------------------#
HTMLs = {
"link" : '<a class="%s" href="%s" title="%s">%s</a>',
"file" : '<a 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>',
"toc" : '%s <a class="toc_item_link %s" href="#toc_%s">%s</a>',
"strongs" : ('<strong class="%s">', "</strong>"),
"bolds" : ('<b class="%s">', "</b>"),
"underlines" : ('<u class="%s">', "</u>"),
"emphasis" : ('<em class="%s">', "</em>"),
"italics" : ('<i class="%s">', "</i>"),
"quotes" : ('<q class="%s">', "</q>"),
"cites" : ('<cite class="%s">', "</cite>"),
"icodes" : ('<code class="%s">', "</code>"),
"anc_links" : ('<a class="%s" href="#%s">', "</a>"),
"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>',
"bcodes" : '<li class="bcode_item">' + \
'<code class="bcode_code">%s</code>' + \
"</li>",
"hrs" : '<hr class="%s">',
"brs" : '<br class="%s">',
}
"link" : '<a role="link" class="%s" 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 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>"),
"underlines" : ('<u class="%s">', "</u>"),
"emphasis" : ('<em class="%s">', "</em>"),
"italics" : ('<i class="%s">', "</i>"),
"quotes" : ('<q class="%s">', "</q>"),
"cites" : ('<cite class="%s">', "</cite>"),
"icodes" : ('<code class="%s">', "</code>"),
"anc_links" : ('<a class="%s" href="#%s">', "</a>"),
"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 role="link" class="%s image" href="%s">%s</a>',
"bcodes" : '<li role="listitem" class="bcode_item">' + \
'<code class="bcode_code">%s</code>' + \
"</li>",
"hrs" : '<hr class="%s">',
"brs" : '<br class="%s">',
}
sl_ptags = {
"divs" : ('<div class="%s">', '</div>'),

View File

@ -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 {}