ACCESSIBILITY & PERFORMANCE audits using wave.webaim.org && Lighthouse (ChromeDevTools) about gradyrobbins.github.io HOT 13 OPEN

via a11yproject's github account: colorable

• Color combination contrast tester

from gradyrobbins.github.io.

First website IN THE WILD to have an accessibility tab, here

Accessibility statement for Thompson Lane Self Storage
We want everyone who visits the Thompson Lane Self Storage website to feel welcome and find the experience rewarding.

What are we doing?
To help us make the Thompson Lane Self Storage website a positive place for everyone, we've been using the Web Content Accessibility Guidelines (WCAG) 2.0. These guidelines explain how to make web content more accessible for people with disabilities, and user friendly for everyone.

The guidelines have three levels of accessibility (A, AA and AAA). We’ve chosen Level A as the target for the Thompson Lane Self Storage website.

How are we doing?
We've worked hard on the Thompson Lane Self Storage website and believe we've achieved our goal of Level A accessibility, but if you do find any problems, please get in touch.

Let us know what you think
If you enjoyed using the Thompson Lane Self Storage website, or if you had trouble with any part of it, please get in touch. We'd like to hear from you in any of the following ways:

Email us at [email protected]
Call us at (615) 259-7500

from gradyrobbins.github.io.

from gradyrobbins.github.io.

Errors:

• Linked image missing alternative text

What It Means
An image without alternative text results in an empty link.
Why It Matters
Images that are the only thing within a link must have descriptive alternative text. If an image is within a link that contains no text and that image does not provide alternative text, a screen reader has no content to present to the user regarding the function of the link.
What To Do

• Add appropriate alternative text that presents the content of the image and/or the function of the link.

from gradyrobbins.github.io.

Errors:
Empty link(s)
What It Means
A link contains no text.
Why It Matters
If a link contains no text, the function or purpose of the link will not be presented to the user. This can introduce confusion for keyboard and screen reader users.
The Algorithm... in English
An anchor element has an href attribute, but contains no text (or only spaces) and no images with alternative text.
What To Do

• Remove the empty link or provide text within the link that describes the functionality and/or target of that link.
• Empty link(s) on side nav bar fixed
• 3 Empty link(s) derived from using font-awesome icons for social media channels; used this stack overflow post to address these last 3 errors

from gradyrobbins.github.io.

Reduced 14 errors => 3 errors

from gradyrobbins.github.io.

6 X Very low contrast Errors
What It Means
Very low contrast between text and background colors.
Why It Matters
Adequate contrast of text is necessary for all users, especially users with low vision.
What To Do
Increase the contrast between the foreground (text) color and the background color. Large text (larger than 18 point or 14 point bold) does not require as much contrast as smaller text.
The Algorithm... in English
Text is present that has a contrast ratio less than 4.5:1, or large text (larger than 18 point or 14 point bold) has a contrast ratio less than 3:1. WCAG requires that page elements have both foreground AND background colors defined (or inherited) that provide sufficient contrast. When text is presented over a background image, the text must have a background color defined (typically in CSS) that provides adequate text contrast when the background image is disabled or unavailable. WAVE does not identify contrast issues in text with CSS transparency, gradients, or filters.

from gradyrobbins.github.io.

Congratulations! No errors were detected! Manual testing is still necessary to ensure compliance and optimal accessibility.

from gradyrobbins.github.io.

recent updates during html audit may have caused accessibility issues;

therefore, re-opening this issue

re-checking to find the following:

from gradyrobbins.github.io.

Google Dev Tools: Lighthouse Audit

from gradyrobbins.github.io.

Document does not have a meta description

Appears in: SEO audits

from gradyrobbins.github.io.

How to add a meta description
Add a <meta name=description> element to the <head> of each of your pages:

<meta name="description" content="Put your description here.">

from gradyrobbins.github.io.

How to improve your site's performance and prevent security vulnerabilities

Add rel="noopener" or rel="noreferrer" to each link identified in your Lighthouse report.

In general, when you use target="_blank", always add rel="noopener" or rel="noreferrer":

<a href="https://examplepetstore.com" target="_blank" rel="noopener">
  Example Pet Store
</a>

from gradyrobbins.github.io.