Blind and Visually Impaired Community
↑
5
↓
Need help with basic HTML accessibility (self.Blind)
submitted by Fireteddy21
Hey everyone, I was on here the other day asking about an app to help build basic webpages. After much searching, I decided that my attempts were futile and reverted back to hand coding some very basic pages myself. I have limited knowledge from when I used to do so about 20 years ago and I’ve been trying to piece together something really simple myself. Unfortunately, this has led me to a bit of a problem.
I’ve managed to put something together without much incident, but the weird thing is that when using the br tag to perform line breaks in my code, Voiceover doesn’t stop reading at the end of the line in Safari: It just continues until the end of the paragraph.
I know it displays properly in a visual sense — when I turn Quick navigation off and Arrow key up or down, the lines begin and end where they are supposed to (my fully-sighted wife also provided visual confirmation of this.)
I can’t figure out why the narration is doing this though and was hoping that any web designers here might have an idea. I’m not familiar with CSS to try and code things differently but I am open to any suggestions.
The page in question is located at https://www.marcwithamouth.com/library/ (it’s really just a space to host some really old stuff that I wrote when I was a teenager essentially.) it works properly for the first two lines because they are links, but if you continue down, “Constantly Travelling” and “Happy Inc.” are read together despite being on separate lines. I’m using the most recent version of Safari and macOS as well.
Like I said, I am open to any suggestions, even if you have a tip of a better place to ask this question and get some answers. Thanks in advance!
I’ve managed to put something together without much incident, but the weird thing is that when using the br tag to perform line breaks in my code, Voiceover doesn’t stop reading at the end of the line in Safari: It just continues until the end of the paragraph.
I know it displays properly in a visual sense — when I turn Quick navigation off and Arrow key up or down, the lines begin and end where they are supposed to (my fully-sighted wife also provided visual confirmation of this.)
I can’t figure out why the narration is doing this though and was hoping that any web designers here might have an idea. I’m not familiar with CSS to try and code things differently but I am open to any suggestions.
The page in question is located at https://www.marcwithamouth.com/library/ (it’s really just a space to host some really old stuff that I wrote when I was a teenager essentially.) it works properly for the first two lines because they are links, but if you continue down, “Constantly Travelling” and “Happy Inc.” are read together despite being on separate lines. I’m using the most recent version of Safari and macOS as well.
Like I said, I am open to any suggestions, even if you have a tip of a better place to ask this question and get some answers. Thanks in advance!
[deleted] 4 points 2y ago
[deleted]
Fireteddy21 [OP] 1 points 2y ago
Just curious then. If I was going to post a poem or whatever with stanzas, how would I make that work properly? I’ve done it before by exporting an rtf file to HTML, but I’d really like to just code everything myself now.
[deleted] 1 points 2y ago
[deleted]
Fireteddy21 [OP] 1 points 2y ago
Wrapping each line in <p> tags causes there to be blank space between each lines for those viewing the page visually though. Is there a non-css solution to this problem or will I have to bite the bullet and learn how to incorporate that as well?
winwiz1 1 points 2y ago
Yes, this $1 makes the same point: line breaks are effectively ignored by screen readers.
Marconius 2 points 2y ago
Not really sure what you are trying to do. Are you trying to set it up so your little silence golden poem is read correctly? Emphasis won't work for that, but if you want to at least drive a little more focus to it, use semicolons to break apart the stanzas and put the whole poem in its own <p> element. Also, put those links into an unordered list element like suggested above rather than having separate hyphens and links. Like this:
<ul>
<li><a href...>link text</a></li>
<li><a href...>Link 2</a></li>
</ul>
Make that very first heading an h1 rather than an h2.
If you want the unordered list to display without bullets, if you have a CSS file, add this to it:
ul {
list-style: none;
}
<ul>
<li><a href...>link text</a></li>
<li><a href...>Link 2</a></li>
</ul>
Make that very first heading an h1 rather than an h2.
If you want the unordered list to display without bullets, if you have a CSS file, add this to it:
ul {
list-style: none;
}
Fireteddy21 [OP] 1 points 2y ago
Yeah, I realized my mistake with the heading after sharing the page here. The stuff below the silence is golden part was what I wanted to break into separate lines so the list stuff helps there. I don’t have a css file because I never learnt how to use them back in the day. Thanks!
Marconius 1 points 2y ago
Just to keep things simple, you can add that CSS code directly to your HTML. In your <head> section, add this:
<style>
ul {
list-style: none;
}
</style>
If you are managing styles for just one page, this is fine, but if you plan to have a consistent style, font, layout, or other characteristics shared across multiple pages, it's better to make a separate CSS file and point all your HTML pages to it. A CSS file is just a simple plain text document saved with the .css extension. It contains code written out in the same convention I shared above, with an html tag name or selector, an opening curly brace, then all the attributes you want to change underneath that on separate lines indented by spaces or a tab, each attribute line ending in a semicolon, then closed with a closing curly brace on it's own line under all the attributes. I can share more about that if you are curious.
<style>
ul {
list-style: none;
}
</style>
If you are managing styles for just one page, this is fine, but if you plan to have a consistent style, font, layout, or other characteristics shared across multiple pages, it's better to make a separate CSS file and point all your HTML pages to it. A CSS file is just a simple plain text document saved with the .css extension. It contains code written out in the same convention I shared above, with an html tag name or selector, an opening curly brace, then all the attributes you want to change underneath that on separate lines indented by spaces or a tab, each attribute line ending in a semicolon, then closed with a closing curly brace on it's own line under all the attributes. I can share more about that if you are curious.
winwiz1 1 points 2y ago
> I’m not familiar with CSS to try and code things differently but I am open to any suggestions.
Screen readers will pause on a punctuation mark, for example on a comma. So you can add a hidden comma while making sure it remains visible to screen readers.
The CSS class **sr-only** is commonly used for that. The actual CSS for this class can be borrowed from Google $1 and inserted into a stylesheet <style> placed inside HTML <head> element:
<html>
<head>
<style>
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
</style>
</head>
<body>
First line<span class="sr-only">,</span><br/>
Second line
</body>
</html>
The comma is placed inside <span> element and finally the class **sr-only** is applied to the span making it visible to screen readers only.
Screen readers will pause on a punctuation mark, for example on a comma. So you can add a hidden comma while making sure it remains visible to screen readers.
The CSS class **sr-only** is commonly used for that. The actual CSS for this class can be borrowed from Google $1 and inserted into a stylesheet <style> placed inside HTML <head> element:
<html>
<head>
<style>
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
</style>
</head>
<body>
First line<span class="sr-only">,</span><br/>
Second line
</body>
</html>
The comma is placed inside <span> element and finally the class **sr-only** is applied to the span making it visible to screen readers only.
zersiax 1 points 2y ago
The issue is that VoiceOver , when you use the regular voiceOver keys, reads by semantic unit, not by line. It used to be pretty tricky to properly read line by line on a mac, and the functionality to use up and down arrow keys for this has been added, broken, fixed, broken again and I think finally fixed in the latest version of OS X.
You will probably find this works fine on Windows, Linux and most other things. If you want it to work in VoiceOver you'd have to split the lines semantically, which seems overkill for this particular case unless you want to wrap all lines in their own <p> element.
As for why <p> is different from <br />, has to do with how native HTML elements work and wrap their content. The VoiceOver developers made some interesting choices with some of these elements.
You will probably find this works fine on Windows, Linux and most other things. If you want it to work in VoiceOver you'd have to split the lines semantically, which seems overkill for this particular case unless you want to wrap all lines in their own <p> element.
As for why <p> is different from <br />, has to do with how native HTML elements work and wrap their content. The VoiceOver developers made some interesting choices with some of these elements.
Fireteddy21 [OP] 1 points 2y ago
Now wouldn’t using <p> cause the visual display to show each line as a paragraph to the sighted? Essentially skipping a line for every time it’s used. Like I said, I’ve actually gotten the <br> tags to work after HTML export from A wordprocessing app on some pages like https://www.marcwithamouth.com/library/under-the-microscope/shadowlawn.html and even without using the app in some cases like https://www.marcwithamouth.com/library/sleepwalking/beginning.html
I think the fact that there’s no rhyme or reason for this is really what frustrates me the most. If you can see any difference between how it’s applied here, I’d love to hear some feedback.
I think the fact that there’s no rhyme or reason for this is really what frustrates me the most. If you can see any difference between how it’s applied here, I’d love to hear some feedback.
[deleted] 1 points 2y ago
[deleted]
Fireteddy21 [OP] 1 points 2y ago
The source for https://www.marcwithamouth.com/library/sleepwalking/beginning.html doesn’t seem to separate the lines in a stanza with a <p> tag and appears to work both visually and with Voiceover. The line breaks within a stanza there are done with <br> tags, so that’s what confuses me. I’ve looked at the code a few times and can’t figure out what’s any different from the pages that weren’t working before I fix them using a word processor and exporting them back out to HTML. Obviously the pages that were run through that process end up re-coding everything quite differently. So yeah, I really just want a simple solution that will display everything properly to people who can see the page and for those who are navigating through it with the screen reader.
This nonprofit website is run by volunteers.
Please contribute if you can. Thank you!
Our mission is to provide everyone with access to large-
scale community websites for the good of humanity.
Without ads, without tracking, without greed.
scale community websites for the good of humanity.
Without ads, without tracking, without greed.
©2023 HumbleCat Inc • HumbleCat is a 501(c)3 nonprofit based in Michigan, USA.