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: 3, Informative) by ShadowSystems on Friday March 15 2019, @10:52AM (16 children)
Simple.
Don't pull fancy tricks.
Just present the data in a flat, right out up front, unhidden, unmoving, no scripting/CSS fluff.
Just. Plain. Text. on a plain HTML page.
Consider how your site would (not) work if the only way to interact with it is to have it read aloud from beginning to end.
If you are then presented with "Same Page" links that force you to reread the entire site in order to hear that previously hidden content then you'll quickly figure out why such tricks make non sighted folks want to club you with said books.
Don't use OMO elements, just make such things an obvious, clickable Link.
Don't create elements that report themselves as "clickable" without being reported as Links.
If we use Tab to move from link to link and *don't* hear that "clickable" pseudo-link, we'll never know it's even an option until/unless we read the entire page to find that trick out.
Ignore CSS entirely; you can't count on the purpose (to define site owner desired fonts & colours) to actually be what the visitor gets.
I've used the accessibility options to disable all site defined fonts, colours, visual styles on buttons, never load images, & *try* to block auto playing audio/video elements.
So if you can't be sure it'll get used at all, better to not do all the crap trying to enforce it.
If you create a plain HTML site presenting plain text then the user can adjust contrast, colours, fonts, zoom level, & everything else they might need to make the site ledgible to them.
If *you* define what fonts, colours, sizes, zoom levels, et al, then your choices may not be THEIR needs & you've just pissed off/lost a potential customer/member.
So just write it all up as a single page of plain text with as little fluffy cruft as possible.
You can use links to update content, but don't try using scripting to do the same task; we may not allow it, we may be using a browser that doesn't support it, or we may be using an interface device (like a braille keyboard) that *can't process* the scripting at all.
The cleaner, less cruftier, "Keep It Simple, Stupid" you create the site in the first place, the better, faster, cleaner, & more accessible it'll be.
I just "love" it when I save a site as plain text, open the file, & get rewarded by a couple hundred Kb of CSS cruft wrapped around/into the actual content.
Original file size: 500Kb.
File size after ripping out all the CSS crap: 2Kb.
Size after ripping out *everything* but the actual content: LessThan 1Kb.
I know WE might not be on dial up any longer, but that doesn't mean your visitor is not thusly hindered.
"But broadband is ubiquitous!"
Not here in America it's not.
I live in a cow town that has AT&T, Comcast, & satelite options.
AT&T can only provide DSL *if* I agree to pay to upgrade their POTS copper first, otherwise even a *dial up* connection is an iffy thing.
Comcast claims they can give me 50Mbps "Blast!" service, but I have zero trust in that claim given they can't even maintain a stable 3+Mbps signal to my home.
Satelite is only an option if I can convince all my neighbors to cut down all their trees preventing me from having LOS to the horizon where the satelite is orbiting.
And I live *Down Town*, not "out in the sticks" of this cow town.
There are places that think MY options would still be an IMPROVEMENT.
=-/
So write your site in plain HTML, remember to KISS, & give the content in plain text.
It'll come across quicker, will be a barely-non-zero strain on the server spitting it out, & you won't have to worry about security holes in your code because you can read it without requiring an interpreter.
HTH.
I'm going to bed now.
I need to sleep & I'm hoping my dreams won't be about disemboweling website coders with my Red Swingline Stapler.
(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. ;)
Master of the science of the art of the science of art.
(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.
Master of the science of the art of the science of art.
(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.
Master of the science of the art of the science of art.
(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!
Master of the science of the art of the science of art.
(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.
(Score: 3, Informative) by Freeman on Friday March 15 2019, @03:29PM
Considering the blingtastic awfulness of modern websites, you're out of luck. *One of those people, who would like DSL* I moved recently, closer in to a town, but my previous fixed wireless provider couldn't find a tower that could service me. So, I'm stuck looking for a decent ISP that doesn't want to charge me a $300 installation fee. I barely get 1 or 2 bars of 4G service and end up with really high ping for whatever reason on my hotspot. Which isn't a real option as blowing through 3GB of data last night showed. The stupendously sad part of the tale is that I live next door to my in-laws, who get DSL. AT&T tells me I can't get it, though. A whole 30 feet or so is too much for them.
Joshua 1:9 "Be strong and of a good courage; be not afraid, neither be thou dismayed: for the Lord thy God is with thee"