Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Testing for anyone at all | Contensis user groups 2016

Zengenti
October 10, 2016

Testing for anyone at all | Contensis user groups 2016

Here, Sam Clifford, quality assurance tester, talks about the major areas that need testing to get projects live. From choosing browsers to learning to navigate a site without a screen, and beyond.

Zengenti

October 10, 2016
Tweet

More Decks by Zengenti

Other Decks in Technology

Transcript

  1. “Disability is not just a health problem. It is a

    complex phenomenon, reflec<ng the interac<on between features of a person’s body and features of the society in which he or she lives.” –World Health Organisa2on
  2. Auditory Impaired hearing in one or both ears Who 152,400

    (avg.) working age adults in GB Can also affect people in social spaces (such as offices) Need Video / audio cap2ons or transcripts
  3. Cogni<ve and Neurological Impacts how well people hear, move, see,

    speak, and understand informa2on Who 1,733,400 (avg.) working age people in GB Can also effect people with headaches, pain or case of the Mondays Need Clear / easy naviga2on Easy passages of text (highlighted with images, graphs etc.) No moving, blinking content & audio is easy to mute
  4. Physical (Motor Disabili<es) Limita2ons of muscular control including tremors, lack

    of coordina2on, or paralysis Who 1,293,900 (avg.) working age people in GB Can also effect people with temporary injury (strained wrist) or those holding a cup of coffee Need Full keyboard support Easy naviga2on Suitable 2me limits to complete tasks
  5. Speech Difficulty producing speech that is recognisable by others or

    so[ware Who Unable to source specific #’s in GB permanently effected Permanently effects people with mu2sm, stuaering, lisps, etc. or simply laryngi2s or a bad throat Need Provide alternate contact solu2ons rather than a phone number
  6. Visual Reduced vision in one or both eyes, reduced percep2on

    of colours and brightness Who 129,100 (avg.) working age people in GB Also effects people exposed to a light flash or those suffering from a migraine Need Alterna2ve text Re-sizing elements (especially text) Suitable contrast between colours Full keyboard support Ishihara Color Blindness Test Plate
  7. 1.1 Text Alterna<ves Provide text alterna<ves for non-text content •

    All images, form buaons have appropriate, equivalent text • Text labels on form inputs
  8. 1.2 Time-based Media Provide alterna<ves for <me-based media (video, audio

    etc.) • Descrip2ve text transcript • Synchronised cap2ons for non-live video • Excep2on when the media is a media alterna2ve for text and is clearly labeled as such
  9. 1.3 Adaptable Provide content that can be presented in different

    ways (for example simpler layout) without losing informa<on or structure • Seman2c markup is used appropriately • <h1> <h2> etc. • Reading and naviga2on order is logical and intui2ve • Instruc2ons do not rely upon shape, size, or visual loca2on • e.g. "Click the square icon to con2nue"
  10. 1.4 Dis<nguishable Provide easy to see and hear content including

    separa<ng foreground from background • Colour is not used as the only visual means of conveying informa2on • Text and images of text have a contrast ra2o of at least 4.5:1 • Large text (over 18 point or 14 point bold) has a contrast ra2o of at least 3:1 • Text can be resized without assis2ve technology up to 200 percent
  11. 2.1 Keyboard Accessible Make all func<onality available from a keyboard

    • Keyboard focus is never locked or trapped • The user can navigate to and from all navigable page elements using only a keyboard
  12. 2.2 Enough Time Provide users enough <me to read and

    use content • If a page or applica2on has a 2me limit, the user is given op2ons to turn off, adjust, or extend that 2me limit • Not a requirement for real-2me events (e.g. an auc2on) • Automa2cally moving, blinking, or scrolling content that lasts longer than 5 seconds can be pause, stopped or hidden by the user
  13. 2.3 Seizures Do not design content in a way that

    is known to cause seizures • Web pages do not contain anything that flashes more than three 2mes in any one second period • And / or no more than three red flashes within any one-second period
  14. 2.4 Navigable Provide ways to help users navigate, find content,

    and determine where they are • Bypass blocks of content that are repeated on mul2ple web pages • Web pages have 2tles that describe topic or purpose • Headings and labels describe topic or purpose • The purpose of each link can be determined from the link text alone, or from the link text and its context • The naviga2on order of links, form elements, etc. is logical and intui2ve • Links with the same text that go to different loca2ons are readily dis2nguishable • Mul2ple ways are available to find other web pages on the site - at least two of: a list of related pages, table of contents, site map, site search, or list of all available web pages • It is visually apparent which page element has the current keyboard focus
  15. 3.1 Readable Make text content readable and understandable • The

    language of the page is iden2fied using the HTML lang aaribute • <html lang="en"> for example • The language of page content that is in a different language is iden2fied using the lang aaribute • <blockquote lang="es"> for example
  16. 3.2 Predictable Make web pages appear and operate in predictable

    ways • When any component receives focus, it does not ini2ate a change of context • Ensure focus is not forcibly shi[ed on input • Naviga2on links that are repeated on web pages do not change order when naviga2ng through the site • Components that have the same func2onality within a set of web pages are iden2fied consistently
  17. 3.3 Input Assistance Help users avoid and correct mistakes •

    If an input error is automa2cally detected, the item that is in error is iden2fied and the error is described to the user in text • Labels or instruc2ons are provided when content requires user input • If an input error is detected, provide sugges2ons for fixing the input in a 2mely and accessible manner • If the user can change or delete legal, financial, or test data, the changes/dele2ons can be reversed, verified, or confirmed
  18. 4.1 Compa<ble Maximise compa<bility with current and future user agents,

    including assis<ve technologies • Significant HTML / XHTML valida2on / parsing errors are avoided • Markup is used in a way that facilitates accessibility. This includes following the HTML / XHTML specifica2ons and using forms, form labels, frame 2tles, etc. appropriately
  19. HTML / CSS Valida<on Catch unintended mistakes— mistakes you might

    have otherwise missed—so that you can fix them Valida2on: • Eases maintenance • Future-proofs • Browsers / Screen readers can best read the page • Sign of professionalism Test again and again throughout all projects
  20. Page Speed Iden<fy ways to make a site faster and

    more mobile-friendly • haps:/ /gtmetrix.com • haps:/ /developers.google.com/speed/pagespeed/ insights • Though it can be a bit over enthusias2c
  21. Accessibility Tes<ng Tools All the WCAG 2.0 guidelines in a

    handy list - hap:/ /code.viget.com/interac2ve-wcag Web accessibility evalua2on - hap:/ /wave.webaim.org Colour Contrast Analyser - haps:/ /www.paciellogroup.com/resources/contrastanalyser Colour Blindness Simulator - hap:/ /colororacle.org Colour Paleae Analyser - hap:/ /colorsafe.co or haps:/ /accessibility.oit.ncsu.edu/tools/color-extractor macOS - VoiceOver (built in) / Windows - hap:/ /www.nvaccess.org
  22. UK - Aug 2016 - http://gs.statcounter.com Other Win8.1 OS X

    Win10 Win7 Other Edge Safari Firefox IE Chrome OS Stats Browser Stats
  23. UK - Aug 2016 - http://gs.statcounter.com IE Mobile / Other

    Opera BlackBerry Samsung Internet Android Chrome Safari Mobile Device Stats
  24. Windows Virtual Machines Test Microso[ Edge and versions of IE8

    through to IE11 using free virtual machines you download and manage locally • haps:/ /virtualbox.org • haps:/ /developer.microso[.com/en-us/microso[- edge/tools/vms
  25. Xcode Simulator The Simulator app, available within Xcode, presents the

    iPhone, iPad user interface in a window on your Mac computer • haps:/ /developer.apple.com/xcode
  26. Android Emulator Emulate the newest and oldest versions of Android

    at different screen sizes / resolu2ons • haps:/ /developer.android.com/studio
  27. Device Lab Emulators / Simulators don’t trump the real thing.

    A mouse doesn’t replicate true interac2ons • eBay helps keep costs down
  28. GhostLabs Connect any number of browsers and devices, and Ghostlab

    will keep them in sync through naviga2ng, scrolling, filling out forms and any other interac2on • haps:/ /vanamco.com/ghostlab
  29. Web-Based Browser Tes<ng Generate website screenshots across desktop and mobile

    browsers • www.browserstack.com • hap:/ /browsershots.org
  30. Q&A