Vinyl Record

CISW 370 - Designing Accessible Sites
Jeannie M.

Accessible Images

Accessible images are important for not only people with disabilities, but other users in general. Alt text tags have been implemented mostly due to people with vision impairments or blindness. Someone who may need to use a screen reader cannot usually see what is on the screen, so these assistive devices help them navigate throughout the page. It is important to understand all content. The alt text on an image is read by a screen reader, so the user can understand the message being conveyed on the screen. The image may tie into the text that is surround by it, so it may be of importance. If it is not, the alt text will be null, but must still be implemented in code.

As I have mention, alt text is also import for other general users. The reason for that is, if for some circumstance, the images are turned off, the text is still available where the image should be placed. This not only helps accessibility, but usability as well.

img src="images/decorative.png" alt="" class="ai"

The image shown above is decorative. This means that there is no importance of the image to the content. It is placed for decorative purposes. I used a null alt attribute for the image. For accessibility, an alt must still be used, even if it is null. Below the image is the code I used to display the image. The class of "ai", is used to make the image responsive.


img src="images/nirvanabandlogo.png" alt="Nirvana" class="ai"

The image shown above is a logo for a band. A logo does not need a long description of what is going on within the image. It is also not necessary to use the word "logo" to describe a logo. If this may have been on the band's website, then the user would already know what it is without the screen reader having to say "logo" after every instance of the logo. Class of "ai" is used to make the image responsive.

Girl Lying Outside Amongst Vinyl Records

img src="images/vinyls.jpg" alt="Girl Lying Outside Amongst Vinyl Records" class="ai"

The image shown above is a photograph that may be used to add to the message of specific content. This is the sort of image that alt text should be used to describe what is going on. If a blind person came across this image, it would read "Girl Lying Outside Amongst Vinyl Records." Someone with images turned off on their browser would see that text written in place of the image. The description does not need to be very long. If it may have been an image of a chart, there would need to be an alt text along with a long description. Again, class of "ai" is used to make the image responsive.

Accessible Data Tables

Data tables should absolutely be made accessible as tables may provide important information. Data tables must be marked for headings and have a scope of rows and columns. For simple tables, it can be quite easy, but for more complex tables, there may be more markup. In either case, making it accessible is a must.

Accessible tables benefit people who use assistive technology, which can be someone who is blind or has vision impairments. They need to know the headings for the columns and rows to understand the data that is being outputted by the assistive device. In the example below, if moving across the first row of data, the screen reader might read it as "January New Moon 10th, First Quarter 16th, Full Moon 24th, Last Quarter 1st, Full Moon Name Wolf Moon." If the moving down the column, it may read "New Moon January 10th, February 8th, March 9th, April 7th,....." and so on. The purpose of this is to ensure the behavior of assistive technology will maintain structure when reading and understood by the user.

2016 Moon Phases Dates
Month New Moon First Quarter Full Moon Last Quarter Full Moon Name
January 10th 16th 24th 1st Wolf Moon
February 8th 15th 22nd 1st Snow Moon
March 9th 16th 23rd 1st, 31st Worm Moon
April 7th 14th 22nd 30th Pink Moon
May 6th 13th 21st 29th Flower Moon
June 5th 12th 20th 27th Strawberry Moon
July 4th 12th 19th 26th Buck Moon
August 2nd 10th 18th 25th Sturgeon Moon
September 1st 9th 16th 23rd Harvest Moon
October 1st, 30th 9th 16th 22nd Hunter's Moon
November 29th 7th 14th 21st Beaver Moon
December 29th 7th 14th 21st Cold Moon

Captioning Video

Captioning videos are important for people who are deaf or have hearing impairments. If one cannot hear or is hard of hearing, then how can they know what the video is about. Any important element within the video should be conveyed. That means to transcribe the speech and any background element that is directly related to the video. The background elements add to the story which can provide lively user experience. How boring would it be to watch a movie without music or background noise? The same thing goes with captioning a video. The user can envision a feeling that is being conveyed from the transcriptions. Below is an example of a 30 second video I made that contains background music with lyrics.