Build Accessible React Toggle Buttons
Tags: react, a11y, webdev, tutorial
Published: 2022-05-14 05:06:34

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>Do you want to make button components with React, but aren't sure where to start? Interested in making them fully versatile and functional for the widest possible audience? Does User Experience and Accessibility matter to you? Well you've come to the right place.  I will show you step by step how to make reusable, accessible toggle buttons with React. After reading this post you'll also be able make inclusive button elements that you can reuse in all of your React projects.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>We'll be covering how to make the <strong>Button Component</strong>, How to use and re-use the Button Component in the <strong>App Component</strong>, and <strong>How to style</strong> <strong>the components for Accessibility</strong> using CSS.</p>
<!-- /wp:paragraph -->

<!-- wp:yoast-seo/estimated-reading-time {"estimatedReadingTime":11} -->
<p class="yoast-reading-time__wrapper"><span class="yoast-reading-time__icon"></span><span class="yoast-reading-time__descriptive-text">Estimated reading time:  </span><span class="yoast-reading-time__reading-time">11</span><span class="yoast-reading-time__time-unit"> minutes</span></p>
<!-- /wp:yoast-seo/estimated-reading-time -->

<!-- wp:heading -->
<h2>Why make Accessible Toggle Button With React?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>React is a generally easy to use Javascript Library that allows developers to create reusable, interactive elements for user interfaces.  React <a href="https://insights.stackoverflow.com/survey/2020#technology-web-frameworks" target="_blank" rel="noreferrer noopener">is exploding in popularity</a>, yet I don't see much focus in online tutorials for making React components accessible.  </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>Building for accessibility with HTML alone is time consuming, and error prone. With React, you have the capability to make easy to reuse, plug and play components. Starting off with accessibility at the forefront seems to be the wise choice.  </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>What are toggle buttons?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>Not all buttons are created equally. Or in some cases they have multiple states of being, but generally perform only one task or another. Buttons like on/off switches, send message buttons, or next/previous buttons are all considered toggle buttons.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>Toggle buttons should respond to the user to inform them of its current state. If you, as the web developer, don't relay the current state of a toggle button to the user, the user will have no idea if the button performed its task. For a send button, a user might ask themself, <strong><em>did I hit send? </em></strong> </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>Therefore, you need to relay the message of state to your user.  As a developer, you have to consider that not all users will be able to see. Those that are may have difficulty understanding the state you're trying to communicate.  In this tutorial, I'll show you how to make buttons that are easy to understand for a wide range of users.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"tagName":"aside","className":"call-out"} -->
<aside class="wp-block-group call-out"><!-- wp:heading -->
<h2 id="h-key-concepts">Key Concepts</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p><strong>Easing Cognitive Load</strong> - We use color, iconography, and styling for easier understanding and better comprehension.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>👀 <a href="#cognitive-load">Learn about Cognitive load.</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p><strong>Buttons, Semantic Structure, and Labeling</strong>-  Learn how to build buttons the way they were meant to be built.<br>👀 <a href="#button-labels">See how Semantic HTML5 works for labeling buttons.</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p><strong>Visual Feedback</strong> - This refers to communication from the Web Application to the user after the user has performed some action. Most of us are familiar with visual feedback, like hover or focus color changes on buttons and links. Something to keep in mind is that non-visual feedback should also be provided since some users will not be using a visual interface.  In this article we provide visual feedback through the styling of the aria attributes and with the use of icons.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>👀 <a href="#styling">See how to style toggle buttons inclusively.</a><br>👀 <a href="#icons">See how to incorporate Font Awesome Icons for visual understanding.</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p><strong>Audio Feedback</strong> - Learn how easy it is to provide audio feedback for toggle buttons.<br>👀 <a href="#aria-pressed">See how I provide audio feedback to non-visual users</a>.</p>
<!-- /wp:paragraph --></aside>
<!-- /wp:group -->

<!-- wp:heading -->
<h2 id="h-let-s-start">Let's start!</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>Starting off, below is an image of the project.  You can <a href="https://ryanallmad.github.io/react-toggle-buttons/" target="_blank" rel="noreferrer noopener">see the build here</a>, on Github Pages. Also, check out the <a href="https://github.com/ryanAllMad/react-toggle-buttons">source code here</a> so you can see the complete picture.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":11192,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://allmaddesigns.com/wp-content/uploads/2022/01/image-26.png" alt="three toggle buttons built with react. all grey with different icons. one says previous, the second says next, the third says send." class="wp-image-11192"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>Making The Button Component Accessible</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>Because we are building this component to be reusable, let's start by adding some props to the button component.  The button will only need two props. A <code>label</code>, and the <code>fontIcon</code>. I'll go into the font icon <a href="#icons">more below.</a> </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Creating the Button Component:</h3>
<!-- /wp:heading -->

Inside the App.js file, I have created the Button Component. This allows me to pass all of my button functionality down as props. 

```javascript
const Button = ({label, fontIcon}) => {
}
    return <button className={label} ref={buttonRef} onClick={onButtonClick} type="button" aria-pressed={ariaPressed}>{faIcon}{label}{faIcon}</button>;
}
```


<!-- wp:heading {"level":3} -->
<h3 id="button-labels">Labeling Accessible React Toggle Buttons</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>The great thing about using semantic HTML, and therefore a button element, is that the button element will tell the browser what its role is a button, and <a href="https://allmaddesigns.com/build-accessible-to-do-list/#semantic-button" target="_blank" rel="noreferrer noopener">needs no additional labeling besides the text inside the button</a>. Another benefit to the HTML button element is that this label will be translated by translation services in the browser.  This makes the toggle buttons even more inclusive.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>The button element below has a <code>type="button"</code> attribute and a <code>label</code> prop that will allow us to reuse this component as needed.  For the <strong>text </strong>of the button, and for the <strong>className attribute</strong> we use the label prop.  This allows our classes to be generated dynamically and speeds up our development process.</p>
<!-- /wp:paragraph -->
```javascript
    return <button className={label} ref={buttonRef} type="button">{label}</button>;
}
```


<!-- wp:heading {"level":3} -->
<h3 id="aria-pressed">Providing Audio Feedback</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>You can tell screenreader's the role of your toggle button using the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed" target="_blank" rel="noreferrer noopener">Aria-Pressed attribute</a>. The user is only told that the button is <strong>pressed</strong>, so long as the <code>aria-pressed</code> attribute is <strong>true</strong>. And this is how we provide audio feedback to our non-visual users.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p><strong>Below I've added an aria-pressed attribute</strong>. <strong>Then we connect it to a piece of state. I've also added an <code>onClick </code>function called <code>onButtonClick</code>:</strong></p>
<!-- /wp:paragraph -->

```javascript
    return <button className={label} ref={buttonRef}  type="button" aria-pressed={ariaPressed}>{label}</button>;
```

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p><strong>Next, I'll add this state to my inclusive button component:</strong></p>
<!-- /wp:paragraph -->

```javascript
const Button = ({label, fontIcon}) => {
    const [ariaPressed, setAriaPressed] = useState(false); 
```

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p><strong>Here's how we use the ariaPressed state in our <code>onButtonClick</code> function:</strong></p>
<!-- /wp:paragraph -->

```javascript
const Button = ({label, fontIcon}) => {
    const [ariaPressed, setAriaPressed] = useState(false); 
    const [faIcon, setFaIcon]           = useState(fontIcon);
    const buttonRef = useRef(null);

        //enter button events
const onButtonClick = () => {
    if (ariaPressed === false){
        setAriaPressed(true); 
        setFaIcon(<FontAwesomeIcon icon={faThumbsUp} />);
        setTimeout(() => {
            setAriaPressed(false);
            setFaIcon(fontIcon);
        }, 1555);
 console.log("button clicked");
    } else {
        setAriaPressed(false);
        setFaIcon(fontIcon);
    }
}
```

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>As you can see, in the <strong>if statement</strong> above I've added a <strong><a href="https://developer.mozilla.org/en-US/docs/Web/API/setTimeout" target="_blank" rel="noreferrer noopener">setTimeout function</a></strong>.  This function will only allow the pressed state to last for about 1.5 seconds. If I send an email and my <code>aria-pressed=true</code> state is left true (or pressed) I may not be able to send a message again. </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>The Button Component</h3>
<!-- /wp:heading -->

```javascript
const Button = ({label, fontIcon}) => {
    const [ariaPressed, setAriaPressed] = useState(false); 
    const [faIcon, setFaIcon]           = useState(fontIcon);
    const buttonRef = useRef(null);

        //enter button events
const onButtonClick = () => {
    if (ariaPressed === false){
        setAriaPressed(true); 
        setFaIcon(<FontAwesomeIcon icon={faThumbsUp} />);
        setTimeout(() => {
            setAriaPressed(false);
            setFaIcon(fontIcon);
        }, 1555);
 console.log("button clicked");
    } else {
        setAriaPressed(false);
        setFaIcon(fontIcon);
    }
}
    return <button className={label} ref={buttonRef} onClick={onButtonClick} type="button" aria-pressed={ariaPressed}>{faIcon}{label}{faIcon}</button>;
}
```



<!-- wp:heading -->
<h2>Reusing the Inclusive Button Elements in The App Component</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>Because I created a state and onClick function for my label and font awesome icons inside of my Button component, I am able to reuse these buttons endlessly in my App Component.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Creating The App Component:</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>Below I have two containers. The first contains the next and previous toggle buttons.  The second contains the Send button.</p>
<!-- /wp:paragraph -->



<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>Each label is set in the Button component attributes and the icons that are set correspond with the purpose of the button.  The <code>aria-pressed </code>attribute is set to false when the component first renders.</p>
<!-- /wp:paragraph -->

<img src="https://allmaddesigns.com/wp-content/uploads/2022/01/image-27.png" alt="" class="wp-image-11193"/>

<!-- wp:heading {"level":3} -->
<h3>The App Component:</h3>
<!-- /wp:heading -->

```javascript
const App = () => {
    return (
        <div className="wrapper">
        <div className=" button-section container">
            <Button fontIcon={<FontAwesomeIcon icon={faBackward} />} label="previous" />
            <Button fontIcon={<FontAwesomeIcon icon={faForward} />} label="next" />
            </div>
        <div className="container two">
            <Button fontIcon={<FontAwesomeIcon icon={faPaperPlane} />} label="send" />
        </div>
        </div>
            );
}

export default App;
```




<!-- wp:heading -->
<h2>How To Style Accessible React Toggle Buttons</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>Truly inclusive button elements will provide users comprehensive understanding of the user interface in split seconds. In other words, don't make your users think! Make the feedback to the user as easy to understand and informative as possible by planning your elements ahead of time.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 id="cognitive-load">What Is Cognitive Load?</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p><a href="https://en.wikipedia.org/wiki/Cognitive_load" target="_blank" rel="noreferrer noopener">According to Wikipedia,</a> <strong>cognitive load</strong>&nbsp;refers to the used amount of&nbsp;working memory&nbsp;resources.  I like to imagine we each wake up each day with a cognitive load fuel tank that may or may not be full.  The amount of fuel you have is your available cognitive ability.  Users with sensory processing, mental health disorders, or difficulties with executive function are going to expend more of this cognitive fuel tank than others would. So, it's our job as developers to be as "fuel efficient" as possible for our users.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 id="styling">Styling the toggle buttons inclusively</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>Color queues can help increase the "<em>fuel efficiency</em>" of our accessible toggle buttons.  Targeting the various states of the toggle button can help the user know if they haven't pressed the button yet, that they pressed the button, and that they had pressed the button. </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4><strong>Button not pressed:</strong></h4>
<!-- /wp:heading -->

<!-- wp:image {"id":11195,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://allmaddesigns.com/wp-content/uploads/2022/01/image-28.png" alt="send button grey with paper airplane icon" class="wp-image-11195"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":4} -->
<h4>The <strong>Button pressed (aria-pressed=true):</strong></h4>
<!-- /wp:heading -->

<!-- wp:image {"id":11197,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://allmaddesigns.com/wp-content/uploads/2022/01/image-30.png" alt="send button green with thick black border and thumbs up icon" class="wp-image-11197"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":4} -->
<h4>Ths user pressed the button at some point<strong>:</strong></h4>
<!-- /wp:heading -->

<!-- wp:image {"id":11196,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://allmaddesigns.com/wp-content/uploads/2022/01/image-29.png" alt="send button grey with paper airplane icon and thick black border" class="wp-image-11196"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>Color alone cannot account for all users.  Many users experience color differently. To build our toggle buttons inclusively, we need to first ensure our <a href="https://webaim.org/resources/contrastchecker/" target="_blank" rel="noreferrer noopener">contrast ratio's pass</a>, and second include icons for better visual comprehension.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>We start with the basic button styles.  We ensure that our background and foreground colors are passing the contrast ratio test, linked above:</p>
<!-- /wp:paragraph -->

```css
button {
    font-size: inherit;
    border: 0.125rem solid transparent;
    padding: 1rem 1.5rem;
    border-radius: 0.25rem;
    min-width: 150px;
    background: #595959;
    margin: 3% 5%;
    color: #fff;
}
```

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>For the user interaction styles, </p>
<!-- /wp:paragraph -->

<!-- wp:list {"imagePinMeta":{}} -->
<ul><li>First, we add a style for <code>[aria-pressed]</code>; this sets up how the button will appear to be "pressed" when the :focus element is active.</li><li>Next, we add a style for the <code>[aria-pressed]:focus</code> element so that a user sees a change and knows the button was pressed at some point, but is ready to use.</li><li>Finally, we add our <code>[aria-pressed=true]:focus</code> style; which appears to depress the button as well as changes the color to a passing contrast of green and white.</li></ul>
<!-- /wp:list -->

```css
/**User interaction styles**/
[aria-pressed] {
    position: relative;
    top: -0.25rem;
    left: -0.25rem;
    box-shadow: 0.125em 0.125em 0 #fff, 0.25em 0.25em #000;
}
[aria-pressed]:focus {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 0.25rem #222;
    color: #ffffff;
    border: 2px solid #ffffff;
    background: #595959;
    transition: background-color ease-in-out 500ms, 
    color ease-in 200ms, border-color ease-in 200ms, 
    box-shadow ease-in 200ms;
}

[aria-pressed='true']:focus {
    box-shadow: 0 0 0 0.25rem #222, 
    inset 0 0 0 0.15rem #595959, 
    inset 0.25em 0.25em 0 #fff;
    background-color: #006600;
}
```

<!-- wp:heading {"level":3} -->
<h3 id="icons">Iconography for Visual Understanding</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>First, you’ll want to install&nbsp;<strong>Font Awesome&nbsp;</strong>in your React App. <mark><a href="https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react" target="_blank" rel="noreferrer noopener">Start here</a></mark>. </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>Starting back at my Button component</h4>
<!-- /wp:heading -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>I import the Font Awesome react library and import the <strong>thumbs up</strong> icon.  </p>
<!-- /wp:paragraph -->

```javascript
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faThumbsUp } from '@fortawesome/free-solid-svg-icons';
```

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>This icon is a part of my <code>onButtonClick</code> function. It tells the user that<strong> so long as aria=pressed is true, they receive a thumbs up letting them know the process was successful.</strong></p>
<!-- /wp:paragraph -->

```javascript
const onButtonClick = () => {
    if (ariaPressed === false){
        setAriaPressed(true); 
        setFaIcon(&lt;FontAwesomeIcon icon={faThumbsUp} />); //so long as aria-pressed is true show a thumbs up
        setTimeout(() => {
            setAriaPressed(false);
            setFaIcon(fontIcon);
        }, 5555);
 console.log("button clicked");
    } else {
        setAriaPressed(false);
        setFaIcon(fontIcon);
    }
}
```

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p><strong>We can see that the aria-pressed attribute is true and the button has a thumbs up icon</strong>:</p>
<!-- /wp:paragraph -->

<img src="https://allmaddesigns.com/wp-content/uploads/2022/01/Pasted_Image_1_14_22__1_08_PM.png" alt="html source shows the previous toggle button aria-pressed state as false" class="wp-image-11198"/>

<!-- wp:heading {"level":4} -->
<h4>Back in my App component</h4>
<!-- /wp:heading -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>I'm going to add icons to help the user understand what the button does.  </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p><strong>At the top of my file, I import the Font Awesome React components I need:</strong></p>
<!-- /wp:paragraph -->

```javascript
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faForward } from '@fortawesome/free-solid-svg-icons';
import { faBackward } from '@fortawesome/free-solid-svg-icons';
import { faPaperPlane } from '@fortawesome/free-solid-svg-icons';
```

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p><strong>And within each button component, I've included the font awesome component and icon I need:</strong></p>
<!-- /wp:paragraph -->


```javascript        
  <Button fontIcon={<FontAwesomeIcon icon={faBackward} />} label="previous" />
  <Button fontIcon={<FontAwesomeIcon icon={faForward} />} label="next" />
```
<!-- wp:heading {"level":4} -->
<h4>Styling the icons</h4>
<!-- /wp:heading -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>Because my button component has two instances of the font icon, I need to be sure I hide the unnecessary duplicate icon.</p>
<!-- /wp:paragraph -->

```css
/**Icon styles**/

.next > svg:first-of-type, 
.previous > svg:last-of-type,
.send > svg:first-of-type {
    display: none;
}
.svg-inline--fa {
    padding-left: 7px;
    padding-right: 7px;
    margin-bottom: -2px;
}
.next > svg:last-of-type {
    margin-bottom: -1px;
}
```

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>Here we can see that, while there are two svg elements within this button, only the arrow to the left shows for the <strong>previous</strong> button while the right arrow is set to <code>display:none;</code></p>
<!-- /wp:paragraph -->

<img src="https://allmaddesigns.com/wp-content/uploads/2022/01/Pasted_Image_1_14_22__1_57_PM.png" alt="unused arrow icons are hidden with display none" class="wp-image-11207"/>

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Wrapping Up</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>In this article, we built a Button Component that can be used and re-used in the App Component for anything you can think of. We learned how to provide audio feedback using semantic HTML and the aria-pressed attribute. How to also use iconography and the aria-pressed attribute to style our buttons to ease cognitive load. Hopefully, now you have a pretty solid understanding of how to build accessible toggle buttons with React. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"imagePinMeta":{}} -->
<p>If you're interested in learning how to make more React Components Accessible, <a href="https://allmaddesigns.com/build-accessible-to-do-list/" target="_blank" rel="noreferrer noopener">check out this post</a> on making an Accessible To Do list with React.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"small","imagePinMeta":{}} -->
<p class="has-small-font-size">Photo by <a href="https://unsplash.com/@flowforfrank?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Ferenc Almasi</a> on <a href="https://unsplash.com/s/photos/react?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></p>
<!-- /wp:paragraph -->