Top 5 Most Common Accessibility Annotations

▤ Summary

They’re the thing you dread at the end of your design process where you have to lean wayyyy back in your chair, pour yourself another cup of coffee, look at the ceiling and say “Ok, let’s get this over with.” Now there are lots of tools, libraries, patterns, and software that can make this faster, but at the end of the day, a precision prototype’s job is to communicate how certain aspects of a design should be represented down to an element’s behavior, color, typeset, size and scale– and you gotta do it. Let’s take a look at our example: Couple things of note: #12 and #13 are important because I’m indicating that there are no other focusable elements between the end of the top bar and the first card. If you’re wondering why those color swatch swappers on the card pattern aren’t marked up as buttons, it’s because they aren’t…they’re actually styled radio controls. Let’s take a look at the example: Here is a more detailed view of the Accessible Name Annotations: So the logo gets one, the icons in the top bar get them…makes sense. In this article I’m not going to go into a long diatribe about properly structuring content and reading order and how to do what, when, etc… Mostly because there is a lot of variances and, in reality, there are many correct answers depending on what you’re trying to emphasize and how.

▦ Linked Companies

Deque Systems

$10M to $25M