Lewis Wood Drop Examples Content Section

This does it the old style under the hood using javascript & manually notifying the screen reader. A super simple way is: <details><summary>My Heading</summary> bunch of text.</details> Enjoy and Happy coding.

In This tutorial I will demonstrate coding tips and techniques oriented towards blind developers. This will also show the world How blind developers can succeed in full stack development tasks.

The drop buttons (Accordions) I place within "drop panels" but, in reality, they can be placed anywhere. See the detailed instructions for a list of how to develop the drop panels from scratch.

Click on one of the following links to reload the debug console inyour preferred startup mode:

*Note: Non-screen reader users running Windows 10+ May want to do the following to get the full experience of a blind developer:

You can enable the built in Windows screen reader (Narrator) by pressing (control+windows+enter). This keystroke is a toggle.
Silence speech output by pressing the control key.

Drop Template Sample

How to ... implement

This is a small training project. I've sprinkled a few debug lines throughout the project. Hopefully this will show you how you can develop your own javascrip clientside app. Sighted folks will see a debug console at the bottom. Screen reader users will hear a bunch of lines of text output from the console and they will probably want to press the ctrl key to silence the text to speech engine. You can disable the debug console in several ways.

Hopefully Google, Edge, Safari, and Firefox will add a flag to set focus on the developer console. This way we blind developers will not need to set focus just for development. Setting a flag in the console to enable talking will require some security considerations.

It's fairly easy to copy and create more drop text panels,. Even nesting them.

Step 1 Object navigation (ctrl+shift+o) Type "#drop-template" then press enter to select it from the object nav search.
If not already folded then fold it (ctrl+k, ctrl+l). Now copy the 2 folded lines.
Switch to design.html and paste with in the container.
In design.html object navigation (ctrl+shift+o) enter #design (There should only be one), press enter to select it.
Fold the design section. Then cut it out . It's easier than trying to locate all the lines.
Type "div#design-content-myValue followed by the tab key. Then press enter to be on a blank line just below the div you created.
Type in your html and review it in the browser.
Once your html is the way you want it, Object navigate by your drop id you used Then foldit and copy it.
Now switch back to your index.html and place it where you want it. Paste, Save, and you are done.
Open your browser and review it.

Resources

You can clone this repository by copying the web address @ drop-text-tutorial repository. Cloning from Git is the preferred method of development for this repository. Make sure to fork a copy of the repository first so you can more simply share any changes you make to the repository.

Perhaps you do not have git set up yet and want to get started right away. You can download this repository as a zip file @ Drop-Text-Tutorial Zip File

View Raw File Links

The index.html file is the file you are currently viewing.
The index.css file is the general css styles. This file imports the droptext.css file for droptext specific styles.
The droptext.css file holds all the drop-text css styles. This file is imported by index.css.
The droptext.js file is the javascript that gives life to the html for this dropText example.
The design.html is my staging area. Here I work out the html without a large overhead. When completed I copy it into the appropriate place in the index.html file.

Resources

You can never get too much information about the VSCode IDE. The VSCode Introduction is a really handy web site that helps you learn to utilize many of the tips and tricks that will help make your workflow more efficient. At the bottom of this site you will find more resources from Microsoft Learning Center.

I have to share this svg web site: I am a blind man who created my first two svg icons. They are simple plus and minus symbols I use for the drop buttons. I had the SVG creation process down in 15 minutes. Give the SVG creation tool a try yourself @ blindsvg.com.

Instructions: How To...

Old adage: " you can give a man a fish and feed him for a day, or teach him how to fish and feed him for life." Below you will find the steps I used to create this drop down txt component (also called an Accordion) in html as a blind developer. The CSS could use some beautification, and perhaps someday a visually oriented designer will help clean it up.

There are certain steps every developer must take in order to develop a component. That is the most important concept here. These steps can be applied to any component you develop. As a blind developer I have a few extra steps I need to take that sighted developers do not need to concern themselves with.

Detailed Instructions

Where do you begin? It's best to start simple. Start with a concept.

Step 1: Envision a concept for the component

What do you envision?

The idea for this component came from a programming RSS group. A person wanted a drop text that would drop down from a heading and back up.
How do you envision?
Have a panel that contains all of the items and data. This box would expand to reveal content within.
Heading & Icon location.
For simplicity I will contain the heading and icon on a single line at the top of the drop panel.

Step 2: Layout Your HTML

Step 2a: Create Files as Needed

Create the following files:

index.html in VSCode. Simply type "!" followed by a tab key. This will create a complete HTML file.

index.css - I like a dark background so I immediately place

                body {
                   background: black;
                       color:  yellow;
            }

Feel free to use whatever colors you desire.

The last file is drop-text.css Leave it blank for now. This file will hold your drop-text specific css settings.

Step 2b: Layout Your HTML

Here is where you will type out the relevant HTML you will need. There will be alot of div's and you, as a blind programmer, will have to keep them straight.

You will rely heavily on the keystroke "fold" (control + k, control + l). This toggles the code layout so you end up with 2 lines of folded code. This Means cutting and pasting requires you to select 2 lines and move anywhere and paste them.

I also make sure to place indentifiable attributes to the left. This way I hear what is important first when I navigate through the HTML. Example: div id="drop-r0" means to me this is a right drop panel and the 1st one at level 0.

I use emmitters to create id, class attributes and sometimes others. example: div#drop-r0.drop-panel followed by the tab key will generate the id and class for me. Less chance for typo's. I press enter to place unique content between.

With that in mind; We will need an Outer div for the drop panel, a div to keep the drop header elsements in a single line, and Inside the drop-header div we'll need to put a heading div and a button element.

A div heading will become my heading Since regular headings can be boogers with their default settings. To accomplish this I take advantage of the role=heading. I will also need an aria-level to tell screen readers what heading level this heading is. I will use css to style this myself.

The button element is contained within the drop-head to the right of the heading. Button is the control action item. It also contains an IMG element. The aria-expanded attribute of the button will determine if initially expanded or collapsed. The aria-controls attribute must be set to the drop panel id. The IMG element wil point to a file called a name with the word "collapse" or "expand" in it. This way we can simply replace the words with each other to swap the images. I will use SVG files for this.

Lastly, we'll need the drop-content div that contains the actual content that the drop down will expose when expanded and hide when collapsed. It must have the aria-hidden attribute. We will toggel the aria-hidden value from true or false to hide it from, or show it to, screen readers as well. We do not need a class to hide it, since the drop panel will resize and hide it in synchronization with the collapsed/expanded state.

Step 2c: Open in browser & the css file

Now open the index html file in a browser. Do not worry if the format is askew. Those with some eyesight will notice that the elements are all over the place and the heading and button icon are not side by side.

You should have the html file in editor group 1. Press control+1 to select that editor group. Locate the top div of the drop panel. now go to the line above it and type in a container name we will want to help design. A good size is 500px. So do the following: div.mycontainer and tab to create a div with the class mycontainer, then Press enter. the closing div will appear on the next line, cut that line . Now fold the drop panel with control+k, control+l. Now go below the folded panel and paste the cclosing div you cut earlier. Now it is in a container.

Now press control + 2 to select the editor group 2. This group will be your css group. Now in this group press control+shift + e to open the file explorer. Open the file index.css. At the top of the css file type @import "droptext.css".

After the body css add the following css: .mycontainer { width: 500px; border-style: solid; border-width: 5px; } I do the border because I have some vision and it shows me the container. I will remove the border later. The border is optional.

Now your drop panel is constrained to a smaller space. This is about the size of many smart phones, so it's a good size to contain our design.

Now open the drop-text.css file in editor group 2. Now you have 2 css files in group 2. Simply control+tab to toggle between them. You will now start defining the classes. i set the Drop-Panel width to 100%. This means that the max width possible, meaning the container will contain it for you. Later you will remove the container constraints - to give you more dynamic settings. We want the heading and button on one line, So do: .drop-head { width: 100%; display: inline-block; } This will force them to be on one line.

In order to get the heading to the left edge and the button to the right edge I used the float attribute: .drop-heading { float: left and drop-action-button { float: right; }}

The buttons contain the plus and minus images I created using an svg creator tool from Blind svg.com . I was creating SVG's within 15 minutes, and found it was fairly simple to learn. The drop-image and button will require some special SVG settings: filter: inverted(1.0) - this reverses the color and fill : none; is done on the image element. These two settings will make the image and button visible on a dark background. I set the width to 1.2rem. The rem is a root font measurement. I set the height to slightly larger than the normal font size 1.2 since I am using a heading in the same line.

Drop-content and all droptext.css settings are in my css file, So refer to those files for values.

The drop-content div will not show since it has no data, so let us create some quick data using a loremipsum trick of vsCode. Type loremipsum25 followed by the tab key within the drop-content div. Now 25 characters of latin words appear. You can use a smaller number or larger.. This is what I used for min: loremipsum150

between starting and ending paragraph tags.

Now, if you change the class of drop-panel to collapsed and drop-content is still visible to screen readers, That is why you need aria-hidden="true" to hide it from the screen reader as well. Play with it. Have someone with eyesight view it for you or use NVDA object position/coordinates to locate them.

Step 3: Start Writing Javascript

You will need VSCode open and a browser open as well for these javascript instructions. I will not go into exact detail, you can use my code as a reference.

Step 3a: Link a Javascript file and verify the file is working.

Open the droptext.js file in VSCode in editor group 3 (control + 3). then Add a few blank lines. Add Opening and closing braces and a blank line between. Now switch to editor group one where the index.html file is located.

Just above the opening body tag is the head closing tag. Add a blank line and type the following "script[src="./droptext.js"]" followed by the tab key. You should get a script tag open and closing tags. Your cursor will be in the space between the opening and closing tags. Cursor left to be inside the > symbol. type in the word defer. This tells the browser not to run this file until all resources are loaded. It also implies type="module". Now your script should be included.

Now verify the Javascript file is included by adding some html at the bottom of the html file, just above the closing body tag. Type in the following "div#testJava" followed by the tab key. Then type "JavaScript is loading..." " Now you should have a div opening tag and ending tag with the text you typed in between. Save changes and switch to your browser and view the index.html file. Go to the bottom of the page and you should have the words "JavaScript is Loading...". If not then double check your HTML.

Now switch to the droptext.js file in your editor. You should be in editor group 3 (ctrl+3). Your cursor should be on the blank line between the curly braces. Type the id you set the div in the html to: file "testJava.innerHTML = "JavaScript Loaded successfully!!!!"". Save changes and Refresh the browser (shift + f5) and find the text at the bottom. If the JavaScript loaded it should say successfully !!!! If you do not see this you have made a mistake somewhere and need to review and address it.

Step 3b: Blind users will want a Live console.

Sighted people will often open the developer console alongside their web page they are developing so they can get instant feedback on the progress of their development work. I find it essential to get this quick feedback as well. So, what I do, is make my own developer's console that is automatically read by my screen reader. Only a few minor changes and you'll be off and running with a screen reader accessible development console too.

In that div where you put the HTML code to tell you if you loaded the Javascript properly Make the following changes:

Change the div id from "testJave to "aria-status-div" - in order to be like me.
Add the atribute role="alert" - This makes the console contents come alive with screen readers.
Add the attrtribute aria-hidden="false" - This will be used later to hide from your clients when showing pages or testing layouts."
Remove test within the tags and ad the following "div#statusalert" followed by tab. This should be the id we will use for our console.
In editor group 3 of the droptext.js file, add the following at the top of the javascript file: const alertStatus = document.selector("alertStatus");
Also replace the line we had earlier between the curly braces with alertStatus.innerHTML = "We are now talking!!!"

Save changes and view it in the browser. Pres (ctrl+f5). You should hear "We are talking now" everytime you Reload (ctrl+f5) the page.

Now let us create our own console function. I called it sayAlertStatus(). So go above the opening curly braces and type "function sayAlertStatus( msg) {
alertStatus.innerHTML = msg + "<br>" + alertStatus.innerHTML; };
}".

Now replace the line in between the braces with a call to our new console Type "sayAlertStatus("I am the one talking now!!!");". Save changes and you should hear it in browser once you reload. Now you have a quick and handy way to debug and verify code is running properly. We will sprinkle this call everywhere and output it to our talking console.

Step 3c: Wire up some buttons - click event

Create a function called initializeDrop() and move the alertStatus querySelector code to this function. Change the word "Const" for alertStatus at the top of the js file to the word "let" so we can assign the fvalue later. The top of the JS file should now be "let alertStatus;". Inside of the curly braces call initializeDrop(); just above the sayAlertStatus line. Then verify your changes by saving the changes and reloading the browser. Now you should have a place to put all of your initialize code.

Replace all of the code between the curly braces with: document.addEventListener("DOMContentLoaded",(e) => { initializeDrop();})". This now will cause the browser to call this initializeDrop everytime you press f5. This makes it a good place to put a lot of code. We will no longer modify the code between the curly braces. So go to the initializeDrop function and add a sayAlertStatus("I am initializing"); and then make sure not to call the sayAlertStatus function until the alertStatus querySelector is set. It's a good practice.

You will now have multiple drop panels with drop-action-buttons on them. They all will have a name attribute. We will need an array of these buttons so that we can attach them to the click event.

Now add the following line: const btns = document.querySelectorAll(`[ name="drop-action-button]`); . This will return an array of buttons. Currently we are still developing this project so it will be an array of 1 buttton. You will needd to verify that there is data in the array if (btns) will do this check.

To add the click event Let's type btns for Each click event: (btn) => { sayAlertStatus("You clicked me!")});". Save changes and reload the browser. Locate the button you created and click it. You should hear, "You Clicked me!" Congratulations, you wired a button up.

Step 4: Error handling, navigation, & misc

Step 4a: Error Handling

You'll always have the ability to sayAlertStatus(msg to get some kind of feedback. It is so easy. Add a sayAlertStatus line, save the file, refresh your browser.

Try catch are always great at catching some of those elusive errors, So add them especially in more complex situations. The catch error you may want to send to sayAlertStatus (error.stack). so you might Then gain more meaningful information. This way when you hear it you can jump to the accessible console. The accessible console is at a Heading level 5. Arrow down from there and retrieve the line number and description.

JavaScript can be a bit of a pain. The golden rule is to write small alerts throughout your code and check if your code is acting as expected. Javascript can send you down an agonizing path if you go too deep. It is a runtime language and that is one of the drawbacks. I prefer TypeScript which does coding time error checking. That means you catch possible errors earlier and it forces you to learn good programming habits. Also, as a blind programmer, I love the completion capabilities in VSCode that seem to be more accurate in TypeScript as compared to JavaScript.

Step 4b: Navigation

I cannot emphasize how important code navigation is when developing. It would be impossible to do some of the more complex projects I have been coding without it. The HTML in this project is so large and complicated regarding navigation that it took all of my abilities and then some to complete the project.

Object navigation using screen readers is awesome. In HTML you can object navigate by ids or classes. You can enter "#drop-r02" or ".classname" or a tagname. So finding your tag is fairly easy with familiarity. css Object navigation lists all of the media selectors, so you can jump directly to them.

Brace matching (ctrl+shift+'\') help make development more simple. CSS and js files are much easier to develop when you use brace matching. Press ctrl+shift+'\' and VSCode will find matching pairs for any of the following: {}[](). It makes it much simpler to help track down those pesky "errors" where you might be missing closing syntax.

The final useful navigation/edit super handy feature is that of "folding code." Sighted people use the mouse to fold code, copy or cut the code within the folds they create, and then they can paste the miltiple folded lines of code to where they want them to be placed. This tutorial has many lines and sections of html, so, as a blind person, I utilized folding alot and it's equitably effective using a screen reader with the keyboard shortcuts I've outlined above.

Step 4c: Miscellaneous & Notes

Enhancement Considerations>

Converting drop-content into JSON content: This would make it where somebody could dynamically edit and put revised content on the fly. Why write HTML since this will limit editors? Also, markdown is so much more fluent and congruent with modern design techniques.

Markdown enhancements would have files such as "drop-r020.md" stored in a special folder like "/drop-content." Now only an editor needs to be able to edit markdown. The developer will read the md files and convert them to HTML. The HTML developer places the files into the appropriate places. This will simplify the JSON process dynamically each time a button is expanded.

The drawbacks of the above enhancements are that SEO (Search Engine Optimization) might not be able to index the content.

Key Handling

I added a windows key-up event listener in the initializeDrop() function. You use key-up, because their are too many events on key-down and the user maybe in the middle of pressing a modifier key (alt, ctrl, shift, ...). As with almost all event listeners you create, you will want to prevent default processing of that event. Otherwise, other things will happen. Sometimes that is desirable, so try it with and without. So in most cases it is e.preventDefault(); .

Drop Content I opted for

I created a seperate html file called design.html. Where I stage the contents of one drop-content and generate the content html so This way I could easily edit and format. Editors can review it as well.

Implementation of this process is as follows: The file design html I create a new div inside of the container div. This container I set to 500px, since this is the typical and optimal responsive design width. The div I create I give an id of "design-content-<custom value>". so in Object navigation I can search by "#design-content" and get a list of all of my design divs." Type: "div#design-content-msc" followed by tab. Will create <div id="design-content-misc"$gt. Now I create my content within. When done simply fold cut and paste in the drop-content div. Another advantage my screen reader handles smaller files better and are less annoying.

*** Note: you can view my last design edit by replacing the index.html with design.html and you will see it.