撰写背景
最近在和奶奶视频的时候，在疏导她注册抖音，让她有工夫看看里面更加精彩的世界，而不是围绕着咱们的一日三餐，然而注册的时候，要让她滑动滑块验证码去失去短信验证码（要我说，这真的很无语，间接发送手机验证码不行吗？），然而她的手指没有那么灵便，老是滑不到适合地位，我只能说等我五一回去再给注册了。
因为这件事，我忽然想到，是不是能够设计一个适配老人的验证码，说干就干！
当然，我也只是简略的从几个方面去做适配，而不会太深刻，毕竟只是个小菜鸟啦。
ok，咱们开始吧。
咱们能够从哪几个方面去做适配？
老人的认知和技术水平不同，会导致他们在应用最新的APP的时候，会碰到不会应用、看不清图片、触摸不灵敏等问题，因而，咱们能够从几个方面去做优化：
1.应用简略的验证码： 这是最根底的一步。对于老年人来说，图形、语音或文字验证码都可能很难了解。所以，咱们在设计验证码的时候，须要尽量应用简略的、易于辨认的验证码，这样他们就能更容易地实现验证过程。举个例子，应用简略的数学问题或选择题等（可能即便这样，对于老人来说，也是过于艰难了，因为他们可能了解不了。）相同的例子就是12306那种，各种奇葩问题和图形，齐全是断绝了老人应用的可能性。
2.减少可拜访性选项： 老年人的问题可能是多种多样的，比方眼神不好，或者听力不行，因而，咱们如果能为老年人提供可拜访性选项，如语音验证码或通过邮件或短信收到验证码等，那么久能够使他们更容易地实现验证过程。
3.减少反馈机制： 这个是很必要的。如果咱们在设计验证码的时候，为老年人提供明确的反馈，通知他们他们是否曾经正确地输出验证码，那么能够帮忙他们防止犯错和挫败感（老是输错，可能也是不行的，哎）。
4.优化验证码设计： 这个是下面所有计划的根底。对于老年人来说，应用亮堂的色彩、更大的字体、更清晰的字体等设计元素能够使验证码更容易辨认和应用。这样，能力让下面所有的倡议都变得可行。
具体代码示例
列举完之后，咱们就来看看具体代码吧。
1. 应用简略的代码
a. 数学问题验证码示例：
var a = Math.floor(Math.random() * 10);var b = Math.floor(Math.random() * 10);var answer = a + b;var userAnswer = prompt("What is " + a + " + " + b + "?");if (userAnswer == answer) { alert("You are human!");} else { alert("Wrong answer.");}b. 选择题验证码示例：
<div class="captcha"> <p>What color is a banana?</p> <label><input type="radio" name="captcha" value="yellow">Yellow</label> <label><input type="radio" name="captcha" value="red">Red</label> <label><input type="radio" name="captcha" value="blue">Blue</label></div><style> .captcha p { font-size: 20px; font-weight: bold; } .captcha label { font-size: 16px; display: block; margin-bottom: 10px; }</style>如果有其余适合的，也能够补充~
2. 减少可拜访性选项
a. 语音验证码示例
// 生成随机数字验证码$code = rand(1000, 9999);// 应用文字转语音API生成语音验证码$text = "Your verification code is $code";$url = "https://texttospeech.googleapis.com/v1/text:synthesize?key=YOUR_API_KEY";$data = [ "input" => [ "text" => $text, ], "voice" => [ "languageCode" => "en-US", "ssmlGender" => "FEMALE", ], "audioConfig" => [ "audioEncoding" => "MP3", ],];$options = [ "http" => [ "header" => "Content-type: application/json", "method" => "POST", "content" => json_encode($data), ],];$context = stream_context_create($options);$result = file_get_contents($url, false, $context);$file = fopen("captcha.mp3", "w");fwrite($file, $result);fclose($file);// 播放语音验证码echo '<audio src="captcha.mp3" autoplay></audio>';b. 邮件验证码示例
import randomimport smtplibfrom email.mime.text import MIMEText# 生成随机数字验证码code = str(random.randint(1000, 9999))# 发送邮件验证码sender = "example@example.com"receiver = "user@example.com"message = MIMEText("Your verification code is " + code)message["From"] = sendermessage["To"] = receivermessage["Subject"] = "Verification code"smtp = smtplib.SMTP("smtp.example.com")smtp.login(sender, "password")smtp.sendmail(sender, receiver, message.as_string())smtp.quit()其实这块用的比拟少，因为实际上，老人不肯定会应用邮件（除了那些还没退休的哈哈哈）
3. 减少反馈机制
<label for="captcha">验证码：</label><input type="text" name="captcha" id="captcha" required><span id="captcha-feedback"></span><script>document.getElementById("captcha").addEventListener("input", function() { var feedback = document.getElementById("captcha-feedback"); if (this.value == "1234") { feedback.textContent = "验证码正确"; feedback.style.color = "green"; } else { feedback.textContent = "验证码谬误"; feedback.style.color = "red"; }});</script>下面的代码还是很根底的，理论使用过程中，可能还须要在用户输出谬误的验证码后，提供更具体的谬误提醒，帮忙他们找到谬误的起因。当然，针对老人，咱们害能够思考为验证码减少声音或触动成果，提供更加直观的反馈。（这个可能更加重要，下次有机会补充一下代码）。
4. 应用更亮堂、更大的字体等
<label for="captcha">验证码：</label><input type="text" name="captcha" id="captcha" required><img src="captcha.php" alt="验证码" id="captcha-image"><button type="button" id="captcha-refresh">刷新</button><span id="captcha-feedback"></span><style>#captcha { font-size: 24px; font-weight: bold; letter-spacing: 4px; text-transform: uppercase; color: #333; background-color: #eee; border: none; border-radius: 4px; padding: 8px 16px;}#captcha-image { display: block; margin: 16px 0; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);}#captcha-refresh { background-color: #fff; color: #333; border: none; border-radius: 4px; padding: 4px 8px; margin-left: 8px;}#captcha-feedback { font-size: 14px; font-weight: bold; margin-top: 8px; display: block;}</style><script>var captchaImage = document.getElementById("captcha-image");var captchaRefresh = document.getElementById("captcha-refresh");var captchaFeedback = document.getElementById("captcha-feedback");// 为刷新按钮增加点击事件，从新加载验证码图片captchaRefresh.addEventListener("click", function() { captchaImage.src = "captcha.php?" + new Date().getTime();});// 为验证码输入框增加输出事件，检查用户输出的验证码是否正确document.getElementById("captcha").addEventListener("input", function() { var xhr = new XMLHttpRequest(); xhr.open("POST", "check_captcha.php", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { if (this.responseText == "1") { captchaFeedback.textContent = "验证码正确"; captchaFeedback.style.color = "green"; } else { captchaFeedback.textContent = "验证码谬误"; captchaFeedback.style.color = "red"; } } }; xhr.send("captcha=" + this.value);});</script>能够看到，咱们是应用了24像素的字体大小、加粗的字体、以及更大的字母间距，使验证码更易于辨认。色彩的话，应用了亮堂的背景色（#eee）和暗色的字体色彩（#333），以减少验证码的对比度。以及，为验证码输入框和验证码图片增加了圆角和暗影成果，使它们看起来更加好看。最初是，应用了一个<span>元素，用于显示用户输出的验证码是否正确。
结语
每个人都会随着工夫的流逝，缓缓发现，本人变成了以前看不懂的人。老年当初面临的问题，就是咱们当前会面临的问题。看着爷爷奶奶们有点艳羡地看着咱们应用手机，是有点心酸的。然而他们在应用手机时，我又会放心他们被坑骗，毕竟他们对网络世界的扁平和歹意还不够理解。
验证码可能阻挡一些来自网络的歹意，然而本人自身却也带着一些让他们不适应的元素，所以心愿社会企业家们可能在这一方面花点精力，尽管可能不能带来很大的收益，但总归是千里之行;始于足下，积少成多。
收费的验证码：注册体验