Accessible Text

Café
#1

This popped into my work inbox.
The Basics of Accessible Documents

and I wondered what we can do in TW to make our docs more accessible, best practice and all that.

3 Likes
#2

Thanks for this link. Documentation, in particular, needs this kind of care.

Most of this advice I like very much, and appreciate. I was aware that we could specify descriptions for images, but I didn’t know there’s a way to mark an image as just decorative. I think I could do better at using headings (and other semantic tags that screenreaders prefer) rather than various inline techniques designed for visual scanning.

A couple things I’m flummoxed about. In particular the “don’t merge cells in tables” advice — since following that advice can make certain information less salient for those with visual access, even if screen-readers don’t (yet?) have a good way of expressing that info.

Still, I second your call to think about tiddlywiki documentation.

There’s a website, colorblindly, that allows us to simulate how a website comes across for visitors with common forms of coloblindness: https://chromewebstore.google.com/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg

I realize I should similarly do some trials on my sites to see how they are handled by screen-reading software. :thinking: Surely some experimentation is worth more than a list of rules, especially with a platform like TiddlyWiki that has different affordances from most websites… In particular, I’m curious how well a screen-reader can cope with the internal-toc presentation structure that I use when I teach, or the tabbed panels used often in TiddlyWiki documentation.

1 Like
#3

Some links

<!DOCTYPE NETSCAPE-Bookmark-file-1>
<!-- This is an automatically generated file.
     It will be read and overwritten.
     DO NOT EDIT! -->
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<meta http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'none'; img-src data: *; object-src 'none'"></meta>
<TITLE>Bookmarks</TITLE>
<H1>Bookmarks Menu</H1>

<DL><p>
    <DT><H3 ADD_DATE="1584415214" LAST_MODIFIED="1710336516" PERSONAL_TOOLBAR_FOLDER="true">Bookmarks Toolbar</H3>
    <DL><p>
        <DT><H3 ADD_DATE="1708447688" LAST_MODIFIED="1710084472">Accessibility</H3>
        <DL><p>
            <DT><H3 ADD_DATE="1709748272" LAST_MODIFIED="1710084399">ACRT</H3>
            <DL><p>
                <DT><A HREF="https://section508coordinators.github.io/ACRT/index.html" ADD_DATE="1710084399" LAST_MODIFIED="1710084399">ACRT Home</A>
                <DT><A HREF="https://github.com/Section508Coordinators/ACRT" ADD_DATE="1710084352" LAST_MODIFIED="1710084352">GitHub - Section508Coordinators/ACRT: This repository stores files for Accessibility Conformance Reporting Tool (ACRT) tool. This tool is standalone browser based application and is used to track accessibility test results.</A>
            </DL><p>
            <DT>Executable bookmarklet/plugin: <A HREF="javascript:void((function(){andiScript=document.createElement('script');andiScript.setAttribute('src','https://www.ssa.gov/accessibility/andi/andi.js');document.body.appendChild(andiScript)})());" ADD_DATE="1696172455" LAST_MODIFIED="1710083738">ANDI</A>
            <DT><H3 ADD_DATE="1710084442" LAST_MODIFIED="1710084472">508</H3>
            <DL><p>
                <DT><A HREF="https://www.section508.gov/" ADD_DATE="1708656390" LAST_MODIFIED="1710084472" >Home | Section508.gov</A>
                <DT><A HREF="https://www.dhs.gov/508-testing" ADD_DATE="1710084422" LAST_MODIFIED="1710084455">Section 508 Testing | Homeland Security</A>
                <DT><A HREF="https://www.dhs.gov/508-training" ADD_DATE="1709747701" LAST_MODIFIED="1710084451">Section 508 Training | Homeland Security</A>
            </DL><p>
            <DT><A HREF="https://webaim.org/" ADD_DATE="1708447722" LAST_MODIFIED="1708447722" >WebAIM: Web Accessibility In Mind</A>
            <DT><A HREF="https://wave.webaim.org/" ADD_DATE="1709130443" LAST_MODIFIED="1709130443">WAVE Web Accessibility Evaluation Tools</A>
            <DT><A HREF="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG" ADD_DATE="1708447854" LAST_MODIFIED="1708447854" >Understanding the Web Content Accessibility Guidelines - Accessibility | MDN</A>
            <DT><A HREF="https://webaim.org/techniques/keyboard/" ADD_DATE="1708447707" LAST_MODIFIED="1708447707">WebAIM: Keyboard Accessibility</A>
            <DT><A HREF="https://silktide.com/tools/toolbar/" ADD_DATE="1708447765" LAST_MODIFIED="1708447765" >Accessibility Checker for Chrome - 200+ Free WCAG Checks</A>
            <DT><A HREF="https://www.w3.org/WAI/ARIA/apg/" ADD_DATE="1709215304" LAST_MODIFIED="1709215304">ARIA Authoring Practices Guide | APG | WAI | W3C</A>
            <DT><A HREF="https://www.section508.gov/sell/vpat/" ADD_DATE="1709223648" LAST_MODIFIED="1709223648" >Voluntary Product Accessibility Template (VPAT®) | Section508.gov</A>
            <DT><A HREF="https://www.section508.gov/content/guide-accessible-web-design-development/" ADD_DATE="1709215354" LAST_MODIFIED="1709215359" >Guide to Accessible Web Design &amp; Development | Section508.gov</A>
            <DT><A HREF="https://www.section508.gov/develop/web-content/" ADD_DATE="1709215383" LAST_MODIFIED="1709215383" >Developing Accessible Web Content | Section508.gov</A>
            <DT><A HREF="https://www.w3.org/WAI/test-evaluate/tools/list/" ADD_DATE="1708447751" LAST_MODIFIED="1708447751">[Draft] Web Accessibility Evaluation Tools List | Web Accessibility Initiative (WAI) | W3C</A>
            <DT><A HREF="https://universaldesign.ie/about-universal-design/the-7-principles" ADD_DATE="1709223923" LAST_MODIFIED="1709223923" >The 7 Principles - Centre for Excellence in Universal Design</A>
            <DT><A HREF="https://duckduckgo.com/?t=ffab&q=accessibility+tools&ia=web&atb=v267-1" ADD_DATE="1708447734" LAST_MODIFIED="1708447734">accessibility tools at DuckDuckGo</A>
        </DL><p>
    </DL><p>
</DL>

Because (for whatever reason :roll_eyes:) this forum doesn’t allow, .txt, .html or even .zip attachments, you’ll have to scrape it and save to HTML yourselves. It’s a dump from my bookmarks in Firefox, covers Section 508, WCAG etc.

2 Likes
#4

Really?

accessibility tools at DuckDuckGo

#5

I converted your links to markdown (using this addon) for convenience:

ACRT

javascript:void((function(){andiScript=document.createElement('script');andiScript.setAttribute('src','https://www.ssa.gov/accessibility/andi/andi.js');document.body.appendChild(andiScript)})());

508

2 Likes
#6

The first point in the linked articles: use proper heading styles. I find this difficult to adhere to in TW, tw-com is also inconsistent in this matter.

The site title in the sidebar is h1, this makes sense.
The tiddler title in view template is h2, this too makes sense.
By this logic, the highest header used in tiddler body should be h3.

The editor toolbar buttons shown by default are h1, h2, and h3, but theoretically we should only use h3, h4, h5, and so on.
TW-com uses h2 in tiddler body in HelloThere, but usually h1 in documentation tiddlers.

I usually use h2, because I find it most visually appropriate: h1 appears too large (almost or the same as tiddler title), and h3 doesn’t stand out enough. I rarely go for h3 subheading of h2, and I have never needed h4 so far.

It doesn’t matter much to me what I use as long as it looks reasonable. But for the sake of consistency and accessibility, it would be nice if there was an officially recommended consistent approach to this. The logical consequence of h1 site title and h2 tiddler title would be h3 headings in tiddler body, but this discouraged through the default choice of buttons and styling.

2 Likes
Should caption be displayed as main title?
#7

I’ve noticed this point and struggled with it, too.

In this recent thread I was picking up on that <h2>= tiddler-title standard:

1 Like
#8

There is a way to “rebalance these” that had being discussed in the past.

One thing to keep in mind that tiddlywiki is different. One could argue that a tiddler is a page, that in other html websites would have to be a separate HTML and would start and H1 again.

Using Zoom in and out is sufficient for me personally, resizing, I use H2 at the top of a tiddler but still want the capacity to have content of the size matching the title.