UI, Accessibility, and Media-Size Calculations
UI principles, accessibility, GUI controls and usability evaluation, plus raw image, audio and video size and compression calculations for AP Subject A, with five original questions.
AP Subject A · Installment 12 · An independent study resource for the 2026 exam and Syllabus Ver.7.2. It is not affiliated with IPA and does not guarantee a pass. Open the series hub
Disclaimer and Notes
- This is an unofficial study guide for the 2026 IPA Applied Information Technology Engineer Examination (AP). It is not affiliated with IPA.
- Scope is limited to the IPA syllabus Ver.7.2 (see Sources).
- All five practice questions are original questions; no past exam questions are used.
- Accessibility guidance here is practical principle. No single measure by itself guarantees conformance to any standard (JIS X 8341, WCAG, etc.), and version-dependent numeric thresholds are intentionally not covered.
- All media-size calculations are raw sizes under the stated assumptions. Real file sizes vary with headers, metadata, codec settings, and content.
Learning Index
- Syllabus Mapping
- Terminology (KO/JA/EN)
- UI, Usability, and Accessibility Principles
- Units and Formulas
- Examples A–E
- Link to AP11
- Quick Sheet
- Common Traps
- Practice Questions
- Answers and Explanations
- Self-Check
- 1/3/7-Day Review
- Sources
1. Syllabus Mapping (Ver.7.2)
| Major / Middle category | Item | Covered in this installment |
|---|---|---|
| 2 Computer systems / 3 Computer components | 3. I/O devices (2) Output devices | Image data-size calculation |
| 3 Technology elements / 7 User interface | 1. (1) Information architecture | Label, chunk, navigation, hierarchy, metadata |
| 3 Technology elements / 7 User interface | 1. (2) User interface (UI) | Usability, accessibility, interaction principles, physical fit, signifier, multimodal interface |
| 3 Technology elements / 7 User interface | 1. (3) GUI | Icon, radio button, toggle button, checkbox, list box, pull-down menu, tooltip, text box |
| 3 Technology elements / 7 User interface | 2. (5) Web design | Usability, navigation, responsive web design (zoom/reflow) |
| 3 Technology elements / 7 User interface | 2. (6) Human-centred design | Understand context of use, specify requirements, produce design solutions, evaluate against requirements |
| 3 Technology elements / 7 User interface | 2. (7) Universal design | Read-aloud, Undo, JIS X 8341, inclusive design, pictograms, WAI, WCAG |
| 3 Technology elements / 7 User interface | 2. (8) Usability evaluation | Heuristic evaluation, cognitive walkthrough, think-aloud, usability testing, A/B testing |
| 3 Technology elements / 8 Information media | 1. (2) Audio processing | PCM, WAV, MP3 (size calculation only; sampling principles are in AP11) |
| 3 Technology elements / 8 Information media | 1. (3) Still-image processing | Raster data, JPEG, PNG, GIF, BMP, TIFF, HEIF |
| 3 Technology elements / 8 Information media | 1. (4) Video processing | Frame, frame rate, MPEG, H.264, HEVC/H.265 |
| 3 Technology elements / 8 Information media | 1. (5) Compression/decompression | “Compression rate” (with stated basis), lossless, lossy, ZIP |
| 3 Technology elements / 8 Information media | 2. (1) Graphics processing | RGB, pixel, resolution |
2. Terminology (KO/JA/EN)
| 한국어 | 日本語 | English |
|---|---|---|
| 정보 아키텍처 | 情報アーキテクチャ | information architecture |
| 라벨 / 청크 / 내비게이션 | ラベル／チャンク／ナビゲーション | label / chunk / navigation |
| 사용성 | ユーザビリティ | usability |
| 접근성 | アクセシビリティ | accessibility |
| 인터랙션 원칙 | インタラクションの原則 | interaction principles |
| 시그니파이어 / 어포던스 | シグニファイア／アフォーダンス | signifier / affordance |
| 멀티모달 인터페이스 | マルチモーダルインタフェース | multimodal interface |
| 라디오 버튼 / 체크박스 / 토글 버튼 | ラジオボタン／チェックボックス／トグルボタン | radio button / checkbox / toggle button |
| 리스트 박스 / 풀다운 메뉴 / 툴팁 / 텍스트 박스 | リストボックス／プルダウンメニュー／ツールチップ／テキストボックス | list box / pull-down menu / tooltip / text box |
| 유니버설 디자인 / 인클루시브 디자인 | ユニバーサルデザイン／インクルーシブデザイン | universal design / inclusive design |
| 인간 중심 설계 | 人間中心設計 | human-centred design |
| 휴리스틱 평가 / 인지적 워크스루 / 사고 발화법 | ヒューリスティック評価／認知的ウォークスルー／思考発話法 | heuristic evaluation / cognitive walkthrough / think-aloud protocol |
| 사용성 테스트 / A/B 테스트 | ユーザビリティテスト／A/Bテスト | usability testing / A/B testing |
| 화소(픽셀) / 해상도 | 画素（ピクセル）／解像度 | pixel / resolution |
| 프레임 / 프레임 레이트 | フレーム／フレームレート | frame / frame rate |
| 가역 압축 / 비가역 압축 | 可逆圧縮／非可逆圧縮 | lossless / lossy compression |
| 압축률 (기준을 반드시 명시) | 圧縮率（基準を必ず明示） | “compression rate/ratio” (always state the basis) |
| 잔존 크기 비율 R = 압축 후 / 원본 | 圧縮後サイズの割合 R＝圧縮後／元 | retained-size fraction R = compressed / original |
| 감소율 1 − R | 削減率 1－R | reduction fraction 1 − R |
3. UI, Usability, and Accessibility Principles
3.1 Information architecture (IA)
- Designing how information is organised and structured so users can find and understand it.
- Labels: short, specific names in the user’s language (“Notification settings” rather than “Settings 2”).
- Chunks: group related information into meaningful units to reduce memory load.
- Hierarchy and navigation: make the current location (e.g. breadcrumbs) and available paths visible.
- Metadata: the basis for classification, search, and filtering.
3.2 Practical interaction principles
| Principle | Meaning | Example |
|---|---|---|
| Consistency | Same function, same position, label, and behaviour | “Save” button in the same place on every screen |
| Visibility / status feedback | Tell users the system state immediately | Saving indicator, success/error message |
| Signifiers / affordance | Affordance is a possible action; a signifier is the cue that communicates it | Button-like shape plus a clear label |
| Mapping | Natural correspondence between control and effect | Slider to the right → value increases |
| Constraints | Make invalid input hard in the first place | Date picker, restricted input format |
| Error prevention / recovery / Undo | Prevent slips, and allow reversal when they happen | Confirmation step, undo, specific error guidance |
| Plain labels | Understandable words instead of jargon | “Please sign in again” rather than “Auth token invalid” |
3.3 Accessibility: perceivable, operable, understandable, robust
| Aspect | Practical measures |
|---|---|
| Perceivable | Do not convey information by colour alone (add text, icons, or patterns); text alternatives for images; captions and transcripts for video; readable contrast |
| Operable | Every function operable by keyboard alone; visible focus indicator; adequately sized targets (physical fit) |
| Understandable | Plain labels, consistent navigation, specific error messages with how to fix them |
| Robust | Semantic markup and accessible control names (semantic labels) so assistive technologies such as screen readers can interpret them |
- Zoom/reflow: when enlarged, content should reflow responsively instead of being clipped or forcing horizontal scrolling.
- One measure (e.g. adjusting contrast only) cannot guarantee conformance. Combine checklist review, assistive-technology testing, and evaluation with diverse users.
3.4 Universal design, inclusive design, multimodal
- Universal design: design from the outset so as many people as possible can use it (pictograms, read-aloud, Undo, etc.).
- Inclusive design: involve people who are easily excluded in the design process to reflect diversity.
- Multimodal interface: input/output through several channels such as voice, touch, and vision.
3.5 Human-centred design and evaluation
- Human-centred design cycle: understand context of use → specify user requirements → produce design solutions → evaluate against requirements, iterated.
- Evaluation methods:
- Heuristic evaluation: experts inspect against rules of thumb (no users needed).
- Cognitive walkthrough: experts step through a user’s task to predict sticking points.
- Think-aloud protocol: users verbalise their thoughts while operating.
- Usability testing: observe representative users performing real tasks.
- A/B testing: split real users between two variants and compare metrics.
4. Units and Formulas
4.1 Unit conventions
| Unit | Value |
|---|---|
| 1 byte (B) | 8 bit |
| 1 kB (decimal) | 1,000 B |
| 1 MB (decimal) | 1,000,000 B |
| 1 KiB (binary) | 1,024 B |
| 1 MiB (binary) | 1,048,576 B |
| 1 Mbit/s (decimal) | 1,000,000 bit/s |
4.2 Raw-size formulas
| Media | Raw size (bit) | Excluded (unless stated) |
|---|---|---|
| Raster image | width (px) × height (px) × bits/pixel | Alpha channel, headers, metadata, row padding, compression |
| PCM audio | samples/s × bits/sample/channel × channels × seconds | Headers, compression |
| Video (picture only) | width × height × bits/pixel × frames/s × seconds | Audio, headers, metadata, chroma subsampling, padding, compression |
- RGB at 8 bits × 3 channels = 24 bits/pixel.
- Stereo = 2 channels.
- Bytes = bits ÷ 8, then state whether decimal (MB) or binary (MiB).
4.3 Compression bases
| Measure | Definition |
|---|---|
| Retained-size fraction R | compressed size ÷ original size |
| Reduction fraction | 1 − R |
| Size ratio original:compressed | (1/R) : 1 |
- “Compression rate/ratio” may mean R or the reduction fraction depending on context. Always name the numerator and denominator.
- Whether a format is lossless or lossy depends on the format and settings, and actual compressed size depends on content and settings. You cannot infer an exact size from a codec name alone.
5. Examples A–E
Example A: Raw image size
Assumptions: 1920 × 1080 px, RGB 8 bits × 3 channels = 24 bits/pixel; no alpha, headers, metadata, row padding, or compression.
- Pixels: 1,920 × 1,080 = 2,073,600 pixels
- Bits: 2,073,600 × 24 = 49,766,400 bits
- Bytes: 49,766,400 ÷ 8 = 6,220,800 B
- Decimal: 6,220,800 ÷ 1,000,000 = 6.2208 MB
- Binary: 6,220,800 ÷ 1,048,576 = 5.9326171875 MiB
Compression: if R = 25% (compressed ÷ original),
- Compressed = 6,220,800 × 0.25 = 1,555,200 B = 1.5552 MB = 1.483154296875 MiB
- Reduction = 1 − 0.25 = 75%
- Original:compressed = 1/0.25 : 1 = 4 : 1
Example B: Raw PCM audio size
Assumptions: 48,000 samples/s, 16 bits/sample/channel, stereo (2 channels), 10 s; no headers or compression.
- Bits: 48,000 × 16 × 2 × 10 = 15,360,000 bits
- Bytes: 15,360,000 ÷ 8 = 1,920,000 B
- Decimal: 1.92 MB
- Binary: 1,920,000 ÷ 1,048,576 = 1.8310546875 MiB
For what samples/s and bits/sample mean, see Link to AP11.
Example C: Raw video size
Assumptions: 1280 × 720 px, RGB 24 bits/pixel, 30 frames/s, 10 s, no audio; no headers, metadata, chroma subsampling, padding, or compression.
- Pixels per frame: 1,280 × 720 = 921,600 pixels
- Frame size: 921,600 × 24 = 22,118,400 bits = 2,764,800 B
- Bitrate: 22,118,400 × 30 = 663,552,000 bit/s = 663.552 Mbit/s (decimal)
- Total bits: 663,552,000 × 10 = 6,635,520,000 bits
- Bytes: ÷ 8 = 829,440,000 B = 829.44 MB = 791.015625 MiB
Compression: if R = 8% (compressed ÷ original),
- Compressed = 829,440,000 × 0.08 = 66,355,200 B = 66.3552 MB = 63.28125 MiB
- Reduction = 1 − 0.08 = 92%
- Original:compressed = 1/0.08 : 1 = 12.5 : 1
Example D: Improving a destructive (account-delete) flow
Situation: a “Delete” button marked only by a red icon deletes the account immediately, and the button cannot be reached by keyboard.
Improvements:
- Specific text label: e.g. “Permanently delete account”, naming the target and outcome.
- Visual distinction not relying on colour alone: add a warning icon, text, border, or other non-colour cue.
- Keyboard-reachable with visible focus: reachable with Tab, with a clearly visible focus position.
- Clear consequence + confirmation: explain what data is deleted and whether it can be reversed, then confirm.
- Immediate status/error feedback: report in-progress, success, and failure in text right away, exposed to assistive technologies too.
- Recovery/Undo where feasible: e.g. allow cancellation during a grace period.
These measures improve usability and accessibility, but they do not by themselves prove standards conformance. Validate with representative users and assistive technologies (screen readers, keyboard-only use, etc.).
Example E: Choosing controls
| Situation | Suitable control | Reason |
|---|---|---|
| Choose exactly one of the visible options (e.g. shipping method) | Radio buttons | Mutual exclusivity is enforced by structure, preventing multiple-selection errors |
| Choose multiple independent items (e.g. interests) | Checkboxes | Each item is switched on/off individually |
| Immediately applied binary state (e.g. notifications on/off) | Toggle button | Use only when the current state and the action are clear |
- Error prevention: the control itself constrains how many choices are allowed (exactly one → radio buttons).
- Consistency: use the same control for the same kind of choice throughout the app to reduce learning effort.
- If a toggle’s state is ambiguous (unclear which side means “on”), show the state in text as well.
6. Link to AP11
The meaning of PCM “samples/s” (sampling frequency) and “bits/sample” (quantization bit depth) was covered in installment 11 (AP11, sampling and quantization). This installment covers only multiplying those values to obtain a size.
7. Quick Sheet
- Image bits = width × height × bits/pixel (RGB 8 bits × 3 = 24)
- Audio bits = samples/s × bits/sample/channel × channels × seconds (stereo = 2)
- Video bits = width × height × bits/pixel × frames/s × seconds
- B = bits ÷ 8 / MB = 1,000,000 B / MiB = 1,048,576 B
- R = compressed ÷ original, reduction = 1 − R, original:compressed = 1/R : 1
- Accessibility: not colour alone, keyboard + visible focus, semantic labels, text alternatives, captions/transcripts, contrast, zoom/reflow
- Radio = one, checkbox = several independent, toggle = immediately applied binary state
- One measure ≠ guaranteed conformance → validate with users and assistive technologies
8. Common Traps
| Trap | Fix |
|---|---|
| Forgetting RGB’s 3 channels | 8 bits × 3 = 24 bits/pixel |
| Forgetting stereo’s 2 channels | Multiply by the channel count |
| Forgetting frames/s or seconds for video | Frame size × frames/s × seconds |
| Confusing bits and bytes | ÷ 8 |
| Confusing MB and MiB | 1,000,000 vs 1,048,576 |
| Reading “compression rate 8%” as the reduction | Check whether it is R or 1 − R (numerator/denominator) |
| Inverting the ratio | Original:compressed = 1/R : 1 |
| Inferring exact size from a codec name | Actual size depends on content and settings |
| Signalling danger/errors by colour alone | Add text and icons |
| Claiming conformance from one measure | Holistic validation is required |
9. Practice Questions (5 original questions)
All questions were written for this guide and are original (no past exam questions).
Question 1
You are improving the account-deletion screen of a web service. Which is most appropriate from a usability and accessibility standpoint?
- ア. To signal danger, make the button red only, and keep its label short as “OK”.
- イ. Measure the colour contrast around the button once; if it meets the criterion, conformance to accessibility standards is guaranteed, so skip further validation.
- ウ. Use the text label “Permanently delete account” with a warning icon, make it keyboard-reachable with visible focus, provide a confirmation step explaining the consequence and a processing-status message, and test with representative users and assistive technologies.
- エ. To keep the screen clean, show the button only on mouse hover and put the explanation only in a tooltip.
Question 2
What is the raw size of a 1920 × 1080 px image with RGB at 8 bits per channel (3 channels)? (No alpha, headers, metadata, row padding, or compression.)
- ア. 2,073,600 B
- イ. 6,220,800 B
- ウ. 49,766,400 B
- エ. 5.9326171875 MB
Question 3
What is the raw size of PCM audio at 48,000 samples/s, 16 bits/sample/channel, stereo, 10 s? (No headers or compression.)
- ア. 960,000 B
- イ. 192,000 B
- ウ. 15,360,000 B
- エ. 1,920,000 B
Question 4
Which gives the correct raw size and calculation for video at 1280 × 720 px, RGB 24 bits/pixel, 30 frames/s, 10 s, no audio? (No headers, metadata, chroma subsampling, padding, or compression.)
- ア. 829,440,000 B (2,764,800 B/frame × 30 frames/s × 10 s)
- イ. 82,944,000 B (2,764,800 B/frame × 30 frames/s)
- ウ. 27,648,000 B (2,764,800 B/frame × 10 s)
- エ. 6,635,520,000 B (22,118,400 per frame × 30 frames/s × 10 s)
Question 5
A video of 829,440,000 B (original) becomes 66,355,200 B after compression. Which statement names its bases correctly?
- ア. Since the “compression rate is 8%”, 8% of the original size was removed.
- イ. R = original ÷ compressed = 8%, and compressed:original = 12.5 : 1.
- ウ. R = compressed ÷ original = 8%, reduction = 1 − R = 92%, original:compressed = 12.5 : 1.
- エ. Reduction = (original − compressed) ÷ compressed = 92%.
10. Answers and Explanations
| Question | 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|---|
| Answer | ウ | イ | エ | ア | ウ |
Question 1 — Answer ウ
- ア: Incorrect. It relies on colour alone, and “OK” does not tell users what will happen. There is no confirmation or recovery either.
- イ: Incorrect. A single measurement does not guarantee conformance. Other aspects (keyboard, labels, feedback) and validation with users and assistive technologies are needed.
- ウ: Correct. It includes text plus non-colour cues, keyboard plus visible focus, consequence explanation and confirmation, status feedback, and testing, without claiming conformance.
- エ: Incorrect. Relying on hover makes the button and explanation hard to reach for keyboard, touch, and assistive-technology users.
Question 2 — Answer イ
1,920 × 1,080 × 24 = 49,766,400 bits; ÷ 8 = 6,220,800 B.
- ア: Incorrect. Computed as 1 byte (8 bits) per pixel, missing the 3 channels.
- イ: Correct. 6,220,800 B (= 6.2208 MB = 5.9326171875 MiB).
- ウ: Incorrect. The bit count labelled as bytes: bit/byte confusion.
- エ: Incorrect. 5.9326171875 is the MiB value; labelling it MB is decimal/binary confusion (the decimal value is 6.2208 MB).
Question 3 — Answer エ
48,000 × 16 × 2 × 10 = 15,360,000 bits; ÷ 8 = 1,920,000 B.
- ア: Incorrect. Missing stereo’s 2 channels (computed for 1 channel).
- イ: Incorrect. Missing the 10 s (1 second only).
- ウ: Incorrect. The bit count labelled as bytes: bit/byte confusion.
- エ: Correct. 1,920,000 B (= 1.92 MB = 1.8310546875 MiB).
Question 4 — Answer ア
1,280 × 720 × 24 = 22,118,400 bits = 2,764,800 B per frame; × 30 frames/s × 10 s = 829,440,000 B.
- ア: Correct. It includes both multipliers: frames/s (× 30) and seconds (× 10).
- イ: Incorrect. Missing the 10 s; only 1 second is computed.
- ウ: Incorrect. Missing frames/s (× 30).
- エ: Incorrect. 6,635,520,000 is the bit count, not converted to bytes.
Question 5 — Answer ウ
R = 66,355,200 ÷ 829,440,000 = 0.08.
- ア: Incorrect. 8% is the retained-size fraction R; the reduction is 92%. The numerator is misread.
- イ: Incorrect. Original ÷ compressed is 12.5, not 8%; and compressed:original is 1 : 12.5, so the basis is inverted.
- ウ: Correct. It names the numerator and denominator of R, the reduction, and the size ratio correctly.
- エ: Incorrect. The reduction’s denominator is the original. (Original − compressed) ÷ compressed = 11.5 (1,150%), not 92%.
11. Self-Check
- I can explain when to use radio buttons, checkboxes, and toggle buttons.
- I can give two practical measures for each accessibility aspect (perceivable, operable, understandable, robust).
- I can explain why “one measure guarantees conformance” is wrong.
- I can calculate raw image, audio, and video sizes after first stating assumptions.
- I can convert bits/bytes and MB/MiB exactly.
- I can state R, the reduction, and the original:compressed ratio with their numerators and denominators.
12. 1/3/7-Day Review
| When | Task |
|---|---|
| Day 1 | Without the Quick Sheet, write the three formulas and five units. Redo Example A. |
| Day 3 | Redo Examples B and C with changed values (e.g. 44,100 samples/s, 60 frames/s) and check against Common Traps. |
| Day 7 | Retake the Practice Questions and explain aloud why each wrong option is wrong. Apply Examples D and E to another screen. |
13. Sources
- IPA, “応用情報技術者試験（レベル3）シラバス Ver.7.2” (Applied Information Technology Engineer Examination (Level 3) Syllabus Ver.7.2)
- URL: https://www.ipa.go.jp/shiken/syllabus/omgdg50000005kq5-att/syllabus_ap_ver7_2.pdf
- Checked: 2026-10-21
- Printed pages: 18, 32–36
- All practice questions are original; no past exam questions were used.