2024-09-12 18:39:07 +05:30
<!doctype html>
< html lang = "en-US" >
< head > < script src = "/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer > < / script >
< meta charset = "utf-8" >
< meta http-equiv = "x-ua-compatible" content = "ie=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
< link rel = "preload" as = "font" href = "//localhost:1313/fonts/vendor/jost/jost-v4-latin-regular.woff2" type = "font/woff2" crossorigin >
< link rel = "preload" as = "font" href = "//localhost:1313/fonts/vendor/jost/jost-v4-latin-700.woff2" type = "font/woff2" crossorigin >
< link rel = "stylesheet" href = "//localhost:1313/main.css" >
< noscript > < style > img . lazyload { display : none ; } < / style > < / noscript >
< meta name = "robots" content = "index, follow" >
< meta name = "googlebot" content = "index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" >
< meta name = "bingbot" content = "index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" >
< title > Testing on screenreaders - mCaptcha< / title >
< meta name = "description" content = "A network of mCaptcha instances sharing PoW stats to make mCaptcha more efficient and accessible" >
< link rel = "canonical" href = "//localhost:1313/blog/testing-on-screenreaders/" >
< meta name = "twitter:card" content = "summary_large_image" >
< meta name = "twitter:image" content = "//localhost:1313/blog/testing-on-screenreaders/icon.png" >
< meta name = "twitter:title" content = "Testing on screenreaders" >
< meta name = "twitter:description" content = "A network of mCaptcha instances sharing PoW stats to make mCaptcha more efficient and accessible" >
< meta name = "twitter:site" content = "@" >
< meta name = "twitter:creator" content = "@" >
< meta property = "og:title" content = "Testing on screenreaders" >
< meta property = "og:description" content = "A network of mCaptcha instances sharing PoW stats to make mCaptcha more efficient and accessible" >
< meta property = "og:type" content = "article" >
< meta property = "og:url" content = "//localhost:1313/blog/testing-on-screenreaders/" >
< meta property = "og:image" content = "//localhost:1313/blog/testing-on-screenreaders/icon.png" >
< meta property = "article:published_time" content = "2024-02-10T00:00:00+00:00" >
< meta property = "article:modified_time" content = "2024-02-12T18:21:49+05:30" >
< meta property = "og:site_name" content = "mCaptcha" >
< meta property = "article:publisher" content = "https://www.facebook.com/" >
< meta property = "article:author" content = "https://www.facebook.com/" >
< meta property = "og:locale" content = "en_US" >
< script type = "application/ld+json" >
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1 ,
"name": "Home",
"item": "\/\/localhost:1313\/"
},{
"@type": "ListItem",
"position": 2 ,
"name": "Blog",
"item": "\/\/localhost:1313\/blog\/"
},{
"@type": "ListItem",
"position": 3 ,
"name": "Testing on Screenreaders",
"item": "\/\/localhost:1313\/blog\/testing-on-screenreaders\/"
}]
}
< / script >
< meta name = "theme-color" content = "#fff" >
< link rel = "apple-touch-icon" sizes = "180x180" href = "//localhost:1313/apple-touch-icon.png" >
< link rel = "icon" type = "image/png" sizes = "32x32" href = "//localhost:1313/favicon-32x32.png" >
< link rel = "icon" type = "image/png" sizes = "16x16" href = "//localhost:1313/favicon-16x16.png" >
< link rel = "manifest" href = "//localhost:1313/site.webmanifest" >
< / head >
< body class = "blog single" >
< div class = "header-bar fixed-top" > < / div >
< header class = "navbar fixed-top navbar-expand-md navbar-light" >
< div class = "container" >
< input class = "menu-btn order-0" type = "checkbox" id = "menu-btn" >
< label class = "menu-icon d-md-none" for = "menu-btn" > < span class = "navicon" > < / span > < / label >
< a class = "navbar-brand order-1 order-md-0 me-auto" href = "//localhost:1313/" > mCaptcha< / a >
< button id = "mode" class = "btn btn-link order-2 order-md-4" type = "button" aria-label = "Toggle mode" >
< span class = "toggle-dark" > < svg xmlns = "http://www.w3.org/2000/svg" width = "20" height = "20" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" class = "feather feather-moon" > < path d = "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" > < / path > < / svg > < / span >
< span class = "toggle-light" > < svg xmlns = "http://www.w3.org/2000/svg" width = "20" height = "20" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" class = "feather feather-sun" > < circle cx = "12" cy = "12" r = "5" > < / circle > < line x1 = "12" y1 = "1" x2 = "12" y2 = "3" > < / line > < line x1 = "12" y1 = "21" x2 = "12" y2 = "23" > < / line > < line x1 = "4.22" y1 = "4.22" x2 = "5.64" y2 = "5.64" > < / line > < line x1 = "18.36" y1 = "18.36" x2 = "19.78" y2 = "19.78" > < / line > < line x1 = "1" y1 = "12" x2 = "3" y2 = "12" > < / line > < line x1 = "21" y1 = "12" x2 = "23" y2 = "12" > < / line > < line x1 = "4.22" y1 = "19.78" x2 = "5.64" y2 = "18.36" > < / line > < line x1 = "18.36" y1 = "5.64" x2 = "19.78" y2 = "4.22" > < / line > < / svg > < / span >
< / button >
< ul class = "navbar-nav social-nav order-3 order-md-5" >
< li class = "nav-item" >
< a class = "nav-link" href = "https://github.com/mCaptcha" > < svg xmlns = "http://www.w3.org/2000/svg" width = "20" height = "20" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" class = "feather feather-github" > < path d = "M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" > < / path > < / svg > < span class = "ms-2 visually-hidden" > GitHub< / span > < / a >
< / li >
< / ul >
< div class = "collapse navbar-collapse order-4 order-md-1" >
< ul class = "navbar-nav main-nav me-auto order-5 order-md-2" > < li class = "nav-item active" >
< a class = "nav-link" href = "//localhost:1313/blog/" > Blog< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "//localhost:1313/community/" > Community< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "//localhost:1313/contact/" > Contact< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "//localhost:1313/about/" > About< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "//localhost:1313/docs/webmasters/installing-captcha/" > Docs< / a >
< / li >
< / ul >
< div class = "break order-6 d-md-none" > < / div >
< form class = "navbar-form flex-grow-1 order-7 order-md-3" >
< input id = "userinput" class = "form-control is-search" type = "search" placeholder = "Search docs..." aria-label = "Search docs..." autocomplete = "off" >
< div id = "suggestions" class = "shadow bg-white rounded" > < / div >
< / form >
< / div >
< / div >
< / header >
< div class = "wrap container" role = "document" >
< div class = "content" >
< div class = "row flex-xl-nowrap" >
< nav class = "docs-toc d-none d-xl-block col-xl-3" aria-label = "Secondary navigation" >
< div class = "page-links" >
< h3 > On this page< / h3 >
< nav id = "TableOfContents" >
< ul >
< li > < a href = "#android-in-built-screen-reader-on-fennec" > Android in-built screen reader on Fennec< / a > < / li >
< li > < a href = "#nvda-on-microsoft-windows-and-mozilla-firefox" > NVDA on Microsoft Windows and Mozilla Firefox< / a > < / li >
< li > < a href = "#macos-in-built-screen-reader-on-google-chrome" > macOS in-built screen reader on Google Chrome< / a > < / li >
< li > < a href = "#ios-in-built-screen-reader-on-safari" > iOS in-built screen reader on Safari< / a > < / li >
< / ul >
< / nav >
< / div >
< / nav >
< main class = "docs-content col-lg-11 col-xl-9 mx-xl-auto" >
< article >
< div class = "blog-header" >
< h1 > Testing on screenreaders< / h1 >
< p > < small > Posted February 10, 2024 by < a class = "stretched-link position-relative" href = "//localhost:1313/contributors/aravinth-manivannan/" > Aravinth Manivannan< / a > ‐ < strong > 1 min read< / strong > < / small > < p >
< p > < small > Last Edited February 12, 2024< / small > < p >
< / div >
< p class = "lead" > < / p >
< p > < a href = "www.han.nl" > HAN University of Applied Sciences< / a > kindly did an
2024-02-12 18:23:26 +05:30
accessibility test of the mCaptcha widget and the showcase site, which
features a real world integration of mCaptcha in a third-party service.
The report motived us to make screen reader testing an integral part of
2024-09-12 18:39:07 +05:30
the release process.< / p >
< p > Here are the results:< / p >
< h2 id = "android-in-built-screen-reader-on-fennec" > Android in-built screen reader on Fennec< / h2 >
< iframe title = "Testing mCaptcha on Android screenreader with Fennec browser" width = "560" height = "315" src = "https://peertube.batsense.net/videos/embed/e9579d73-b19e-4051-9337-8432fc15c3b3" frameborder = "0" allowfullscreen = "" sandbox = "allow-same-origin allow-scripts allow-popups" > < / iframe >
< h2 id = "nvda-on-microsoft-windows-and-mozilla-firefox" > NVDA on Microsoft Windows and Mozilla Firefox< / h2 >
< iframe title = "Testing mCaptcha on NVDA screen reader on MS Windows with Mozilla Firefox browser" width = "560" height = "315" src = "https://peertube.batsense.net/videos/embed/cf534270-8089-4aad-95b3-543c467a6a12" frameborder = "0" allowfullscreen = "" sandbox = "allow-same-origin allow-scripts allow-popups" > < / iframe >
< h2 id = "macos-in-built-screen-reader-on-google-chrome" > macOS in-built screen reader on Google Chrome< / h2 >
< iframe title = "Testing mCaptcha on macOS in-built screen reader and Google Chrome browser" width = "560" height = "315" src = "https://peertube.batsense.net/videos/embed/45be4f8c-1978-4650-b9f1-972cfead8420" frameborder = "0" allowfullscreen = "" sandbox = "allow-same-origin allow-scripts allow-popups" > < / iframe >
< h2 id = "ios-in-built-screen-reader-on-safari" > iOS in-built screen reader on Safari< / h2 >
< iframe title = "Testing mCaptcha on iOS screenreader with Safari" width = "560" height = "315" src = "https://peertube.batsense.net/videos/embed/ac9722a4-3dce-4c40-bb0c-7bc8d721c3db" frameborder = "0" allowfullscreen = "" sandbox = "allow-same-origin allow-scripts allow-popups" > < / iframe >
< / article >
< div class = "docs-navigation d-flex justify-content-between" >
< a class = "ms-auto" href = "//localhost:1313/blog/introducing-mcaptcha-net/" >
< div class = "card my-1" >
< div class = "card-body py-2" >
Introducing mCaptcha net →
< / div >
< / div >
< / a >
< / div >
< p class = "edit-page" > < a href = "https://git.batsense.net/mCaptcha/website/blob/master/content/blog/testing-on-screenreaders.md" > < svg xmlns = "http://www.w3.org/2000/svg" width = "16" height = "16" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" class = "feather feather-edit-2" > < path d = "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" > < / path > < / svg > Edit this page on git.batsense.net< / a > < / p >
< / main >
< / div >
< / div >
< / div >
< footer class = "footer text-muted" >
< div class = "container" >
< div class = "row" >
< div class = "col-lg-8 order-last order-lg-first" >
< ul class = "list-inline" >
< li class = "list-inline-item" > Powered by < a href = "https://gohugo.io/" > Hugo< / a > , and < a href = "https://getdoks.org/" > Doks< / a > < / li >
< / ul >
< / div >
< div class = "col-lg-8 order-first order-lg-last text-lg-end" >
< ul class = "list-inline" >
< li class = "list-inline-item" > < a href = "//localhost:1313/about/" > About< / a > < / li >
< li class = "list-inline-item" > < a href = "//localhost:1313/donate" > Donate< / a > < / li >
< li class = "list-inline-item" > < a href = "//localhost:1313/privacy-policy/" > Privacy< / a > < / li >
< li class = "list-inline-item" > < a href = "//localhost:1313/security" > Security< / a > < / li >
< li class = "list-inline-item" > < a href = "https://stats.uptimerobot.com/GK7VLFJnBl" > Status< / a > < / li >
< li class = "list-inline-item" > < a href = "//localhost:1313/thanks" > Thanks< / a > < / li >
< / ul >
< / div >
< / div >
< / div >
< / footer >
< script src = "//localhost:1313/main.js" defer > < / script >
< script src = "//localhost:1313/index.js" defer > < / script >
< / body >
< / html >
