DEV Community: Amanda Hasenzahl

Functional Programming: The Basics

Amanda Hasenzahl — Tue, 03 Nov 2020 15:14:22 +0000

In computer science, functional programming is a programming paradigm -- a way of thinking about software construction based on a set of fundamental, defining principles.

The fundamental, defining principles that make up this paradigm are that the code:

follows a declarative pattern
is composed of pure functions
avoids shared state, mutable data, and side effects

Imperative vs Declarative Pattern

Imperative Pattern

When the computer is given specific steps in order to achieve a desired result -- telling the computer exactly HOW to do something.

This tends to be the pattern that developers follow most often. It is the way that, we as humans, are used to trying to solve a problem.

Declarative Pattern

When the computer is given instructions on what result is desired without telling it exactly how it is to be done -- telling the computer WHAT needs to be done.

This is the way that functional programmers approach solving a problem. They focus on what results they need, rather than how the results are achieved. It is a different approach that can be hard to adopt at first, but can do significant things for your code.

Both of these examples are adding new items onto each book object inside the books array.

The for loop example (Imperative Pattern):

It’s checking array index counter against the array length
Adding a lastRead property to the books object with the current date as the value for the currently indexed book.
Incrementing the index counter for every time through the loop

It’s giving the computer a step by step instruction for how to add these new items

The .map() example (Declarative Pattern):

Takes a function as an argument
That function receives each item as a parameter
Adds a lastReadBy property to each book with a string value of 'me'.

It’s giving the computer the information to produce the desired result, but it is not telling it exactly how to do it. The .map() method behind the scenes is taking care of the actual operation.

Pure Functions

accept at least one parameter
return something as a result
return the same output if given the same input
produce no side effects
are referentially transparent -- you can replace the function call with its resulting value without changing the meaning of the program

They are also simple and reusable building blocks for your code, completely independent from outside state therefore immune to state related bugs, as well as being easy to move around, refactor, and reorganize within your code. Thus making your overall program more flexible and adaptable to future changes.

This is an example of a pure function. It accepts at least one parameter and returns a value. When it's given the values of 3 and 5, it will always return the output value of 8. It produces no side effects because the function relies on nothing except its input values.

This example shows a pure function and more specifically how they can be referentially transparent.

The add(x, y) function is taking in two values and producing their added sum as an output, which in this case is 8. Then, we have the multiply(a, b) function that is also taking in two values, but this time is producing their multiplied total as an output.

Using both functions we could write this function call as the first call multiply(2, add(3, 5));. Which would first add 3 to 5, producing the sum of 8. That sum of 8 would be passed as a parameter to multiply() along with 2, to produce the value of 16 as the final output.

We could also change the add(3, 5) function call as a parameter to just the value of its output (8). This change still produces the output value of 16. This replacement didn’t affect the output of the function in anyway, which makes it referentially transparent.

Immutability and Side Effects

Immutability

When an object cannot be modified in any way after it has been created.

The goal is to keep state and data from being shared or altered and solely keep it within the scope of each function, when possible.

There are no variable or loops, at least not how we are used to seeing them. Stored values are called variables because of history, but they are constants. Once x takes on a value, it is that value for life. They are usually local variables, so their lives are usually short, but while it is alive it can never change. Loops, on the other hand, happen through recursion.

One thing to keep in mind is that in JavaScript, the variable const doesn't necessarily equal immutability. const creates a variable name binding which cannot be reassigned after creation, however, it doesn't create immutable objects. You can't change the object that the binding refers to, but you can still change the properties of the object. This ultimately means that bindings created with const are mutable.

Recursion is when a function calls or refers to itself. This is used in place of traditional loops. Old values aren't modified during the looping, instead recursion uses new values calculated from the old ones. This allows constants and data to be modified as little as possible.

Recursion is like a flip book. Each instance would be like each individual page of the flip book. They are completely independent of each other, don't modify anything on any of the other pages, and putting each instance together gives you the final result.

Traditional loops are more like an assembly line. Each part of the process molds or changes the object until you get the final result. Each part is reliant on the one that comes before and after it and the final result is reliant on each part of the process and the order in which they are completed in.

There are three key features in a recursion function.

Termination Case
It stops the function from happening infinitely. It is the emergency brake and is used to break out of the logic if you have reached the end of the input or if there is a bad input and you don’t want the code to run at all (in this example a negative number because there aren’t factorials for negative numbers). The termination case for this example is x < 0.
Base Case
Similar to the termination case, it is also used to stop the recursion from continuing. Base case however, is the goal of the function. In this example, x === 0 is the base case because once x has gotten down to 0, the factorial has been found and the recursion doesn’t need to go any further.

NOTE: In some functions, you will only see a base case instead of a base case and a termination case. This would be because the base case and the termination case are the same or can be taken care of in one single call.

Recursion The function repeatedly calling itself until it reaches its base case. In this example, that is return x * factorial(x - 1);.

This example breaks down as follows:

We are calling the function and passing it the value of 3 → factorial(3);
The function is run and since 3 is greater than 0, the function returns 3 * factorial(3-1) OR 3 * factorial(2)
The function is run again with the value of 2 → factorial(2);
Again 2 is greater than 0, so the function returns 2 * factorial(2-1) OR 2 * factorial(1)
The function is then run again with the value of 1 → factorial(1);
Once again it is greater than 0, so the function returns 1 * factorial(1-1) OR 1 * factorial(0)
When the function is run another time with the value of 0, the base case becomes true, so the function returns the value of 1 (if (x === 0) return 1)
Now that the function has finally finished, everything unwinds.
IMPORTANT -- Recursion is a group of nested function calls, so the innermost function will return first (Last One In, First One Out)
Everything unwinds in the order shown at bottom of the image above

Side Effects

Any application state changes that are observable outside the called function other than its return value.

Elements in your code that can cause side effects are:

modifying any external variable or object property
logging to the console
writing to the screen, a file, or the network
triggering any external process
calling other functions that contain side effects

Unfortunately, you can’t have a program or code base that is completely 100% free from side effects, but you can work to keep them contained and isolated within your code. This makes it easier to extend, refactor, debug, test, and maintain your code. It is also why front end frameworks encourage users to manage state and component renderings in separate, loosely coupled modules.

Shared State is something that will create side effects within your code if it is altered.

One reason for this is because it is impossible to know the entire history of every shared variable, especially if there are asynchronous calls happening within your code.

An example of this would be if there was a user object for your program that needed to be saved. The saveUser() function makes a request to the API on the server and while that is happening, the user changes their profile picture with the updateAvatar() function. This triggers a second request with saveUser(). Since these are async calls, if the second call is received first, when the first call (now outdated) call gets returned, the new profile picture will get deleted and replaced with the old one.

This is an example of a race condition, which is a common bug with having shared state. During that entire process there are times when you don't know what's happening to the user object. Therefore, sometimes you receive a result you weren't expecting.

Another reason is because when the order of the functions changes or they get moved around it causes a cascade of failures within your code.

The first half of this example is taking the value in x and first executing the x1() function which adds 1 to make x.val = 3. Then it is executing x2() which is multiplying that by 2 to make x.val = 6.

The second half is the exact same values and functions as the first, however the two functions get called in reverse. It starts with the value of 2, then it multiplies that by 2 to get 4, and then it adds 1 to that. This gives you a final result of 5.

Changing the order of the function calls on the exact same value, produced two different resulting values.

Summary

Functional programming is a way to approach solving software challenges based on a set of fundamental, defining principles: follows a declarative pattern, utilizes pure functions, and avoids using shared state, mutable data, as well as creating side effects.
The declarative pattern entails giving the computer what you are wanting as a result without telling it exactly how it needs to be done.
Pure functions are simple reusable blocks of code that are completely independent from any outside state. They are immune to bugs related to state changes and help make your code flexible to future changes because they are easy to move around and refactor.
Shared state, mutable data, and side effects are avoided as much as possible. Although, a program can never be completely free of side effects, the goal is to keep them contained and isolated inside your code.
Adopting a functional programming approach in the right situations has potential to take your code to the next level

Image Accessibility 101: Image Maps

Amanda Hasenzahl — Fri, 20 Sep 2019 16:29:23 +0000

An image map is an image that contains clickable regions.

Tips for writing the alt text:

1) This type of image also requires a two part description, one for the entire image and another for each clickable region.

2) Inside the image's alt attribute is where the basic description for the entire image would go.

3) Each clickable region is also given its own alt attribute, which would contain a description of what will happen or where they will be taken when they click on that region of the image.

Examples:

<img 
    src="img/orgchart-b583d8ff.png" 
    alt="Board of directors and related staff: " 
    usemap="#Map" 
/>

<map name="Map" id="Map">
    <area
        shape="rect"
        coords="176,14,323,58"
        href="chairman.html"
        alt="Davy Jones: Chairman"
    >
    <area 
        shape="rect" 
        coords="81,75,226,114" 
        href="secretary.html"
        alt="Carole Brewster: Company Secretary"
    >
    <area 
        shape="rect" 
        coords="6,138,155,182" 
        href="marketing-director.html"
        alt="Henry H Brown: Marketing Director (reports to chairman)"
    >
    <area 
        shape="rect"
        coords="175,138,323,182"
        href="sales-director.html"
        alt="Paula Holbein: Sales Director (reports to chairman)"
    >
    <area
        shape="rect" 
        coords="345,136,496,186" 
        href="finance-director.html"
        alt="Hugh Howard: Finance Director (reports to chairman)"
    >
</map>

The above example is of a company's organizational chart that shows all the people by name, position, and how their roles are related to each other. In the image, the regions for each person in the chart is a clickable element that would bring the user to that person's biography.

The image's first alt text explains that the image is an organizational chart for a company's board of directors and related staff, while each clickable region relays to the user that person's name, role, and if they report to anyone.

Summary

Image maps are images that contain clickable regions. These images also need a two part description: one for the entire image as a whole and a second for each clickable area inside the image. The descriptions given to each clickable region should explain what will occur or where they will go when they click on the link.

Image Accessibility 101: Complex Images

Amanda Hasenzahl — Fri, 20 Sep 2019 16:29:11 +0000

A complex image is an image that portrays detailed information. These images would include graphs, diagrams, illustrations, weather maps, or any other image that cannot be summed up in a short phrase or sentence.

Tips for writing the alt text:

1) This type of image requires two separate descriptions: one for the image itself and a longer description explaining the data and information being portrayed by the image.

2) The basic description for the image goes inside the image's alt attribute.

3) The long description needs to be available elsewhere either in the content on the same page as the image or through an associated link to another page.

4) There are a couple of different ways to approach the long description aspect for this type of image. I will discuss each one below and explain the pros and cons that each might have.

Examples:

These two photos display information regarding the yearly average TV ratings for World Wrestling Entertainment's weekly live episodic show, Monday Night Raw from 1996-2015. The first image is a bar graph that has the years listed across the x axis (1996-2015) and the average ratings listed on the y axis (1-7). The second image is the graph's long description that explains the graph's data in more detail. The first part of this description is an overview paragraph that reads...

The bar graph shows the per year average television ratings for World Wrestling Entertainment's flagship weekly show, Monday Night Raw, between the years 1996 and 2015. The years between 1998 and 2001 were the ones with the highest average rating. This period of time is often regarded by wrestling fans as the time when WWE was producing the best product. The high ratings and premiere product could be contributed to the company having direct competition with World Championship Wrestling (WCW) on Monday nights, the level of talent the company had with stars like The Rock and Stone Cold Steve Austin at the fore front, and the provocative and somewhat controversial segments that were being produced at the height of what is known as "The Attitude Era". 1996, 1997, 2015 were among the years with the lowest average rating. The remainder of the years were consistently between a 3 and 4 average rating.

The second part of this long description includes a table that lists out each year and its average rating as displayed in the graph. Those data points are as follows...

Year	Average Yearly Rating
1996	2.64
1997	2.67
1998	4.35
1999	6.02
2000	5.88
2001	4.64
2002	4.01
2003	3.77
2004	3.67
2005	3.81
2006	3.90
2007	3.61
2008	3.27
2009	3.57
2010	3.28
2011	3.21
2012	3.00
2013	3.01
2014	2.95
2015	2.65

Long Description Approach #1

<figure role="group">
    <img src="img/raw96-15-1.png" alt="WWE Monday Night Raw TV Ratings by Year, 
1996-2015" />
    <figcaption>
        <a href="raw-ratings.html">
          Monday Night Raw TV Ratings details from graph above
        </a>
    </figcaption>
</figure>

The above approach includes having a link to a separate page where the long description for the graph can be found. We are wrapping the images and the long description link in a <figure> tag, while wrapping the link to the long description in a <figcaption> tag. This allows screen readers and assistive technologies to relay to users that the image and the link are related to each other.

Pros:

1) This approach is supported by all browsers and assistive technologies

2) This in turn makes the information inside the long description accessible to everyone.

Cons:

1) This approach does take the users to a separate page to view the long description information, which in some cases isn't always ideal.

Long Description Approach #2

    <section>
        <img src="img/raw96-15-1.png" alt="WWE Monday Night Raw TV Ratings by Year, 
1996-2015.  Described under the heading Monday Night Raw TV Ratings Details." />
    </section>
    [...]
    <section>
        <h2>Monday Night Raw TV Ratings Details</h2>
        <h3>Overview</h3>
        <p>The bar graph shows the per year average television ratings for World 
Wrestling Entertainment's flagship weekly show, Monday Night Raw,  between the 
years 1996 and 2015...</p>
        <h3>Values</h3>
        <p>Numerical values represented on the graph</p>
        <table>
            <caption>Average (Per Year) Ratings for Monday Night Raw 1996-2015</caption>
            <thead>
                <tr>
                    <th>Year</th>
                    <th>Average Rating</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1996</td>
                    <td>2.64</td>
                </tr>
                [...]       
            </tbody>
        </table>
    </section>

Pros:

1) This approach allows for the long description to be on the same page as the image, which keeps users from having to navigate away from the original page to view the detailed description.

2) The long description is still available to everyone because it included inside the page's text content.

Cons:

1) This approach only works if the details for the location of the long description inside the alt text are very specific. If it isn't specific, then users could become confused as to where the right information is found or they would have to spend time searching for the information on the page.

Long Description Approach #3

<figure role="group">
    <img src="img/raw96-15-1.png" alt="WWE Monday Night Raw TV Ratings by Year, 
1996-2015." />
    <figcaption>
        <h2>Monday Night Raw TV Ratings Details</h2>
        <h3>Overview</h3>
        <p>The bar graph shows the per year average television ratings for World 
Wrestling Entertainment's flagship weekly show, Monday Night Raw, between the years 
1996 and 2015...</p>
        <h3>Values</h3>
        <p>Numerical values represented on the graph</p>
        <table>
            <caption>Average (Per Year) Ratings for Monday Night Raw 1996-2015</caption>
            <thead>
                <tr>
                    <th>Year</th>
                    <th>Average Rating</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1996</td>
                    <td>2.64</td>
                </tr>
            </tbody>
        </table>
    </figcaption>
</figure>

Pros:

1) This approach also keeps the user from having to navigate away from the current page in order to view the long description.

2) The long description remains available to everyone as it is also included in the page content in this approach.

3) Because the long description is inside of the <figcaption> tag associated with the image's <figure> tag, which keeps users from having to potentially search the page looking for the content.

Cons:

1) Depending on the design needs for your page and the length of the information included in your long description, having it all included in the page content in this way might not be desirable. It could end up making a page rather long in length and give the user a lot of information to read through and process all at once.

Summary

An image that represents extremely detailed information and can't be explained or described in one short phrase or sentence is a complex image. These would be images like graphs, charts, weather maps, illustrations, or an image where the page content relies on the user understanding the image content. These images need a two part description: one that describes the basic context of the image and another longer description to explain the information and data provided by the image.

There are a few different approaches to including the long description within your code. Each one allows the information to be available to everyone who visits the page, however which one is used on your page could depend on design, user experience, and ultimately what makes the most sense for you site. As long as both descriptions are included and the long description is associated with the image in a way that includes proper semantics and makes it available to everyone, you should be all good to go!

Image Accessibility 101: Groups of Images

Amanda Hasenzahl — Fri, 20 Sep 2019 16:28:46 +0000

A group of images is a collection of images being used to convey the same or similar pieces of information.

Tips for writing the alt text:

There are two different approaches to writing alt text for a group of images:

1) For a grouping of images that can be sufficiently described by one sentence: One of the images receives an alt text to describe the entire group, while the others receive an empty alt attribute.

2) For a grouping that requires a more robust description: The entire group needs a basic description of what the contents of the group are about. Then each individual image inside of the group needs to have its own description that explains the contents of that image.

Examples:

<div>
    <img src="img/star-solid.svg" alt="Rating: 3 out of 5 stars" />
    <img src="img/star-solid.svg" alt="" />
    <img src="img/star-solid.svg" alt="" />
    <img src="img/star-regular.svg" alt="" />
    <img src="img/star-regular.svg" alt="" />
</div>

The above image is an example of the first approach explained above. One alt text is sufficient to describe the entire group. So, the alt text on the first star expresses the overall rating that the group visually displays, while the remaining four images receive an empty alt attribute.

<figure id="group" role="group" aria-labelledby="fig1">
    <figcaption id="fig1">Impractical Jokers is a TV show on TruTV that features four 
lifelong friends who compete to embarrass each other in various challenges, whoever 
loses the most challenges every episode gets punished.</figcaption>

    <figure role="group" aria-labelledby="fig11" class="figure">
        <img src="img/murr.jpg" alt="Murr jumping out of a plane" />
        <figcaption id="fig11">Murr is afraid of heights, so as a punishment, 
the other guys made him go skydiving.</figcaption>
    </figure>
    <figure role="group" aria-labelledby="fig12" class="figure">
        <img src="img/q.jpg" alt="A spider crawls on Q" />
        <figcaption id="fig12">As Q's punishment, they tied him down and put huge 
spiders on him.</figcaption>
    </figure>
    <figure role="group" aria-labelledby="fig13" class="figure">
        <img src="img/sel.jpg" alt="Sal climbs down a manhole" />
        <figcaption id="fig13">Since Sal is a huge germaphobe, the guys made him go 
into the sewer system to fight "zombies".</figcaption>
    </figure>
    <figure role="group" aria-labelledby="fig14" class="figure">
        <img src="img/joe.jpg" alt="Joe dressed as a genie" />
        <figcaption id="fig14">Joe was attached to a harness and sent flying into 
all the stage props throughout the entirety of the play.</figcaption>
    </figure>

</figure>

This image is an example of the second approach described above. This four image group

Summary

An image being used to add a simple concept or piece of information to the content on the page is considered an informative image. Make your alt text as short and concise as possible and be sure to only include the most relevant information.

The decision of whether an image is a decorative image or an informative image can be a tricky one and is ultimately up to the person authoring the page. It comes down to the reason why the image is being included on the page, the content contained on the page, and what makes the most sense overall.

Image Accessibility 101: Images of Text

Amanda Hasenzahl — Fri, 20 Sep 2019 16:28:29 +0000

An image of text is an image that has text as the main content that is meant to be readable by the user.

Tips for writing the alt text:

1) The alt text should be an exact match to the text that appears in the image.

Examples:

<img src="img/quote1.jpg" alt="There are no limits to what you can accomplish, except 
the limits you place on your own thinking. - Brian Tracy" />

Even though this image has a background of a climbing rope and people rock climbing, the main content of the image is the quote. Therefore, the alt text should be reflective of the quote and its author, rather than the images that appear in the background.

<img src="img/card.png" alt="Surprise! 45 is the new age for regular colon screenings." />

This is an image from a client site I worked on at work for the American Cancer Society Birmingham Alabama chapter. They were wanting to make a site to raise awareness for colon cancer. The site allows you to send a funny card to a loved one encouraging them to get screened. The alt text for these cards needed to be the exact wording pictured, so that non-visual users could still pick an appropriate invite to send.

You can view the full site and entire collection of cards here on the Cordially Stop Cancer site.

Important Notes:

1) If the image that you are using is simple text that could be placed in the markup of the page and styled using CSS to match the original image, this is preferred. Actual text is easier to work with, manipulate, and style than an image. It also isn't going to become pixelated or distorted when resized.

Summary

Images that contain text as the main content that are intended for people to read need to have alt text that contains the exact same text. This way non-visual users will have the text contents of the image read aloud.

Image Accessibility 101: Functional Images

Amanda Hasenzahl — Fri, 20 Sep 2019 16:28:15 +0000

A functional image is an image that initiates an action rather than shares information. These images can enhance buttons, links, and other functional elements.

Tips for writing the alt text:

1) It should describe the action that will happen when you click the image, rather than what the image is.

2) It is crucial for understanding the functionality of the content being displayed.

Examples:

<a href="https://www.netflix.com">
    <img src="img/Netflix-Logo.png" alt="Netflix Home" />
</a>

The above image is considered a functional image because the logo is being used as a link to redirect the user back to the site's homepage. Therefore, you want to include the word Home in the alt text to indicate to the users that this link brings you back to the home page when clicked.

If the logo was just being used as a stand alone image without also being a link, then the alt text would just read alt="Netflix".

<button onclick="window.print();">
    <img src="img/printer-icon-in-flat-style-vector-19244045.jpg" alt="Print this page." />
</button>

This image would also be considered functional because it is an image inside a button that prints the current page's content when clicked. The image of the printer indicates to sighted users that the button is for printing. However, for those who can't visually see the printer, the alt text needs to convey this action to them.

Summary

An image that is being used to initiate an action or enhance a functional element on the page is a functional image. It is so important that the alt text reflect the action that will occur, rather than describe what the image is.

Image Accessibility 101: Decorative Images

Amanda Hasenzahl — Fri, 20 Sep 2019 16:25:51 +0000

A decorative image is an image that adds visual appeal to the site without adding any additional important information. This image could strictly be a visual decoration or it could be an image whose contents have already been adequately described in the text content of the page.

Tips for writing the alt text:

1) For these images, you want to leave the alt attribute empty (alt="").

Examples:

<div class="envelope__image">
   <img src="../assets/images/envelope-back.png" alt="" class="envelope__img-back" />
   <img src="../assets/images/envelope-card.png" alt="" class="envelope__img-card" 
data-aos="raise" />
   <img src="../assets/images/envelope-cover.png" alt="" class="envelope__img-front" />
</div>

The above image is considered a decorative image because it is not adding any important information to the text alongside it or the rest of the page. It is only there to be a visual decoration for the page. Therefore, the image alt texts are left empty.

This image example consists of more than one image because parts of the image were animated, so they needed to be selected separately. This could also be considered a group of images, which is another type of image that will appear later in this series.

.share-img {
    background-image: url('../images/share.jpg');
    background-size: cover;
    display: block;
    height: 27.3rem;
    width: 100%;
}

This image is also a decorative image that is being used just to enhance the appearance of the page, however, you'll notice that the code for this image is different than the first scenario. Since the image takes up the full height and width of its container and is not adding any information to the page, it can easily be added to the page through the CSS background image property. This keeps it out of the markup completely and allows it to get passed over by a screen reader.

Important Notes:

1) Although the alt attribute is being left empty, it still needs to be present inside the <img /> tag. If left out completely, the screen reader will usually read out the name of the image file. This can be quite confusing for users.

2) Adding alt text to these types of images can create audible clutter or be distracting for screen reader users. This is especially true if the information being shared isn't important to or doesn't match the contents of the page.

3) You can also use the WAI-ARIA role="presentation" attribute to hide images from screen readers, however, not all screen readers acknowledge this. So, if you are going to use it, be sure to pair it with the empty alt attribute.

4) Utilize pseudo-elements and background image properties in CSS to represent decorative images, whenever possible.

Summary

Any image being used on a site solely to enhance the appearance of the site or has already been thoroughly described within the text content, would be considered a decorative image.

If and when possible, try to present these images through a CSS property.
If this doesn't work for an image, the alt attribute for the image needs to be present, but left blank.

Image Accessibility 101: Informative Images

Amanda Hasenzahl — Fri, 20 Sep 2019 16:25:20 +0000

An informative image is an image that conveys a simple concept or piece of information that is represented on the page. These images can be used to supplement or label other information, portray an emotion or impression, or convey concise information or instructions.

Tips for writing the alt text:

1) They should be brief and concise, no longer than a phrase or short sentence.

2) Only the most crucial information should be included.

3) They often times aren't a literal description of the image, however, in some instances this could be necessary.

Examples:

<span>
    <img src="img/phone-alt-solid.svg" alt="Telephone: " /> 615-555-9023
</span>
<span>
    <img src="img/fax-solid.svg" alt="Fax: " /> 615-555-1234
</span>

The above image is considered an informative image because the images of the phone and the fax machine are being used to label the numbers that appear next to them and clarify which is which in the event that you needed to contact that individual or company. The alt texts are going to audibly label the numbers for any user that can't see the visual labels.

<img src="img/Familyfun.jpg" alt="We are a family friendly company." />

This image is one that could be found on a company's website to portray an environment that caters to families and strives to provide a fun, safe experience for its customers. Since this is a stock photo, the people shouldn't be identified and the alt text instead conveys the image's intended impression.

<img src="img/top.jpg" alt="Push down on cap, then turn it counter-clockwise." />

This image would be considered an informative image because it is visually displaying the specific instructions for opening the medicine bottle pictured. The alt text is then used to explain these instructions for those who are unable to use the visual cues seen on the cap.

<img src="img/MastroHERO.jpg" alt="Maddie Mastro edges out Chloe Kim and Xuetong Cai 
for superpipe gold." />
<p>Professional snowboarder, Maddie Mastro, lands historic run at the 2019 Burton US Open 
becoming the first woman to successfully land a double crippler in competition.</p>

This last image is also an informative image because the image is adding information to the text that accompanies it. In the text, you learn that Maddie made history at the Burton US Open this past winter. The picture, however, further indicates to readers that she finished in first ahead of Chloe Kim and Xuetong Cai. Therefore, the alt text conveys this extra bit of information.

Now, if the text had included the fact that Mastro had claimed a gold medal ahead of Kim and Cai, then this image would most likely become a decorative image. Since the imformation in the picture would already be conveyed elsewhere on the page, the image having an alt text would become repetitive.

Summary

Image Accessibility 101: What is it and why is it important?

Amanda Hasenzahl — Fri, 20 Sep 2019 16:25:01 +0000

Web accessibility is a very important, but often times over looked topic in the world of web development. When done properly, it allows as many people as possible to use the web and it makes the user experience more efficient and pleasant for everyone, not just those with a disability.

Image accessibility is a small piece of this, but it can contribute greatly to the overall accessibility of your site and how users understand and interact with the content. Making your site's images as accessible as possible goes way beyond just making sure that the image has alt text. The text that gets put, or not put, inside of the alt attribute varies greatly based on the purpose of the image and the content that surrounds it.

The following series is a look into the seven purposes an image can serve on a site and how to approach writing the most effective alt texts in each case in order to help make your site as accessible as possible.