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: 5, Interesting) by ShadowSystems on Friday March 15 2019, @05:26AM (20 children)
I've stopped counting the number of sites that are so badly written that they need to be Nuked & Paved.
Things like:
OnMouseOver events. Really? What if the visitor isn't using a mouse? "But it reacts to touch input!" BFG. I'm not using a touch screen device. Next?
I can *try* to interact with such elements by tricking the OS into thinking I've clicked a mouse button on it, but if the element doesn't want to then it doesn't have to react. It is a on-mouse-hover after all.
Same Page Links that aren't. I can get my 'reader to read the entire page & none of that data is anywhere to be read. Click the SPL, return to the top, tell my 'reader to re-read the page & suddenly the data is there?
That's not SamePage, that's hidden by CSS/scripting code so as to only present it if and when the SPL is clicked.
"Why is that a problem? It reveals the data after you click the link."
Because it claims to be a *Same Page Link*, as in the data is already there to be read & you just have to jump to that part of the page. It means I have to let my 'reader read the page *at least twice* before I hear said data made available to be read.
It's akin to a sighted person reading a newspaper article, finding a "Continued elsewhere on this page" note, & being forced to read the paper multiple times before the paper finally spits out the rest of the content.
Tabs inside a page. Tabbed browsing is fine, I can switch browser tabs with a simple Control+Tab in IE. Tabs *inside* the web page are not.
You can supposedly switch site tabs with a "simple" Control+Shift+Insert+M (the command my 'reader uses to "move to next element" in such a situation) but invariably winds up somewhere else on the page.
If I want to switch site tabs then I have to re-read the page until I get to the bit where the site tabs are mentioned, word-step through the site tab titles until I find the one I want to get to, hit Enter, & then let my 'reader read from there.
All so the site coder could pull a pretty visual effect of supposedly having it all on the same page that turns out to be utterly. f$*#@ing. useless. to anyone using a screen reader, braille system, or other non visual means of interaction.
To add insult to injury, it's like the SPL problem writ large.
All that data is supposedly there, you just can't get TO any of it until you click the proper site tab.
Auto playing audio/video. Stop it. Just. F$(#@*ing. Stop.
Once the audio on the page starts then I can no longer hear the audio of my 'reader. No 'reader means I can't find the page controls to mute that damned thing. This means I either let it play through like a passive victim or...
*Control+W to close the tab*
...kiss your ass goodbye. I'll find the URL of the link I just closed, go to a search engine, enter "cache: $URL" (replacing "$URL" with the actual URL), & get a plain text cache of your data.
You're lucky I can't see to drive else I'd hunt your ass down, run you over, & do doughnuts on your corpse.
"Clickable" page elements. Really? WTF? Why not just make it a LINK instead?
See my rant about OMO elements. If I'm not using a mouse nor touch screen equipped device then your "clickable" element *IS NOT*.
I can *try* to fool the element into working, but if it doesn't feel like playing then I get SFA.
Auto scrolling. Thanks, what a sweet way to f$(#@ with my 'reader.
If your auto scroll goes by faster than my 'reader can read, there's nothing left for my 'reader to do but stutter, stammer, splutter & cough like a dyslexic asthmatic with a crack problem.
I can *try* to stop it from happening by telling my browser to stop processing the page, but that often leads to incomplete data left for my 'reader to read.
Sure it stops processing the page... because it stops *loading the data*.
Data that cuts off in mid-word means I have to RE-enable the page load, let it do the damned scroll bit, & do the Stop Processing thing all over again.
Time after time after time, re-reading the page each time.
Sites with a list of check boxes that cause the site to reload/refresh the page between each box checked or unchecked.
It may only "take a few seconds" for each refresh, but if we end up checking & unchecking a handfull of boxes or more then it all adds up to MINUTES of wasted time waiting for the site to become useable once more.
I may applaud the site for having a page that doesn't use JS to do everything & thus lets me use it at all, but the auto-refresh between each check/uncheck is just a migraine.
ESPECIALLY when there is an "Apply Changes" button immediately afterwards to do just what it says.
Wait to refresh until/unless we press the button. That's what it's there for.
*Deep breath*
I'll stop there.
I'd really not like to get my ass banned for a screaming rant about stuff I can't change.
I've stopped writing letters to such site owners to tell them their sites aren't accessible; invariably I get an auto reply & a brush off.
I've stopped trying to "Name & Shame" such sites as pointless; the sighted folks can use the sites just fine so it must be a problem on my end.
I've stopped wishing that I weren't blind so I could dedicate my life to Doing The Right Thing and Making Things Better.
I've mostly stopped fantasizing about beating site owners with a printed copy of the W3C Accessibility standards & the American's with Disabilities Act lawbooks until they stop twitching.
Now I just disable all scripting (especially JS) & limit my browsing to the places where I interact with the forums, get my news, & Youtube for music.
I've given up on the future of Humanity.
The only way the accessibility will improve is if the entire World is suddenly, instantly, permanently rendered Totally Blind and forced to use their own shitty sites afterwards.
Because telling them to grab a demo copy of Jaws from Freedom Scientific and listening to their own site is a waste of breath, but *FORCING* them to pay $1K+ for a full copy & rely entirely upon it for their every computer interaction may be the only way to pound that lesson home.
And it makes me feel like utter shit for thinking that (global total blindness) would be a GOOD thing.
=-(
(Score: 0) by Anonymous Coward on Friday March 15 2019, @05:40AM
I am quite anal about alt tags and do try to keep my sites accessible. Part of this is knowing some disabled people and watching them have a hard time.
As far as disabling scripting, i go a little further. i disable scripting, images and style sheets, and in-browser media playback. Not because i am disabled, but for reasons of speed. But i notice that some of my disabled friends do the same, for some of the same reasons.
(Score: 2) by FatPhil on Friday March 15 2019, @09:53AM (17 children)
Great minds discuss ideas; average minds discuss events; small minds discuss people; the smallest discuss themselves
(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"
(Score: 0) by Anonymous Coward on Saturday March 16 2019, @02:07AM
Thank you. I will cite this rant when pitching designs.