How can I make NVDA read elements on the same row separately? - html

I am having a problem with NVDA screen reader, in that it will read all elements out on the same line in one block.
For example, with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<style>
nav > ul > li {
list-style: none;
display:inline-block;
}
</style>
</head>
<body>
<h1>Title 1</h1>
<nav role="navigation">
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</nav>
</body>
</html>
This will display all navigation links in a row, which is visually correct, but NVDA, in browse mode, when scrolling through with the arrow keys, will read all the links together. The user cannot move between each individual link, meaning it is impossible to stay on one and select it.
The same happens with a link in the middle of a paragraph:
<p>NVDA will not stop on This link so a user can select it.</a>
In my navigation example, changing the style so each link is on a separate line:
nav > ul > li {
list-style: none;
display:block;
}
Fixes the problem for NVDA - the user can move between links - but is visually wrong.
The only way I have found to make it visually correct and force NVDA to read it separately is to display each anchor as a block inside the list item:
nav > ul > li {
list-style: none;
display:inline-block;
}
nav > ul > li > a {
display: block;
}
But this feels hacky and is not a solution in every situation (this will not work within a paragraph for example).
Is there an attribute I can add, or any other better way to make NVDA read each element separately?
This issue is across all browsers.

You do not need to do anything, the user can navigate to each link and can activate them. The user can interrupt the reading at any point with the CONTROL key. Also after the link has been read, the user can use the SHIFT-TAB key to navigate backwards to each link. Also the user can use the K key to navigate between links. In addition, the user can use the NVDA+control+leftArrow key to move backwards word-by-word.
The key here is to ensure that each link is focusable with the TAB by ensuring that it has an href attribute. So <a>Not really a link</a> will not be identified as a link and will not be TAB focusable.
Here is a reference for the keyboard commands for NVDA http://community.nvda-project.org/documentation/userGuide.html
If you want to change the default behavior to make NVDA read links as if there were only one per line, as JAWS does, do the following:
Go to the NVDA menu (insert|n).
Go to preferences.
Choose Browse mode.
Uncheck the second check box, “Use screen layout when supported.”
Choose OK.
Go back to the NVDA menu (insert|n).
Choose “save configuration.” If you don’t do this, depending on how you have NVDA configured, this change might not persist across restarts.

Changing the display properties on ul and li changes the way NVDA will read out the list. From what I have seen so far, changing either of them to things like inline and inline-block will cause NVDA to read them as it would a paragraph (with a "list with x items" at the start), pausing after a certain number of words in the default configuration.
To get it to work with an inline list, you can use display: flex on the ul element
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<style>
nav > ul {
display: flex;
}
nav > ul > li {
list-style: none;
}
</style>
</head>
<body>
<h1>Title 1</h1>
<nav role="navigation">
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</nav>
</body>
</html>
You can also use display: block; float: left on both the ul element and li elements
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<style>
nav > ul {
display: flex;
}
nav > ul > li {
display: block;
float: left;
}
</style>
</head>
<body>
<h1>Title 1</h1>
<nav role="navigation">
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</nav>
</body>
</html>

Related

how to put a list with and image and text above it, next to eachother

I am an absolute beginner with html5 and css, literally learned it since 2 days.
I am trying to have list with recipes. In this list I want the name of the recipe, the picture and a link to the actual recipe. I am trying to get this list next to each other together with the images, but whatever I try, the list stays on a seperate line per list item.
I put all the list items in an in html. in the css file I tried to put the list items inline by doing this:
.list-recipes ul li {
display: inline;
}
I also tried a lot of other things but nothing works, hope someone here can help me.
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recipes</title>
<style>
.list-recipes ul li {
display: inline;
}
.list-recipes ul li p {
display: inline;
}
</style>
</head>
<body>
<div class="list-recipes">
<ul>
<li >
<p>Google</p>
Link
<img src="https://google.com/favicon.ico" />
</li>
<li >
<p>CSS-Tricks</p>
Link
<img src="https://css-tricks.com/favicon.ico" />
</li>
<li >
<p>Apple</p>
Link
<img src="https://apple.com/favicon.ico" />
</li>
</ul>
</div>
</body>
</html>
For the selector .list-recipes ul li to work, the list ul needs to be a descendant of an element with class list-recipes.
If you include block elements inside li you also need to make those elements inline, this is why I added the rule:
.list-recipes ul li p {
display: inline;
}

HTML/CSS Un-ordered list Center Alignment

I am a first time HTML user and need help to center my current navigation bar:
http://i.stack.imgur.com/czpJr.jpg
The code for it is as follows:
<!DOCTYPE html>
<html>
<head>
<title>large background</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<!div class="navBar">
<ul>
<li><h2>ABOUT</h2></li>
<li><img src="ICON.jpg" width="60" height="60"></li>
<li><h2>MUSIC</h2></li>
</ul>
<!/div>
</body>
</html>
With the relevant parts of the external stylesheet in this image(couldn't get it to work as a code block - noob me):
http://i.stack.imgur.com/JaIah.jpg
Please help me work out to make this navigation bar appear in the center of the page, and not on the left. I have tried changing the float left in the CSS but all is does is make the nav bar appear vertically not horizontally, and it still appears on the left :(
Thanks,
Sam
to comment out HTML use this syntax (you're missing the dashes):
<div> this WILL show and be rendered </div>
<!--div> this WILL NOT show or be rendered </div-->
adding "float: left" to the li elements is forcing your elements to align to the left. To get the nav items to appear horizontally, use "display: inline-block;" instead. Also, you are using "align"... it shoudl be "text-align".
Example in codepen!
http://codepen.io/Drodarious/pen/bdmavb
U can center your element like this(see example below: with the text align center on the ul).
u could also, provide a width to the ul, for example 300px , and then add margin:0 auto; margin auto won't work on a block element without setting its width. or you should use inline-block;
(http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/)
Ps As h1 is a block element and a is an inline element the correct way is
<h1>This is a title</h1>
, when using the header.
Though because is a block element it will take up all available space, meaning, all list items will still be underneath eachother, so specify the space it should take.
header nav ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
header nav ul li {
display: inline;
}
header nav ul li a {
text-decoration: none;
}
<html>
<head>
<title>large background</title>
</head>
<body>
<header>
<nav>
<ul>
<li>ABOUT
<li><img src="ICON.jpg" width="60" height="60">
<li>MUSIC
</ul>
</nav>
</header>
</body>
</html>
I suggest reading about: http://learnlayout.com/display.html
Hope this helps you a bit.

HTML 5- adding a navigation bar to a page

I'm just having a go at creating a website for a friend, but I've not actually done any development for a few months, and so I'm a bit rusty at the moment.
I've started putting a basic page together, to use as a template for all of the pages of the website, but I'm having a bit of trouble getting the horizontal navigation bar to display on the page beneath the logo, and I was just wondering if anyone could explain to me why it's not showing?
The HTML that I have for this is: (code updated 25/09/2013 # 17:40)
<!DOCTYPE HTML>
<html>
<head>
<title>Cosy Hearts- Home</title>
<style type = "text/css">
#navbar ul{
list-style-type: none;
}
#navbar ul li{
list-style-type: none;
display: inline-block;
}
ul{
list-style-type:none;
margin:0;
padding:0;
}
</style>
</head>
<body>
<img src = "images\masterPageTop.jpg" width = "700" height = "800" alt = "Cosy Hearts Banner" />
<ul>
<li>Home | </li>
<li>Products | </li>
<li>About Us | </li>
<li>Contact Us | </li>
<li>Terms and Conditions</li>
</ul>
</body>
</html>
Currently, when viewing the page in the browser, the logo image is displayed at the top of the page as intended, but then the navigation bar, which I've tried to created using a div and horizontal list is not displayed at all...
I was just wondering if anyone could explain to me why this is, and what I need to do to get it to display?
Cheers!
Edit 25/09/2013
I've edited the code to show changes made as suggested, also here's the screenshot of the page when viewed in Chrome (it displays exactly the same in Firefox):
As you can see, the image is displayed (although not longer central, having removed the 'center' tags as suggested- will sort this out later with CSS. But, the navigation bar is not displayed on the page at all, and I can't tell why this is... does anyone know what I should do?
Your HTML is a little bit botched... you may want to review the purposes of tags like <head> and <body>. The following HTML will give you the desired effect.
See this working demo.
<!DOCTYPE html>
<html>
<head>
<title>Cosy Hearts- Home</title>
<style type = "text/css">
#navbar ul {
list-style-type: none;
}
#navbar ul li {
list-style-type: none;
display:inline-block;
}
</style>
</head>
<body>
<center>
<img src="images\masterPageTop.jpg" width="700" height="800" alt="Cosy Hearts Banner" />
</center>
<div id="navbar">
<ul>
<li>Home | </li>
<li>Products | </li>
<li>About Us | </li>
<li>Contact Us | </li>
<li>Terms and Conditions</li>
</ul>
</div>
</body>
</html>
I've tried to indent things in such a way that you can easily remember what the layout of an HTML document looks like. As your page gets more complex, you might consider putting your CSS in a separate file -- say, stylesheet.css -- and including it by adding the following to the <head> section:
<link rel="stylesheet" href="stylesheet.css" type="text/css">
Best of luck!

Why does my external CSS not work in FF or IE, but does in Chrome?

When I run my (very basic) page in Chrome, it shows the title and list in the correct size, colour and position. Also the background image fits to the screen. But when I run my page in FF or IE, there is no background image and the title and list haven't got my CSS position, colour or size.
I have copied my code below. My question is: how can I make my title and list show up on my web page in all/most browsers in the correct size, colour and position to what I have set it to in my CSS? Also for the background image to be shown as well. I hope this isn't too general. Please help!
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="txt/css" href="C:///****/*****/Desktop/FifaStream1.0/indexstyle.css"/>
<title> Fifa Stream </title>
</head>
<body>
<h1 id="Title1"> <font color="grey"> Fifa </font color> <font color="red">Stream </font color></h1>
<nav class="IndexList">
<li> Home <br> <br> </li>
<li> Youtube <br> <br> </li>
<li> About Us <br> <br> </li>
<nav>
</body>
</html>
And this is my CSS:
body {
font-family: "proxima-nova",sans-serif;
background:url(fifa13messi.png);
-moz-background:url(fifa13messi.png);
background-size:100%;
-moz-background-size:100%; /* Old Firefox */
background-repeat:no-repeat;
}
#Title1 {
position:relative;
left:5%;
top:5%;
font-size: 3em;
}
.IndexList {
list-style: none;
position:relative;
left:5%;
top:40%;
font-size:2em;
font-weight: 600;
letter-spacing: -1px;
}
a {
color:white;
text-decoration: none;
}
It would a great help if anyone could explain where or why I'm going wrong.
Because <li> elements can't be children of the <nav> element - they can only be children of the <ul> or <ol> elements...
The type attribute should be text/css, not txt/css. IE and Firefox are (correctly) rejecting it for the mismatch.
First thing I want to say is try to do smart work, use some html eiditor, like dreamweaver or some other that provide hints forcodig.
Now point by point here are list of problems in you coding
Type attribute for link css should be text/css. Not. Txt/css
Try to close tags just after creating it. This will always make shure all tags are closed. Bcz your nav tagi not closed,but created two nav tags without closing them.
Li tag should be wrapped with 'o' or 'ul'
Thanks.
Your <nav> tag needs a </nav> closing tag, not a second <nav>.

Display:inline not working

I'm fairly new to html and css.
I learned the basics and a few advanced techniques but, i have been having a problem with lists for a long time and would like to know how i could possibly fix my problem.
Here's the idea.
I'm making an online shop but i want to avoid positioning every single images,texts,links using a different id.
I had this idea, I would put my li inside a div so that way, everything inside my list would be stuck inside this box, make a class positioning my text,links,images properly, use display:inline and et voila, i can create an entire page of products using only a class.
The problem is display:inline isn't working.
I would really appreciate it if someone could help me out on this one.
This is a bad example but, you understand the principle.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#nav_bar {margin:0px;padding:0px;list-style-type:none;text-align:center;}
.nav_button {background-color:purple;width:100px;height:50px;}
.nav_button:hover {background-color:pink;}
.nav_button li {display:inline;} /* Not working ?!? */
.nav_button a {position:relative;color:white;text-decoration:none;top:13px;}
</style>
</head>
<body>
<table style="width:600px;margin:0 auto;">
<tr>
<td>
<ul id="nav_bar">
<div class="nav_button"> <li> Home </li> </div>
<div class="nav_button"> <li> Contact us </li> </div>
<div class="nav_button"> <li> Shipping </li> </div>
<div class="nav_button"> <li> About us </li> </div>
</ul>
</td>
</tr>
</table>
</body>
</html>
display:inline is very limited and doesn't allow any block-level styling to added to it. You're better off using display:inline-block or using float:left. Keep in mind that if you use floats then you need to set the overflow of the parent element to overflow:auto (use visible for IE < 8) and this should work. Use inline-block first.
The reason it's not working is because you are using it insidea a div and that div element has only li element , the inline property would work if you have more than one li elements under a div.
Try this
<ul id="nav_bar">
<li class="nav_button"> Home </li>
<li class="nav_button"> Contact us </li>
<li class="nav_button"> Shipping </li>
<li class="nav_button" > About us </li>
</ul>
and for css
#nav_bar .nav_button {display:inline-block;}
or alternatively you can also use :
#nav_bar .nav_button {float:left;width:40px;}/*you will need to specify the width*/
if you use the float method make sure you are using a element specified with clear:both; in the end.
note that : if the parent element width is too short to display horizantally then
ul {
width: 20px;
}
li
{
display: inline;
}
will not work.
also
under li element if you have display:block; statement such as
li
{
display: inline;
}
li a{
display: block;
}
not work.
use
display:flex;
It's worked for me
An inline element will not accept height and width. It will just ignore it. So the height and width that you have entered in css will be ignored that is why the empty div is not visible. moreover try using inline-block, it will solve the issue.