Portfolio UX, Visual Design and Accessibility

Introduction

A portfolio is not merely a gallery of completed projects. It is an interface through which an employer, client, or collaborator evaluates a developer’s judgment, technical ability, communication, and professional reliability. Its design therefore performs an argumentative function: it selects evidence, organizes that evidence, and helps a particular audience interpret it quickly and accurately.

For a full stack developer, portfolio quality depends on more than attractive colors or advanced animations. Visitors must be able to understand who the developer is, locate relevant work, inspect project decisions, and contact the developer without unnecessary effort. These requirements connect user experience (UX), visual design, responsive implementation, usability, and accessibility.

Good portfolio design is consequently a process of communication and problem solving. Decorative choices are valuable only when they support comprehension, credibility, or appropriate emotional tone. When decoration competes with content, the portfolio becomes visually memorable but professionally ineffective.

Learning Objectives

By the end of this chapter, students should be able to:

1. Explain how UX principles influence portfolio structure and credibility.
2. Apply typography, spacing, hierarchy, color, and layout principles to portfolio interfaces.
3. Design responsive layouts that work across screen sizes and input methods.
4. Evaluate portfolio usability using established heuristics and task-based testing.
5. Apply accessibility principles based on WCAG and inclusive design practice.
6. Critically assess decorative choices that may reduce clarity, performance, or inclusion.
7. Produce and justify a portfolio design using evidence, user needs, and professional goals.

1. The Portfolio as a User Experience

UX concerns the perceptions and actions that arise when people interact with a product, service, or interface. In a portfolio, the user experience includes the first impression, the ease of navigation, the interpretation of projects, the confidence created by evidence, and the success of contact or hiring tasks.

A useful way to analyze a portfolio is to identify its principal users and their tasks. A recruiter may scan several portfolios in a short period and seek technology keywords, role fit, and contact information. A technical interviewer may inspect architecture decisions, testing practices, and source code. A potential client may be more concerned with business outcomes, reliability, and communication. These users have different goals, so a portfolio should not be designed around the author’s desire to display every skill equally.

User goals, content goals, and business goals

Portfolio planning should align three categories of goals:

The alignment of these goals creates a coherent experience. If a portfolio’s professional goal is recruitment, the interface should make role, capabilities, evidence, and contact pathways readily available. A visually complex landing page that hides this information is strategically weak, even if it demonstrates sophisticated front-end techniques.

Information architecture

Information architecture is the organization and labeling of content. A small portfolio commonly includes Home, About, Projects, Resume, and Contact. The exact labels may differ, but the structure should be predictable. Navigation should reveal the portfolio’s scope rather than force users to discover it through experimentation.

Project pages benefit from consistent information architecture. Each project might present:

• the problem or user need;
• the developer’s role and contributions;
• the technologies used and why they were selected;
• important design or architecture decisions;
• implementation evidence such as screenshots, diagrams, or code excerpts;
• testing, performance, or accessibility considerations;
• the result, limitations, and possible next steps;
• links to a live deployment and repository when appropriate.

Consistency reduces cognitive effort. If every project uses different headings and different locations for links, visitors must repeatedly learn the interface instead of evaluating the work.

2. Visual Hierarchy and Layout

Visual hierarchy is the deliberate ordering of elements according to their importance. Size, position, contrast, whitespace, typography, grouping, and repetition all contribute to hierarchy. A visitor should normally be able to identify the portfolio owner, professional focus, principal evidence, and next action without reading every word.

Layout as a communication system

A layout establishes relationships. Alignment suggests that elements belong together; proximity groups related content; whitespace separates concepts; repetition creates a visual grammar. A grid can help maintain alignment across cards, text blocks, images, and controls, but a grid should serve content rather than constrain it arbitrarily.

A practical layout process is:

1. Identify the primary task for each page.
2. Rank content as essential, supporting, or optional.
3. Establish a reading order independent of visual styling.
4. Create a low-fidelity wireframe.
5. Test the wireframe with representative users.
6. Apply visual styling after the structure is sound.

This sequence prevents visual polish from concealing structural problems.

Above-the-fold content

The initial viewport should communicate context and provide a useful path forward. It need not contain every important fact, and the phrase above the fold should not be treated as a rigid technical boundary because screen sizes vary. Nevertheless, the first visible region should usually identify the person, role or area of focus, a concise value proposition, and a clear route to projects or contact.

A useful value proposition is specific. Full stack developer who builds accessible data-driven web applications is more informative than Creative digital problem solver. Specificity improves both human comprehension and search relevance, although search-engine optimization should never produce unnatural or misleading text.

Cards and visual summaries

Project cards are effective for scanning, but they can become superficial when they show only a title, image, and technology list. A strong card communicates the problem addressed, the developer’s role, and a meaningful result or learning outcome. Technology badges should not substitute for explanation. The presence of React, Node.js, or PostgreSQL does not by itself demonstrate competence.

3. Typography and Readability

Typography affects comprehension, credibility, and perceived effort. A portfolio should select typefaces for legibility, language support, rendering quality, and hierarchy rather than novelty alone.

Type hierarchy

A coherent hierarchy distinguishes page titles, section headings, body text, labels, captions, and controls. Hierarchy can be created through size, weight, spacing, and position. Excessive variation weakens the system, while insufficient variation makes scanning difficult.

Body text should normally use a comfortable line length and line spacing. Very long lines increase the chance that readers lose their place; very short lines create excessive vertical movement. A practical starting point is approximately 45–85 characters per line for prose, followed by testing on actual devices. This is a design guideline, not a universal law.

Text should remain readable when users zoom the page. WCAG 2.2 requires that text generally be resizable up to 200 percent without loss of content or functionality, with specified exceptions. Responsive CSS, flexible containers, and avoidance of fixed-height text regions support this requirement.

Font choice and loading

A portfolio may use a system font stack to improve performance and avoid layout shifts. If a web font is used, designers should consider loading cost, licensing, language coverage, and fallback behavior. Font-display strategies, preloading used fonts carefully, and reserving appropriate space can reduce cumulative layout shift.

All-caps text reduces word-shape variation and should therefore be used sparingly. Italic text may be difficult for some readers, and thin font weights can lose contrast on low-quality displays. Code samples require a readable monospace typeface and should not be presented as tiny decorative textures.

4. Color, Contrast, and Meaning

Color can establish hierarchy, identify states, and express brand character. It must not be the sole carrier of essential information. For example, a form should not communicate errors only through a red border; it should also provide an explicit message and an accessible programmatic association.

WCAG contrast requirements are commonly expressed as a ratio between the relative luminance of a lighter color and a darker color:

Here, L₁ is the higher relative luminance and L₂ is the lower relative luminance, with both values normalized from 0 to 1. The ratio is dimensionless. Relative luminance is calculated from color-channel values after converting encoded sRGB values to linear-light values. In practice, designers should use a reliable contrast-testing tool rather than estimate contrast visually.

WCAG 2.2 generally specifies a minimum contrast ratio of 4.5:1 for normal-sized text and 3:1 for large text at Level AA. Large text has a separate definition involving font size and weight. User-interface components and meaningful graphical objects also have contrast requirements in relevant situations. These thresholds are conformance criteria, not guarantees of perfect readability; context, font design, display quality, and visual impairments still matter.

Color palettes should include semantic roles such as background, surface, primary text, secondary text, link, focus, success, warning, and error. A dark theme should be tested independently rather than treated as an automatic accessibility improvement. Very high contrast can also create discomfort for some users, so a balanced, user-tested palette is preferable.

5. Responsive and Adaptive Design

Responsive design allows a layout to adjust to viewport dimensions, content, device capabilities, and interaction methods. It is not simply the practice of shrinking a desktop page on a phone.

Core responsive principles

A responsive portfolio should use:

• fluid containers and flexible grids;
• relative units where appropriate;
• images that scale without distortion;
• breakpoints based on content failure rather than popular device names;
• touch targets that are sufficiently large and separated;
• navigation that remains understandable at narrow widths;
• content priority decisions for small screens;
• testing in portrait, landscape, zoomed, and reduced-motion conditions.

Mobile-first implementation can be useful because it encourages prioritization. However, mobile-first does not mean mobile-only. Wide screens may support comparison, detailed project diagrams, and multi-column layouts, while small screens require sequential reading and simplified navigation.

A responsive layout should preserve meaning even when its visual arrangement changes. CSS visual reordering must not create a confusing keyboard or screen-reader sequence. The document structure and reading order should remain logical.

Responsive content and media

Images need alternative text when they convey information. Decorative images should use empty alternative text so assistive technologies can ignore them. A project screenshot may require a concise description of its purpose, while a complex architecture diagram may require a nearby text explanation or an equivalent detailed description.

Video demonstrations should provide captions, and important audio information should have a text alternative. Autoplaying media is generally distracting and may create accessibility or performance problems.

6. Usability Heuristics and Evaluation

Usability is the extent to which specified users can achieve specified goals effectively, efficiently, and satisfactorily in a specified context. A portfolio can be evaluated using Nielsen’s ten usability heuristics, adapted to its professional context.

Heuristic evaluation is an expert inspection, not a replacement for user testing. A useful evaluation records the violated heuristic, evidence, affected users, severity, and proposed remedy. Severity should reflect impact and frequency, not the evaluator’s personal taste.

Task-based testing

Task-based testing asks representative participants to perform realistic activities, such as finding a project using a particular technology, explaining the developer’s contribution, locating the resume, or sending a contact message. Observers should avoid teaching during the task. They should record hesitation, errors, misunderstandings, and successful strategies.

Completion rate is useful, but numbers should be interpreted carefully. A participant may complete a task while experiencing substantial confusion. Qualitative observations often reveal why an interface fails. Testing five participants can expose many serious usability problems in a narrow design context, but it does not prove that the interface works for all users. Additional testing is needed for accessibility, different devices, and different user groups.

7. Accessibility and Inclusive Design

Accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to a digital product. Inclusive design extends the concern to differences in language, culture, age, device, connectivity, environment, and temporary ability.

The Web Content Accessibility Guidelines organize accessibility around four principles: perceivable, operable, understandable, and robust. These principles are supported by testable success criteria at conformance levels A, AA, and AAA. WCAG conformance is valuable, but it should be treated as a baseline rather than the complete definition of an inclusive experience.

Perceivable content

Information should not depend solely on vision, hearing, color, or motion. Use meaningful alternative text, captions, sufficient contrast, visible focus indicators, and text alternatives for complex media. Avoid text embedded in images because it does not scale or translate as effectively as real text.

Operable interaction

All functionality should be available through a keyboard or another sequential input method. Interactive controls need a logical focus order and a focus indicator that is visually apparent. Menus, modals, carousels, and custom widgets should expose appropriate names, roles, states, and properties to assistive technologies.

Native HTML elements are usually preferable to custom controls because browsers and assistive technologies already understand their behavior. A button should be implemented as a button, not as a styled generic container with a click listener. If custom interaction is necessary, it must reproduce keyboard behavior, focus management, semantics, and state communication.

Understandable content

Use plain, direct language, descriptive headings, predictable navigation, and helpful error messages. Technical expertise should be demonstrated through explanation, not through unnecessary jargon. Forms should identify labels, instructions, required fields, invalid values, and successful submission states.

Robust implementation

Semantic HTML, valid document structure, progressive enhancement, and testing with multiple browsers and assistive technologies improve robustness. Accessibility should be included in design specifications, component libraries, code review, automated checks, and release testing rather than added at the end.

Motion and cognitive considerations

Parallax, animated cursors, rapid transitions, and continuously moving backgrounds may distract users or cause discomfort. Respect the prefers-reduced-motion setting and ensure that animation is not required to understand or operate the site. Avoid time limits unless necessary, and provide control over auto-advancing content.

Inclusive design also requires respectful representation. Do not use disability as a visual gimmick, claim accessibility without testing, or present inaccessible contact methods as the only way to respond. Provide more than one reasonable communication channel when possible.

8. Decorative Design and Communication Risk

Decoration becomes harmful when it increases visual noise, delays access to evidence, obscures interaction, or creates unequal experiences. Common examples include:

• oversized hero animations that push essential content below the first interaction;
• low-contrast text placed over changing imagery;
• excessive glassmorphism that reduces legibility;
• novelty cursors that interfere with pointer precision;
• carousels that hide important projects;
• decorative technology logos presented as evidence of expertise;
• autoplay video or sound;
• excessive gradients, shadows, and motion that compete with headings;
• custom scroll behavior that disrupts expected navigation.

The appropriate question is not whether a visual effect is fashionable. It is whether the effect improves understanding for the intended audience and remains usable across devices and abilities. A restrained design can still be distinctive through writing, project selection, composition, color discipline, and thoughtful interaction.

9. A Practical Design and Build Workflow

A professional workflow integrates research, content, design, implementation, and evaluation.

Step 1: Define audience and positioning

Identify target roles, industries, and likely visitor tasks. Select evidence that supports the desired position. A developer seeking accessibility-focused front-end roles should foreground semantic implementation, testing, inclusive design decisions, and measurable outcomes rather than present an undifferentiated list of every technology encountered.

Step 2: Audit and prioritize content

Collect project material, repository links, screenshots, metrics, reflections, and testimonials where appropriate. Verify ownership and permission to display client work. Rank content by relevance and evidence quality. Remove projects that are incomplete, misleading, or unrelated unless they demonstrate a particularly important capability.

Step 3: Create structure before style

Develop a sitemap, page outlines, and content hierarchy. Write headings and project summaries before selecting decorative imagery. This exposes weak evidence early and prevents design from being used to compensate for unclear content.

Step 4: Prototype and test

Build low-fidelity wireframes and test navigation with representative users. Then create a visual design system containing type scales, spacing tokens, color roles, buttons, links, cards, form states, and focus styles. A small design system improves consistency and reduces implementation errors.

Step 5: Implement semantically

Use semantic HTML, responsive CSS, optimized media, accessible names, and progressive enhancement. Keep content separate from presentation and interaction logic. Use component abstractions where they improve consistency, but do not hide important semantics behind overly complex abstractions.

Step 6: Evaluate technically and experientially

Test keyboard navigation, screen-reader output, zoom, contrast, reduced motion, touch interaction, performance, broken links, forms, and multiple browsers. Automated tools can detect some issues, such as missing labels or insufficient contrast, but they cannot determine whether a project explanation is understandable or whether the reading order makes sense.

Step 7: Maintain evidence and currency

A portfolio is a living professional artifact. Update project status, technology versions, employment information, and contact methods. Remove broken deployments and disclose archived or prototype status. A polished but outdated portfolio can damage credibility more than a simpler current one.

10. Worked Application: Redesigning an Illustrative Portfolio

The following is a fictional illustrative case.

Background

Mina is a final-year full stack development student applying for junior web developer positions. Her portfolio contains six projects, but recruiters report difficulty determining her role and finding a resume. The home page begins with a full-screen animated background, followed by three horizontally scrolling project cards. The site uses pale gray text over photographs, and project links are icons without visible labels.

Problem

The portfolio demonstrates implementation effort but performs poorly as a communication tool. Important information is hidden, the horizontal interaction is difficult with a keyboard, contrast is inconsistent, and the visual emphasis is placed on animation rather than evidence.

Analysis

A task analysis identifies four priority tasks:

1. Determine Mina’s professional focus.
2. Find a relevant project within one minute.
3. Understand Mina’s contribution and technical decisions.
4. Locate a resume or contact method.

A heuristic review finds poor visibility of system status during project loading, inconsistency in icon-only links, insufficient error recovery in the contact form, and a failure of aesthetic minimalism because the animation competes with project content. Keyboard testing reveals that the horizontal cards cannot be reached in a predictable order. Contrast testing identifies several text failures.

Approach and solution

Mina replaces the animated hero with a concise introduction: Full stack developer building accessible web applications with TypeScript, Node.js, and PostgreSQL. Two labeled actions lead to selected projects and the resume. She reduces six projects to three detailed case studies and adds a consistent structure: problem, role, solution, technical decisions, testing, outcome, and reflection.

The project index uses a responsive grid that becomes a single column on narrow screens. Each card has a visible title, a short problem statement, technology context, and a text link. Images have appropriate alternative text. A visible skip link, semantic landmarks, keyboard-accessible navigation, clear focus styles, and labeled form controls are added. The contact form provides inline instructions and a confirmation message that does not rely on color alone.

Mina tests the redesign with four classmates, one keyboard-only user, and an automated accessibility checker. She also tests at 200 percent zoom and with reduced motion enabled. The keyboard-only participant can now reach every control, but initially cannot distinguish the current navigation item; Mina adds a clear current-page indicator.

Outcome

The redesign reduces visual complexity while increasing evidence density. Test participants locate the resume and selected projects more quickly and describe Mina’s role with greater accuracy. The site is not considered universally accessible merely because it passes automated checks; instead, Mina documents the tests performed, remaining limitations, and future improvements.

Learning points

The case demonstrates that accessibility and professional communication are mutually reinforcing. Clear headings, visible labels, semantic structure, and restrained decoration help all visitors. The most successful redesign decision was not a particular color or framework. It was the prioritization of user tasks and credible evidence.

11. Performance, Privacy, and Professional Governance

Visual design decisions affect performance. Large images, video backgrounds, unoptimized fonts, and JavaScript-heavy interactions can increase loading time and data use. Responsive images, compression, lazy loading where appropriate, efficient code, and a meaningful loading strategy support equitable access, especially on mobile networks.

Portfolio analytics should be proportionate and transparent. Collect only information needed for a legitimate purpose, provide an understandable privacy notice, and avoid invasive tracking. Contact forms should protect submitted data, use secure transport, and avoid exposing personal information unnecessarily. The developer should understand applicable privacy and accessibility obligations in the jurisdictions where the portfolio is used; legal requirements vary, so professional legal advice may be needed for high-risk or commercial situations.

AI tools may assist with alt-text drafts, content editing, code generation, and accessibility issue discovery. They do not replace human review. Automatically generated alternative text can misidentify an image, code suggestions can introduce inaccessible interaction, and generated project descriptions may exaggerate outcomes. Developers remain responsible for accuracy, consent, privacy, licensing, and final accessibility decisions.

12. Contemporary Practice and Critical Evaluation

Current portfolio practice increasingly emphasizes case-study storytelling, design systems, performance, inclusive design, and evidence of collaboration. Recruiters often value the ability to explain trade-offs as much as the ability to list tools. A project narrative should therefore address constraints: Why was a technology chosen? What failed? How was quality evaluated? What would change with more time?

There is also a tension between individual branding and authentic communication. Personal branding can help visitors remember a candidate, but excessive branding may turn a portfolio into a performance detached from evidence. Similarly, experimental interfaces may demonstrate technical skill, yet employers must still be able to complete ordinary tasks. Innovation is most persuasive when it remains understandable, purposeful, and inclusive.

A mature portfolio treats accessibility as a quality attribute, not a marketing claim. It reports concrete practices and limitations rather than using vague labels such as fully accessible without evidence. It also recognizes that standards evolve and that user testing is an ongoing professional responsibility.

Best-Practice Checklist

Before publishing, verify that:

• the target role and professional focus are immediately understandable;
• projects explain problem, role, decisions, outcome, and limitations;
• navigation and page structure are consistent;
• text remains readable at 200 percent zoom;
• contrast and focus indicators have been tested;
• every interaction works with a keyboard;
• images, video, forms, and status messages have suitable alternatives;
• motion respects reduced-motion preferences;
• layouts work on small and large screens;
• performance and media size have been reviewed;
• links, deployments, resume details, and contact methods are current;
• privacy, permissions, and client confidentiality have been considered;
• testing includes people and situations that automated tools cannot represent.

Chapter Summary

Portfolio design is a communication problem supported by technology. UX begins with audience tasks, content priorities, information architecture, and clear professional positioning. Visual hierarchy, typography, spacing, color, and layout should make evidence easier to find and interpret rather than compete with it.

Responsive design must preserve meaning across screen sizes, input methods, zoom levels, and device conditions. Usability heuristics and task-based testing reveal problems that visual preference alone cannot identify. Accessibility requires perceivable content, operable controls, understandable communication, and robust implementation. Semantic HTML, keyboard support, alternative text, captions, contrast, focus indicators, reduced-motion support, and accessible forms are practical expressions of these principles.

Decorative choices are justified only when they improve communication or purposeful engagement. Performance, privacy, ethical representation, and honest claims are also part of professional portfolio quality. A strong portfolio is therefore not the most elaborate one; it is the one that enables diverse visitors to understand the developer’s capabilities and act on that understanding.

Key Terms

User experience (UX): The perceptions and actions arising from interaction with a product or interface.

Information architecture: The organization, labeling, and relationship of information.

Visual hierarchy: The arrangement of elements according to relative importance.

Typography: The design and use of type to support reading and communication.

Responsive design: An approach in which layout and content adapt to screen and device conditions.

Breakpoint: A condition at which a responsive layout changes to preserve usability.

Usability: The extent to which users achieve goals effectively, efficiently, and satisfactorily.

Heuristic evaluation: Expert inspection of an interface against recognized usability principles.

Accessibility: The ability of people with disabilities to use a product or service.

Inclusive design: Design that accounts for diverse abilities, contexts, identities, and circumstances.

WCAG: Web Content Accessibility Guidelines for accessible web content.

Semantic HTML: HTML elements whose meaning and structural role are communicated to browsers and assistive technologies.

Alternative text: Text that communicates the purpose or information of an image when it cannot be perceived visually.

Focus indicator: A visible indication of the currently focused interactive element.

Contrast ratio: A luminance-based comparison used to evaluate distinguishability between colors.

Progressive enhancement: Building a usable baseline experience and adding enhancements where supported.

Cognitive load: The mental effort required to understand and operate an interface.

Design system: A coordinated set of design tokens, components, patterns, and usage guidance.

Case study: A structured account of a project, including its problem, process, decisions, and results.

Review Questions

Short Answer Questions

1. Why should portfolio design begin with user tasks rather than visual styling?
2. State two ways typography can influence portfolio usability.
3. What is the purpose of a visible keyboard focus indicator?
4. Why should color not be the sole method of communicating an error?
5. Name the four WCAG principles.

Long Answer Questions

1. Explain how information architecture and visual hierarchy work together in a portfolio.
2. Discuss the difference between responsive design and simply shrinking a desktop layout.
3. Explain how Nielsen’s usability heuristics can be applied to a project case-study page.
4. Discuss why semantic HTML and progressive enhancement support robust accessibility.
5. Evaluate the professional risks of excessive animation, low contrast, and icon-only navigation.

Analytical / Application Questions

1. Design a testing plan for a portfolio aimed at junior full stack development recruiters. Identify users, tasks, devices, accessibility conditions, and evidence to collect.
2. A portfolio has attractive project screenshots but no explanation of the author’s role, decisions, or outcomes. Analyze the communication problem and propose a revised case-study structure.
3. Critique a portfolio that uses a dark background, thin gray text, autoplay video, and a custom cursor. Explain the likely usability and accessibility issues and recommend a prioritized remediation plan.

Multiple Choice Questions with Answers

Question 1

Which portfolio feature most directly supports a recruiter’s primary scanning task?

A. A continuously animated background

B. A clear role statement and labeled project links

C. A custom cursor effect

D. A hidden navigation menu

Correct Answer: B. A clear role statement and labeled project links

Question 2

What is the main purpose of visual hierarchy?

A. To make every element equally prominent

B. To eliminate the need for written content

C. To communicate relative importance among elements

D. To maximize the number of decorative effects

Correct Answer: C. To communicate relative importance among elements

Question 3

Which practice best supports keyboard accessibility?

A. Using clickable generic containers for all controls

B. Removing focus outlines

C. Providing logical focus order and visible focus indicators

D. Requiring pointer gestures for navigation

Correct Answer: C. Providing logical focus order and visible focus indicators

Question 4

According to WCAG guidance discussed in the chapter, the usual minimum contrast ratio for normal-sized text at Level AA is:

A. 1:1

B. 2:1

C. 3:1

D. 4.5:1

Correct Answer: D. 4.5:1

Question 5

Which is the strongest project-card content strategy?

A. Show only technology logos

B. Show a screenshot without explanation

C. State the problem, role, and a path to detailed evidence

D. Use an unlabeled icon as the only link

Correct Answer: C. State the problem, role, and a path to detailed evidence

Question 6

What does responsive design require beyond reducing the size of desktop elements?

A. Preserving the same visual arrangement at every width

B. Adapting layout, content priority, and interaction to conditions

C. Removing all images from small screens

D. Using device-specific fixed widths

Correct Answer: B. Adapting layout, content priority, and interaction to conditions

Question 7

Which alternative-text practice is appropriate for a purely decorative image?

A. Repeat the page title

B. Use an empty alternative-text value

C. Describe every color in the image

D. Use the filename as the description

Correct Answer: B. Use an empty alternative-text value

Question 8

What is a limitation of automated accessibility checkers?

A. They cannot detect any contrast problems

B. They replace all forms of user testing

C. They cannot determine whether content is understandable in context

D. They can test only printed documents

Correct Answer: C. They cannot determine whether content is understandable in context

Question 9

Which design choice most clearly violates the principle of aesthetic and minimalist design?

A. A consistent heading system

B. A concise project summary

C. An animation that competes with essential project evidence

D. A visible contact button

Correct Answer: C. An animation that competes with essential project evidence

Question 10

Why should AI-generated alt text and code be reviewed by a developer?

A. AI output is always legally prohibited

B. AI may misinterpret content or introduce inaccessible behavior

C. Review makes websites load faster automatically

D. AI cannot generate any text

Correct Answer: B. AI may misinterpret content or introduce inaccessible behavior