UI/UX Design Design Systems & Accessibility Flashcards

24 sample cards from the Design Systems & Accessibility deck

Sampled from the end of the deck, so these are different cards from the ones shown on the syllabus page.

1. Which WCAG conformance level do most laws and organizations require, and name one law that references it.

   Level AA. Examples: the ADA (as interpreted by US courts/DOJ), Section 508 in the US, the European Accessibility Act / EN 301 549 in the EU, and AODA in Ontario all reference WCAG 2.x Level AA.

2. Roughly what proportion of the world's population lives with a disability, making accessibility a mainstream design concern?

   About $15\%$–$16\%$ — over 1 billion people (WHO estimates ~1.3 billion). Accessibility also benefits everyone through situational and temporary limitations (bright sunlight, broken arm, noisy environment).

3. Give the WCAG formula for contrast ratio between two colors.

   $$\text{Contrast ratio} = \frac{L_1 + 0.05}{L_2 + 0.05}$$ where $L_1$ is the relative luminance of the lighter color and $L_2$ that of the darker color. The ratio ranges from $1{:}1$ (identical) to $21{:}1$ (black on white).

4. What are the WCAG AA and AAA minimum contrast ratios for normal and large text?

   AA: $4.5{:}1$ for normal text and $3{:}1$ for large text. AAA: $7{:}1$ for normal text and $4.5{:}1$ for large text. Non-text UI components and graphical objects require at least $3{:}1$ (AA, SC 1.4.11).

5. How does WCAG define 'large text' for contrast purposes?

   Text at least $18\,\mathrm{pt}$ (about $24\,\mathrm{px}$) regular weight, or at least $14\,\mathrm{pt}$ (about $18.66\,\mathrm{px}$) bold.

6. Why must color never be the only means of conveying information, and what is an example fix?

   Users with color vision deficiency (about $8\%$ of men, $0.5\%$ of women) or monochrome displays may miss it (WCAG 1.4.1 'Use of Color'). Fix: pair color with a second cue — icons, text labels, patterns, or underlines (e.g., an error field gets a red border plus an error icon and message, links are underlined not just colored).

7. Which keys must a fully keyboard-accessible interface support, and for what actions?

   Tab / Shift+Tab to move focus forward/backward between interactive elements; Enter (and Space for buttons/checkboxes) to activate; arrow keys to move within composite widgets (menus, radio groups, tabs); Esc to dismiss dialogs/menus. No functionality may require a mouse (WCAG 2.1.1).

8. What is a keyboard trap, and what does WCAG require about it?

   A situation where keyboard focus enters a component (e.g., a widget or embedded plugin) and cannot be moved out using the keyboard alone. WCAG 2.1.2 requires that focus can always be moved away using standard keys (Tab/arrow/Esc) or that users are told how to exit.

9. Explain visible focus indicators and the tabindex values 0 and -1.

   A visible focus indicator (e.g., outline/ring) must show which element has keyboard focus (WCAG 2.4.7) — never remove outlines without a replacement. tabindex="0" adds an element to the natural tab order; tabindex="-1" makes it programmatically focusable (via script) but removes it from the tab order; positive tabindex values are an anti-pattern because they override logical order.

10. What is a skip link and why is it important?

    A 'skip to main content' link placed as the first focusable element on a page, letting keyboard and screen-reader users bypass repeated navigation blocks and jump straight to the main content — satisfying WCAG 2.4.1 (Bypass Blocks).

11. What is a screen reader, and name three widely used ones with their platforms.

    Assistive software that converts on-screen content into speech or braille for blind and low-vision users. Examples: JAWS and NVDA (Windows), VoiceOver (macOS/iOS), TalkBack (Android), Narrator (Windows).

12. What does ARIA stand for, and what are its three main attribute categories?

    Accessible Rich Internet Applications (WAI-ARIA). Categories: 1) Roles — what an element is (role="dialog", "tab"); 2) Properties — characteristics/relationships (aria-label, aria-labelledby, aria-describedby); 3) States — current dynamic conditions (aria-expanded, aria-checked, aria-hidden, aria-disabled).

13. State the first rule of ARIA.

    Don't use ARIA if a native HTML element or attribute provides the semantics and behavior you need — use <button>, <nav>, <input> etc. instead of adding roles to generic <div>s, because native elements bring keyboard behavior and semantics for free. 'No ARIA is better than bad ARIA.'

14. What is an ARIA live region and when do you use aria-live="polite" vs "assertive"?

    A region whose content changes are automatically announced by screen readers without moving focus. Use aria-live="polite" for non-urgent updates announced when the user is idle (e.g., search result counts); use "assertive" only for urgent messages that interrupt immediately (e.g., critical errors).

15. What is mobile-first design?

    A strategy that designs and builds for the smallest screen first, then progressively enhances the layout and features for larger screens. It forces prioritization of core content and actions, and in CSS it means base styles target mobile with min-width media queries adding complexity upward.

16. How does mobile-first (progressive enhancement) differ from desktop-first (graceful degradation)?

    Mobile-first starts with the constrained experience and adds capability as screen size/power grows (min-width queries); desktop-first designs the full experience and strips it down for smaller screens (max-width queries), which risks cramming and hiding content rather than prioritizing it.

17. What are the recommended minimum touch target sizes on iOS and Android?

    Apple HIG: at least $44 \times 44\,\mathrm{pt}$. Google Material Design: at least $48 \times 48\,\mathrm{dp}$ (with $\geq 8\,\mathrm{dp}$ spacing between targets). WCAG 2.2 requires a minimum of $24 \times 24\,\mathrm{px}$ (AA, SC 2.5.8) and recommends $44 \times 44$ (AAA).

18. What is a breakpoint in responsive design, and what are typical breakpoint ranges?

    A viewport width at which the layout changes to suit the screen. Common convention: small phones under ~$576\,\mathrm{px}$, tablets ~$768\,\mathrm{px}$, laptops ~$992{-}1024\,\mathrm{px}$, desktops ~$1200\,\mathrm{px}$ and up. Best practice: let content determine breakpoints rather than specific devices.

19. Compare responsive and adaptive layouts.

    Responsive design uses fluid grids and flexible units so one layout continuously reflows to any viewport width; adaptive design serves several fixed layouts, snapping to the closest predefined size at set breakpoints. Responsive is more future-proof; adaptive allows precise per-size control but more maintenance.

20. In a mobile-first stylesheet, which media-query feature is used and how?

    min-width queries: base (unqueried) styles apply to the smallest screens, then @media (min-width: 768px) { ... } and larger breakpoints progressively override/extend them as the viewport grows.

21. What are the two dominant mobile platform design guideline systems, and who publishes them?

    Apple's Human Interface Guidelines (HIG) for iOS/iPadOS/macOS/watchOS, and Google's Material Design for Android and the web. They define platform conventions for navigation, typography, components, motion, and interaction.

22. Contrast key navigation and visual conventions of iOS (HIG) versus Android (Material Design).

    iOS: tab bars at bottom, back via top-left button or edge-swipe, San Francisco typeface, flat translucent aesthetics, $44\,\mathrm{pt}$ targets. Material: bottom navigation bar or navigation drawer, system-level back gesture/button, Roboto typeface, elevation/shadow layers, Floating Action Button, $48\,\mathrm{dp}$ targets.

23. What is cross-platform consistency, and what should stay consistent vs adapt per platform?

    Keeping a product recognizably the same across web, iOS, Android, and desktop. Keep consistent: brand identity, color/typography tokens, terminology, information architecture, core flows, and feature parity. Adapt: navigation patterns, native components/controls, gestures, and platform conventions so the app feels native on each platform ('one brand, native feel').

24. Name Jakob Nielsen's usability heuristic most relevant to design systems, and explain Jakob's Law.

    Heuristic #4: 'Consistency and standards' — users should not have to wonder whether different words, situations, or actions mean the same thing. Jakob's Law adds that users spend most of their time on other products, so they expect your interface to follow familiar platform and web conventions.

What this deck covers

Design Systems & Accessibility flashcards FAQ