Accessibility sets the baseline for usability. When people cannot read content, move through an interface, or complete a basic action, the product stops being usable for them.
A simple way to think about accessibility is to treat the interface as an entrance. If the door is too narrow, some people cannot get in. If the handle is hard to use, others struggle. And if signs are hard to read, users miss where to go. When access fails at the entrance, what happens inside no longer matters.
Digital products follow the same logic. People interact with systems in different ways. Some rely on keyboards or screen readers. Others use mobile devices in unstable or distracting environments. Interfaces that assume a single way of interaction introduce barriers by default.
Accessibility issues rarely appear as obvious usability defects. They surface through small points of friction. Insufficient text contrast. Interactive elements that break keyboard navigation. Error messages that exist but offer no usable guidance. Each issue slows users down. Together, they prevent task completion.
In domains where digital access supports essential actions, the consequences are immediate. In fintech, healthcare, and public services, inaccessible flows interrupt submissions, verification steps, and access to critical information. Users feel this as a system they cannot rely on.
Accessibility addresses these constraints directly. It determines whether interaction is possible at all.
Accessibility rests on 4 core aspects:
- 8.1. Perceivable
- 8.2. Operable
- 8.3. Understandable
- 8.4. Robust
8.1. Perceivable
If users cannot notice information right away, interaction never begins. What appears on the screen has to be easy to spot and easy to understand. Otherwise, people stop before taking the first step.
Readability depends on contrast, structure, and context. Text, images, and data should remain clear across different abilities, devices, and conditions. Sometimes information is present, but it still fails to reach the user.
Tips to Make Information Perceivable
- Pay attention to contrast. Text that looks fine on a design mockup often becomes hard to read on a real screen.
- Text size and font choice matter once content is viewed across different devices and lighting conditions.
- Color alone is rarely enough. When meaning depends only on color, part of the information gets lost.
- Images, video, and audio should still make sense when they are not seen or heard directly.
Project: BCU Financial, credit union website
Platform: Desktop
❌ Body text is placed on a white background with a contrast ratio of 3.12:1. WCAG sets 4.5:1 as the minimum for normal text. On the page, the text is difficult to read.
Project: KOHO, neobank’s corporate website
Platform: Desktop
❌ The “View all benefits” button on the pricing cards uses a font size that is noticeably smaller than surrounding text. This reduces readability and makes the call to action harder to perceive, especially for users with visual impairments.
Project: HP, eCommerce website
Platform: Desktop
Source: Baymard Institute
❌ A screen reader announces only repeated “Learn” and “Shop” links, while category labels such as “School” and “Business” are not read. Users hear a sequence of identical links without context, even though each link leads to a different destination.
Project: Zara, eCommerce website
Platform: Desktop
❌ Product category labels sit on top of background images. In many cases, the text blends into the image and becomes hard to read. Navigation options are easy to miss.
Project: Data visualization example
Platform: Desktop
✅ Using not only colors but also shapes to help people with color blindness navigate through the chart. When those colors are hard to distinguish, the information becomes difficult to read and interpret.
Source: Smashing Magazine
Project: YouTube, online video-sharing platform
Platform: Desktop
✅ Subtitles can be adjusted in terms of font size, color, background opacity, and contrast. This allows the same content to remain perceivable under different visual conditions.
Project: Lowe’s, eCommerce website
Platform: Desktop
Source: Baymard Institute
✅ Product images are accompanied by descriptive alternative text, which makes visual information available to screen reader users.
Project: City of Los Angeles, government website
Platform: Desktop
✅ The website provides an accessibility menu that allows users to adjust text size, contrast, spacing, and animation behavior, supporting different perception needs.
8.2. Operable
User control matters. Users should be able to navigate the interface and interact with it using different input methods. When interaction depends on a single way of operating, access becomes limited and usability falls behind.
This principle focuses on movement and action. Users need to move through content, activate elements, and complete tasks without relying on precise gestures, time pressure, or a specific device. When control breaks, tasks remain unfinished – even when the information is visible.
Tips to Support Operability
- Make all interface actions available through a keyboard and assistive devices.
- Design navigation so it follows a clear and predictable order.
- Avoid interactions that depend on precise motor control or complex gestures.
- Allow enough time for users to complete actions, especially in time-based flows.
Operability issues usually surface during real interaction rather than visual review.
Project: Tivoli, amusement park website
Platform: Desktop
❌ The website allows users to filter catalog items by price and height using sliders only. There is no option to enter values manually, which limits interaction for users who rely on keyboard navigation or assistive devices.
Project: Williams-Sonoma, eCommerce website
Platform: Desktop
Source: Baymard Institute
❌ The email input field at the account selection stage of checkout is missing a proper name attribute. As a result, screen reader users cannot identify the purpose of the field, which makes form navigation difficult.
Project: Ann Taylor, eCommerce website
Platform: Desktop
Source: Baymard Institute
❌ Some links are excluded from the keyboard navigation order. For example, the “Click here for details” link in the footer cannot be reached using the keyboard, which prevents full navigation without a mouse.
Project: Zappos, eCommerce website
Platform: Desktop
Source: Baymard Institute
✅ A screen reader presents a structured list of headings and subheadings. Users can navigate between sections of the page without cycling through every individual element, which supports efficient keyboard and assistive navigation.
8.3. Understandable
Clear language and predictable behavior shape how users understand an interface. People need to grasp what they see and feel confident about what will happen next. When labels, wording, or system responses are unclear, hesitation appears. Mistakes follow. Tasks get abandoned.
Plain language matters. So does consistency. Familiar terms, stable patterns, and expected responses help users move forward without second-guessing. When meaning gets lost, accessibility breaks – even if everything looks fine and works on a technical level.
Tips to Make Content Understandable
- Use labels that describe user actions or outcomes, not internal terms or brand-specific references.
- Keep the same wording for the same action across the entire interface.
- Avoid transliterations, cultural references, or names that require prior context.
- Write error messages that explain what happened and what state the system is in, without technical language.
Project: TED, media organization website
Platform: Desktop
✅ The video player provides subtitles in 18 languages, allowing users to follow content regardless of their native language or hearing ability. Language selection is explicit and easy to understand, which supports comprehension across a global audience and overall usability.
Project: BCU Financial, credit union corporate website
Platform: Desktop
❌ The English version of the website uses account names transliterated from Ukrainian, such as “Lys Mykyta Benefit” or “Bulava Benefit.” For users unfamiliar with Ukrainian language or cultural references, these labels do not clearly communicate the purpose of the accounts, making navigation and content harder to understand.
8.4. Robust
An interface has to work reliably across different environments to stay accessible. When interaction breaks on certain devices, screen sizes, or assistive technologies, users quickly lose control.
Robust interfaces do not rely on a single screen size, input method, or layout assumption. UX сomponents should remain usable as layouts shift and contexts change, even when space becomes limited or conditions are less predictable.
Tips to Support Robust Interaction
- Check behavior at the smallest breakpoint early. Many issues surface only when space becomes tight.
- Verify that controls remain reachable on mobile, not just visible.
- Watch for overlapping or disappearing elements once layouts start shifting.
- Test across multiple devices, browsers, and assistive technologies, not only in the default setup.
Robustness problems often stay hidden until the product is used outside the conditions it was designed for.
Project: BCU Financial, credit union corporate website
Platform: Mobile (web version)
❌ On smaller screens, the close button on the pop-up is not visible. Users have to scroll to find a way to dismiss it, and many will likely miss that option altogether.
Project: BCU Financial, credit union corporate website
Platform: Mobile (web version)
❌ Navigation menu items appear very small on mobile screens. This makes them harder to read and easy to tap incorrectly, especially when using the interface on the go.
Project: Loom, online screen recorder
Platform: Desktop vs Mobile (web version)
❌ A sign-up pop-up appears when a video is paused. On the desktop, the pop-up can be closed using a visible close button. On mobile, the close button is hidden by the header, leaving users unable to dismiss the pop-up without resuming playback. This creates a dead-end interaction on smaller screens and breaks the whole user experience.
That’s a Wrap – You’ve Made It!
Not going to lie – this wasn’t a quick skim.
You’ve just gone through the entire Usability Principles by Craft Innovations series. 8 principles. A lot of examples. Plenty of things that can quietly break an interface if no one pays attention.
So, first of all – thanks for sticking with it.
Here’s the full lineup you made it through:
- Findability – can users locate what they need without getting lost?
- Self-Descriptiveness – does the interface explain itself without extra help?
- Controllability – do users stay in charge, even when something goes wrong?
- User Engagement – does the product invite interaction instead of pushing it?
- Internal Consistency – do things behave the same way across the product?
- External Standards – does the interface follow patterns users already know?
- System Status – does the system clearly communicate what’s happening?
- Accessibility – can people use the product across abilities, devices, and contexts?
Each principle looks at usability from a slightly different angle. On its own, each one catches specific problems. Together, they reveal why something feels confusing, fragile, or harder to use than it should be.
This framework wasn’t designed for memorization. And definitely not for theory debates. It exists to help teams notice usability issues earlier, describe them more precisely, and fix the ones that block users in real life.
If you walked away with even one “ah, that explains it” moment – then the read was worth it.
