Accessibility Auditing My Portfolio Site — Part 2

The Quick Fixes

Problem 1:

Solution:

Problem 2:

Solution:

Problem 3:

Solution:

Problem 4:

Solution:

<svg role=”img” aria-labelledby=”arrowTitle arrowDesc” fill=’none’ stroke=’#0E1A27' stroke-width=’8' stroke-dashoffset=’0' stroke-dasharray=’0' stroke-linecap=’round’ stroke-linejoin=’round’ xmlns=’http://www.w3.org/2000/svg' viewBox=’0 0 100 100'>
<title id=”arrowTitle”>Arrow</title>
<desc id=”arrowDesc”>arrow that spins on hover</desc>
<line x1=”70" y1=”50" x2=”0" y2=”50" /><polyline fill=”none” points=”30,10 80,50 30,90 “/></svg>
<svg id=”arrow” role=”img” aria-labelledby=”arrowDesc” fill=’none’ stroke=’#0E1A27' stroke-width=’8' stroke-dashoffset=’0' stroke-dasharray=’0' stroke-linecap=’round’ stroke-linejoin=’round’ xmlns=’http://www.w3.org/2000/svg' viewBox=’0 0 100 100'>
<title id=”arrowTitle”>Arrow</title>
<desc id=”arrowDesc”>arrow that spins on hover</desc>
<line x1=”70" y1=”50" x2=”0" y2=”50" /><polyline fill=”none” points=”30,10 80,50 30,90 “/></svg>
<span className=”subwork_links”>
<a className=”link-new-tab” href=”https://github.com/abbeyperini/BujoToGo" target=”_blank” rel=”noreferrer”><Github id=”BujoToGoGithub” aria-label=”open BujoToGo Github repository in a new tab” focusable=”true” className=”work_icon”/></a>
<a className=”link-new-tab” href=”http://bujo-to-go.surge.sh/#/index" target=”_blank” rel=”noreferrer”><Chrome id=”BujoToGoChrome” aria-label=”open BujoToGo website in a new tab” focusable=”true” className=”work_icon”/></a>
</span>

Problem 5:

Solution:

.external-link {
height: 1em;
width: 1em;
top: .15em;
position: relative;
}

Problem 6:

Solution:

Problem 7:

Solution:

a screenshot of the contact section with updated links on abbeyperini.dev

Conclusion

--

--

--

…did someone say animated CSS button?

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Spring Data Reactive MongoDB — CRUD Operations

Angular: Simple Ionic Tabs App with Child Routes & Protected Routes

Significance of Software Testing Companies in the IT Industry

The Devil’s Dictionary of Software Design

Bubble Sort Algorithm Visually Explained

Product Manager 101 : Role and Responsibility

How to get a Free Domain Name for AWS Web Hosting

How do you actually become a two Pizza team?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abbey Perini

Abbey Perini

…did someone say animated CSS button?

More from Medium

How to integrate Chakra UI with Storybook in a React Project 🚀

Accessibility Auditing My Portfolio Site — Part 6

Frodo on Mount Doom “It’s done. It’s over now.”

Block, Inline & Inline-block. What’s the difference?

Block elements

5 Articles every WebDev should read this week (#51)