Making txt2tags HTML standards-compliant
Karl Vogel
%%mtime(%a, %d %b %Y %T)
= Introduction =
I need better generated HTML in txt2tags. Ran output through tidy and
it's now standards-compliant.
NOTE: This index.htm is broken -- my CSS doesn't put the TOC at the right
like it should.
```
* needs "lang" attribute.
* Need better contrast for links -- 3:1 contrast ratio.
* No landmark elements.
```
Page top should be:
```
```
I'd also like some better META tags in the header. Maybe those could be
generated by options like --author, --desc, etc?
```
```
= Files =
- [arch.tgz arch.tgz]: all the files below.
- [Makefile Makefile]: builds the HTML files and makes the tarball for
upload to my website.
- [article-got.htm article-got.htm]: What I get when running txt2tags3.
- [article-v3.1.htm article-v3.1.htm]: What I get when running v3.1.
- [article-want.htm article-want.htm]: What I mostly want, as far as
positioning and format is concerned.
- [article.t2t article.t2t]: Used to generate the article*.htm pages. It's
part of another project, so the links mostly won't work.
- [diffs diffs]: Output from diff -Naur article-got.htm article-want.htm
- [dot-txt2tagsrc dot-txt2tagsrc]: My .txt2tagsrc file.
- [index.htm index.htm]: Generated from index.t2t
- [index.t2t index.t2t]: This file.
- [landmark-elements landmark-elements]: Short summary of landmark elements
for accessibility.
- [link-contrast.htm link-contrast.htm]: Shows desired contrast for link
accessibility.
- [txt2tags-my-try txt2tags-my-try]: My horrible attempt at changing v3.1 to
allow for HTML5 output.
- [txt2tags.css txt2tags.css]: The stylesheet I prefer for my articles.
- [txt2tags3 txt2tags3]: Your Python code.
= Landmarks =
HTML5 elements such as "main", "nav", and "aside" act as landmarks, or
special regions on the page to which screen readers and other assistive
technologies can jump. By using landmark elements, you can dramatically
improve the navigation experience on your site for users of assistive
technology. Learn more in Deque University's HTML 5 and ARIA Landmarks
(https://dequeuniversity.com/rules/axe/4.4/landmark-one-main).
Use the W3C list of landmark elements
(https://www.w3.org/WAI/ARIA/apg/example-index/landmarks/HTML5.html)
to check that each major section of your page is contained by a landmark
element. For example:
```
Put product name and logo here
Put main content here
```
You can also use tools like Microsoft's Accessibility Insights
(https://accessibilityinsights.io/) extension to visualize your page
structure and catch sections that aren't contained in landmarks:
== How to use landmarks effectively ==
- Use landmark elements to define major sections of your page instead of
relying on generic elements like
or .
- Use landmarks to convey the structure of your page. For example, the
"main" element should include all content directly related to the page's
main idea, so there should only be one per page. See MDN's summary of
content sectioning elements
(https://developer.mozilla.org/docs/Web/HTML/Element#content_sectioning)
to learn how to use each landmark.
- Use landmarks judiciously. Having too many landmarks can actually make
navigation /more/ difficult for assistive technology users because it
prevents them from easily skipping to a desired piece of content.
= Contrast examples =
```
The following 26 web-safe colors pass at 3:1 vs black and 5:1 vs. white:
#CC0000 << GOOD red Contrast Ratio = 5.89:1
#CC0033
#CC0066
#CC0099
#9900CC
#6600FF
#9900FF
#CC3300
#CC3333
#993366
#993399
#9933CC
#3333FF
#6633FF
#336600
#666600
#336633
#666633
#006666
#336666
#666666
#006699
#336699
#666699
#0066CC << GOOD blue Contrast Ratio = 5.57:1
#3366CC
```
= Current status =
I'm getting closer, but I can't get the