Tuesday, October 31, 2023

Tried a plugin for Markdown task lists. Wasn't satisfied with output accessibility. Discussed alternative outputs.

Today's Plan

Markdown Checkboxes

I would like to be able to keep track of which tasks in my past Task Ideas have been completed. I think a good way to do this would be to use a markdown task list and add a link to the daily log entry of the day when I completed the task.

Eleventy's default markdown is strict to the original markdown standard, so I need to modify it in order to use the task list feature. I'm going to try this tutorial on extending eleventy markdown.

I'm getting an error that markdownIt is not defined. It looks like the author of that blog didn't include the definition of that varibale. From the official eleventy markdown doc page, it looks like I have to require the markdown-it library and set it to that variable.

Plugin Output

With that out of the way, it is now working properly. Here is the output:

<ul class="contains-task-list">
  <li class="task-list-item">
    <input class="task-list-item-checkbox" disabled="" type="checkbox">
    This is a task.
  </li>
</ul>

I do not like this. It seems semantically mismatched to use an input field for a checked-off task. Even if it were properly accessible today (which I'm skeptical of), it wouldn't be very future-proof. Designers of tomorrow will not be thinking about clever edge cases when maintaining backwards compatability.

Unicode Instead

I want something like this:

I'm not sure about how robust the checkmark unicode symbol would be with a screen reader. Emojis and unicode can have inintended problems on screen readers. For an example, see the "Screen Readers Do Not See What You See" section of Blaming Screen Readers 🚩 x5 by Adrian Roselli, which shows some examples of cryptic, annoying social media memes that use unicode symbols for decoration.

Most relevant to my decision making today is that the emoji 🚩 is not read as "red flag emoji", but as "triangular flag on post". When unicode symbols are used in a way that doesn't match their semantic meaning, screen readers may say something completely irrelevant.

This has motivated me to use the "check mark" unicode symbol ✓ instead of the "ballot box check" ☑. After trying it, I do think that it's nicer looking to use unboxed checkmarks on completed tasks, and nothing on uncompleted tasks. There's less visual clutter.

Unicode with Aria

If I really wanted the ballot box check, there are options to try. I've seen some workarounds including the example from this article on accessible emoji in email:

We <span role="img" aria-label="love">❤️</span> email!

which makes the heart say "love" as intended, instead of "red heart".

Another approach would be to completely hide the ballot box check from the screen reader using aria-hidden. The article mentioned above about emails has a great example of this:

We <span aria-hidden="true">👏</span>
love <span aria-hidden="true">👏</span>
email! <span aria-hidden="true">👏</span>

Adding Redundancy with Plain Text

If applying this to my task list application, I would try something like the following:

<ul class="task-list">
  <li class="checked">
    <span aria-hidden="true">&check;</span>
    This is a task.
    <a href=2023-10-31>Completed 2023-10-31</a>
  </li>
  <li>
    This is a task I didn't finish.
  </li>
</ul>
The checkmark will not be read aloud. However I have added a link "Completed 2023-10-31". This achieves three things:
  1. Reads clearly on a screen reader, so the unicode checkmark does not need to communicate the information.
  2. Could remove ambiguity for sighted readers. This is especially important for readers with cognitive or learning disabilities.
  3. Is an opportunity to add additional helpful information for everyone. Having a date and a link to the post where I discuss completing the task could be very helpful for someone who wants to know how I solved a problem.

I want to keep the checkmark because it helps with skimming.

Keeping HTML Clean with CSS ::before

Using the CSS pseudo-object ::before, it's possible to keep the checkmark entirely out of the HTML. It can be drawn before every object that has the "checked" class.

<ul class="task-list">
  <li class="checked">
    This is a task.
    <a href=2023-10-31>Completed 2023-10-31</a>
  </li>
  <li>
    This is a task I didn't finish.
  </li>
</ul>

CSS:

.checked::before {
  content: "✓";
}

I like this solution. It is much easier to modify how I signify a completed task down the line than if I had the checkmark in the HTML.

Now I just have to figure out how to turn Markdown into this specific HTML... maybe I could modify the existing plugin? I wish I didn't have to learn how to do that, I'm busy!

Task Ideas