Understand design, UX and accessibility
Design organises what people perceive and can do. Examine content, component states and interaction modes together. Useful design also explains what happens with larger text, an error or an image carrying no information.
81 concepts to explore with their definitions and practical advice.
Search the full glossary
A reading path
1. Guide reading
Visual hierarchy helps identify page purpose, decision information and action. Headings and links should retain that meaning in document structure.
2. Describe interactions
A component has a state and purpose. Define label, help and error so implementation retains keyboard and small-screen behaviour.
3. Observe the experience
Try a specific task with enlarged text and realistic content. Performance metrics provide additional observations rather than replacing journey checks.
Useful distinctions
Alternative text / Accessible name
Alternative text matches an image’s role. An accessible name identifies a control or element to assistive technology. An image used as a control should communicate its useful action.
Wireframe / Mockup
A wireframe explores structure and content placement; a mockup details presentation further. Neither proves the interface works in a browser.
Use the vocabulary to make a decision
Situation
A form works with a mouse but its error is unclear with a keyboard.
Before deciding
Connect the message to the affected field and check control name and navigation order. A more visible colour alone does not solve the problem.
A concrete check
Repeat the error with intentionally invalid input and check how someone finds the field to correct.
All concepts in this topic
Links open the full definition on its alphabet page. Acronyms and synonyms remain searchable from the main glossary.
- Above the fold
- Accessibility conformance report
- Accessibility tree
- Accessible description
- Accessible entrance
- Accessible name
- Active filter
- Alternative text
- ARIA
- ARIA live region
- Art direction
- Breadcrumb trail
- Breakpoint
- Carbon-aware design
- Chart description
- Comparison table
- Component state
- Cumulative Layout Shift
- Dark pattern
- Design token
- Digital accessibility
- Download link
- Drag and drop
- Error summary
- European Accessibility Act
- Fallback font
- Favicon
- FID
- Field error message
- Figma
- First Contentful Paint
- Focal point
- font-display
- Glyph
- Hamburger menu
- Hero section
- Icon
- Image optimization
- Information architecture
- Interaction to Next Paint
- Interface component
- JPEG
- Kebab menu
- Largest Contentful Paint
- Lighthouse
- Main navigation
- Media query
- Mobile job application
- Mobile menu
- Mobile-first
- Mockup
- Navigation
- No-results state
- Overlay
- Page speed
- Pagination
- Performance budget
- Pixel
- Professional portrait
- Reading order
- Responsive design
- Sort order
- Submission confirmation
- Synchronized captions
- Tagged PDF
- Template
- Typography
- UI
- Usability
- User flow
- UX
- Vector image
- Video thumbnail
- Viewport
- Visual hierarchy
- WCAG
- Web design
- Web form
- WebP
- Wireframe
- z-index
Frequently asked questions
Does a good score prove accessibility?
No. An automated tool covers some defects in a particular context. Add content, keyboard and representative journey checks.
Must every image be described?
Choose alternatives by purpose. Decoration differs from an informative image, chart or button. Keep essential information accessible within page context.
Primary reference documents
These documents explain the technical concepts. The reading paths and decision examples are editorial methods to adapt to your project.