Skip to main content

Accessible Page Summaries

Welcome to the official ADA P.S. Web site

by Stuart Long

In today’s digital landscape, the best accessibility tools should not merely be an add-on; they should be a foundational element of every Web experience. Yet, despite advancements in technology, blind screen reader users are struggling with unintended systemic biases that deny them equal access to information. Because vision impaired screen reader users currently navigate the Web through a painstaking process, relying on screen readers to glean information from pages in minutes that sighted users can assess in seconds. This inequity not only limits their online experience but also stifles their ability to engage fully with content. The existing reliance on meta descriptions and SEO slanted alt text tags is insufficient and fundamentally misaligned with the needs of assistive technology users. Can we truly be satisfied with this disparity?

Introducing Accessible Page Summaries, a key accessibility feature designed specifically to address these challenges. This innovative feature provides document-specific summaries directly integrated into each Web page, ensuring that blind screen reader users receive high-quality, concise information about the content's who, what, where, when, and why—without the clutter of irrelevant keywords that search engines prioritize. Most importantly, the vision impaired no longer have to meander through a maze, tabbing from heading to heading and alt text to alt text, like solving a puzzle, to determine what a Web page is about.

▶ Unmatched Accessibility: This solution operates independently of third-party dependencies, ensuring consistent access even during CDN failures and redirect errors.

▶ Streamlined Navigation: By providing summaries alongside content size details, this accessibility feature empowers blind users to make informed decisions about which pages to explore further—just as sighted users do.

▶ Compliance and Usability: Designed to meet WCAG 2.1 AAA standards, Accessible Page Summaries not only enhance user experience but also help businesses make their Websites more accessible.

The user experience is vastly improved. Because with Accessible Page Summaries, blind screen reader users will no longer feel like they are navigating through a word jumble of headings and alt text. Instead, they will gain quick insights into Web pages and enjoy an experience that is comparable to their sighted counterparts. The integration into each Web page means that every user—regardless of ability—can engage with content efficiently and effectively.

The time has come to champion digital inclusivity. By integrating Accessible Page Summaries into your Web presence, you are not only enhancing accessibility for blind users but also demonstrating your commitment to equitable experiences for all users. Everyone should work together to ensure that the Web is a space where all people can thrive.

Explore the Accessible Page Summary open-source repository on GitHub today and take the first step toward transforming your Web site into an accessible haven for all users.

Visit the GitHub repository.

Thank you for considering including this vital enhancement in your digital strategy. Please continue to pave the way for a more inclusive Internet.

What Happens Next?

The examples below are for Web pages. More work is needed to develop Accessible Page Summaries for PDF's, Ebooks, and other document types. It is my hope that talented engineers will be inspired by this open source repository and make it happen.

The Accessible Page Summary should be a WCAG requirement. It might also make sense to include the Accessible Page Summary as fundamental to HTML5.

What Else Can It Do?

Future versions could be opened by an "i" for information button, to be included in every Web browser, intended for sited users, that would open complete Accessible Page Summary content in a sidebar. Then everyone will be able to benefit from Accessible Page Summaries.

CSS

For All Versions.

    
<!-- Accessible Page Summary CSS - BEGIN -->
<style>/* Opt-Out (default) */.ADA-ps {display: none}/* Opt-In (selectable) */.Summary-Opt-In:focus+.ADA-ps {display: block}/* WCAG 2.1 AAA */.ada-ps-css-01 {background: #fff; color: #000;display: inline-block; font-size: 1.5rem; line-height: 150%; margin-left: -3000rem; position: absolute; z-index: 997}</style>
<!-- Accessible Page Summary CSS - END -->


ADA P.S. 1

HTML For typical Web pages.

    
<!-- FOR TYPICAL Web PAGES - ADA P.S. 1 -->
<!-- Accessible Page Summary | https://adasummary.top | BEGIN -->
<!-- Passed WCAG 2.1 AAA 08/25/2023 -->
    <section role="complementary" aria-label="Note about usage" class="ada-ps-css-01">
    <h2>To Hear a Brief Summary of This Web Page Including Content Size Click Open. Then use the down arrow.</h2>
    <button aria-pressed="false" value="Open" class="Summary-Opt-In">Open</button>
    <section role="contentinfo" aria-label="Web page summary" class="ADA-ps">
    <p><!-- description -->
    Web Page Description.<br>
    Replace this line with a Description of the Web page that does not duplicate the meta description tag.</p>
    <p><!-- alt text summary -->
    Alt Text Summary.<br>
    Replace this line with a very brief summation of all images.</p>
    <p><!-- content size -->
    Content Size.<br>
    Replace this line with the word count or, short reed, long reed, length of video, etc.
    <!-- never remove this line -->
    That completes the Summary. The Web page content starts now.</p>
    </section></section>
<!-- Accessible Page Summary - END -->

The above source code is for typical Web pages.

How To Use


ADA P.S. 2

HTML For 100% text Web pages.

    
<!-- FOR 100% TEXT Web PAGES - ADA P.S. 2 -->
<!-- Accessible Page Summary | https://adasummary.top | BEGIN -->
<!-- Passed WCAG 2.1 AAA 08/25/2023 -->
    <section role="complementary" aria-label="Note about usage" class="ada-ps-css-01">
    <h2>To Hear a Brief Summary of This Web Page Including Content Size Click Open.
    Then use the down arrow.</h2>
    <button aria-pressed="false" value="Open" class="Summary-Opt-In">Open</button>
    <section role="contentinfo" aria-label="Web page summary" class="ADA-ps">
    <p><!-- description -->
    Web Page Description.<br>
    Replace this line with a Description of the Web page that does not duplicate the meta description tag.</p>
    <p><!-- content size -->
    Content Size.<br>
    Replace this line with the word count
    or, short reed, long reed, length of video, etc.
    <!-- never remove this line -->
    That completes the Summary.
    The Web page content starts now.</p>
    </section></section>
<!-- Accessible Page Summary - END -->

The above source code is for Web pages that don't have images, graphics, photographs or illustrations.

How To Use


ADA P.S. 3

HTML For 100% images pages.

    
<!-- FOR 100% IMAGES Web PAGES - ADA P.S. 3 -->
<!-- Accessible Page Summary | https://adasummary.top | BEGIN -->
<!-- Passed WCAG 2.1 AAA 08/25/2023 -->
    <section role="complementary" aria-label="Note about usage" class="ada-ps-css-01">
    <h2>To Hear a Brief Summary of This Web Page Including Content Size Click Open.
    Then use the down arrow.</h2>
    <button aria-pressed="false" value="Open" class="Summary-Opt-In">Open</button>
    <section role="contentinfo" aria-label="Web page summary" class="ADA-ps">
    <p><!-- description -->
    Web Page Description.<br>
    Replace this line with a Description of the Web page that does not duplicate the meta description tag.</p>
    <p><!-- alt text summary -->
    Alt Text Summary.<br>
    Replace this line with a very brief summation
    of all images.</p>
    <p><!-- never remove this line -->
    That completes the Summary.
    The Web page content starts now.</p>
    </section></section>
<!-- Accessible Page Summary - END -->

The above source code is for image gallery Web pages and other Web pages that are 100% images.

How To Use


ADA P.S. 4

HTML For 100% Infographic Web pages.

    
<!-- FOR 100% INFOGRAPHIC Web PAGES - ADA P.S. 4 -->
<!-- Accessible Page Summary | https://adasummary.top | BEGIN -->
<!-- Passed WCAG 2.1 AAA 08/25/2023 -->
    <section role="complementary" aria-label="Note about usage" class="ada-ps-css-01">
    <h2>To Hear a Brief Summary of This Web Page Including Content Size Click Open. Then use the down arrow.</h2>
    <button aria-pressed="false" value="Open" class="Summary-Opt-In">Open</button>
    <section role="contentinfo" aria-label="Web page summary" class="ADA-ps">
    <p><!-- description -->
    Web Page Description.<br>
    Replace this line with a Description of the Web page that does not duplicate the meta description tag.</p>
    <p><!-- alt text summary -->
    Alt Text Summary.<br>
    Replace this line with a very brief summation of all images.</p>
    <p><!-- content size -->
    Content Size.<br>
    Replace this line with the word count or, short reed, long reed, length of video, etc.
    <!-- never remove this line -->
    That completes the Summary. The infographic content starts now</p>
    </section>
    <section role="complementary" aria-label="Note about usage">
    <h2>The infographic content starts now.</h2>
    <p><!-- complete infographic content -->
    Infographic Information.<br>
    Statistics.<br>
    Facts.<br>
    Analysis.<br>
    Takeaway.<br>
    Sources.<br>
    <!-- never remove this line -->
    That completes the Infographic.</p>
    </section></section>
<!-- Accessible Page Summary - END -->

The above source code is for infographic Web pages. The alt text summary is omitted because the complete statistics, facts and information contained within the infographic must be included in text form for screen readers.

How To Use

For Typical Web Pages

INSTALLATION AND SETUP

Always make a backup copy of a Web page before making any changes to it.

How to Install

NOTE: This installation cannot change the appearance of a Web page.

1. Insert the CSS anywhere within the head section of the Web page. Do not add the CSS to a CSS file. Integrate the CSS directly into each Web page so it will never fail.

2. Within the body section, insert the HTML directly at the end of the H1 tag. This is the required location in order for the summary to function. Please observe the following example.

Example: <h1>Hello World!</h1><!-- FOR TYPICAL Web PAGES - ADA P.S. 1 -->

How to Fill Out

Keep the description brief. EG: What, when, where, who and why. Is there a how-to? If yes, don't explain how-to's in the description. Just let readers know that instructions are included. End with content size.

Take advantage of the alt text summary. Because this is a composite of all the images, it can tell a very brief story. For example: The images on this Web page show people fertilizing soil, planting seeds, watering a garden, growing vegetables, harvesting vegetables, and eventually enjoying a feast.

Content size can be a precise word count or an approximate word count EG: less than 2000 words. Content size can also be the running time of a video or music, or it can be as simple as: short read, long read, very long read.

GO BACK.

For 100% Text

INSTALLATION AND SETUP

Always make a backup copy of a Web page before making any modifications to it.

How to Install

NOTE: This installation cannot alter the appearance of a Web page.

1. Insert the CSS anywhere within the head section of the Web page. Do not add the CSS to a CSS file. Integrate the CSS directly into each Web page so it will never fail.

2. Within the body section, insert the HTML directly at the end of the H1 tag. This is the required location in order for the summary to function. Please observe the following example.

Example: <h1>Hello World!</h1><!-- FOR 100% TEXT Web PAGES - ADA P.S. 2 -->

How to Fill Out

Keep the description brief. EG: What, when, where, who and why. Is there a how-to? If yes, don't explain how-to's in the description. Just let readers know that instructions are included. End with content size.

Content size can be a precise word count or an approximate word count EG: less than 2000 words. Content size can also be the running time of a video or music, or it can be as simple as: short read, long read, very long read.

GO BACK.

For 100% Images

INSTALLATION AND SETUP

Always make a backup copy of a Web page before making any alterations to it.

How to Install

NOTE: This installation will not change the appearance of a Web page.

1. Insert the CSS anywhere within the head section of the Web page. Do not add the CSS to a CSS file. Integrate the CSS directly into each Web page so it will never fail.

2. Within the body section, insert the HTML directly at the end of the H1 tag. This is the required location in order for the summary to function. Please observe the following example.

Example: <h1>Hello World!</h1><!-- FOR 100% IMAGES Web PAGES - ADA P.S. 3 -->

How to Fill Out

Keep the description brief. EG: fashion editorial, interior design, artist's name, designer's name, gallery name, where and when. If there is a theme let readers know here. If this is an image gallery of works in progress, say so. This is a good place to mention if any of the images or creatives have won awards or are in important collections.

Take advantage of the alt text summary. Because this is a composite of all the images, it can tell a very brief story. For example: The images on this Web page show people fertilizing soil, planting seeds, watering a garden, growing vegetables, harvesting vegetables, and eventually enjoying a feast.

If the gallery is experimental and always changing, please let readers know here.

Content size can also be the running time of a video or music, or it can be as simple as: short captions, long captions, very long captions.

GO BACK.

For 100% Infographics

INSTALLATION AND SETUP

Always make a backup copy of a Web page before starting to make changes to it.

How to Install

NOTE: This installation will not alter the appearance of a Web page.

1. Insert the CSS anywhere within the head section of the Web page. Do not add the CSS to a CSS file. Integrate the CSS directly into each Web page so it will never fail.

2. Within the body section, insert the HTML directly at the end of the H1 tag. This is the required location in order for the summary to function. Please observe the following example.

Example: <h1>Hello World!</h1><!-- FOR 100% INFOGRAPHIC Web PAGES - ADA P.S. 4 -->

How to Fill Out

Keep the description brief. EG: What, when, where, who and why. Is there a how-to? If yes, don't explain how-to's in the description. Just let readers know that instructions are included. End with content size.

Take advantage of the alt text summary. Because this is a composite of all the images on the infographic, it can tell a very brief story. For example: The images on this infographic show people fertilizing soil, planting seeds, watering a garden, growing vegetables, harvesting vegetables, and eventually enjoying a feast.

Content size can be a precise word count or an approximate word count EG: less than 500 words. Content size can also be the running time of a video or music, or it can be as simple as: short read, long read, very long read.

Infographic Content

You must include 100% of the information provided by the infographic.
Under "Infographic Information" include 100% of the following;
Statistics:
Facts:
Analysis:
Takeaway:
Sources:

GO BACK.

About

About The Project:
The idea to create an accessible page summary resulted from a search to determine how many blind people use the internet. Very few. The search result was surprising. Because the blind have a strong preference for braille libraries over the internet. Not surprisingly, the most popular feature at braille libraries is the card catalog. Because every card in the catalog provides a brief summary of every book and includes details about content size. If only the World Wide Web had a card catalog. When every Web page has an Accessible Page Summary it will.

About The Developer:
It is essential to know why the developer is so passionate about this project. Because Stuart Long's late brother Austin was a beneficiary of the Americans with Disabilities Act as-well-as a card carrying member of MENSA. While in a one-on-one business meeting, Long had to suffer through an insensitive sociopath's rant about the challenges involved in complying with the ADA. That individual made it seem as though doing the right thing and helping others was a burden. After explaining that his late brother lived with a disability every day of his adult life, and the ADA was a dream come true, the sociopath slowly took a deep breath and then apologized. The memory of that meeting drove home a very fine point, that some people will never understand what it is like to live with a disability.

Relevant Background:
When working for the Kobacker Company, formerly based out of Columbus Ohio, Long demonstrated a gift for working with business computers. Because out of over 700 locations, Long devised innovative methods and techniques to process payments that made him the fastest and most accurate at completing transactions company wide. His methods and techniques were added to the operations manual and became standard procedure for all employees. He also traveled out-of-town to various locations to setup and configure business machines and networks.

Stuart Long describes himself as a standards compliance enthusiast. Because he wants assistive technology to work properly for everyone. This is Long's inaugural Github project.

Personal note from Stuart Long:
"One morning, I put new ski shaped feet on the back legs of my mom's walker. Then I watched her go for a walk and she loved them. Because they helped her get around with less friction and made her walk more enjoyable. That's what I want the Accessible Page Summary to do for screen reader users; reduce friction and make surfing the Web more enjoyable."

Accessible Page Summaries are dedicated to the loving memory of Evelyn Hargrove Long, 1934 - 2023.

GO BACK.

gofundme

You Can Make a Big Difference

I'm a person and not a giant charity organization. I'm Stuart Long and I developed a breakthrough solution to a daunting problem the blind are facing every day, and I need your help to make the Internet more accessible and more useful for blind people all over the World.

What Your Contribution Will Be Used For

The problem has been identified, it is global in scope, and it has finally been solved. The final hurdle is adding accessible page summaries to every page on the World Wide Web. That is where AI comes in. Because not only is AI capable of adding accessible page summaries to Web pages, it can even fill each one out properly, with a concise summation and accurate content length. Most significantly, these summaries have no dependencies.

That is where this GoFundMe comes in. Because the money raised will be used for: Establishing a system for verifying standards compliance for accessible page summaries, developing viable solutions to other existing issues, solving various problems as they arise, as well as obtaining anything and any service that might solve a problem, and helping to facilitate the further development and sustainability of accessible page summaries.

My ultimate goal is for every Web site to include accessible page summaries to help blind people use the Web. Please help me do that. Thank you for helping me help blind people use the Web.

Accessible Page Summaries are dedicated to the loving memory of Evelyn Hargrove Long, 1934 - 2023.

   GO BACK.

MIT License

MIT License for Accessible Page Summary

Copyright © 2024  Stuart Long

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

GO BACK.