DISCOVER

Every movement begins with a moment.

Web Accessibility Testing: A Digital Perspective on Process and Tools

Posted 16 June 2015 9:00 AM by Kevin Smith and Vijay Mahoney

At Moxie, our technology teams works closely across disciplines to deliver a better quality product for our users. Testing is not left solely to QA nor is it wrought exclusively at the end of the development lifecycle. As the digital landscape evolves and brands aim to cater to an increasingly large (and segmented) user base, Web accessibility testing has come to the forefront of design/UX/development/QA and delivery.

Web accessibility testing falls under the usability umbrella. It takes into account users with disabilities and how they interact with the Web across desktop, mobile and tablet properties. Accessibility and usability coalesce when we consider how easily humans can use a website and how design and implementation initiatives can be improved. For our Internet Sales & Operations (ISO) team, accessibility means a website should be designed for ease and efficiency regardless of user ability. Moxie developers must convey digital information intuitively so that HTML users can access content and accomplish their goals across Web browsers and devices. To achieve this aim, we ask ourselves a variety of key questions.

Considerations for Accessibility Coding and Testing

  • Are navigation features implemented to heighten site usability?
  • Can users interact with the site using a keyboard, mouse or screen reader?
  • Can users tab to and from page elements in a logical manner?
  • Is digital audio content conveyed aurally, and if so, is it captioned?
  • Are we using Alt text for digital content?
  • Are there descriptive link and form field labels?
  • Are ARIA Tags present in the HTML?

At Moxie, we do more than (manually) click around the websites we’re constructing to ensure we’re making them “accessible.” Our development and QA teams are leveraging sophisticated tools and APIs to render our work WCAG2.0 AA Compliant, regardless of the project’s scale and scope. We test across environments both before and after Development Peer Reviews. We test our HTML5 and our CSS3 not just for tags, navigation and keyboard interaction but also for items like structural markup and color contrast errors.

Accessibility Testing Tools

There is no “one size fits all” approach when it comes to accessibility testing tools. Establishing a process, conducting manual testing and employing a variety of tools will certainly help set you up for success. And while there is a wide array of tools out there, here are the ones we currently use at Moxie.

  • HTML validation – We test our code against the Nu HTML Checker. This ensures our HTML is sound and compliant.
  • Accessibility – To ensure optimal results, we employ a combination of four tools during the testing process. Tenon.io and AChecker generate the most feedback during automation testing. Both tools provide WCAG2.0 AA testing and JSON output. We use a tool called Wave to analyze the text and background colors, ensuring there is a clear contrast between the two. Finally, we use JAWS (Job Access With Speech) for testing against visual impairment. This is more of a manual process to ensure each page is read with clear understanding and in a logical order.

Testing in Four Phases for a Singular Result

Moxie’s accessibility testing process spans four phases and uses all of the tools listed above. This level of rigor ensures we’re identifying and solving for optimal usability and delivering a universally exceptional user experience.

Phase 1 – Color Contrast

The first phase is to check against color contrast. This is done through the creative department. The reason for this is to prevent having to rework comps after development has gotten too far along. This can lead to lapsed deadlines and scrapping code all together.

Phase 2 – Automation

The next phase takes place during development. At Moxie, not only do we feel that you should build early and build always, but you should also “test early and test always.” To achieve this without greatly impacting development time, we turn to automation. Once a developer is ready to send code for Peer Review, they use our accessibility automation scripts to test against the Nu HTML Checker and Tenon.io. This step allows the developer to fix any accessibility issues found early on before heading to the subsequent phase.

The automation scripts produce reports for the developer and team to review and store. This gives us a way to double-check ourselves throughout the entire build process. When the developer submits code for Peer Review, that reviewer is able to then verify that the code being merged is valid and compliant.

Phase 3 – QA

The third phase integrates with the QA team. Additional accessibility testing is conducted both with automation and manual testing. In this phase, the automation script uses AChecker to sweep the code for anything Tenon.io may have missed. In the manual testing, the team will test for issues related to keyboard interaction and screen reader efficacy. These are items that either cannot be tested against through automation or have a low success rate in doing so.

Once the additional testing has been completed and all fixes are committed, the QA team will use the accessibility reports to verify the pages are ready for production release.

Phase 4 – Report Packaging

The final phase of the process performs report packaging for production. The saved accessibility reports are combined and packaged for distribution to the client and stored for future use. This gives our clients peace of mind that Web accessibility has been thoroughly tested and that the code delivered remains compliant.

The Constant Evolution

As technology and its capabilities continue to advance and evolve, the tools and standards for accessibility will improve and change as well. The plan and process that work today may not be optimal tomorrow. Just like other areas of development and QA, Web accessibility testing will need to be maintained and constantly sought out for new learning. Remember, there is never a silver bullet solution, and one size definitely does not fit all. Understanding your clients’ needs and testing early and often will be your keys to success. As the landscape evolves, so must your company, your knowledge and your tool set.


Blog Contributors:

Kevin Smith is an Interface Architect at Moxie. When he's not working on new processes to help the development team or diving into new technologies, he enjoys drawing, painting, home improvement and traveling.

Vijay Mahoney is the Senior QA Manager at Moxie. He has 10+ years’ experience working with Fortune 500 clients and InternetRetailer Hot 100 vendors in the e-commerce/digital marketing space. When he’s not staring at monitors, you can find him hanging with his hound dog, Covington.

Share:

Add your comment

 
 

 

Archive

Syndication

Tagcloud

#crisis #socialmediacrisis #socialmedia #digitalmarketing #socialmarketing #strategy #influencers #communication #pr #media #ideation #creation #content #planning #culture Snapchat Snap Inc. advertising marketing social media community management brand millennials authenticity Spectacles Wearables customer customer service Paid Media Podcasts Content Sponsored Ads Content Marketing #content #marketing #media #analytics #digitalmarketing #ideation #creation #production DecisionIQ strategy big data personalization Humanizeit Facebook Facebook Live Video Media Media Planning Data Intern Instagram Stories ftc guidelines social influencer social influencers social media influencers social media broadcasting live video Processing prototype prototyping user experience ux technology programming coding java ideas design visual arts mix reality mixed realities tutorial sketch Twitter Carousel Ads Ad Exchange Programmatic FBX Disney virtual reality projection mapping RFID Tumblr Voice Tone Axure wireframing UX software collaboration Measuring Usability UX Best Practices Designing User Journeys Stop counting clicks Designing for completion Designing for satisfaction Dieter Ram and User Experience Less is more Less but better Influencer Marketing learnability user interface user-created content gaming maker editor Super Mario Maker Nintendo digital media chat bots messaging mobile applications automation F8 Mark Zuckerberg Business F8 Conference Email office agency communication Slack Facebook at Work meetings productivity Wearable tech Healthcare Experience Patient Experience Service Design Strategy Creative Moxie VR Six Flags Six Flags Over Georgia theme parks Samsung Samsung Gear Samsung Galaxy VR headset Oculus Rift Playstation VR roller coasters Dare Devil Drive Websites Web dev development digital reactions emotion analytics dislike social metrics clicks Brands Consumers CPG Retail Consumer Marketing Consumer Insights Super Bowl Commercials Football Cultural Phenomenon Game adtech martec auto-responders automated marketing Experience Design Interaction Design Ecosystem iOS Healthkit Ad blocking Forbes Condé Nast GQ interactive media ad-light hashtags hashflags audience visual emojis campaign management 1-to-1 marketing omnichannel CES CES 2016 Oculus Sony PlayStation uSens HTC special mapping hand tracking games PetBot WonderWoof BowTie Pets OTT digital distribution Netflix Reed Hastings on-demand #yearahead #2016 #newyear #2016predictions #digitalstrategy #modernism user-generated content UGC Consumer Connection Integrated Marketing Manufacturers Accessibility usability engagement rate disability awareness creative process creativity fail fast hiring ideas imperfectionist perfectionist personnel progress test and learn fast casual restaurants social media campaigns QSR social strategies in-store promotions in-store social media promotions successful social media campaigns Logos Typography Branding #CPG #Retail #ConsumerInsights #CRM #ConsumerDirect #Seamless #OmniChannel #MoxieMakers #frontierism #intelligence #architecture insight moments Unit3C FutureX lab innovation open house Q&A UnitFilms 48in48 General Assembly Non-Profit Ponce City Market Branded design technical design style guide wireframes brand guidelines Consumer Products Interactive Marketing GIF social campaign modern marketing Cannes Lions new media pop culture meme Web Accessibility QA media buying mobile apps targeting wires Advertisers Apple Store EasyPay self-checkout app mobile payment Sporting Events Sitecore CMS delivery Content Marketing Strategy Brand Content Marketing Content Strategy Brand Content Strategy Social Content Strategy Cannes humanity what3words life saving dot Agency Partnership Agency Relationship Competitive Review Millennial Marketers email marketing omni-channel digital marketing esp email service provider process WCAG 2016 Planning Connected Omni AR Commerce Social Innovation Create Content Strategy OMMA MediaPost Internet Week TV & Video Media Planners Creative Conundrum real-time scalability Customization smartphone loyalty advocacy live streaming content democracy Open Source Node.js Cheerio Handlebars Hyperquext MongoDB Atlassian Stash PhantomJS Shopping On-demand economy Sharing economy Everything on demand Instant delivery iPhone App Amazon Now Build Automation DevOps Native Advertising Machina Forrester SXSW Machine Learning Data Streams Web search results Data Platforms ROI Instagram Purchase Behavior Like Content Consumer Channel Role and Purpose ExactTarget Salesforce Cloud Responsys Oracle Silverpop IBM Agency Culture Innovation and Technology Client Relationships Platform Partnerships Ever-evolving Digital Age geo-fencing tablet Android second-screen Austin FOMO Meerkat scaleable vector graphics Flash animation interactivity code browsers uber-savvy consumers integrated digital-connectedness Valentine's Über Bloom that Open Table Waze marketing research google music art sports illustration sculpture food green entertainment movies photography real time marketing cheat sheet smart homes vine print 3d printing street art painting fashion influencer movie billboard outdoor mobile wallet toys film halloween history space films cars anniversary
×

PLEASE PROVIDE YOUR INFORMATION
TO DOWNLOAD THE PAPER.

Error: All fields are required.
×
THANK YOU.
YOUR DOWNLOAD IS NOW AVAILABLE.