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

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 канала SirSajjad