Accessibility & Performance
Accessibility(a11y)
UX Based on Technologies Used:
Understanding the User’s Access Points:
Devices: Smartphones, tablets, desktops, assistive devices.
Browsers: Chrome, Firefox, Safari, Edge, etc.
Operating Systems: Windows, macOS, Android, iOS, Linux.
Assistive Technologies
Responsive Design: Ensure layouts adjust fluidly to screen size and orientation
Accessible Design: Making content usable by people with disabilities
Universal Design: Goes beyond disabilities.
Design for everyone: All ages, cultures, languages, and levels of ability.
Accessibility means making sure that everyone, including people with disabilities can use your website or application. It ensures equal access to all users.
Key Disabilities Considered:
Visual impairments: Blindness, low vision, color blindness
Hearing impairments: Partial or total hearing loss
Motor disabilities: Difficulty using hands, limited movement
Cognitive limitations: Dyslexia, ADHD, memory/focus issues
Temporary impairments: Broken arm, bright light, slow internet
Situational limitations: Small screens, noisy environment
Benefits:
Inclusivity: Equal access for all
Legal Compliance: Ignoring accessibility can lead to legal consequences depending on where your users are
Following WCAG can help prevent lawsuits, fines, and bad press.
Better UX: Clean design and easier navigation helps all users
SEO Boost: Semantic HTML and alt text improve search engine visibility
Inclusive Design Principles: Design that works for all users regardless of ability, age, or device. Focuses on:
Empathy-driven design: Think from users’ perspectives.
Clear layouts
Readable fonts
High contrast color schemes
Keyboard-friendly navigation
Responsive and zoomable UI
Designing buttons that are large and easy to tap on mobile
Assistive Technologies: Tools that help people with disabilities use digital content:
Screen readers: Read out content on screen including buttons, headings, image alt text, links, and form elements. Popular screen readers:
NVDA (Windows), JAWS (Windows, paid), VoiceOver (macOS/iOS), TalkBack (Android)
Voice recognition: Control the device using voice commands
Screen magnifiers: Zoom into sections of the screen to assist users with low vision.
Braille displays: Hardware devices that convert on-screen text into braille patterns for blind users.
Eye-tracking software
Speech-to-text
Adaptive keyboards
Speech input tools
Web Content Accessibility Guidelines (WCAG) 2.0: By the W3C(World Wide Web Consortium) to ensure web content is accessible to people with disabilities.
4-Tier WCAG Structure:
Level 1: Principles (The 4 Pillars of Accessibility): POUR
Level 2: Guidelines (13 Specific Accessibility Goals): Each principle includes multiple guidelines.
Level 3: Success Criteria: Each guideline breaks down into one or more success criteria - concrete rules we can test against. These are divided into three conformance levels.
Level 4: Techniques: The final level describes actual techniques and examples to meet each success criterion
Principles:
Perceivable – Can users sense the content
Content must be presented in ways that users can perceive, through sight, sound, or touch.
Guidelines & Practical Examples:
Text Alternatives: Every non-text element (image, audio, video) should have a text equivalent.
Example: Providing text alternatives (alt attributes) for images allows screen readers to convey the content to visually impaired users.
<img src="user-avatar.jpg" alt="Profile picture of Manish Kumar">
Time-based Media: Provide captions, transcripts, and audio descriptions for multimedia.
Example: A YouTube video has auto-captions and a downloadable transcript.
Adaptable: Adaptive design ensures the interface adjusts itself to user needs, environments, and devices (such as screen size, input method, or assistive tools). Example:
Responsive layout
Zoom-friendly
Keyboard-only navigation
Screen reader compatibility
Distinguishable: Make it easier for users to see and hear content.
Ensuring sufficient color contrast between text and background enhances readability for users with visual impairments.
Example: A website has dark text (#000000) on a light background (#FFFFFF) with a contrast ratio > 7:1.
Operable – Users must be able to operate the interface
Guidelines & Practical Examples:
Keyboard Accessible: Ensure that all features can be used with a keyboard.
Provide visible focus indicators (outlines when we tab to a button)
Avoid keyboard traps (e.g., modals that can't be closed using Esc or Tab)
Example: A user who cannot use a mouse should be able to tab through a form using the keyboard. For instance
<button tabindex="0">Submit</button>
Enough Time: Allow users time to read and interact, avoid auto-refresh.
Example: Allowing users to extend or disable time limits on forms prevents issues for those who need more time.
Seizures and Physical Reactions: Web content must not flash more than 3 times per second, because flashing lights or rapid animations can cause seizures in people with photosensitive epilepsy.
Example: Avoid flashing animations or fast-changing colors, especially in videos or banners.
Navigable: Provide ways to help users navigate, find content, and determine where they are.
Including a consistent navigation menu and clear headings helps users understand the site structure.
Example: Breadcrumbs (Home > Shop > Laptops) and skip-to-content links.
Input Modalities: Support multiple ways of interacting (mouse, touch, voice, etc.).
Example: Ensuring that touch targets are large enough for users with motor impairments.
Understandable – Users must be able to understand content and UI
Guidelines & Practical Examples:
Readable: Use clear language, provide definitions where needed.
Example: "Log in" instead of "Authenticate credentials"
Predictable: Consistent layout, navigation and behavior across pages.
Example: A navigation bar placed at the top of the homepage should also appear in the same position on other pages.
Input Assistance: Provide error suggestions and hints.
Example: When a form field is left empty, the site shows a red border and text: “Email is required.”
Robust – Content must work across devices and assistive technologies
Guidelines
Compatible: Ensure web content is correctly interpreted by assistive technologies like screen readers.
Practical Examples:
Use semantic HTML (<button>, <label>, <nav>, <article>, <section>, <aside>, etc.)
Semantic HTML tags carry meaning.
Use elements like <header>, <main>, <footer> instead of generic <div>.
They help: Assistive tech like screen readers.
Non-semantic: <div onclick="submit()">Submit</div>
Semantic: <button type="submit">Submit</button>
<div> doesn’t support keyboard interaction or announce itself properly to screen readers.
<button> is operable via keyboard (Enter/Space) and is recognized by screen readers.
Form Accessibility: Each input should be associated with a label. If we don’t use a <label>, screen readers won’t know what the input is for.
Use the for attribute to associate a <label> with a form element by matching the id.
<label for="email">Email Address</label>
<input id="email" type="email" />
Add ARIA (Accessible Rich Internet Applications) label Attributes when needed
Used when native HTML doesn’t provide needed semantics.
ARIA adds roles, properties, and states that communicate with assistive tech.
Example: Custom button
<div role="button" tabindex="0" aria-pressed="false">Like</div>
role="button": announces as a button
tabindex="0": can tab into it
aria-pressed: indicates state
Use ARIA only when semantic HTML can’t do the job.
aria-expanded: Indicates whether content is visible.
aria-hidden: Hides content from assistive tech if true.
Using Headings Correctly: Headings help users navigate through a webpage, especially screen reader users:
Use only one <h1> per page to represent the main title.
Use subsequent heading levels (<h2>, <h3>, etc.) logically, respecting hierarchy.
Making Tables Accessible: Tables need to be structured semantically for accessibility, as they convey data in rows and columns.
Table Header: Use the <th> element for table headers.
Table Body: Use <tbody> for the data rows.
Caption: The <caption> element provides a brief description of the table's purpose.
Scope Attribute: The scope attribute helps clarify whether a <th> is a header for a row (scope="row") or a column (scope="col").
Success Criteria Levels: Each level builds upon the last in terms of accessibility strength.
Level A (Minimum Level / Must Have / Mandatory): These are the most essential requirements - must be met to avoid major accessibility barriers.Helps people with severe disabilities like:
Blindness (needs screen reader support)
Deafness (needs captions)
Total keyboard-only users (cannot use mouse at all)
Example:
Text alternatives for non-text content
Keyboard accessibility: All interactive elements (like buttons, forms) must be usable with a keyboard.
Ex: A button should be focusable using Tab and triggered by Enter.
No keyboard trap: Users must be able to move focus in and out of all interactive elements.
E.g., A modal should let users tab into and out of it.
Level AA (Mid-Range Level / Should Have / Recommended) –
Level AA builds upon Level A.
It's not just about accessibility for the blind or deaf - it's about creating a better experience for everyone, including older adults, users with dyslexia, low vision, or temporary impairments. Adds support for people with moderate or situational disabilities:
Low vision (needs more contrast, resizable text)
Cognitive challenges (Error Suggestion, Simple layout, consistent navigation)
Mobility issues (Easy keyboard access, no time pressure)
Temporary disabilities (broken arm, bright sunlight, slow internet)
Level AAA (Highest Level / Nice to Have /Advanced) – The highest and most complex level of web accessibility.
Very few sites meet this fully. It's ideal for highly inclusive applications.
Helps people with very specific needs, like:
Requiring sign language for videos
Needing very high contrast
Preferring simplified language
Examples:
Sign language interpretation: Provide sign language video for all pre-recorded audio.
Enhanced color contrast: Contrast ratio must be at least 7:1 for regular text. Ex: Black text on white background meets this.
More Optimizing ways for Accessibility
Offer customization: Provide users with customizable options to adjust font size, contrast settings, and other preferences.
Color Contrast Ratio: Ensure sufficient contrast between background and foreground text. It compares the brightness of the text vs. the background.
Higher = better visibility.
The first number is the luminance (brightness) of the lighter color. The second number is the luminance of the darker color.
The ratio ranges from 1:1 (no contrast/same color) to 21:1 (maximum contrast).
Contrast
Looks Like
Readable
1:1
White on white
Not at all
2.5:1
Light gray on white
Hard to read
4.5:1
Medium-dark gray on white
Acceptable
7:1
Black or dark gray on white
Excellent
21:1
Pure black on pure white
Perfect
Testing Accessibility: To ensure a website or individual web pages are fully accessible for each user.
Types of Tests:
Automated Test: Quickly scan for errors like missing alt, contrast issues, ARIA misuse.
Manual testing: Manual testing is necessary for checking aspects that automated tests cannot verify. An example is testing alternative text for images. While automated tests can confirm that the alt attribute exists for <img> elements, they cannot verify whether the text is meaningful and relevant to the image. Only an expert can assess this properly.
User Testing (End-User Testing): Get feedback from real users with disabilities
Valuable for testing usability in real-world conditions.
Automated Testing Tools:
WAVE (Web Accessibility Evaluation Tool): A plugin for Chrome that helps assess a webpage's accessibility.
tota11y: A tool that provides accessibility testing and advice as we navigate a webpage.
Lighthouse: A Google tool that checks multiple aspects of web performance, including accessibility.
Browser Developer Tools:
Chrome DevTools: Access the Accessibility tab within the Elements section to inspect the DOM and see how assistive technologies interpret the elements.
Microsoft Edge DevTools: Similar to Chrome, it offers accessibility tools to inspect how elements are interpreted by assistive technologies.
Firefox Developer Tools: Includes accessibility information and allows simulating color vision deficiencies and reduced contrast for better accessibility testing.
Use WCAG-based checklists (e.g., WebAIM).
Keyboard-Only Navigation: Ensure all functionalities (menus, forms, buttons) can be accessed via Tab, Enter, Arrow keys.
Performance
Web performance refers to how quickly and efficiently a web application loads, renders, and responds to user interactions, across different devices and network conditions.
Benefits:
User Experience: Users expect fast websites; if not, they leave.
Conversion Rate: Faster sites lead to more purchases, sign-ups, or goal completions.
Slower sites frustrate users and drive them to competitors.
SEO Ranking: Google prioritizes faster pages in search results.
Speed is a direct ranking factor.
Search Engine Crawling:
Crawlers have limited time (crawl budget) per site.
Faster-loading pages allow more content to be indexed.
Tools and Metrics for Measuring Performance:
Tools:
PageSpeed Insights (by Google)
Google Lighthouse: Chrome extension/tool
Chrome DevTools
WebPageTest
GTmetrix
Key Performance Metrics: These are the core metrics used to evaluate frontend performance
Time to First Byte (TTFB): Time between when we make a request and when the first byte of data is received from the server.
First Contentful Paint (FCP): Time until the first visible element is rendered.
First Meaningful Paint (FMP) –Time when the main content that the user came to see is visible.
Largest Contentful Paint (LCP) – Time until the largest visible element is rendered.
Time to Interactive (TTI) – Time when the page becomes fully interactive—buttons work, search bar responds, etc.
Total Blocking Time (TBT) – Time the main thread is blocked by JavaScript, preventing interactivity
FID (First Input Delay): Time between first user interaction and browser response.
CLS (Cumulative Layout Shift): Total visual instability due to shifting elements.
Options for Optimization: These techniques help improve performance:
Caching
Client-side: Stores data in the browser (e.g., localStorage, service workers)
Server-side: Store frequently accessed data in memory (instead of querying DB every time).
Optimizing Connection Times with CDN:
Problem: Distance between the user and server increases latency.
Approach: Use a CDN (Content Delivery Network) like Cloudflare or AWS CloudFront.
Minifying Code: Removes unnecessary characters (spaces, comments) from CSS, JS, HTML
Reduces file size and improves loading speed
Obfuscation: Makes code hard to read, hard to reverse engineer.
Unlike minification, which is for performance, obfuscation is for security/privacy.
Trade-offs:
Much larger file size
Can negatively affect performance.
Use cases: Protect proprietary logic.
Compressing Files: Even minified files can be compressed further.
Use gzip or Brotli compression on server to shrink file sizes
Makes downloads faster
Lazy Loading: Load images, videos, or components only when needed
Reduces initial page load time
Example: Images outside the screen load only when the user scrolls down. <img src="photo.jpg" alt="Landscape" loading="lazy" />
Code Splitting: Split large JavaScript files into smaller chunks to load only what is necessary, improving load times.
Resource Prioritization: Prioritize the loading of important resources (like CSS, JS, and fonts) over less critical ones.
Preloading Data: Use preload and preconnect for early connections to external domains.
DNS Prefetch: The browser pre-resolves the domain name to its IP address before the actual request is made.
This saves the time required for DNS lookup later.
Preconnect: Opens a connection to the server early.
Establishes TCP handshake and, if needed, a TLS handshake.
Saves connection time when the actual request is sent.
Helpful when we know an external domain will be accessed shortly.
Prefetch: Downloads and stores a resource in the browser cache for future use.
Fetches files (images, JS, CSS) in the background after the current page loads.
Stored in cache for quick access when needed later.
Useful for anticipating future navigation or content usage.
Subresource: Instructs the browser to treat a resource as high-priority.
Ensures essential assets (e.g., images, fonts) are fetched early.
Especially useful when we know a specific asset is critical for the next interaction.
Best when we want to optimize performance for resources required immediately after page load.
Prerender: Fully loads and renders an entire next web page in the background.
Includes downloading and executing all resources (HTML, JS, CSS, images).
When the user navigates to the page, it's shown instantly since it’s already preloaded and rendered.
Last updated