Hi,
This looks interesting. I've installed tamper monkey along with the script.
How do I launch it,
Thanks,
David.
-----Original Message-----
From: program-l-bounce@xxxxxxxxxxxxx <program-l-bounce@xxxxxxxxxxxxx> On Behalf
Of Yannick Daniel Youalé
Sent: 13 June 2019 23:30
To: program-l@xxxxxxxxxxxxx
Subject: [program-l] Re: Using CSS Without Sight
Hi,
To help blind developpers know the structure and the layout of web page he
builds or he visits, I have develop two web scripts.
They should be imported in the web browser via grease monkey or tamper monkey.
The first script is named HTMLDevelopAccessibility and can be find with its
tutorial on this page:
https://www.stsolution.org/HTMLDevelopAccessibility/
The second one is the WebAccessibilizer and can be find here:
https://www.stsolution.org/WebAccessibilizer/
When they are installed, For both of them, the principle is simple.
1. you bring the focus on an element of the page
2. you call the window automatically generated by the script by making:
Ctrl+f2 for the HTMLDevelopAccessibility
or Ctrl+Shift+f2 for the web accessibilizer;
3. you will be then focussed on a treeview control containing all element of
the current web page
The element previously selected in the page should then has its node selected
in the treeview.
But know however that you can browse the other elements of the treeview with
arrow keys.
Now the most interesting part. The one that will probably help you solve your
problem.
For each element in this treeview you can use a shortcut to make the vocal
synthesis say some informations.
For example:
* b = say the borders of the current selected node
* c = say the colors (background and text) of the current selected node
* d = say the dimensions (width and height) of the current selected node
* f = say the font family in the current selected node;
* m = say the margins in the current selected node
* n = say the type, name, ID, and class of the current selected node
* n pressed two times quickly = show the type, name, ID, and class of the
current selected node in a prompt dialog in order to be copied;
* p = say the absolute positions (left and top) of the current selected node
* t = say the inner text in the current selected node
* t pressed two times quickly = show the inner text of the current selected
node in a prompt dialog in order to be copied;
* h = say the inner HTML code in the current selected node;
* h pressed two times quickly = show the inner html code of the current
selected node in a prompt dialog in order to be copied;
* enter = show the current node description in a prompt dialog in order to be
copied
Also note that you can move quickly between the nodes of the treeview by
pressing these keys:
* shift+f = open a search dialog to find a node by its reference
* alt+f = open a search dialog to find a node by the text it contains
* f3 = search the next node with the criteria given in the search dialog;
* Ctrl+home = go to the first node of the treeview. it is always the body tag;
* home = go to the first sibling in the treeview
* end = go to the last sibling in the treeview
Also know that colors are not only given by their rgb or hexadecimal code but
also by their english names.
As you can see, a blind web developper can quite well use this fields to study
a web page.
I don't use flex element myself, but these scripts could definatly help you
know how they look as result in web pages.
Feel free to ask more !
Yannick Youalé
From Cameroon, in central Africa
2019-06-13 21:30 UTC+01:00, Jim Homme <jhomme@xxxxxxxxxxxxxxxxx>:
Hi,** To leave the list, click on the immediately-following link:-
I can code my own CSS, but check this out.
https://www.bookshare.org/browse/book/1642432
https://www.bookshare.org/browse/book/2481103
And especially
https://www.bookshare.org/browse/book/1979314
Jim
==========
Jim Homme
Digital Accessibility
Bender Consulting Services
412-787-8567
https://www.benderconsult.com/our%20services/hightest-accessible-techn
ology-solutions
From: program-l-bounce@xxxxxxxxxxxxx <program-l-bounce@xxxxxxxxxxxxx>
On Behalf Of Bryan Schulz
Sent: Thursday, June 13, 2019 2:04 PM
To: program-l@xxxxxxxxxxxxx
Subject: [program-l] Re: Using CSS Without Sight
Hi,
Are you saying you don’t code your own css file?
Could you explain more about those?
Bryan
From: program-l-bounce@xxxxxxxxxxxxx <program-l-bounce@xxxxxxxxxxxxx>
On Behalf Of Jim Homme
Sent: Thursday, June 13, 2019 12:40 PM
To: program-l@xxxxxxxxxxxxx
Subject: [program-l] Re: Using CSS Without Sight
Hi All,
You can do CSS without having to see. It is all related to math.
Instead of doing your own CSS, though, it would be a good idea to use
and learn a library such as CSS Grid or Bootstrap. Learning the
correct classes to use among other things allows you to have a good
chance that your stuff will look OK.
Thanks.
Jim
==========
Jim Homme
Digital Accessibility
Bender Consulting Services
412-787-8567
https://www.benderconsult.com/our%20services/hightest-accessible-techn
ology-solutions
From:
program-l-bounce@xxxxxxxxxxxxx<mailto:program-l-bounce@xxxxxxxxxxxxx>
<program-l-bounce@xxxxxxxxxxxxx<mailto:program-l-bounce@xxxxxxxxxxxxx>
On Behalf Of jacob krugerSent: Thursday, June 13, 2019 7:14 AM
To: program-l@xxxxxxxxxxxxx<mailto:program-l@xxxxxxxxxxxxx>
Subject: [program-l] Re: Using CSS Without Sight
Here's the w3schools.com page explaining flex-box, but, it relies on
CSS properties relating to contents of the container assigned the
flex-box class, etc.:
https://www.w3schools.com/css/css3_flexbox.asp
And, besides that, while have never even considered flex-box before,
css generally relates to look/feel, with things like colouring,
font-family, sizing, bordering, colours, etc. - silly example is NVDA
tells me the formatting of the text I am typing in this message has
the following style
information: Calibri 13pt black on white baseline align default.
Stay well
Jacob Kruger
Blind Biker
"Resistance is futile...but, acceptance is versatile..."
On 2019-06-10 10:02 PM, Lanie Molinar wrote:
Hi, everyone. I'm sending this to several lists and hoping someone
might be able to help me. I'm learning HTML and CSS through
FreeCodeCamp<https://www.freecodecamp.org>, and I'm doing great with
the HTML part, but I only got through the parts teaching basic CSS and
applied visual design because the exercises told me exactly what to
do. Now, I'm working on the projects at the end of the HTML and CSS
sections for practice, and each one has user stories, certain tests
you have to complete to pass the project. I got through the first two
with no CSS, but the one I'm working on now, located
here<https://learn.freecodecamp.org/responsive-web-design/responsive-w
eb-design-projects/build-a-product-landing-page/>,
requires CSS to pass. I could probably write up some CSS, but once I
get there, I have no idea where in my project to put it or what
properties to use. Specifically, this project requires CSS flexbox.
From what I can tell, there's no way to pass this project without
using CSS since it won't pass all the automated tests. Has anyone been
able to learn and use CSS without sight, and if so, do you have any tips or
suggestions that might help me?
Thanks.
________________________________
[Image removed by sender. AVG
logo]<https://www.avg.com/internet-security>
This email has been checked for viruses by AVG antivirus software.
www.avg.com<https://www.avg.com/internet-security>
