As more and more apps are connecting to each other, it becomes more and more important to make sure that your API keys are easy for everyone to access & use.
- Accessible API key: Use semantic HTML (
label for=ID) to provide a meaningful label for the API key input field. - Use a button for copying: Use a button to allow users to copy the API key, as it’s an action.
- Make the input field focusable: Set the input field to readonly to allow it to be focusable for keyboard navigation and assistive technology.
- Prioritize the copy button: Place the copy button before the input field to minimize the amount of content read by screen readers.
- Accessibility benefits: This approach improves the accessibility of API key forms for users with assistive technology.
CodePen for the HTML is available.
Transcript
Gen
Welcome back to the Easy A11y Guide channel. I’m Gen Herres, and in this video, I’m going to talk to you about API keys and making sure that copying them is accessible.
Gen
To start out, we’re going to have a small form area. We’re going to have a label at the top, and that label will use the semantic HTML, for, and then the ID of our input field that actually has our API key. Here you can see that the for API-key and the ID of the input field is also API-Key. This has a meaningful label, API-key. The next item is a button. This Button allows us to copy the API key. Copying is an action, so we want to use a button for it. If it was a destination, then we would use a link.
Gen
Finally, we have our input, which is going to be a text field. It will be to read only. This allows the field to be focusable so that people who are using keyboard navigation and other assistive technology can easily focus on it. Now we’re going to show how the screen reader actually handles these three items. First, it reads off the API key, which is the label.
VoiceOver
Copy API key, button.
Gen
Then it gets to our button. This is really helpful for people who are using assistive technology because they really don’t want to hear the entire input area read out.
VoiceOver
Skfj, SDF, JLSFJ, API key, clickable, text.
Gen
That’s how the input field is to people using a screen reader. The longer the API key, the less pleasant it is. This is why we put the copy button before the input field so that they don’t have to even deal with the input field, and they can just copy it easily. Thanks for watching, and make sure to hit like and subscribe to follow us for more accessibility tips.