- From: Alastair Campbell <acampbell@nomensa.com>
- Date: Thu, 20 Oct 2016 15:23:05 +0000
- To: public-low-vision-a11y-tf <public-low-vision-a11y-tf@w3.org>
Something I tried out recently…
On 15/10/2016, 23:53, "Alastair Campbell" <acampbell@nomensa.com> wrote:
Hi Wayne,
I was going to send you some of the CSS attributes I thought would help with linearisation.
I'll do a little better than that because I couldn't get it to work with CSS, so I made a JavaScript bookmarklet instead.
It is very basic at the moment, but if you create a bookmark (any page), then edit it.
Make the title "linearise" (or whatever you want) and paste this into the URL field:
javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://alastairc.ac/tests/layouts/linearise.js';})();
That adds jQuery and this script:
https://alastairc.ac/tests/layouts/linearise.js
The key bit of that is:
var layoutElements = $('a:visible, article:visible, aside:visible, div:visible, footer:visible, header:visible, main, nav:visible, p:visible, section:visible, ul:visible, ol:visible, li:visible');
$(layoutElements).css('display', 'block');
$(layoutElements).css('position', 'static');
$(layoutElements).css('float', 'none');
$(layoutElements).css('flex', 'none');
$(layoutElements).css('width', 'auto');
The :visible aspect targets elements which are currently visible, which you can't do in CSS alone.
There is lots more to do, neatralise backgrounds etc, but I was focusing on layout to start with.
I assume the project you are working on will do much more, but that's how far I got in a spare hour!
Cheers,
-Alastair
Received on Thursday, 20 October 2016 15:23:39 UTC