Featured blog post elements are not clickable in text based browser (lynx)

[obrien-j]

This is the extent of my investigation.

Pop open lynx (grab a cloud shell somewhere) and scroll down.

Started reading https://gdstechnology.blog.gov.uk/2016/09/19/why-we-use-progressive-enhancement-to-build-gov-uk/ and went poking around. Great read by the way.

[keywordnew]

why-we-use-progressive-enhancement-to-build-gov-uk was indeed a good read.

I'd like to help debug this. I'll:

• clone to get started locally.
• update if I find anything or get stuck.

Note, I have not debugged an issue with a non-graphical browser before. It promises to be interesting.

[obrien-j]

Thanks for the interest @chowdhurian .. Let me know if you have any troubles cloning / spinning up the repo.

[obrien-j]

Dug into this a bit more... This is likely a flaw in lynx. Works fine in elinks, another text based browser.

I'll leave open for curiosity sake, but given the links work fine in browser sans JS, I'm not overly worried.

[dsamojlenko]

I should have posted my findings here earlier - I did some testing a while back using the osx Lynx browser: http://brewformulas.org/Lynx

Lynx seems to be getting a bit confused about the structure here. These items are made up of an outer div that provides the containing element, an inner <a> tag that wraps two <div> elements, of which the second contains the date and a <h3> title element.

Lynx seems confused about two parts of this: it's finding the first nested text element and rendering it as the title of the section (we're seeing the date element rather than the heading element), and it also seems to not know what to do with the outer link element - maybe because it is an inline element that wraps two block-level elements.

This is valid markup, so it seems to be a Lynx rendering quirk.

I think to address the issue, we'd have to do a little rearranging of the markup - probably move the title up in the hierarchy, maybe render the section with inline elements.

[keywordnew]

This is valid markup, so it seems to be a Lynx rendering quirk.

As it's valid markup, might this be a known issue with Lynx' rendering? If so, maybe a fix is on the way. The Lynx project doesn't have a public issue tracker (that I could find 😅), so I've reached out to their devs to ask specifically. I've linked back to this issue.

Follow the conversation here: https://lists.gnu.org/archive/html/lynx-dev/2018-04/msg00002.html (on the page, see below the email for links to the rest of the thread)

[mirabilos]

Pretty sure “putting a <div> into an <a> tag” came up on the lynx mailing list a couple of months ago (and yes, lynx does not render the div content as link then, which, while not a bug, is a known deficiency), and no @chowdhurian that’s not valid markup, you can’t just go and put block-level elements into inline elements.

Only peeking in because this popped up on the lynx mailing list.

[obrien-j]

Thanks for the heads-up @mirabilos ... Just stumbled across this reference on SO, and Mozilla...

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a and https://stackoverflow.com/a/1828032

So you're both right?!?! (i think. i am learning web stuff as I go.)

Unless someone desperately wants to fix this, I'll close it as it doesn't really appear to be a huge issue on our side.

[mirabilos]

XHTML/1.1 also forbids (hard, via DTD) divs inside as.

It would be a small change on your side, to make your site accessible to more, so I’d not just close it.

[dsamojlenko]

We use an HTML5 doctype, so the markup is valid. We may revisit the markup in this area at some point, but it's not a priority at the moment.

[keywordnew]

lynx-devs have continued to engage with this. See email thread: https://lists.gnu.org/archive/html/lynx-dev/2018-04/msg00010.html

Excerpts:

Can you please view that link, https://digital.canada.ca/, with lynx's TAGSOUP rendering option enabled? You should be able to toggle between lynx's TagSoup and SortaSGML rendering with ^V (ctrl-V) (by default, unless it has been remapped.)

To recap: I understand your issue to be an inability to interact with certain links, examples of which can be found under "Featured Blog Posts" on the page at https://digital.canada.ca/. I have found that I can interact with those links while using lynx with TAGSOUP enabled, and wonder if that might work for you also.

@obrien-j I don't have the bandwidth to engage them right now. If you'd like to continue debugging this, I can cc you into the email thread. You can DM me your email over twitter :)

I get the impression that this could be a rendering quirk on the lynx side, so it's possible that a useful fix can come of this.