Audio Website<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n background-color: #f9f9f9;\n margin: 0;\n padding: 20px;\n \/* Bottom padding ensures the text can scroll completely past the screen *\/\n padding-bottom: 60vh; \n }\n\n \/* Fixed \/ Sticky container that locks the panel to the top across all builders and mobile layouts *\/\n .top-button-container {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 15px;\n position: -webkit-sticky; \/* Support Safari mobile *\/\n position: sticky;\n top: 0;\n background-color: #f9f9f9;\n padding: 15px 5px;\n z-index: 9999;\n border-bottom: 3px solid #e5e7eb;\n box-shadow: 0 4px 6px rgba(0,0,0,0.05);\n }\n\n \/* Container for the helpline button at the bottom *\/\n .bottom-button-container {\n display: flex;\n justify-content: center;\n align-items: center;\n margin-top: 50px;\n margin-bottom: 50px;\n }\n\n \/* Huge, kid-toy style buttons optimized for fluid scaling *\/\n .big-btn {\n font-size: 2rem; \n font-weight: bold;\n padding: 20px 30px;\n border: 5px solid #000000;\n border-radius: 20px;\n cursor: pointer;\n box-shadow: 0 8px 0 #333333;\n transition: all 0.1s ease;\n white-space: nowrap; \/* Prevents text from breaking onto multiple lines on small phones *\/\n }\n\n .big-btn:active {\n transform: translateY(6px);\n box-shadow: 0 2px 0 #333333;\n }\n\n \/* Accessible Blue Button with White Text *\/\n .listen-btn {\n background-color: #0056b3; \n color: #ffffff;\n }\n\n \/* Accessible Yellow Button with Dark Text *\/\n .stop-btn {\n background-color: #ffd700; \n color: #000000;\n }\n\n \/* Accessible Dark Orange Button with White Text for National Helpline *\/\n .helpline-btn {\n background-color: #d97706; \n color: #ffffff;\n white-space: normal; \/* Allows the longer text button at the bottom to wrap gracefully if needed *\/\n }\n\n \/* Side Navigation Arrow Styling *\/\n .side-nav-btn {\n position: fixed;\n top: 50%;\n right: 20px;\n transform: translateY(-50%);\n z-index: 10000; \/* Stays above everything else *\/\n background-color: #0056b3;\n color: #ffffff;\n font-size: 2.5rem;\n padding: 15px 25px;\n border: 5px solid #000000;\n border-radius: 50%; \/* Makes it a large round button *\/\n cursor: pointer;\n box-shadow: 0 6px 0 #333333;\n display: flex;\n justify-content: center;\n align-items: center;\n text-decoration: none; \/* Removes link underline *\/\n transition: all 0.1s ease;\n }\n\n .side-nav-btn:active {\n transform: translateY(-44%); \/* Adjusted slightly to preserve vertical centering on click click *\/\n box-shadow: 0 2px 0 #333333;\n }\n\n \/* Center and format the text content *\/\n .content {\n text-align: center;\n max-width: 800px;\n margin: 40px auto 0 auto;\n font-size: 1.8rem;\n line-height: 1.8;\n color: #111111;\n }\n\n h1 {\n font-size: 2.8rem;\n margin-bottom: 40px;\n transition: background-color 0.3s ease;\n }\n\n p {\n margin-bottom: 40px;\n transition: background-color 0.3s ease;\n border-radius: 8px;\n padding: 5px 10px;\n }\n\n \/* High-contrast highlight effect for the currently read element *\/\n .currently-reading {\n background-color: #fef08a; \/* Bright yellow background *\/\n outline: 3px dashed #000000; \/* Distinct border *\/\n }\n\n \/* Mobile specific font override so layout elements scale down together *\/\n @media screen and (max-width: 480px) {\n .big-btn {\n font-size: 1.4rem; \/* Auto-shrinks slightly on narrow phone screens to sit cleanly side-by-side *\/\n padding: 15px 20px;\n border-width: 4px;\n box-shadow: 0 6px 0 #333333;\n }\n .side-nav-btn {\n font-size: 1.8rem;\n padding: 10px 18px;\n right: 10px;\n border-width: 4px;\n }\n .content {\n font-size: 1.5rem;\n }\n h1 {\n font-size: 2.2rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n \n <div class=\"top-button-container\">\n <button class=\"big-btn listen-btn\" onclick=\"startReading()\">\u25b6 Listen to Site<\/button>\n <button class=\"big-btn stop-btn\" onclick=\"stopReading()\">\u25a0 Stop<\/button>\n <\/div>\n\n \n <a href=\"https:\/\/helpfortheblind.org\/?page_id=23\" class=\"side-nav-btn\" title=\"Next Page\" onclick=\"stopReading()\">\u25b6<\/a>\n\n \n <div class=\"content\">\n <h1>Welcome to the Audio Site<\/h1>\n <p>This is the first paragraph. Click the buttons at the top of the screen to listen to the page or stop the audio.<\/p>\n <p>The system will read through all content sequentially.<\/p>\n <p>As it reads, the page will now automatically smooth scroll to keep the text in the center of your view.<\/p>\n <p>If you need resources or vision rehabilitation guidance, you can use the American Council of the Blind hotline button described at the bottom of the screen.<\/p>\n <\/div>\n\n \n <div class=\"bottom-button-container\">\n <button class=\"big-btn helpline-btn\" onclick=\"callHelpline()\">\ud83d\udcde ACB Helpline<\/button>\n <\/div>\n\n <script>\n let elementsToRead = [];\n let currentIndex = 0;\n let isReading = false;\n\n function startReading() {\n if (!('speechSynthesis' in window)) {\n alert(\"Sorry, your browser does not support text-to-speech.\");\n return;\n }\n\n stopReading();\n \n elementsToRead = Array.from(document.querySelectorAll('.content h1, .content p'));\n currentIndex = 0;\n isReading = true;\n\n readNextElement();\n }\n\n function readNextElement() {\n if (!isReading || currentIndex >= elementsToRead.length) {\n stopReading();\n return;\n }\n\n const currentElement = elementsToRead[currentIndex];\n currentElement.classList.add('currently-reading');\n\n currentElement.scrollIntoView({\n behavior: 'smooth',\n block: 'center'\n });\n\n const utterance = new SpeechSynthesisUtterance(currentElement.textContent);\n utterance.rate = 1.0;\n utterance.pitch = 1.0;\n\n utterance.onend = function() {\n currentElement.classList.remove('currently-reading');\n currentIndex++;\n readNextElement();\n };\n\n utterance.onerror = function() {\n currentElement.classList.remove('currently-reading');\n };\n\n window.speechSynthesis.speak(utterance);\n }\n\n function stopReading() {\n isReading = false;\n if ('speechSynthesis' in window) {\n window.speechSynthesis.cancel();\n }\n \n const elements = document.querySelectorAll('.content h1, .content p');\n elements.forEach(el => el.classList.remove('currently-reading'));\n }\n\n function callHelpline() {\n stopReading();\n\n const userConfirmed = confirm(\"Would you like to dial the American Council of the Blind National Helpline?\");\n \n if (userConfirmed) {\n window.location.href = \"tel:1-800-424-8666\";\n }\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Audio Website \u25b6 Listen to Site \u25a0 Stop \u25b6 Welcome to the Audio Site This is the first paragraph. Click the buttons at the top of the screen to listen to the page or stop the audio. The system will read through all content sequentially. As it reads, the page will now automatically smooth scroll […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/helpfortheblind.org\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/helpfortheblind.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/helpfortheblind.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/helpfortheblind.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/helpfortheblind.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":5,"href":"https:\/\/helpfortheblind.org\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":35,"href":"https:\/\/helpfortheblind.org\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/35"}],"wp:attachment":[{"href":"https:\/\/helpfortheblind.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":7,"date":"2026-07-17T19:34:14","date_gmt":"2026-07-17T19:34:14","guid":{"rendered":"https:\/\/helpfortheblind.org\/?page_id=7"},"modified":"2026-07-17T21:37:28","modified_gmt":"2026-07-17T21:37:28","slug":"home","status":"publish","type":"page","link":"https:\/\/helpfortheblind.org\/","title":{"rendered":"Home"},"content":{"rendered":"\n\n\n\n \n \n Audio Website<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n background-color: #f9f9f9;\n margin: 0;\n padding: 20px;\n \/* Bottom padding ensures the text can scroll completely past the screen *\/\n padding-bottom: 60vh; \n }\n\n \/* Fixed \/ Sticky container that locks the panel to the top across all builders and mobile layouts *\/\n .top-button-container {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 15px;\n position: -webkit-sticky; \/* Support Safari mobile *\/\n position: sticky;\n top: 0;\n background-color: #f9f9f9;\n padding: 15px 5px;\n z-index: 9999;\n border-bottom: 3px solid #e5e7eb;\n box-shadow: 0 4px 6px rgba(0,0,0,0.05);\n }\n\n \/* Container for the helpline button at the bottom *\/\n .bottom-button-container {\n display: flex;\n justify-content: center;\n align-items: center;\n margin-top: 50px;\n margin-bottom: 50px;\n }\n\n \/* Huge, kid-toy style buttons optimized for fluid scaling *\/\n .big-btn {\n font-size: 2rem; \n font-weight: bold;\n padding: 20px 30px;\n border: 5px solid #000000;\n border-radius: 20px;\n cursor: pointer;\n box-shadow: 0 8px 0 #333333;\n transition: all 0.1s ease;\n white-space: nowrap; \/* Prevents text from breaking onto multiple lines on small phones *\/\n }\n\n .big-btn:active {\n transform: translateY(6px);\n box-shadow: 0 2px 0 #333333;\n }\n\n \/* Accessible Blue Button with White Text *\/\n .listen-btn {\n background-color: #0056b3; \n color: #ffffff;\n }\n\n \/* Accessible Yellow Button with Dark Text *\/\n .stop-btn {\n background-color: #ffd700; \n color: #000000;\n }\n\n \/* Accessible Dark Orange Button with White Text for National Helpline *\/\n .helpline-btn {\n background-color: #d97706; \n color: #ffffff;\n white-space: normal; \/* Allows the longer text button at the bottom to wrap gracefully if needed *\/\n }\n\n \/* Side Navigation Arrow Styling *\/\n .side-nav-btn {\n position: fixed;\n top: 50%;\n right: 20px;\n transform: translateY(-50%);\n z-index: 10000; \/* Stays above everything else *\/\n background-color: #0056b3;\n color: #ffffff;\n font-size: 2.5rem;\n padding: 15px 25px;\n border: 5px solid #000000;\n border-radius: 50%; \/* Makes it a large round button *\/\n cursor: pointer;\n box-shadow: 0 6px 0 #333333;\n display: flex;\n justify-content: center;\n align-items: center;\n text-decoration: none; \/* Removes link underline *\/\n transition: all 0.1s ease;\n }\n\n .side-nav-btn:active {\n transform: translateY(-44%); \/* Adjusted slightly to preserve vertical centering on click click *\/\n box-shadow: 0 2px 0 #333333;\n }\n\n \/* Center and format the text content *\/\n .content {\n text-align: center;\n max-width: 800px;\n margin: 40px auto 0 auto;\n font-size: 1.8rem;\n line-height: 1.8;\n color: #111111;\n }\n\n h1 {\n font-size: 2.8rem;\n margin-bottom: 40px;\n transition: background-color 0.3s ease;\n }\n\n p {\n margin-bottom: 40px;\n transition: background-color 0.3s ease;\n border-radius: 8px;\n padding: 5px 10px;\n }\n\n \/* High-contrast highlight effect for the currently read element *\/\n .currently-reading {\n background-color: #fef08a; \/* Bright yellow background *\/\n outline: 3px dashed #000000; \/* Distinct border *\/\n }\n\n \/* Mobile specific font override so layout elements scale down together *\/\n @media screen and (max-width: 480px) {\n .big-btn {\n font-size: 1.4rem; \/* Auto-shrinks slightly on narrow phone screens to sit cleanly side-by-side *\/\n padding: 15px 20px;\n border-width: 4px;\n box-shadow: 0 6px 0 #333333;\n }\n .side-nav-btn {\n font-size: 1.8rem;\n padding: 10px 18px;\n right: 10px;\n border-width: 4px;\n }\n .content {\n font-size: 1.5rem;\n }\n h1 {\n font-size: 2.2rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n \n <div class=\"top-button-container\">\n <button class=\"big-btn listen-btn\" onclick=\"startReading()\">\u25b6 Listen to Site<\/button>\n <button class=\"big-btn stop-btn\" onclick=\"stopReading()\">\u25a0 Stop<\/button>\n <\/div>\n\n \n <a href=\"https:\/\/helpfortheblind.org\/?page_id=23\" class=\"side-nav-btn\" title=\"Next Page\" onclick=\"stopReading()\">\u25b6<\/a>\n\n \n <div class=\"content\">\n <h1>Welcome to the Audio Site<\/h1>\n <p>This is the first paragraph. Click the buttons at the top of the screen to listen to the page or stop the audio.<\/p>\n <p>The system will read through all content sequentially.<\/p>\n <p>As it reads, the page will now automatically smooth scroll to keep the text in the center of your view.<\/p>\n <p>If you need resources or vision rehabilitation guidance, you can use the American Council of the Blind hotline button described at the bottom of the screen.<\/p>\n <\/div>\n\n \n <div class=\"bottom-button-container\">\n <button class=\"big-btn helpline-btn\" onclick=\"callHelpline()\">\ud83d\udcde ACB Helpline<\/button>\n <\/div>\n\n <script>\n let elementsToRead = [];\n let currentIndex = 0;\n let isReading = false;\n\n function startReading() {\n if (!('speechSynthesis' in window)) {\n alert(\"Sorry, your browser does not support text-to-speech.\");\n return;\n }\n\n stopReading();\n \n elementsToRead = Array.from(document.querySelectorAll('.content h1, .content p'));\n currentIndex = 0;\n isReading = true;\n\n readNextElement();\n }\n\n function readNextElement() {\n if (!isReading || currentIndex >= elementsToRead.length) {\n stopReading();\n return;\n }\n\n const currentElement = elementsToRead[currentIndex];\n currentElement.classList.add('currently-reading');\n\n currentElement.scrollIntoView({\n behavior: 'smooth',\n block: 'center'\n });\n\n const utterance = new SpeechSynthesisUtterance(currentElement.textContent);\n utterance.rate = 1.0;\n utterance.pitch = 1.0;\n\n utterance.onend = function() {\n currentElement.classList.remove('currently-reading');\n currentIndex++;\n readNextElement();\n };\n\n utterance.onerror = function() {\n currentElement.classList.remove('currently-reading');\n };\n\n window.speechSynthesis.speak(utterance);\n }\n\n function stopReading() {\n isReading = false;\n if ('speechSynthesis' in window) {\n window.speechSynthesis.cancel();\n }\n \n const elements = document.querySelectorAll('.content h1, .content p');\n elements.forEach(el => el.classList.remove('currently-reading'));\n }\n\n function callHelpline() {\n stopReading();\n\n const userConfirmed = confirm(\"Would you like to dial the American Council of the Blind National Helpline?\");\n \n if (userConfirmed) {\n window.location.href = \"tel:1-800-424-8666\";\n }\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Audio Website \u25b6 Listen to Site \u25a0 Stop \u25b6 Welcome to the Audio Site This is the first paragraph. Click the buttons at the top of the screen to listen to the page or stop the audio. The system will read through all content sequentially. As it reads, the page will now automatically smooth scroll […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/helpfortheblind.org\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/helpfortheblind.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/helpfortheblind.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/helpfortheblind.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/helpfortheblind.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":5,"href":"https:\/\/helpfortheblind.org\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":35,"href":"https:\/\/helpfortheblind.org\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/35"}],"wp:attachment":[{"href":"https:\/\/helpfortheblind.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}