Post on 13-Apr-2017
WEB ACCESSIBILITY FOR DEVSHelpful hints and tips for dev to build better websites
Peter Bui - PB Web Development
OVERVIEW OF THINGS
TO LOOK OUT FOR..
Just a quick overview
SEMANTICS
➤ Headings, h1, h2, h3
➤ H1, H3, H2 or H2
➤ Using ordered lists and unordered lists
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
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
SKIP LINKS
➤ Please always have skip links
➤ Experience returning users navigate quickly
IMAGES
➤ Decorative vs meaningful
➤ Alternative text
➤ Longdesc linking to alternative page describing the image
SEO BENEFITS
➤ Headings for importance
➤ Context
FORMS
➤ Buttons versus links
➤ Form fields
➤ labels
➤ fieldsets, legends, don’t use placeholders
➤ Warning and validation
➤ Timers
TIMERS ON FORMS
➤ Alert with a timer before expires
➤ Use ARIA alerts
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/
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
CAPTCHA
➤ It’s Evil
➤ Google ReCaptcha isn’t usable
➤ Cognitive issues and moretextcaptcha.com
MEDIA
➤ Auto playing media - don’t do it
➤ Flashing video
➤ Keyboard accessible media controls
LANGUAGES
➤ <html lang=“en”>
➤ Joomla is accessible by language by default WIN
KEYBOARD NAVIGATION
➤ Tab tab tab, shift tab shift tab
➤ :focus
VALID CODE
➤ Valid code reads better for screen readers
➤ use free html validators
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
VALID CODE
➤ Valid code reads better for screen readers
➤ use free html validators
CASE STUDY TIME
Need a volunteer website
SOCIAL MEDIA MARKETING
➤ Engage with your customers in their space
➤ Advertise in a cost effective area
➤ Take advantage of public comments, recommendations and complaints
QUESTIONS?TWITTER: @ASTROBOYSOUP