I have it working now. I'm unfamiliar with Tamper monkey, and had a job
launching the script, but now have it up and running.
Extremely useful.
Many thanks for your time and effort with this,
David.
-----Original Message-----
From: program-l-bounce@xxxxxxxxxxxxx <program-l-bounce@xxxxxxxxxxxxx> On Behalf
Of Yannick Daniel Youalé
Sent: 14 June 2019 18:21
To: program-l@xxxxxxxxxxxxx
Subject: [program-l] Re: Using CSS Without Sight
Hello,
This looks interesting. I've installed tamper monkey along with the script.
How do I launch it,
Hi,** To leave the list, click on the immediately-following link:-
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,or suggestions that might help me?
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-tec
hn
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-tec
hn
ology-solutions
From:
program-l-bounce@xxxxxxxxxxxxx<mailto:program-l-bounce@xxxxxxxxxxxxx
<program-l-bounce@xxxxxxxxxxxxx<mailto:program-l-bounce@xxxxxxxxxxxx
g>
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
Thanks.** To leave the list, click on the immediately-following link:-
________________________________
[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>
** [mailto:program-l-request@xxxxxxxxxxxxx?subject=unsubscribe]
** If this link doesn't work then send a message to:
** program-l-request@xxxxxxxxxxxxx
** and in the Subject line type
** unsubscribe
** For other list commands such as vacation mode, click on the
** immediately-following link:-
** [mailto:program-l-request@xxxxxxxxxxxxx?subject=faq]
** or send a message, to
** program-l-request@xxxxxxxxxxxxx with the Subject:- faq
** To leave the list, click on the immediately-following link:-
** [mailto:program-l-request@xxxxxxxxxxxxx?subject=unsubscribe]
** If this link doesn't work then send a message to:
** program-l-request@xxxxxxxxxxxxx
** and in the Subject line type
** unsubscribe
** For other list commands such as vacation mode, click on the
** immediately-following link:-
** [mailto:program-l-request@xxxxxxxxxxxxx?subject=faq]
** or send a message, to
** program-l-request@xxxxxxxxxxxxx with the Subject:- faq
