CISW 370 – Project 1

Martin S.

Images and Alternate Text

Alternate text in html is the tag alt=”alternate text goes in here”. This is mostly used inside the image tag. For people with impaired vision and using a screen reader, having text in this tag is important because the screen reader will read the text that is in the tag. Many images on websites are used as critical parts of the page and to use the site a person must know what the images mean. Non-text Content: Understanding SC 1.1.1 of WCAG discusses this in more detail.

Informational Image

Image is red alterting people about holiday hours.
<img src="images/holiday-hours.png" alt="Please note, holiday store hours apply to shipping"/>
On this site there may be hours listed under the image and without being able to see the image a visually impaired person may not understand that holiday shipping hours are different, and thus not be able to plan properly

Decorative Image

<img src="images/line.png" alt=""/>
This image is part of a web sites design and other than being nice to look at, it serves no useful purpose. The alt tag text then is "" left blank or null so that screen readers will not bother people by reading something of no use.

Functional Image

<img src="images/contact.png" alt="Image contact icons. Click on email image to email us, phone to call us, or letter for our mailing address"/>
Many times websites, especially ones that are crowed with information, rely purely on common images to provide access to a feature. This image allows for a user to contact the store in three different ways. Without alt text explaining this, a visually impaired person may miss it entirely.

Image of Text

<img src="images/shipping.png" alt="Express shipping information listed here"/>
Sometimes websites use poorly made images that are hard to see and have bad image contrast. Since this is an image identifying express shipping information, a visually impaired person may not know which image is standard shipping showing standard shipping times, or which image is express shipping showing express shipping times/costs. The alt text would help them decide.

*Images were made from pixabay.com

Color and Contrast Disability

Color contrast is important in web page design so that a visually impaired person may be able to read the text on a page. If two overlapping colors do not have an acceptable color contrast ratio, then the colors may be too difficult to distinguish. WCAG 2.0 recommends a contrast ratio of 3:1 as the minimum level recommended for non impaired vision. The 4.5:1 ratio is minimally recommended for vision impaired persons. The text size does lower the ratio but it seems from reading, that ratio should be used even in larger text.

Contrast (Minimum):Understanding SC 1.4.3 are the WCAG principle AND guideline(s) that discuss contrast and color disability.

Color Contrast Checker is my favorite checker for color contrast. I used it in fact to check this site and found that this color needed to be changed to this color. Not much of a change but it meets the standard now.

Good Color Contrast

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

A contrast ratio of 21 : 1 seems to be the highest possible.
Here the ratio is in fact 21 : 1 The foreground color is #000000 and the background #ffffff
Compliance Level Section 508 (revised 2017) and WCAG 2 - Level AAA Conformant

Bad Color Contrast

A one to one ratio is virtually totally unreadable for anyone.
Here the ratio is 1 : 1.01 which is as low as it goes without it being virtually unreadable.
The foreground color is #00ff00 and the background color is #ffd2d5
This naturally fails.