I created a website using bootstrap, mainly for learning purposes. I am using the <div class="navbar navbar-inverse">. I put my website onto a server and asked some of my buddies to check it out. Everyone called and said it looked great but then one said everything was jumbled around when he used Internet Explorer (don't know exactly what version but definitely an older one) I tried it out on internet explorer and the nav bar was jumbled.
The List items were not inline. The bar was twice as big as it should be, and the text was underlined and purple...
I have been trying to fix this issue for the past couple of days but I just can't. How should I go about making my website act similar enough in every browser so it doesn't look broken?
It is really frustrating, and I am ready to accept any sources for 1. learning about this and 2. fixing this issue.
Thanks!
Code for HTML:
<html>
<head>
<!--[if lt IE 9]-->
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!--[endif]-->
<title> College GPA </title>
<link rel = 'stylesheet' type = 'text/css' href = "assets/css/style.css">
<link rel = 'stylesheet' type = 'text/css' href = 'assets/css/bootstrap.min.css'>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script src = "assets/js/dropdown.js">
</script>
<script>
$(".dropdown-toggle").dropdown();
</script>
</head>
<body>
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#" style = "font-size: 23px;">LOGO</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class = "nav">
<li class = 'active'> Home </li>
<li class = 'dropdown'>
Drop Down <b class = 'caret'> </b>
<ul class = 'dropdown-menu' role = 'menu' aria-labelledby="dLabel">
<li> Drop Down 1 </li>
<li> Drop Down 2 </li>
<li> Drop Down 3 </li>
</ul>
</li>
<li class = 'dropdown'>
Drop Down <b class = 'caret'> </b>
<ul class = 'dropdown-menu' role = 'menu' aria-labelledby="dLabel">
<li> Drop Down 1 </li>
<li> Drop down 2 </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class = 'wrapper'>
</div>
</body>
</html>
It doesn't help much that you don't know what version he was using... perhaps you should ask him? If it's old enough it's possible that bootstrap just doesn't support it (IE < 7).
If that's the case, just ignore it. Few companies still support older versions of IE, and those that do tend to have a specific reason.
If you're looking for a good way to deal with old browsers, perhaps you could display an option to upgrade to a newer browser, and a warning that it may not display properly in their browser.
http://gs.statcounter.com/ is a good source to get usage statistics of older browsers. From there you can decide if you really want to support them.
Finally, you can always look at analytics for your site (if you happen to have an existing one with traffic) to see if maintaining support for an older browser is worth your time.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
When writing HTML5 condent describing to the reader how to navigate through a UI selection path (things like menus, tabs, and dialogs, where there are multiple choices at each step) like:
Options ▸ Configure… ▸ Keyboard Shortcuts
What kind of elements should the labels be?
What kind of elements are the separators, if any? (Or should they be inserted with CSS?)
What kind of element should the entire sequence be contained in?
Note that this is not a question about formatting, nor about interactive elements. It is purely about semantically correct markup in a static descriptive text.
Some things are still going to depend on the actual use cases but basically, you're using a <nav> and then a bunch of <ul><li>.
The toggles to open/close a part of the menu should be <button> with aria-expanded set to "true" or "false" for the open and close states.
The end items should either be <a> if they redirect to a different screen, or <button aria-pressed="true"> if they are just on/off toggles (with the aria-pressed changing depending on the state).
if the whole menu takes focus and/or visibility away from the rest of the app (kind of like a pop-in), you might want to wrap it inside <div role="dialog" aria-modal="true" aria-label="Menu"> <div role="document"> and add a "close" button as the first child.
Here's an example of what the full markup might look like:
<nav role="navigation" aria-label="Full menu">
<!--
the following is useful if the entire menu is behind a single button,
otherwise, you can start directly at the <ul>
-->
<button type="button" aria-expanded="true">
<span>Menu</span>
</button>
<!-- end of "single entry point" -->
<!--
the following is in case you're making a "pop-in" that obscures the rest of the page,
otherwise you can skip them
-->
<div role="dialog" aria-modal="true" aria-label="Menu">
<div role="document">
<button type="button" aria-label="Close menu">
<span>Close</span>
</button>
<!-- end of "pop-in" wrapper -->
<ul>
<li>
<button type="button" aria-expanded="true">
<span>Options</span>
</button>
<ul>
<li>
<button type="button" aria-expanded="true">
<span>Config</span>
</button>
<ul>
<li>
<!-- use <a> if you're redirecting to somewhere -->
keyboard
<!-- use <button> if it's just a toggle -->
<button type="button" aria-pressed="true">toggle Off</button>
</li>
<!-- other Options > Config > * -->
</ul>
</li>
<!-- other Options > * -->
</ul>
</li>
<li>
<button type="button" aria-expanded="false">
<span>Tools</span>
</button>
<ul>
<!-- all Tools > * menu items -->
</ul>
</li>
<!-- other menu categories -->
</ul>
</div>
</div>
</nav>
Tbh, depending on how you need it to look, it might be a pain to style because for it to be properly semantic, you need to have this "recursive" structure of <ul><li> and the <button aria-expanded> should be directly followed by the <ul> they are expanding.
Bonus issue: you can't use the CSS display: contents otherwise the browsers will lose the semantics.
To strictly answer your questions:
What kind of elements should the labels be?
Basically, <button type="button"> with the proper aria attributes. Sometimes <a> for the end items if they redirect the user to another page.
What kind of elements are the separators, if any? (Or should they be inserted with CSS?)
CSS is probably best, the DOM will be separation enough from a semantics point of view. If you need your separators in the markup, try and add aria-hidden="true" if they contain some "readable" elements (span, svg, img, ...).
What kind of element should the entire sequence be contained in?
It should be a <nav role="navigation"> even though the specs state that nav shouldn't have a role attribute because it's intrinsically navigation, but not all browsers implement that properly.
I managed to code for a header and a navigation bar however I don't know how to set the elements such as:
Contact me. etc...
I want to seperate them apart and give them icons and align the text to the right.
(I'm using bootstrap4) however nothing seems to be working not even in the css.
<div class="navbar navbar-top" id="navbar-toolbar">
<div class"container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">+97433653399</a style="background-color: #ffff;">
<a class="nav-link" href="#">Contact</a>
<a class="nav-link" href="#">Help</a>
</li>
</div>
</ul>
</div>
Navbar
Home (current)
Login
Register
Contat us
I see that you are new to HTML and CSS, w3schools.com would be a great start. I can see that you still have some issues in wrapping your HTML elements (e.g. when to open and close a <div> tag. Before proceeding to CSS, it is advisable that you already learned the basics of HTML because you will be using them when putting an attribute that you want to access in CSS (e.g. id="", class="", name="", type="", etc.)
Basically, I have to apply a backup of a Joomla Website, ... the problem is, that the navigation of the backup does not apply the correct CSS and therefore is not displayed correctly, which I found out by using inspect element.
Now I'm facing the issue that I have no idea on how to change the CSS-classes.
I compared the two template files and found no differences in how the CSS is applied:
<header id="header" class="single-menu flat-menu">
<div class="navbar-collapse nav-main-collapse collapse">
<div class="container">
<nav class="nav-main">
<jdoc:include type="modules" name="navigation" style="none" />
</nav>
</div>
</div>
</header>
The navigation module implements the main menu, yet does not apply any extra CSS and neither does the main menu.
There are seemingly no differences in the template-file or the CSS-files.
So my question now is: How exactly does Joomla apply the correct CSS to the navigation? I can't seem to find any way and yet with inspect element you can see that the webpage where the navigation is displayed correctly has the class:
<ul class="nav nav-pills nav-main">
<li class="item-xxx dropdown">
and the one where it is displayed incorrectly has:
<ul class="nav menu">
<li class="item-xxx deeper parent">
I fixed it now:
My problem was that on the webpage the override for the default.php of the menu module was directly in the root/modules/mod_menu folder, which gets overridden on an update. So I had to copy the correct default.php into the new override folder (root/templates/template/html/mod_menu/ ) and everything worked again.
The below is my code for aria accessibility in html.It's working fine with ChromeVox but when running with JAWS all the aria-labels are read when focus is on link Menu1.But aria-label of link options should be read when focus goes on it.
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#div1{
padding : 12px;
}
</style>
</head>
<body>
<div class="container">
<ul role="tablist" class="nav nav-tabs">
<li role="tab">
<div id="div1">
<a tabindex="0" aria-label="first menuitem" class="active">Menu1
<a class="dropdown-toggle" tabindex="0" data-toggle="dropdown" aria-label="Press spacebar to use options menu" tabindex="0">options</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a tabindex="0" role="menuitem">Properties</a></li>
<li role="presentation"><a tabindex="0" role="menuitem">Edit Properties</a></li>
</ul>
</a>
</div>
</li>
<li role="tab">
Menu2
</li>
</ul>
</div>
</body>
What I want is the aria-label of each link should be read only when the focus goes on particular link, not when the focus is on link Menu1, which is the current behaviour.
Any help will be appreciated.
The first issue at play here is that you have a link within a link. Not only is it invalid to nest an <a href> within an <a href> (or any interactive content), but that also means screen readers may do unexpected things when they encounter nested interactive controls. Things which cannot be considered wrong.
This means you cannot convert the second link to a <button> and expect things to be ok as you will still have nested interactive controls.
A second issue that will come into play later is any instructions to use specific keys unless those keys are mapped. For example, your instructional text says to "Press spacebar to use options menu" but that menu appears to be in a link. The space bar does not activate a link when it has focus, it will scroll the page.
The WAI-ARIA Authoring Practices 1.1 for a tab control details the keyboard controls that it will need to support.
Finally, since <a href> is already interactive content and is keyboard accessible, you do not need tabindex="0" at all. You can (and should, IMO) remove it.
Do not nest any interactive elements. If when you click on those anchor tags it redirects the user to another page than they should have a href attribute. I am assuming you are handling the redirection with some sort of click event, if that is the case, try adding
href="#"
Do not use tabindexes unless extremely necessary, adding the href attribute should be sufficient to add those links to the tab order.
I have no idea how your design looks like, but I would suggest the following approach
<ul role="tablist">
<li role="tab">
Menu1
<div id="submenu" aria-hidden="true" style="display:none">
options
</div>
</li>
</ul>
I added aria-hidden="true" style="display:none" because I am assuming you are going to add some kind of mouse-over and focus event on the menu tab that will then show the submenu div.
This is the markup I have written for the header of web commerce site. I am not sure if it is semantically correct - especially the utility bar. Should I add the role-navigation to the container div of the links to the account, wishlist pages or should that also be within a nav element or an aside?
Also please let me know what I can do to make THIS design (can't change the order of the design - client wants it like this) more accessible and friendly towards assistive technologies.
<header>
<div role="navigation" aria-labelledby="utility-nav" class="utility-nav">
<h2 class="visuallyhidden" id="utility-nav">Account and store pages</h2>
<div class="align-right">
my account
find a store
credit center
track order
wishlist
</div>
</div> <!-- utility bar -->
<div id="logo-search">
<!-- logo -->
<!-- search -->
<!-- mini cart/shopping bag -->
</div> <!-- logo, search, shopping bag container -->
<nav id="top-nav">
Women
Men
Juniors
Baby
<!-- etc -->
</nav> <!-- top nav -->
</header> <!-- header -->
Instead of <div role="navigation"> just use <nav>. It is ok to have more than one <nav> element on the page, even in a <header>. While <nav> is generally reserved for major blocks of navigation (meaning realistically you would max out at two or three on a page), I think both of these qualify in your example.
Consider putting your links within a list as that announces the number of items to a screen reader user.
Also, I suspect your visuallyhidden class is there to hide the <h2> from all users except screen readers. Pairing that with aria-labelledby results in it being announced twice. Having the <h2>can also create unnecessary stops in heading navigation within a screen reader. Consider dumping the <h2> altogether and using aria-label instead. This way you don't need to visually hide it and you can still provide context to your screen reader users.
At that point, you might want to also do that to the primary navigation (or not, depending on user testing and how verbose it makes the page).
So, to tweak your example a bit:
<header>
<nav aria-label="Account and store pages" class="utility-nav">
<ul class="align-right">
<li>my account</li>
<li>find a store</li>
<li>credit center</li>
<li>track order</li>
<li>wishlist</li>
</ul>
</nav> <!-- utility bar -->
[…]
<nav aria-label="Primary navigation" id="top-nav">
<ul>
<li>Women</li>
<li>Men</li>
<li>Juniors</li>
<li>Baby</li>
<!-- etc -->
</ul>
</nav>
</header>
If you can, consider downloading the free screen reader NVDA (and donating if your employer has the cash) and running it through the page you build.