Web accessibility for developers
-
Upload
peter-bui -
Category
Technology
-
view
77 -
download
0
Transcript of Web accessibility for developers
![Page 1: Web accessibility for developers](https://reader031.fdocuments.us/reader031/viewer/2022030314/5899a59e1a28ab30688b61bd/html5/thumbnails/1.jpg)
WEB ACCESSIBILITY FOR DEVSHelpful hints and tips for dev to build better websites
Peter Bui - PB Web Development
![Page 2: Web accessibility for developers](https://reader031.fdocuments.us/reader031/viewer/2022030314/5899a59e1a28ab30688b61bd/html5/thumbnails/2.jpg)
OVERVIEW OF THINGS
TO LOOK OUT FOR..
Just a quick overview
![Page 3: Web accessibility for developers](https://reader031.fdocuments.us/reader031/viewer/2022030314/5899a59e1a28ab30688b61bd/html5/thumbnails/3.jpg)
SEMANTICS
➤ Headings, h1, h2, h3
➤ H1, H3, H2 or H2
➤ Using ordered lists and unordered lists
![Page 4: Web accessibility for developers](https://reader031.fdocuments.us/reader031/viewer/2022030314/5899a59e1a28ab30688b61bd/html5/thumbnails/4.jpg)
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
![Page 5: Web accessibility for developers](https://reader031.fdocuments.us/reader031/viewer/2022030314/5899a59e1a28ab30688b61bd/html5/thumbnails/5.jpg)
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
![Page 6: Web accessibility for developers](https://reader031.fdocuments.us/reader031/viewer/2022030314/5899a59e1a28ab30688b61bd/html5/thumbnails/6.jpg)
SKIP LINKS
➤ Please always have skip links
➤ Experience returning users navigate quickly
![Page 7: Web accessibility for developers](https://reader031.fdocuments.us/reader031/viewer/2022030314/5899a59e1a28ab30688b61bd/html5/thumbnails/7.jpg)
IMAGES
➤ Decorative vs meaningful
➤ Alternative text
➤ Longdesc linking to alternative page describing the image
![Page 8: Web accessibility for developers](https://reader031.fdocuments.us/reader031/viewer/2022030314/5899a59e1a28ab30688b61bd/html5/thumbnails/8.jpg)
SEO BENEFITS
➤ Headings for importance
➤ Context
![Page 9: Web accessibility for developers](https://reader031.fdocuments.us/reader031/viewer/2022030314/5899a59e1a28ab30688b61bd/html5/thumbnails/9.jpg)
FORMS
➤ Buttons versus links
➤ Form fields
➤ labels
➤ fieldsets, legends, don’t use placeholders
➤ Warning and validation
➤ Timers
![Page 10: Web accessibility for developers](https://reader031.fdocuments.us/reader031/viewer/2022030314/5899a59e1a28ab30688b61bd/html5/thumbnails/10.jpg)
TIMERS ON FORMS
➤ Alert with a timer before expires
➤ Use ARIA alerts
![Page 11: Web accessibility for developers](https://reader031.fdocuments.us/reader031/viewer/2022030314/5899a59e1a28ab30688b61bd/html5/thumbnails/11.jpg)
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/
![Page 12: Web accessibility for developers](https://reader031.fdocuments.us/reader031/viewer/2022030314/5899a59e1a28ab30688b61bd/html5/thumbnails/12.jpg)
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
![Page 13: Web accessibility for developers](https://reader031.fdocuments.us/reader031/viewer/2022030314/5899a59e1a28ab30688b61bd/html5/thumbnails/13.jpg)
CAPTCHA
➤ It’s Evil
➤ Google ReCaptcha isn’t usable
➤ Cognitive issues and moretextcaptcha.com
![Page 14: Web accessibility for developers](https://reader031.fdocuments.us/reader031/viewer/2022030314/5899a59e1a28ab30688b61bd/html5/thumbnails/14.jpg)
MEDIA
➤ Auto playing media - don’t do it
➤ Flashing video
➤ Keyboard accessible media controls
![Page 15: Web accessibility for developers](https://reader031.fdocuments.us/reader031/viewer/2022030314/5899a59e1a28ab30688b61bd/html5/thumbnails/15.jpg)
LANGUAGES
➤ <html lang=“en”>
➤ Joomla is accessible by language by default WIN
![Page 16: Web accessibility for developers](https://reader031.fdocuments.us/reader031/viewer/2022030314/5899a59e1a28ab30688b61bd/html5/thumbnails/16.jpg)
KEYBOARD NAVIGATION
➤ Tab tab tab, shift tab shift tab
➤ :focus
![Page 17: Web accessibility for developers](https://reader031.fdocuments.us/reader031/viewer/2022030314/5899a59e1a28ab30688b61bd/html5/thumbnails/17.jpg)
VALID CODE
➤ Valid code reads better for screen readers
➤ use free html validators
![Page 18: Web accessibility for developers](https://reader031.fdocuments.us/reader031/viewer/2022030314/5899a59e1a28ab30688b61bd/html5/thumbnails/18.jpg)
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
![Page 19: Web accessibility for developers](https://reader031.fdocuments.us/reader031/viewer/2022030314/5899a59e1a28ab30688b61bd/html5/thumbnails/19.jpg)
VALID CODE
➤ Valid code reads better for screen readers
➤ use free html validators
![Page 21: Web accessibility for developers](https://reader031.fdocuments.us/reader031/viewer/2022030314/5899a59e1a28ab30688b61bd/html5/thumbnails/21.jpg)
CASE STUDY TIME
Need a volunteer website
![Page 22: Web accessibility for developers](https://reader031.fdocuments.us/reader031/viewer/2022030314/5899a59e1a28ab30688b61bd/html5/thumbnails/22.jpg)
SOCIAL MEDIA MARKETING
➤ Engage with your customers in their space
➤ Advertise in a cost effective area
➤ Take advantage of public comments, recommendations and complaints
![Page 23: Web accessibility for developers](https://reader031.fdocuments.us/reader031/viewer/2022030314/5899a59e1a28ab30688b61bd/html5/thumbnails/23.jpg)
QUESTIONS?TWITTER: @ASTROBOYSOUP