SVG Icons need aria-label or a <title> in the svg for accessibility

[jeanadev]

Describe the bug The most prominent place to see this in action is when Social icons are SVGs and are links. Screen readers are unable to identify any of the social links. Right now, a screen reader announces "Link, thatconference. Link, thatconference. Link, thatconference." for all of the social links except the last two. We could provide an aria-label in the link, or a <title> in the <svg> to enable screen readers to read a shortened version of the URL.

To Reproduce Steps to reproduce the behavior:

1. Enable voice over utilities on a mac
2. Navigate to https://that.us/events/
3. Tab through the page to the social links at the bottom in the footer, and hear, "Link, thatconference. Link, thatconference. Link, thatconference."

Expected behavior It would be more useful for a user to hear, "Link, Thatconference Github". Or "Link, Github", etc.

Screenshots See video: https://user-images.githubusercontent.com/194128/141855699-8643c754-b380-4140-a9b0-9459995cb7d3.mov

Desktop (please complete the following information):

• OS: 11.6
• Browser: Chrome
• Version: 93

[zaudtke]

@csell5 Should this be closed since the PR was merged in?