Web accessibility for developers
•
1 like•162 views
This document provides an overview of tips for developers to improve web accessibility, including using proper semantics like headings; designating common sections like headers and footers; including skip links, alternative text for images, and forms with clear labels; ensuring sufficient color contrast and text sizing; and validating code. It also discusses topics like media, languages, keyboard navigation, and testing accessibility. The goal is to help developers build better, more inclusive websites.
Recommended
Recommended
More Related Content
Similar to Web accessibility for developers
Similar to Web accessibility for developers (20)
More from Peter Bui
More from Peter Bui (10)
Recently uploaded
Recently uploaded (20)
Web accessibility for developers
- 1. WEB ACCESSIBILITY FOR DEVS Helpful hints and tips for dev to build better websites Peter Bui - PB Web Development
- 2. OVERVIEW OF THINGS TO LOOK OUT FOR.. Just a quick overview
- 3. SEMANTICS ➤ Headings, h1, h2, h3 ➤ H1, H3, H2 or H2 ➤ Using ordered lists and unordered lists
- 4. MARKUP ➤ Designate areas of a site with correct areas, e.g header, navigation, aside, content and footer ➤ Use ARIA Roles ➤ role=navigation, role=banner, role=contentinfo ➤ Examples of ARIA role landmarks - http:// www.html5accessibility.com/ tests/roles-land.html
- 5. CORRESPONDING HTML5 AND ARIA ROLES ➤ Designate areas of a site with correct areas, e.g header, navigation, aside, content and footer ➤ Use ARIA Roles ➤ role=navigation, role=banner, role=contentinfo ➤ Examples of ARIA role landmarks - http:// www.html5accessibility.com/ tests/roles-land.html
- 6. SKIP LINKS ➤ Please always have skip links ➤ Experience returning users navigate quickly
- 7. IMAGES ➤ Decorative vs meaningful ➤ Alternative text ➤ Longdesc linking to alternative page describing the image
- 8. SEO BENEFITS ➤ Headings for importance ➤ Context
- 9. FORMS ➤ Buttons versus links ➤ Form fields ➤ labels ➤ fieldsets, legends, don’t use placeholders ➤ Warning and validation ➤ Timers
- 10. TIMERS ON FORMS ➤ Alert with a timer before expires ➤ Use ARIA alerts
- 11. COLOUR CONTRAST ➤ Formula to work out the perfect contrast levels ➤ Vision Australia colour contrast tool for PC - http:// www.visionaustralia.org/ digital-access-cca ➤ For Mac - https:// www.paciellogroup.com/ resources/contrastanalyser/ ➤ and an online version http:// webaim.org/resources/ contrastchecker/
- 12. TEXT SIZING AND TYPOGRAPHY ➤ Make sure you can zoom by 200% ➤ base font size of 14px is a good starting point ➤ Choose readable fonts ➤ Heading sizes should be distinguishable
- 13. CAPTCHA ➤ It’s Evil ➤ Google ReCaptcha isn’t usable ➤ Cognitive issues and more textcaptcha.com
- 14. MEDIA ➤ Auto playing media - don’t do it ➤ Flashing video ➤ Keyboard accessible media controls
- 15. LANGUAGES ➤ <html lang=“en”> ➤ Joomla is accessible by language by default WIN
- 16. KEYBOARD NAVIGATION ➤ Tab tab tab, shift tab shift tab ➤ :focus
- 17. VALID CODE ➤ Valid code reads better for screen readers ➤ use free html validators
- 18. HTML ➤ Anyone uses HTML for layouts? ➤ Use Table headers, TH, table captions and so on to describe a table and its data. Give meaning to the data
- 19. VALID CODE ➤ Valid code reads better for screen readers ➤ use free html validators
- 20. TESTERS ➤ Squiz JS tester ➤ tenon.io for build testing and reporting.
- 21. CASE STUDY TIME Need a volunteer website
- 22. SOCIAL MEDIA MARKETING ➤ Engage with your customers in their space ➤ Advertise in a cost effective area ➤ Take advantage of public comments, recommendations and complaints