Embed Size (px)
Citation preview
STANDARDISING ACCESSIBILITY USING TENON.IO
Peter Bui - PB Web Development
A BIT ABOUT US
‘WE’RE A TEAM OF
SPECIALISTS THAT LOVE
THE WEB’UI/UX design
Joomla, WordPress & Laravel
I’M NOT AFFILIATED
WITH TENON.IO
Just like using it
PROBLEMOn-boarding new
developers with accessibility
NOT USUALLY TAUGHT
or is an after thought
STANDARDISE OUR CODE
OUTPUTBoilerplates, standard
design patterns
GIVE THEM TOOLS
Get them up to speed, we’re lazy
OUR ACCESSIBILITY
TOOL BOXOur list of tools
OUR ACCESSIBILITY TOOLBOX
➤Pre-made boilerplate theme generator for WordPress
➤Gravity Forms accessibility plugin
➤HTML Code sniffer from Squiz
➤tenon.io API for testing and continuous testing
➤Access monitor for WordPress
➤Lots of automated scripts
BOILER PLATE THEME
GENERATORStandardise our builds
WHAT OUR BOILERPLATE SETS US UP WITH
➤Semantic markup
➤Accessible base level of CSS, eg font sizes, contrast, padding
➤ARIA landmarks
➤Menus with correct text and markup e.g Menu next to the burger menu
➤Skip menus
GRAVITY FORMS PLUGIN
Accessible forms for all of WordPress
https://wordpress.org/plugins/gravity-forms-wcag-20-form-fields/
WCAG 2.0 FORM FIELDS FOR GRAVITY FORMS
➤Form multi step process indicator
➤Creates field sets for radio and check boxes
➤Adds aria attributes for the form fields
➤Display errors at the top of the form with with anchor links to the errors in the form
http://squizlabs.github.io/HTML_CodeSniffer/
HTML CODE SNIFFER FROM SQUIZ
➤Great quick tool
➤False positives
➤Requires interpretation and experience
https://tenon.io/
TENON
➤API driven testing
➤Tests only what a machine can test
➤Testing automation
https://en-au.wordpress.org/plugins/access-monitor/
ACCESS MONITOR
➤Schedule tests on a website post launch
➤Tests against what is recommend for an automated test
➤Stop published that aren’t considered accessible
TESTING
MILESTONE TESTING
Waterfall development lifecycle
MOVE TO AGILE
Sprints, testing more often
TEST EARLY TEST OFTEN
Less to fix
DEVELOPERS GETTING
BETTERBut don’t know everything
TESTING WITH TENON
TENON
➤Web page source testing
➤API to trigger testing of pages
➤Tenon-cli to test in builds
➤Schedule monitoring
Using tenon-cli and testing a suite of pages as a part of a build
Video of scheduling in Tenon website
Tenon site monitor
PUTTING IT ALL
TOGETHER
STANDARD PROCESS BUILD WITH TESTING
➤Generate website from boiler plate
➤ Install Gravity forms accessibility plugin if required
➤ Implement the design from design team
➤Test with HTML Code Sniffer
STANDARD PROCESS BUILD WITH TESTING
➤Put code to git and deploy server for testing
➤Deploy if successful, change code and repeat if not
➤Generate reports for project managers and customers
