[NFBCS] no display in old browser

[Peter Mark]

oh thanks for the quick response.

i did just realize that lynx does not support java script and dynamic loading.
the 'alt' tag is not the issue as much as these issues.
the natively accessible parts of the web page are the explanation, title and copyright.
since they are dynamically displayed, it will not work with lynx.

i need to make a static, non-visual section that will show these text fields in the lynx browser.

in the way past i do remember that it is possible to 'hide' text from the visual audience but will show up in plain text browsers.


> On Apr 5, 2024, at 7:04 AM, Jim Barbour <jbar at barcore.com> wrote:
> 
> Hey Peter,
> 
> Could you be clearer about what you're expecting to see and aren't.  Is it the alt tag that's missing?
> 
> Also, a link to the page you took the html and js from would be much appreciated.
> 
> Thanks,
> 
> Jim
> 
> On Fri, Apr 05, 2024 at 06:53:15AM -0400, Peter Mark via NFBCS wrote:
>> hi list
>> 
>> 
>> i have a nasa picture of the day web page.
>> www.onisland.com/apod
>> it works just fine on my mac and phone, but i noticed that if i use a very old lynx browser, no text inside the <div> is displayed.
>> it is all just basic html and java script so i am puzzled why.
>> any advice would be helpful.
>> below is relevant snippets.
>> 
>> here is the style definitions and html that defines the placeholders for the retrieved data.
>> 
>>    <style>
>>        body {
>>            font-family: Arial, sans-serif;
>>            background-color: #f5f5f5;
>>            color: #333;
>>            max-width: 800px;
>>            margin: auto;
>>            padding: 20px;
>>        }
>>        h1, h3 {
>>            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
>>        }
>>        a {
>>            color: #007bff;
>>            text-decoration: none;
>>        }
>>        a:hover {
>>            text-decoration: underline;
>>        }
>>        #nasa-content {
>>            border: 1px solid #ddd;
>>            background-color: #fff;
>>            padding: 20px;
>>            margin-top: 20px;
>>        }
>>        #nasa-image {
>>            max-width: 100%;
>>            height: auto;
>>            border: 1px solid #ccc;
>>            padding: 10px;
>>            background: #fff;
>>        }
>>    </style>
>> ...
>> 
>>    <div id="nasa-content">
>>        <p id="nasa-title"></p>
>>        <img id="nasa-image" src="" alt="NASA Picture of the Day">
>>        <p id="nasa-explanation"></p>
>>        <p id="nasa-copyright"></p>
>> 
>>    </div>
>> 
>> and below is the java script that fills in the html
>> all is pretty straight forward.
>> 
>>                if(data.media_type === 'image') {
>>                    document.getElementById('nasa-image').src = data.url;
>>                    document.getElementById('nasa-title').textContent = data.title;
>>                    document.getElementById('nasa-explanation').textContent = data.explanation;
>>                    if(data.copyright) {
>>                        document.getElementById('nasa-copyright').textContent = "Copyright "+data.copyright;
>>                    }
>>                } else {
>> 
>> 
>> _______________________________________________
>> NFBCS mailing list
>> NFBCS at nfbnet.org
>> http://nfbnet.org/mailman/listinfo/nfbcs_nfbnet.org
>> To unsubscribe, change your list options or get your account info for NFBCS:
>> http://nfbnet.org/mailman/options/nfbcs_nfbnet.org/jbar%40barcore.com
>>