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.
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.
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.
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.
| 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.