dmidlo/code-refactor

html/css code refactoring.

code-refactor's Issues

Update meta Title of page. It just says website

Need a way to test if slight changes were made.

Front-End Regression Testing was perfect for this project. BackstopJS along with helpful linters set up in vscode made questions go away.

search-engine-optimization.jpg has no alt text

index.html has no aria role for hero image

line 27:

going to use role=img.

because it's an image.

---

The image is rendered using css, to accomplish typical hero image behavior of allowing the image to fill its container.

since this is an image, the argument can be made that it is the hero image and therefore not unimportant and therefore should also have alt text. However, a div (as leveraged by css to place to image) will not receive alt text.

these two points could be solved in two ways;

One, refactor the hero object and its related css to use an img element instead of a div, or;
Two, use aria-label
https://www.davidmacd.com/blog/alternate-text-for-css-background-images.html

---

the davidmacd.com article also mentions that a span is best used in this case instead of a div because any of the div's contents might be obscured from screen readers. Switching div to span, but I'm expecting it to be a breaking change.

---

as expected, change to span produced failing regression test. setting display: block on hero span.

cost-management.png has no alt text

social-media-marketing.jpg has no alt text

Duplicate css code

the two regions for services and benefits reuse lots of the same code.

Redistributable bundles of content use generic div instead of article index.html

since each of these element groups could stand alone and be used elsewhere on the site and that they also contain text content, semantically they are closer to an article and farther from a div.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article

Code formatting is inconsistent. Clean it up.

Navigation list is represented by div instead of nav

stray closing image tag. index.html

index.html line <span class="seo"> has no aria role

lighthouse reports missing viewport declaration

There is no main section after the header and before the footer a11y

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main

After a million rebases to edit the commit messages...

I had no idea editing commit messages would be so involved...

After a million rebases to edit the commit messages in order to figure out the best way to get github issue tagging to display a way I like it within the github webapp's commit log; I've finally settled on beginning each commit message with:

Issue #NUM - a descriptive and concise commit message

~ or ~

PR #NUM - a descriptive and concise commit message

This issue will remain open forevermore to remind me that rebasing a million times makes issue history r within this selfsame web app insanely cluttered. I guess rebase gives new hashes????

I deeply apologize to anyone who clicks on any of these issues. Thankfully, any of the commit hashes will lead to the same code and the timestamps within the commit log show the oldest and therefore the original time of commit.

meets accessibility standards

Does the site meet a11y standards?

online-reputation-management.jpg has no alt text

footer element uses generic div instead of semantic markup

lead-generation.png has no alt text

brand-awareness.png has no alt text

Screen Reader Testing shows duplicate descriptions with service and benefits sections

div with class .header is not using a semantic element

Lighthouse reports poor contrast ratio

There is three different colors of blue used.

the content and benefits elements use a generic div

they are sections. I considered using an aside for the benefits section because of its vertical column, but such presentation issues are the domain of CSS and have nothing to do with the meaning of the document in this case. A designer may change the layout, and the semantics will still be valid here.

---

another error came up after this change that points to the proper solution. The w3c validator extension for vscode reports the warning:
"Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections."

This, along with previous research; points to the idea that in order to be a section instead of a div, an element probably should have user-visible content as immediate children and not simply other component elements.

To be most compliant, without triggering any a11y warnings, the solution to the use of divs here is to use the wia-aria role="region" attribute on the divs. Since region is an aria landmark, and two of them are in use, an aria-label="Example" should be applied as well.

---

Does it turn out that this page makes no use of a section element? yep, in every place I started with a section, but once applying the w3c rule that sections should have a h1-h6 element as a direct child to be semantically sound and that articles, and NOT sections, define a bound around redistributability, it became clear that divs still have their place as a generic element.

The only place that almost became a section was the main element. Thereto main was more specific, well... and it's quite clear that main should occupy the empty space between a header and footer element. In your code editor (think code readability), you can then collapse this layout's code to focus on just the header, footer, or main code.