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-technology-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-technology-solutions
From: program-l-bounce@xxxxxxxxxxxxx<mailto:program-l-bounce@xxxxxxxxxxxxx>
<program-l-bounce@xxxxxxxxxxxxx<mailto:program-l-bounce@xxxxxxxxxxxxx>> On
Behalf Of jacob kruger
Sent: 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-web-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>
