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 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