Create an account to use AI

Create a free account to unlock all features:

Ask questions about videos with AI
Use smart search (AI)
Save your favorite videos
Bookmark your favorite categories
Organize your favorite subcategories
Access your personalized favorites page
Access your conversation history
Personalize your homepage with your favorites

Create an account

Already have an account? Log in

Web Accessibility Guidelines | How to Make a Website Accessible? | WCAG

SirSajjad

Learn web content accessibility guidelines to make website or application accessible to everyone including people with disabilities and to improve overall user experience. How to develop accessible digital products or applications? #WebAccessibility #WebAccessibilityGuidelines #Accessibility #SirSajjad #DigitalAccessibility #WebContentAccessibilityGuidelines #WCAG

Web accessibility presentation download link:

https://drive.google.com/file/d/1BNu1pJ1SSSOVNtzagSr1WfI29BzPaBjP/view?usp=sharing

How to add captions or subtitles on YouTube videos?:

https://youtu.be/z0aILKg-3I0

Click on timestamps to go to a specific topic:

**********************************************

0:00 What is web accessibility?

2:00 Why accessibility matters?

3:30 Accessibility guidelines

20:31 Accessibility testing tools

23:19 Accessibility cheatsheet

26:10 Accessibility resources

Accessibility Resources:

*************************

Web Accessibility:

https://webaim.org/

https://www.w3.org/WAI/standards-guidelines/wcag/

https://www.nngroup.com/articles/ten-usability-heuristics/

WAI-ARIA:

https://www.w3.org/WAI/

https://webaim.org/techniques/aria/

https://www.w3.org/WAI/standards-guidelines/aria/

https://www.w3.org/TR/wai-aria-practices-1.1/

https://www.w3.org/WAI/tutorials/

Accessibility Testing Tools:

NVDA (Free): https://www.nvaccess.org/

ChromeVox (Free Chrome Extension)

JAWS (Paid): https://www.freedomscientific.com/products/software/jaws/

Window’s Narrator (Windows Built-in App)

Mac’s Voiceover (Mac’s Built-in App)

WAVE - Automated Testing (Free Chrome Extension)

Responsive Design:

CSS Media Queries: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Bootstrap: https://getbootstrap.com/

Web Accessibility Guidelines:

*****************************

*Use larger text, buttons and controls.

*Add enough contrast between text and background color.

*Add alternative text for all non decorative images.

*Add captions or subtitles and transcripts in all videos and audios.

*Make sure the website is accessible and useable by keyboard only without a mouse.

*Make sure that all form elements are accessible by using keyboard only and in right order.

*Use consistent design, navigation, font family, color and font size throughout the website.

*Design should be responsive to look good on all devices.

*Use semantic HTML code.

*Keyboard tab focus order should be in logical order.

*Add skip navigation link.

*Provide enough time to complete a task.

*Make it intuitive, easy to understand and use.

*Use simple, plain and concise language.

*Add instructions and help for error prevention and recovery.

*Use ARIA to make JavaScript and jQuery controls accessible.

*Never use color alone to convey information.

*Ensure accessibility of PDF, Word, and PowerPoint files.

*Add descriptive links.

*Run accessibility testing.

Web Accessibility Guidelines | How to Make a Website Accessible? | WCAG | Knoovi