Download to read offline
Uploaded byPeter Bui
Web accessibility for developers
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.
TechnologyâŚ
![[DevFest Strasbourg 2025] - NodeJs Can do that !!](https://cdn.slidesharecdn.com/ss_thumbnails/devfeststrasbourg2025-nodejscandothat-251127142731-da65b6fd-thumbnail.jpg?width=640&height=640&fit=bounds)
![Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day3-cfd-251120170304-ddef8112-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Mobile Development] Crafting Immersive UI with E2E and AGSL Shade...](https://cdn.slidesharecdn.com/ss_thumbnails/md-craftingimmersiveuiwithe2eandagslshaderveronicaputrianggraini-251124030840-0c677f44-thumbnail.jpg?width=640&height=640&fit=bounds)
Web accessibility for developers
- 1. WEB ACCESSIBILITY FORDEVS Helpful hints and tips for dev to build better websites Peter Bui - PB Web Development
- 2. OVERVIEW OF THINGS TO LOOKOUT 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 areasof 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 ANDARIA 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 ⤠Pleasealways have skip links ⤠Experience returning users navigate quickly
- 7. IMAGES ⤠Decorative vsmeaningful ⤠Alternative text ⤠Longdesc linking to alternative page describing the image
- 8. SEO BENEFITS ⤠Headingsfor importance ⤠Context
- 9. FORMS ⤠Buttons versuslinks ⤠Form ďŹelds ⤠labels ⤠ďŹeldsets, 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 ⤠Formulato 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 ANDTYPOGRAPHY ⤠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 playingmedia - 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 ⤠Tabtab tab, shift tab shift tab ⤠:focus
- 17. VALID CODE ⤠Validcode reads better for screen readers ⤠use free html validators
- 18. HTML ⤠Anyone usesHTML 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 ⤠Validcode reads better for screen readers ⤠use free html validators
- 20. TESTERS ⤠Squiz JStester⨠⤠tenon.io for build testing and reporting.
- 21. CASE STUDY TIME Need avolunteer website
- 22. SOCIAL MEDIA MARKETING â¤Engage with your customers in their space ⤠Advertise in a cost eďŹective area ⤠Take advantage of public comments, recommendations and complaints
- 23.