Better UX for screenreader users when tabbing to sign in links (a11y)

[meowwwls]

Is your feature request related to a problem? Please describe.
In the call out to sign in using Twitter or Github, a screenreader user just hears "Twitter" or "Github" when tabbing through the document. This could be confusing, thinking the link will take the user to Twitter or Github.

Below is a GIF that shows what a screenreader user hears when tabbing to those links:

Describe the solution you'd like
A better experience would be for a screenreader user to hear "Sign in using Twitter" or "Sign in using GitHub".

Describe alternatives you've considered
A simple way to accomplish this while keeping that additional text visually hidden would be to wrap it in a span element use a special visually-hidden class:

<a href="/users/auth/twitter?callback_url=https://dev.to/users/auth/twitter/callback" class="cta cta-button" data-no-instant="">
  <span class="visually-hidden">Sign in using</span> TWITTER
</a>

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

Doing the above, the experience for a screenreader user is better and more accurate:

[jessleenyc]

@meowwwls thanks for creating this issue. This is approved if you'd like to submit a PR, or for anyone who might want to give this a shot!