SoylentNews is people
SoylentNews
WebAIM issued a report last month analyzing the top one million home pages for accessibility and web designers Eric W Bailey and Ethan Marcotte each take separate, hard looks at it because it is indicating a very sad state. The report noted all kinds of problems, even including throwbacks like using tables for layout with 2,099,665 layout tables detected versus only 113,737 data tables out of 168,000,000 data points. Web designers, old and new, are largely failing in simple matters that were, or should have been, covered in Web Design 101.
Ethan includes in his summary:
Those are just a few items that stuck with me. Actually, “haunted” might be a better word: this is one of the more depressing things I’ve read in some time. Organizations like WebAIM have, alongside countless other non-profits and accessibility advocates, been showing us how we could make the web live up to its promise as a truly universal medium, one that could be accessed by anyone, anywhere, regardless of ability or need. And we failed.
I say we quite deliberately. This is on us: on you, and on me. And, look, I realize it may sting to read that. Hell, my work is constantly done under deadline, the way I work seems to change every
yearmonth, and it can feel hard to find the time to learn more about accessibility. And maybe you feel the same way. But the fact remains that we’ve created a web that’s actively excluding people, and at a vast, terrible scale. We need to meditate on that.
Eric also followed the WebAIM report closely:
Digital accessibility is a niche practice. That’s not a value judgement, it’s just the way things are. Again, it’s hard to fault someone for creating an inaccessible experience if they simply haven’t learned the concept exists.
And yet, seventy percent of websites are non-compliant. It’s a shocking statistic. What if I told you that seventy percent of all bridges were structurally unsound?
(Score: 2) by FatPhil on Friday March 15 2019, @12:29PM (14 children)
Annoyingly, after reading lots of HTML and CSS specs, I was sure that came up with a CSS method to do the hiding that I required, all a reader would encounter would be a checkbox for each paragraph, and then the block of text, for example, enhancing:
<tr> <td>thing 2 </td> <td> <p>paragraph for thing 2 </p> </td> </tr>
to:
<tr> <td>thing 2 </td> <td> <input type="checkbox" name="para-truncator-2" style="display:hidden"> <p class="truncatable">paragraph for thing 2</p> </td> </tr>
That should't perturb a screen-reader too much, if at all, should it?
Alas due to some corner case weirdness, I couldn't get any gui browser to do the right thing. So at the moment I've fallen back onto splitting the paragraph into the always-visible part, and the CSS-hidable part. There were apparently solutions to this problem that looked like they were browser-specific, or generally hackish, so I avoided them like the plague. I'm not after cludges, I'm after clean solutions.
Great minds discuss ideas; average minds discuss events; small minds discuss people; the smallest discuss themselves
(Score: 2) by acid andy on Friday March 15 2019, @01:08PM (6 children)
How about keeping the HTML clean and having a separate Javascript file that shrinks the size of a div containing the paragraph text (with appropriate CSS to truncate overflow) and attaches a click event to a small button image which regrows the div and turns off text truncation when clicked. That way, if Javascript is disabled, there won't be any unusual markup except for the button and the whole paragraph should be there in full. Just a thought, although I can understand why you might want to avoid Javascript like the plague. ;)
If a cat has kittens, does a rat have rittens, a bat bittens and a mat mittens?
(Score: 2) by FatPhil on Sunday March 17 2019, @02:13PM (5 children)
Great minds discuss ideas; average minds discuss events; small minds discuss people; the smallest discuss themselves
(Score: 2) by acid andy on Sunday March 17 2019, @03:21PM (4 children)
You can truncate a table (at least in a browser that's not from the Stone Age) as long as you put it inside a div (or other block element) and apply "overflow: hidden" to that div with a width and height specified:
<p>Here is a truncated div:</p>
<div style="overflow:hidden;width:300px;height:90px;border:1px solid black;display:inline-block;">
<p>Here is some text before a table.</p>
<table>
<tr><th>Heading 1</th><th>Heading 2</th><th>Heading 3</th></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
</table>
<p>Here is some text after a table.</p>
</div>
<p>Here is some text after the truncated div</p>
Whether that qualifies as "disgusting hoops" is a matter of perspective.
I put the CSS in a style attribute for simplicity but in practice it would go in the style sheet and only be applied by the Javascript I mentioned in my previous post. That way the markup would remain clean for anyone with Javascript disabled.
Lameness filter encountered. What an exceedingly useful and fine example of the art and science of software engineering our darling lameness filter most certainly is. Oh, how I love it. Oh, how I pine when it does not show itself upon my click of Submit.
If a cat has kittens, does a rat have rittens, a bat bittens and a mat mittens?
(Score: 2) by FatPhil on Monday March 18 2019, @06:43PM (3 children)
Great minds discuss ideas; average minds discuss events; small minds discuss people; the smallest discuss themselves
(Score: 2) by acid andy on Monday March 18 2019, @07:56PM
Normally the overflowing part of the div that was hidden (including part of an oversized table) should show up as soon as you programmatically increase the height of the containing div (I just tried it on the example I gave you, changing the height in the browser's developer console). This design pattern is used loads on the web, often referred to as an "accordion". The caveat is that it's usually done with fixed sizes specified in pixels.
Yeah, once you start trying to auto-size elements it gets a lot more unpredictable / clunky. Which is a shame because I hate most fixed-width websites.
If a cat has kittens, does a rat have rittens, a bat bittens and a mat mittens?
(Score: 2) by acid andy on Monday March 18 2019, @08:11PM (1 child)
Ah yeah, so you need the actual table cells to resize individually? My gut feeling is that that would require something really messy like rebuilding the whole table with Javascript or even worse doing the whole thing with a grid of divs instead of table cells maybe even swapping in a hidden copy which is so ghastly I think ShadowSystems would have every right to beat me to a pulp! I think I get the problem now!
If a cat has kittens, does a rat have rittens, a bat bittens and a mat mittens?
(Score: 2) by FatPhil on Tuesday March 19 2019, @09:14AM
Great minds discuss ideas; average minds discuss events; small minds discuss people; the smallest discuss themselves
(Score: 0) by Anonymous Coward on Friday March 15 2019, @02:09PM
I don't want to say you are missing the point, but you are fixing something that isn't broke by the means of breaking what doesn't need fixing. It will work for you, but not for the intents nor reasonings you are hoping for.
It could very well be that the tools used to help scrape websites need to be more aware, but that the makers of such tools are not doing so. They are very behind, and the internet will keep advancing.
(Score: 3, Informative) by ShadowSystems on Friday March 15 2019, @04:14PM (1 child)
You call it "enhancement", assistive tech interfaces call it a right pain in the ass.
Why bother hiding/truncating it at all?
That's just a fancy visual trick to make the content look a specific way, a way that doesn't translate to a non visual interface.
Think of a sheet of binder paper.
You can't hide the text without resorting to using "invisible" inks.
If you want someone to be able to read what you've written, you have to put it in the open without obfuscating it.
Ditto with a web page.
If you want us to read it, don't try to hide it.
That just pisses folks off & makes it that much more likely we will go somewhere else.
If a newspaper presented content by hiding it, how well do you think that will go over with an audience whose time is valuable, in short supply, & aren't too keen to having to read the (paper/site) multiple times before they get all the content they expected to get the first time?
Don't hide anything.
You call it the lowest common denominator as if that were a bad thing.
You sneer at the LCD, but the LCD is what gets read when your CSS/scripting efforts fail.
Personally I'd love a browser that ignored CSS & scripting of all kinds, just presenting the plain text.
If a site doesn't work at that point then I can be sure the coder(s) weren't worth the oxygen they wasted creating the site.
The more code you use to present your content, the larger the page in Kb, the longer it takes to send to the visitor, the more strain on the server, & the more likely you'll include a security hole in there somewhere.
Do yourself (and everyone) a favour by just KISS.
Smaller, lighter, less crufty, more secure, works everywhere for everyone.
What's not to like?
(Score: 2) by FatPhil on Sunday March 17 2019, @02:19PM
Because I want a summary of as many things on screen on my phone as will fit, but with instant access to the expanded content if I wish to expand it.
Your argument seems to be nothing more than "your requirements are wrong". That is the height of arrogance. My requirements are my requirements, which are also those of my visually-impaired girlfriend, who typically uses a console-based non-JS browser. That is an immutible fact.
Your "don't have those requirements" simply doesn't wash.
Great minds discuss ideas; average minds discuss events; small minds discuss people; the smallest discuss themselves
(Score: 2) by The Mighty Buzzard on Saturday March 16 2019, @04:18AM (2 children)
Shouldn't you be using divs for non-tabular data layout rather than tables? Says a dev of this website that has an unholy mix of both...
My rights don't end where your fear begins.
(Score: 2) by FatPhil on Sunday March 17 2019, @02:22PM (1 child)
Great minds discuss ideas; average minds discuss events; small minds discuss people; the smallest discuss themselves
(Score: 2) by The Mighty Buzzard on Sunday March 17 2019, @02:40PM
Good man then. It's an enormous pain in the ass to have to maintain a fucked up, inappropriately used mixture of the two like we have here.
My rights don't end where your fear begins.
(Score: 2) by The Mighty Buzzard on Saturday March 16 2019, @04:20AM
Oh, and have a look at the + and - in the title bar of your comment above in source. Sounds like it should be easily adaptable to what you're trying to do.
My rights don't end where your fear begins.