Maina Wycliffe Building a More Inclusive and Accessible Web for All Users

Software Engineer and Google Developer Expert (Angular) Author of All Things Typescript Newsletter Maina Wycliffe About Me

Inclusivity and Accessibility

Loading speed, interactivity and overall user experience of your website 1 in 6 people in the world have one form of disability in the world Performance Accessibility How does your website scale for different devices and screen sizes Responsive Inclusivity and Accessibility intro

Loading speed, interactivity and overall user experience of your website 1 in 6 people in the world have one form of disability in the world Performance Accessibility How does your website scale for different devices and screen sizes Responsive Inclusivity and Accessibility intro

Loading speed, interactivity and overall user experience of your website 1 in 6 people in the world have one form of disability in the world Performance Accessibility How does your website scale for different devices and screen sizes Responsive Inclusivity and Accessibility intro

Principles of Accessibility Accessibility

- How easy is it for users with disabilities to get to key information on your web app - This includes: - visual, mobility, hearing, cognitive, and speech impairments, vestibular and seizure disorders, etc. - Examples: - Images should have alt texts - Proper roles and content hierarchy using semantic HTML - Captions for videos How easy is to operate your website - Does it support touch, keyboard controls etc. - Does the UX frustrate users as they try to achieve their goals Perceivable Operable - The UX of the website must be easy for users to understand how to operate - Examples: - Easy navigation and use of iconography - Clear and concise error messages - Provide clear feedback for user action - Does your website support and have compatibility with assistive technologies such as screen readers - Support for different devices - Is it Responsive? - Is it performant? Understandable Robust Accessibility - Principles

- How easy is it for users with disabilities to get to key information on your web app - This includes: - visual, mobility, hearing, cognitive, and speech impairments, vestibular and seizure disorders, etc. - Examples: - Images should have alt texts - Proper roles and content hierarchy using semantic HTML - Captions for videos How easy is to operate your website - Does it support touch, keyboard controls etc. - Does the UX frustrate users as they try to achieve their goals Perceivable Operable - The UX of the website must be easy for users to understand how to operate - Examples: - Easy navigation and use of iconography - Clear and concise error messages - Provide clear feedback for user action - Does your website support and have compatibility with assistive technologies such as screen readers - Support for different devices - Is it Responsive? - Is it performant? Understandable Robust Accessibility - Principles

- How easy is it for users with disabilities to get to key information on your web app - This includes: - visual, mobility, hearing, cognitive, and speech impairments, vestibular and seizure disorders, etc. - Examples: - Images should have alt texts - Proper roles and content hierarchy using semantic HTML - Captions for videos How easy is to operate your website - Does it support touch, keyboard controls etc. - Does the UX frustrate users as they try to achieve their goals Perceivable Operable - The UX of the website must be easy for users to understand how to operate - Examples: - Easy navigation and use of iconography - Clear and concise error messages - Provide clear feedback for user action - Does your website support and have compatibility with assistive technologies such as screen readers - Support for different devices - Is it Responsive? - Is it performant? Understandable Robust Accessibility - Principles

- How easy is it for users with disabilities to get to key information on your web app - This includes: - visual, mobility, hearing, cognitive, and speech impairments, vestibular and seizure disorders, etc. - Examples: - Images should have alt texts - Proper roles and content hierarchy using semantic HTML - Captions for videos How easy is to operate your website - Does it support touch, keyboard controls etc. - Does the UX frustrate users as they try to achieve their goals Perceivable Operable - The UX of the website must be easy for users to understand how to operate - Examples: - Easy navigation and use of iconography - Clear and concise error messages - Provide clear feedback for user action - Does your website support and have compatibility with assistive technologies such as screen readers - Support for different devices - Is it Responsive? - Is it performant? Understandable Robust Accessibility - Principles

Performance Performance

- How long does it take for the user to see the content? - How long does it take for your respond to user interactions? - How efficient is your website - Are you using optimal image formats and sizes - Are you using optimal JS/CSS resources - Are you using user device resources optimally? Web Performance Section 1

“Your iPhone isn’t the real world.” Me, 2022

Measuring Performance Core Web Vitals

How long does it take for the initial content to be display How long does it take for the website to responder to the initial user interaction First Contentful Paint (FCP) First Input Delay (FID) How much does your website content shift around unintentionally i.e. images/videos/content being loaded to shift content After user interaction, how long does it take for your website to display next content Contentful Layout Shift (CLS) Interaction to Next Paint (INP) Core Web Vitals

How long does it take for the initial content to be display How long does it take for the website to responder to the initial user interaction First Contentful Paint (FCP) First Input Delay (FID) How much does your website content shift around unintentionally i.e. images/videos/content being loaded to shift content After user interaction, how long does it take for your website to display next content Contentful Layout Shift (CLS) Interaction to Next Paint (INP) Core Web Vitals

How long does it take for the initial content to be display How long does it take for the website to responder to the initial user interaction First Contentful Paint (FCP) First Input Delay (FID) How much does your website content shift around unintentionally i.e. images/videos/content being loaded to shift content After user interaction, how long does it take for your website to display next content Contentful Layout Shift (CLS) Interaction to Next Paint (INP) Core Web Vitals

How long does it take for the initial content to be display How long does it take for the website to responder to the initial user interaction First Contentful Paint (FCP) First Input Delay (FID) How much does your website content shift around unintentionally i.e. images/videos/content being loaded to shift content After user interaction, how long does it take for your website to display next content Contentful Layout Shift (CLS) Interaction to Next Paint (INP) Core Web Vitals

Performance Improvement Techniques

- Prefetch resources through resource hinting - Which resources to load first - Which resources that are needed in the course of time - Lazy load resources - Images not visible to the user - Lazy load JS /CSS - Inline Critical CSS - Don’t load unnecessary JS/CSS/Assets - Use the right tool for the right job - Cache static resources on the browser and edge locations (CDNs) - Images, CSS, JS Performance Improvements Techniques

Metrics and Measurements Responsive Design Responsive Design

- Larger screens and content can flow vertically - Uses Mouse - High precision device - Target elements can be smaller - Needs larger images - Can handle more complex applications - With heavy animations - E.g. Smartphones, Tablets, etc - Smaller screen - content flow is more restricted - Uses touch for interactivity (low precision) - Target elements need to be larger - Needs smaller images Desktop computers Mobile Devices - Serve the correct size for each device - Use srcset and sizes — to provide additional source images for different screen sizes Images Responsive Design Responsive Design

- Larger screens and content can flow vertically - Uses Mouse - High precision device - Target elements can be smaller - Needs larger images - Can handle more complex applications - With heavy animations - E.g. Smartphones, Tablets, etc - Smaller screen - content flow is more restricted - Uses touch for interactivity (low precision) - Target elements need to be larger - Needs smaller images Desktop computers Mobile Devices - Serve the correct size for each device - Use srcset and sizes — to provide additional source images for different screen sizes Images Responsive Design Responsive Design

- Larger screens and content can flow vertically - Uses Mouse - High precision device - Target elements can be smaller - Needs larger images - Can handle more complex applications - With heavy animations - E.g. Smartphones, Tablets, etc - Smaller screen - content flow is more restricted - Uses touch for interactivity (low precision) - Target elements need to be larger - Needs smaller images Desktop computers Mobile Devices - Serve the correct size for each device - Use srcset and sizes — to provide additional source images for different screen sizes - Lazy loading techniques - Don’t load images not visible - Prefetch images/assets for faster loading - Cache images Images Responsive Design Responsive Design

What is the target demography of your users Understand your users their needs and wants and how best you can serve them User Research Understand Put yourself in the shoes of your user and design solutions for your users Empathy Design Process for Accessibility intro

Thank You Maina Wycliffe Engineer