Web Page Template Resource

1. Introduction Shortcuts and Overview
   

   This audio introduction will explain and describe the web page we are about to create. It will list shortcut keys to play the audio. It also explains what to look out for and what people with eyesight expect.

2. Goundation, Outer, and Canvas
   

   Every project requires a solid foundation and a web page is no exception. You need to understand the concepts of a canvas to layout your sections on. Responsive design considerations, colors and ADA Contrast ratios. Why I create an Outer Container vs just using the body tag as such. Outer container is a grid containing the centered canvas container grid.

3. Designing a Header inside a wide Banner
   

   Designing the Header with a large Banner the full width. Placing the logo and laying out the the numberous Titles, sub-titles.

4. Horizontal Navigation Bar
   

   Detail explainations on how to implement a horizontal navigation menu bar. Getting the css right, and placing them with various attributes.

5. Centering Top Section on Canvas
   

   How to properly center a rectangle area on a canvas in the center horizontally. What is a proper margins, paddings, and purpose of each to those with eyesight. Declaring a div as a region to screen readers. Making a heading element into an anchor tag.

6. Cards Section
   

   Card section is where you will place all of your primary content. This large section will have a number of cards that float on top of a canvas visually. The card section container itself is a grid and has no background. You will use a vs code trick to generate content of random words to fill them up some. You will have details summary. and some with lists.

7. Footer section
   

   Footer is a wide banner section with content centered. Will containe the same Haeader nav bar. A trademark logo and a powered by heading to screen readers. Will demonstrate how to conver a simple element into a heading. Screen readers will treat it as a heading, while people will eyesight will not see it as a heading.

Simple web pages you can easily manage with a standard text editor. There are some serious advantages to using vs Code editor or any other HTML Editor, especially lot of content on it.

When creating an HTML page it is handy to get closing tags automatically. Ability to close entire sections by the Opening and closing tags. (ctrl+k, ctrl+l) toggles/folds them to only 2 lines. Thus easier to move past them to the other sides and you know those tags were balanced since it closed. The auto attributes feature is also quite nice, for example a button element has type attributes and and a set of valid values, vs Code will allow to select the one for your needs. Same with so many others.

Navigating your code is so much easier and so many options using vs Code. Symbol naviagion is handy. (ctrl+shift+o) type a search (id, class, or tagname). You can then cursor through the provided search list and select the desired element you want.

Class viewer is a really handy feature if you organize you html by containers/divs. (ctrl+shift+".") that is (ctrl+shift+"period") launches the class viewer. Move down and open items. Example Open Body, Open outer container, open container, move down a few items and open card section (a div), then select a card details and press enter. Now you are right there in HTML simply cursor through and read it and edit it.

Both class viewer & obsymbol searching work in css files and javascript files as well. So you can quikly navigate them as well. That is why I use vs Code as my developer editor of choice. Completely accessible.

Let us talke quickly about css

CSs allows you to organize your elements visually, color them visually, and put fancy effects/transform. Some of the more advanced and fine tuning css styling will be out of the visually impaired reach. However, surprisingly many of the css features are in fact within reach. You will need to of course verify on occasion. (Do not over/abuse your friends for every minor change). You have multiple resources to allow people to help you out. Aira is a smart phone app where a professional comes on and will audio describe your page for you. Thus you will know where you need changes. You can take a screen shot and ask an AI to describe it as well. I use Aira and a family member on occasion.

Css has a display mode called grid. I like to use grid to broadly organize my content. I find it easier and easier to specifically exactly what I need. Grid works by creating a container with the display: grid; css and this is how you can give a layout for that container. The other items I generally use divs that contain the text/images/content. The grid puts them in columns the size I specify.

Theme

Themes encompass a variety of factors and it is up to you how much. Theme usually the most important is the color schema (backgrounds, forgrounds, popups colors, etc..), fonts, border styles, shadow styles, icons/images,sizing, ... There really is no limit. If it is a valid css value you can assign it to a css variable. You can even use javascript to interact with themes and do something.

Tailwind and Bootstrap encompass so much more that can be utilized in your theme.

You can have holiday themes defined. If designed correctly you can swap in and out of the company default theme anytime a holdiay happens. The stylist would design them and you can make it happen.

I use a them.css file where I define theme colors. Now this css takes advantage of Operating settings and will swap to the appropiate them based on client OS settings. I have my Windows preference set to Dark Mode. This css will detect this and pull in the dark css varariables.

What I do in my main css files I declare classes that use these css variables. Example I define a class called standard that sets background & color via the--theme-bg css variable. Here is a sample line of css.

Now in my html file I can use this standard class. Below is an vs code emmet line. simply copy it delete the last character and retype it and vs code emmet will come up. Now press the tab key followed by the enter key. This will place blank between the opening and closing div's.
div.card.standard Now you have a card container with the standard color s.

Review the themes.css & mainGen.css for how the themes work.

Color - Defining I prefer HSL

You can define colors as Named Color, Hex value, RGB, or hsl. I prefer hsl as my way of creating colors. It just makes more sense, especially as a blind person. Hsl standas for Hue, Saturation, & Luminoucity. You can add an extra value the Alpha value for transparency. Then it becomes hsla(h, s%, l%, a%)

Hue is a color wheel. The 0 degrees or 360 degrees is at the 12 o'clock position. So top of wheel is Red at 0 degrees. Green is 1/3rd or 120 degrees around the whell, Blue is 2/3rds around the wheel at 240 degrees. Saturation ispercentage of color versus grey. Thus saturation of 80% is 80% hue color and 20% of grey. Luminoucity is the amount of white added for brightness or black added for darkening. 50 percentage is the color alone and increase the value you add more white until it is all white. Go down from 50% you add black and the lower the percentage the darder. 25% dard is a really dark version of your color, much lower than that the color disappears from the human eye.

Dark Navy Blue is hsl(240, 100%, 25%)
Sky Blue is hsl(197, 71%, 73%) You can see sky blue has a hint of green it, and a little grey, and finally decent Luminoucity. This makes it easy to to create a color that is closer, or varied away. Now hue color yellow is at 60 degrees. That is green minus the blue makes yellow.

The Theme manager has a setting for all default formats outputed to the clipboard. colorOutput = "hex" | "rgb" | "hsl". So simply change in your javascript. You can also get a color from the theme manager in any format by calling the method colorToString(colorValue, optional colorOutputMode). Feel free to use it in your pages.

Theme Manager

This is not needed for a site, but is really handy for development and designing.

1. Color toggler
2. Theme editor/customizing
3. Color analyzing for Accessibility

Color toggler allows you to toggle between an unlimited number of themes. You can do a combox or listbox, with a little programming and could go directly to the color, because the theme manager allows to select a theme directly. You can put the toggler html element anywhere, just make sure you use the default id or pass the id or the htmlElement as a parameter.

Theme editor allows you to edit color pairs together and gives the color ratio following the color pickers. Pairs are automatically detected by matching prefix with (bg or fg). --dark-bg and --dark-fg, the theme name is stripped leaving fg & bg, thus a color pair. Same goes for dlg-bg & dlg-fg.

Mono colors are the colors where a pair could not be determined. I have img-bg for image background color and svg-pen for a pen color, and canvas is a background.

*** Warning all color variables must defined in the Theme manager.ts file. Later I plan to make this a an accessible property. It is a an string array of colors. This tells me what variables to search for or pay attention too.
*** warning all them names must defined as well in the source file tm.ts. Later will be easy to set from javascript.

The Theme editor you can apply the edited theme to the theme for the web page. It will switch to that theme as well.

When you like the theme simply click the copy button and it will be in your clipboard. Email it to the developer. The developer needs only copy the color definitions and overwrite the existing ones with a clipboard paste into the css file..

Ratios button will allow you to detail analyze for color ratios in your theme. Example perhaps you want to know how the dialog background is for svg icons. Perhaps you want to know if certain fonts will work on the img-bg colors Also the sighted can preview normal fonts and large fonts on various color combinations. This way you will know the ADA ratio value for each and perhaps a minor adjustment will make a difference.

• Simply paste the custom svg code as you would any html. The play button above is where I dynamically set the inner html of the button to a play or pause button.

• Dynamically change the css colors for your graphics using css variables and css classes. So your game graphics can be animated.

• Convert an svg to a multi color svg. Add frames or just animated sparkles. Or SEO text tags to your svg's.

In the svg walk through, I pull in the svg code from the dog file listed above (click it to download). Add screen reader accessessiblility (aria-label & role = "img". )

Next I replace the size and fill color with a class of svg-size & svg-fill. I also seperate and discuss the parts of the svg file layout. The dog graphics is visible to me and the app "Seeing AI".

Next I say why not a frame around this dog. The path is already defined and a whole bunch of points, I want to put a frame. Do you think I need to modify every single point in the path element? That is about 40 Answer is NO, I will just redefine the view box to allow this rectangle aound the dog.

So I do
<rect x="-2" y="-2" width="100%" height="100%" class="svg-bg" /> Place rect just above the path element. Now modify the viewbox.
viewBox="-2 -2 34 34"

When you have a web app that interacts with the client, it is critical in how you convey those status or changes. Most common way is to have a dedicated place to display a status message. Usually that is in addition to content changes (such as graphics/coloring/or font sizes, etc)). This works pretty good for those truly good sighted individuals. What about those with visual impairments and depend on screen readers to read content?

This is where planning/designing can resolve these issues and give the experience to both sighted and screen reader individuals. I like refering to cheat sheets like this one. WAI-ARIA Cheatsheet

An adventure game, such as "Hitchhikers Guide to the Galaxy" The sighted and blind both need a steps history, otherwise they will never get the babel fish to fly into their ear. Luckily back then graphics was not heard of, thus text interactions were present. Modern graphical and colorization are natural and take up less screen space. Developer must remember all that effor they went into selecting graphical is a signal they must also have a description mechanism for the screen readers as well. Relying on visual placements can be confusing to screen readers. Let us say you want key items to visually organized to the left inside a type of carousel . Screen readers may see these in a totally different order and not associate them with their function.

That is why for example I place an alt= attribute in many elements, especially my close buttons for dialogs. Visually impaired are wondering what are they closing.

The status manager aids me in encapsulation the various types of implemetations into one component.

• Quick (sm.quick("my message, Optional mirror to Polite or Alert or none) : I can mirror out the standard message to a special screen reader location. Turn quick on or off to send to screen reader.
• Polite sm.polite("A plite message") : Sends it to a special plite box and will not interrupt current speech.
• Alert sm.alert("Urgent listen up!") : Sends a message to screen reader for the screen reader to read.

Refer to lwStatus.ts under the src folder for more information. MIT licensed so feel free to modify and customize it for your own needs.

Below you will find a handfull of practices in coding standards worth noting. About the Vite Front End Development environment. Then finally my Designers a list of html files that I used to stage and pre-plan my layouts.