I'm editing an open book available publicly available on web & also downloadable in PDF & ebook. I have a question about the accessibility of how I'm doing premises and conclusions for philosophical arguments with ordered lists <ol>. Please see this post (replies here or there welcome!)

@chendricks It's been a while, but if I remember correctly, the `<ol start="3">` code serves as a visual indicator, not something used by screenreaders. I think most screenreaders would treat that as item 1 of a 2nd list.

Also not sure how screenreaders would treat this, but putting an <hr> gives the same visual output:

<li>Assertion 1.</li>
<li>Assertion 2.</li>
<li>/∴ Assertion 3.</li>

I wish I could be more conclusive; again, that's from memory but hopefully helpful.

@foureyedsoul Thank you! We are using <hr> but then doing a new <ol> after's something one of our contributors did awhile ago and I can't recall why. I haven't tested the option you point to here. Not sure why we started assertion 3 with the "start" attribute. I'll give it a try without that and just putting the <hr> in the single list!

@foureyedsoul I just tested the above and for some reason it's not working. Something automatically puts in an </ol> tag before the <hr> and then starts a new ordered list after the <hr>. That must be why the other person had the new ordered list start at 3 because it was just starting over with a new one anyway. Not sure why that's happening!

@chendricks Are you able to modify the css? I mentioned this earlier to my partner (an actual web developer, not just an interested librarian) & she said she'd probably add a line with css, not an <hr>.

Here's a possibility:

It adds a "therefore" class to the css & applies it to any <li> you'd want a line above. This is how it'd look in basic HTML and CSS; I don't know if this approach would be complicated by the other things in your book's authoring environment.

@foureyedsoul Thank you for the suggestion! I gave it a try, and am not loving the way it looks. In the attached screen shot, there is an argument with the <hr> and then the same one with the "therefore" class. The latter clips the top of the conclusion text, and doesn't go all the way across the list item (maybe because the symbol for therefore is in LaTeX?). I've also styled the <hr> to only be partway across the page (width 40% or so, if I remember correctly).

@foureyedsoul This is a tricky issue! Not finding an easy solution so far, but happy to keep trying.

I'm learning a lot by playing around. Honestly, a little while ago I wouldn't have known anything about <hr> or much about <ol> and very little about CSS. I love the internet for just in time learning...I have a question, I do a search and find the code, and if it doesn't work I try again, and if that doesn't work I ask around. And I'm finding kind people willing to help out...thank you!

@chendricks It is tricky—and a compelling problem for my ADHD brain! 🤓

I updated that with new CSS. Does that seem suitable?

As I understand it, the line reinforces the ∴ rather than doing separate semantic work of its own. So I think it'd be best to use CSS to style those lines rather than start a second list. Even if the second list starts with a consecutive number continuing from the first, a screen reader will still treat them as two separate lists.

@chendricks Strange—I thought I had "autosave" turned on, but when I just clicked on that link, the newer version wasn't there.

So I updated the codepen again, this time with annotations. Here it is without annotations:

.therefore-version-02 {
border-top: 1px grey solid;
margin-top: 10px;
padding-top: 10px;

I'm attaching a screenshot as well, just in case that codepen site is still misbehaving somehow.

@foureyedsoul Thank you for the update! When I looked at it a day or so ago it didn't have this new version but I was out of time to reply at that point and then my attention got pulled to other things until now!

I like the option 2, which puts some nice padding between the text and the line!

We had been thinking of just doing underlining for the assertion before the conclusion; that was looking wonky with LaTeX but I got it to work. Now option 2 here provides another possibility.

@foureyedsoul I would like the horizontal line in option 2 to be shorter though (when I used html I was styling the <hr> part to have width of 15 or 40%, depending on the length of the assertion before it). Is there a way to do that in CSS?

I really, really appreciate your help here!

@chendricks You should certainly be able to do that in CSS. I just updated it again (…and checked that I actually saved 😅 by opening it in another "private" window).

I elaborated the examples to show how to specify the width using units relative to the "m" in whatever font you're using or using a % of the box the text is in.

And I really appreciate that you're making these OER texts! I'm the librarian for philosophy at our community college; I hope some of our classes eventually adopt them.

@chendricks One other thought, related to what the <ol> lists mean semantically. Is it ever likely that you'll have more than one conclusion after a set of assumptions?

If you might have Conclusion 1 through 4, it could semantically make sense to make two separate lists: one of assertions & a second related one of conclusions. But if you'll always have a single conclusion, I think it's best to have only the single list if possible.

@foureyedsoul Sorry again for my delayed reply...I can only work on this piecemeal, some days and not others.

Thank you for showing me how to do the line width in CSS! Very helpful. I'm bookmarking that code pen for later use...will it disappear?

And we will, in this book, only ever have one conclusion so separate lists won't be necessary for multiple conclusions.

Thanks again!

@foureyedsoul I'm testing it out and it's working except that if the conclusion statement is longer than the width of the line set then the conclusion statement breaks into two lines to fit the width of the horizontal line above it. One option is to have multiple classes with different line widths (what I'm trying now), though that seems a bit ad hoc--I'm changing the line widths for numerous arguments based on the conclusion length & so have a number of classes I have to make. Thoughts?

@foureyedsoul Oh wait--if I change the browser page size (as if I were on a phone or something) then the smaller horizontal lines make the conclusions break into even more lines. I'll have to make alll the horizontal lines between about 70-100% to make it so things look okay on mobile.

Still looks okay on wider browser (see screen shot).

@chendricks I totally understand about only being able to work sporadically on this!

I added a new attempt to the CSS. This one lets you declare the width separately for the separator line and for the list item's text width.

It uses a "before" statement, so you'll need to add both the lines that start with `.therefore-version-04` and `.therefore-version-04:before` to the css. But you'll only need to add `class="therefore-version-04"` to the html once, the same as before.

@chendricks As far as how long the Codepen will be visible, I think it'll be there indefinitely. I still have a couple of Codepens accessible that I made back in 2017, and I haven't touched them until I remembered about them right now and checked to see if they were still there!

I'll plan to leave this one open for you to refer to indefinitely. If Codepen gives me any warnings about it possibly becoming inaccessible, I'll try to reach out to you and let you know.

@foureyedsoul oooh, sounds useful! I will take a look as soon as I can. Thank you!

@foureyedsoul Just tried it out and it's looking good! I created a couple of different class names for different text and line widths depending on whether the argument is in word form or symbol form. Seems to be doing the trick so far! I really, really appreciate your help.

Sign in to participate in the conversation
Scholar Social

The social network of the future: No ads, no corporate surveillance, ethical design, and decentralization! Own your data with Mastodon!