Accessibility

Inclusive design is a methodology that creates mainstream solutions usable by people with diverse abilities, contexts, environments, backgrounds, and preferences.

Mismatched interaction: situations where environments or products fail to accommodate diverse human abilities. E.g. buildings without ramps or elevators creates barriers for those using wheelchairs.

Permanent disabilities: visual impairments like blindness, motor limitations like paralysis, hearing loss, cognitive differences. They might rely on screen readers, switch controls, or voice commands.

Temporary disabilities: broken arm, eye surgery, ear infection. Anyone can face temporary challenges, making inclusive design not just a nice-to-have but a necessity.

Situational disabilities: environmental or contextual temporary limitations such as noisy construction, bright sunlight, or crowded places that limit movements. Think about adjustable text sizes, high-contrast modes, or one-handed operation modes.

Curb-Cut effect, sidewalk cuts designed for wheelchairs appear beneficial for parents with strollers and workers with carts, a principle that demonstrates how accessibility solutions benefit everyone.

In digital products, curb-cut appears in:

• Closed captions: deaf users, language learners, public transit commuters, people in noisy environments
• Voice control: users with motor disabilities, people busy cooking or working with dirty hands

Assistive technologies: screen readers, switch controls, keyboard shortcuts, text magnifiers. Test your interface with VoiceOver or NVDA screen readers. Use keyboard-only navigation to check for tab order issues and unreachable elements. Check color contrast, font size, alternative text for images.

Popular accessibility testing tools include Stark, AXE, and Wave.

Accessibility tools

• Able Figma plugin: color contrast analysis, show how selected colors appear to users with color blindness
• Stark Figma plugin: checks contrast, suggest color adjustments, show how designs appear to users with vision impairments, and many accessibility features
• VoiceOver: use this to read on-screen text and test for potential barriers in web navigation and content structure
• WAVE: accessibility evaluation tool for your website
• Google Lighthouse: evaluate accessibility & SEO & performance
• axe DevTools Chrome extension
• Contrast Checker Chrome extensions: checks contrast ratios & color combinations
• Photosensitive Epilepsy Analysis Tool: software that identifies seizure risks in animations, videos & flashing elements
• The Harding Test: analyze videos for patterns that cause seizures

Visual impairments

Peripheral vision/tunnel vision: users often see only what’s directly in front of them and lack a wide-angle vision. Prioritize central elements when designing.

Diabetic retinopathy: blurred vision, struggle to read text and interact with elements that don’t comply with WCAG 2.0 requirements.

Loss of visual acuity: Ability to see details clearly. Pay attention to text’s type, size, weight, font style, and contrast between foreground & background.

Ghosting vision: faint duplicates of an image appear, making it difficult to read text and distinguish small elements. Ensure sufficient contrast between text and background, avoid too thin typefaces, give adequate spacing.

Color blindness: Inablity to perceive and distinguish colors, sensitivity to color brightness. Check Colorblind Web Page Filter to adjust color palette & avoid relying on only color to convey the messasge.

Tips

HTML structure: use relevant semantic tags to support screen-reading tools & assistive technologies.

Alternative text: write concise and informative descriptions, like you’re explaining the image over the phone. Avoid exceeding 125 characters because tools may cut off wordy descriptions.

Use multiple cues for accessible inputs & charts: colors, icons, labels, patterns, textures (dots, stripes, diagonals)

Color contrast ratio: at least 4:5:1 for normal-sized text and 3:1 for larger text. Sans serif fonts like Arial, Verdana, Tahoma, Helvetica provide 100% legibility.

It’s recommended that web text (not captions & img text) can be resized up to 200% without assistive tech & loss of content or functionality.

When designing for Voice User Interfaces (VUI), keep messages conscise, allow skipping, add speech rate control.

Keyboard navigation: make focus visible, follow logical focus order, use semantic HTML and ARIA roles.

Use tooltips to explain the action, but short and only when needed.

Hearing impairments

Provide captions to make multimedia content accessible. Captions can be turned on and off.

Provide text transcripts: highlight word as the speaker pronounces. They’re beneficial for all and users can make notes. Transcripts can help with SEO.

Use plain language: support people with dyslexia, low vision, and hearing disabilities, and those for whom sign language is their first language. 6-8th-grade reading level for general audience.

One idea per paragraph. One clear topic sentence.

Use short line lengths. 45-75 characters per line acceptable and ~66 characters per line comfortable.

Motor disabilities

These users rely on assistive technologies such as alternative keyboard, head wand, trackball mouse, mouth stick, single-switch devices, speech recognition software, puff and sip devices, eye-tracking tech.

We can integrate features such as voice control, gesture recognition, assistive devices like switches or joysticks.

Add Skip to Content button:

• Place as one of the first elements on the page, at top of page
• Hidden by default, visible when keyboard focus

Keyboard:

• Focus indicator
• Keyboard navigation of interactive elements
• Logical hierarchy

Add Search

Provide alternative to device motion (shake to undo, titl to scroll, gesture to trigger actions): visible button, menu option, disable motion controls options.

Large enough touch target: at least 24x24px.

For activities with time limit, allow users to switch the timer off or adjust it. Give them at least 20secs to assess. Screen notifications, carousels, chat messages might change too fast for users. Make them last longer than 5sec.

Dragging can be difficult for people with motor disabilities. Provide an alternative like clicking to “Move up” or “Send to column” instead of dragging.

Thumb-friendly zone on mobile: Are buttons, tabs and menu triggers accessible for both thumbs? Use heatmap to test for left-hand v right-hand use.

Neurological impairments

Dyslexia

Dyslexia affects the brain’s ability to process written and spoken language. It affects reading speed, word recognition, spelling, and pronunciation. People may see letters flip, move, or blur together.

Break up text with clean, simple images.

Avoid serif fonts. Sans-seif fonts like Arial, Open Sans, or Inter have shapes that are easier to distinguish. Fonts like OpenDyslexic can help prevent reading errors.

Use font size at least 12-14pt for body text. Provide options to adjust text size.

Dark mode: pure black and pure white often create too much contrast. Let readers choose between light and dark modes.

Avoid italics and ALL CAPS. Slanted letters blend together, and capital letters form rectangular shapes. Bold text and sentence case work better for emphasis.

Readable line lenght is between 60-75 characters (12-18 words) per line. On mobile, 30-40 characters per line.

Line height between 1.5-2x font size for body text. 1.2-1.3 for headers.

Use lists.

Anxiety

Digital anxiety often appears during high-stakes interactions like account management, form submissions, financial transactions.

Time constraints during checkout, booking flows, or limited-time offers may trigger fight-or-flight responses–hasty decisions or task abandonment. Users with anxiety may need time to review and double check their choices.

Flexible timeouts and communicate time constraints clearly. Give clear reasons and generous time for completion. Give options to extend time limits or save progress.

Communicate time estimates, progress bars, step-by-step wizards, what happens next.

Give users a sense of control: review steps, confirmation screens, order summary.

Avoid clickbaiting like “Your account might be at risk!”, “Only 3 rooms left!” when many are available. Give clear, accurate info that helps users make informed decisions.

Epilepsy

Recurring seizures can be triggered by various types, including visual stimuli like flashing lights, cognitive overload, and stress-inducing patterns.

Avoid flash patterns. Give advance warnings and options to turn off photosensitive content.

Avoid contrasting patterns:

• Dynamic stripes: limit to 5 light-dark pairs
• Static or uniformly moving stripes: max 8 light-dark pairs

Avoid certain color combinations: saturated reds paired with other colors, highly saturated complementary colors like blue-orange or purple-yellow.

Avoid rapid animations: fast movements, sudden transitions, quick directional changes.

• Progress indicators that pulse or strobe
• Quick-updating status counters
• Auto-playing carousels with rapid transitions
• Notification badges that flash for attention
• Menu items that bounce or shake
• Background videos that loop quickly

Parallax:

• May trigger epilepsy
• Technical challenges: complex JS implementations that affect page performance and loading time, inconsistent browser support, challenging responsive.

Turn off auto play by default. Implement a play button.

Autism Spectrum Disorder (ASD)

Use soft, mild colors (soft blues, gentle greens, warm beiges).

Use simple language. Avoid abbreviations & abstract humor, references.

Best practices

Multimedia

• Alt text, <125 characters. If the image is decorative only, use null alt attribute (alt=""). Avoid “picture of”, “image of”.
• Avoid autoplay (<autoplay=“false”>)
• Accessible media controls: at least pause, play, stop, rewind, vol, mute, captions.
• Avoid flashing animations. Use PEAT or the Harding Test to evaluate animations before animation. Use subtle, steady transitions.
• Provide transcripts.
• Icons + text labels.
• Avoid single-direction swipes for key features. Gestures that work from both sides are more usable. Provide tap alternatives.

Colors

• The AA standards set a minimum contrast ratio of 4.5:1 for normal text. For larger text, 3:1. The same applied to selected text.
• Interactive and navigation icons, input borders: 3:1
• Text overlaying images: 4:5:1
• Aim for sufficient but comfortable contrast, e.g. #333333 on #f8f8f8
• Pair color with other cues like icons, text, tactile feedback, patterns, shapes, labels, etc.

Text

• Use simple language. Avoid long sentences. One sentence, one idea.
• Avoid idioms, puns, figurative language, cultural references.
• Choose typefaces that look good regardless of font size, have large x-height that makes reading easier, have unique shapes while differentiating similar letters.
• 16px is generally the minimum acceptable size for body text.
• 45-75 characters per line, including spaces (6-12 comfortable stops per line).
• <h1> for page title.

Forms

• Optimize for keyboard: Tab, Shift Tab, Enter, arrow keys. Focus indicators.
• Single-column layout, side-by-side fields only for related inputs
• Visible input border
• Labels outside input
• Autocomplete for common info
• Multiple cues for error states; bold text, borders, warning icons, clear messages placed near the input, haptic feedback
• Use aria-describedby to link form field with error message
• Error summary for lengthy form at the top of form. Clickable link that jumps to corresponding field.
• Traditional CAPTCHAs can be difficult for users with disabilities. Offer alternatives like email magic links, SMS OTP, device biometrics.
• For forms on mobile, keep forms vertically aligned & center key actions within lower-middle zone. Support autofill & field detection. Try filling out a form using your non-dominant hand to test.

Links

• Descriptive link labels: Use “Download guide” or “View product” instead of “Click here” or “Read more”.

• Avoid opening in new tab/window unless absolutely necessary as it can disorient users, especially those who use assistive technologies.

  • Add “(opens in new window)” or “(new tab)” at the end of the link text
  • Use appropriate ARIA attributes (aria-label=“Link name (opens in new window)”)
  • Add a distinctive icon with proper alternative text

• If you link to a file, state the file type and size. e.g. “Guide (pdf, 1MB). Don’t use www.site.com as link text because screen readers read character by character.

• Add help links (FAQs, documentation, contact forms, knowledge base, supoort chat) to common places like footer, primary nav, bottom right corners.

Tables

• CSS is now recommended for layouts since screen readers process content in the order it appears in the code.
• Use for table title.
• Mark cells with no data 0, NA, or “blank” instead of leaving empty.
• Screen readers still struggle with complex tables with merged cells or multiple header levels. Consider using multiple simple tables instead.

Source: Acessibility Foundations course - Uxcel