I have a working dropdown menu on my site, but it doesn't work at all on iPhone and iPad.
Is there a manageable way to force iPhone/iPad to use their native menu selectors?
http://jsfiddle.net/craigzilla/6nZ5Q/
HTML:
<div class="dropdown"> <span class="dropdown-toggle" tabindex="0"></span>
<div class="dropdown-text" id="dropdown_colours">Colours</div>
<ul class="dropdown-content" id="dropdown_colours">
<li>Black
</li>
<li>Grey
</li>
<li>Red
</li>
<li>Blue
</li>
<li>Green
</li>
<li>Purple
</li>
</ul>
</div>
I was thinking to the CSS property -webkit-appearance, but there is no value which could force the appearance to a select box AFAIK (if there were one, how could webkit know that it should treat the li as option?)
You have to use a select tag instead of an unordered list to make iOS' Webkit changing automatically its appearance to a native one.
You could detect when the user is using a mobile browser, and load your menu dynamically.
You could either find try to reproduce the native select box with CSS too, if you don't want to change your HTML markup...
See Apple's documentation for reference.
Related
If the menu items are links, should the screen reader read it as "home, link, menu item" or "home, menu item"?
Currently the screen reader is reading it as "home, link, menu item" but I am getting mixed information about it. Some information says it should be "home, link, menu item" because we want users to know the button is a link. However, some say that it should just be announced as "home, menu item"
Here's my code:
<ul role="menu">
<li role="menuitem">
<a aria-label="Home" href="/en-us/">
<span class="">Home</span>
</a>
</li>
<li role="menuitem">
<a aria-label="Search" href="/en-us/">
<span class="">Search</span>
</a>
</li>
</ul>
I was wondering which version is correct?
If your html is correct, then don't worry about how the screen reader announces it. JAWS, NVDA, VoiceOver, Talkback, Narrator, ChromeVox, etc may all announce it slightly different and that's ok. As long as the code is correct, then you're good.
As a side note, if you use the menu roles, then you are committing to implementing arrow key navigation. That is, think of the menu role as an old school desktop app menu where you can press alt to get to the top menu (such as file, edit, view) and then left/right arrows to navigate through the menu and up/down arrows to navigate through the submenu. It's fine to do that on a web application but it makes the code more complicated. I rarely use the menu roles and just rely on basic tabbing to navigate through a list of links.
Just for anyone who stumbles across this, aria-role="menu" and aria-role="menu-item" are not for site navigation (as appears to be the case here).
They are designed for application menus (such as drop downs with commands).
For site navigation the correct (and much simpler) mark-up is to simply use the <nav> element with a nested <ul> (unless you are supporting HTML4...and even then the <ul> would probably be enough!).
Additionally there is no real need for an aria-label in the above given examples as the aria-label is the same as the programatically determinable text (a web browser can work out that the "Home" text is within the <a> element and so will present that information to a screen reader via the accessibility tree).
As such for site navigation the following is all that is needed:
<nav>
<ul>
<li>
<a href="/en-us/">
<span class="">Home</span>
</a>
</li>
<li>
<a href="/en-us/">
<span class="">Search</span>
</a>
</li>
</ul>
</nav>
Don't use WAI-ARIA unless you have explored every other option or you need to support ancient browsers!
Additional
With aria-role="menu" you don't only have to implement arrow key navigation. You also should have functionality added that ensure that:-
the menu can be closed with Esc key.
you can skip to options using letters (so d might skip to "details", the next press of d might skip to "delete" if those were menu options).
Home should jump to the start of the list
End should jump to the last item in the list
Finally
If this is indeed a drop down menu and you have implemented all the above, your mark-up isn't quite right anyway.
The <li> should have role="presentation none" (use both "presentation" and "none" as per guidance) to remove semantic meaning and the role="menu-item" should be on the anchor itself.
<ul role="menu" id="some-menu">
<li role="presentation none">
<a role="menuitem" aria-label="Home" href="/en-us/">
<span class="">Home</span>
</a>
</li>
<li role="presentation none">
<a role="menuitem" aria-label="Search" href="/en-us/">
<span class="">Search</span>
</a>
</li>
</ul>
Also don't forget that you need to associate the <button> that opened the menu with the menu itself, so you must have an ID on the role="menu", and finally don't forget that when the menu is closed you have to return focus to the button that opened it.
<button aria-haspopup="true" aria-controls="some-menu"><!--same ID as the menu above for aria-controls-->
Open Menu
</button>
I am editing horizontal navigation bar and need to add description text before the links. My problem that all the text displays after links in the browser. How can I modify css or code to change the location of the text in nav bar? 'DIRECTORIES:' and 'SEARCH:' That I need to display in the browser just before the links, not after
<div id="navcontainer">
<ul id="navlist">
<li id="active">Home</li>
<li>SEARCH: Product Technologies</li>
<li>Trials & Registries</li>
<li> DIRECTORIES: PIs</li>
<li>PI Study Sites</li>
<li>Products
<li>Companies/Sponsors</li>
<li>MIB Custom Alerts</li>
</ul>
Maybe I'm misunderstanding the question, but isn't it as easy as going from this:
<li>SEARCH: Product Technologies</li>
to
<li>label goes hereSEARCH: Product Technologies</li>
Edit: In regards to your comment, why not: <li>Search</li>?
I am working on a drop down menu. Trouble that I am facing is that, I have a 3 level of <ul>, and in second level when height of a <li> increases because it was accommodating another <ul> then all other <li> of second level do not wrap around it.
You can visualize the situation in this Fiddle
when you hover your mouse over Technology then you would be able to see that size of Web Design <li> is greater because of another <ul> that it is accommodating, because of that Typography and Front end has dropped below. Is there any way to keep them wrapping around?
Html structure is like this:
<nav id="nav" role="navigation">
<ul class="clearfix">
<li> <span>Technology</span>
<ul>
<li>Hot news</li>
<li>Sad news</li>
<li>Normal news</li>
<li>Web Design
<ul>
<li>Super power
</li>
<li>Aim Gain
</li>
<li>Acheivers
</li>
<li>Lackers</li>
</ul>
</li>
<li>Typography
</li>
<li>Front-End
</li>
</ul>
</li>
<li>Personal Stuff
</li>
</ul>
EDIT: Attaching few screenshots
This image shows present problem, see position of Typography and Front-end
Following image shows what I am trying to achieve, see position of Typography and Front-end
Here you go: JSFiddle
UPD: JSFiddle in acc to screenshot (Need to update CSS rules)
UPD: JSFiddle example based on classes
I've just removed the margin-left:20px; on #nav li ul li > ul
Tested on Safari 6.1 (Mac OS X 10.9) |
UPD: additionally tested on Chrome (30) & FF (23.0.1) under Mac OS X 10.9
Recently I've been implementing ARIA into a web application and I found this question to be quite helpful in the improving the navigation parts.
After implementing this in all modules, I discovered this HTML validation error:
Attribute aria-selected not allowed on element a at this point.
Looking at the ARIA specification, I see that aria-selected is only used in roles gridcell, option, row, and tab. In my case, the role of the link is menuitem.
This is a representative sample of the HTML code:
<nav role=navigation>
<ul role=menubar>
<li role=presentation><a href='page1.php' role=menuitem>Page 1</a></li>
<li role=presentation><a href='page2.php' role=menuitem>Page 2</a></li>
<li role=presentation><a href='page3.php' role=menuitem aria-selected=true>Page 3</a></li>
<li role=presentation><a href='page4.php' role=menuitem>Page 4</a></li>
</ul>
</nav>
As you can see, this is taken on "page 3".
What is the correct ARIA role to use here?
you may also use aria-current="page" for describing current displayed page among navigation items.
I believe that aria-selected is for 'widgets' that are one-tab stop, like a set of tabs that you then arrow around to select. The selected aspect is about which one is in focus, not which page you are on.
I would check out this as a well tested example:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Menus/Horizontal%20(Internal%20Content)/demo.htm
From: http://whatsock.com/tsg/
For showing the current page I would probably use a more traditional method: Make it not a link. E.g:
<li><a href='page2.php'>Page 2</a></li>
<li><strong>Page 3</strong></li>
This also prevents people from clicking on the same-page link by accident (which I see quite often in usability testing). You can apply the same CSS to nav ul a and nav ul strong and then override the styling for the strong.
Short answer: you can use aria-current="page" or aria-current="location" to indicate the current link in a list of links.
Your pagination component could be improved in terms of accessibility (you can see this as a variation of the similar breadcrumbs pattern):
<nav aria-label="pagination">
<ol>
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
<li>
Page 4
</li>
</ol>
</nav>
A few notes:
Use <nav> to automatically use the navigation landmark (<nav> is equivalent to <div role="navigation"> but shorter and more elegant)
Use aria-label to provide a meaningful name to the <nav> (most likely, you have more <nav> elements on the page and you should label each one accordingly).
Use to make the set of links structured. This can also help screen reader users as it will be announced as "pagination, navigation (next) list, 4 items, helping users understand how many pages there are.
Use aria-current="location"oraria-current="page"` current page of the list (this is most likely shown in a different style as the other pages, but we need to mark it for screen reader users).
I want to add my navigation in the sidebar, and there isn't space for it.
I want to set it up so that when I hover over a word such as (Links) a list will appear. But I'm not sure what code I should be using to accomplish this.
An example can be seen here: http://www.colourlovers.com/ when you hover over Browse it shows a list of other links.
<div id="navigation">
<a href="http://aftermidnightworkouts.tumblr.com/tagged/healthyrecipes">Dear
Charlie</a><br>
<a href="http://aftermidnightworkouts.tumblr.com/tagged
/healthyrecipes">Portfolio</a><br>
<a href="http://aftermidnightworkouts.tumblr.com/tagged
/healthyrecipes">Aftermidnightworkouts</a><br>
<a href="http://aftermidnightworkouts.tumblr.com/tagged
/healthyrecipes">Writings</a>
</div>
Here's a little bit of code to get you started:
http://jsfiddle.net/jonigiuro/ZsAQb/
<ul id="navigation">
<li>
Dear Charlie
<ul class="subnav">
<li class="item">
subnav item1
</li>
<li class="item">
subnav item2
</li>
</ul>
</li>
</ul>
It's better to use a list for navigation menus like yours, it would be even better to wrap it in a nav tag (html5).
The trick is that you insert a child list for the subnavigation inside a list item of the main navigation and set it's css to be hidden by default. When you hover on a main navigation item you just target it's child subnavigation and display it
Just google for CSS drop down menu, lots of pages about it, you can even have it generated and then inspect the code yourself (for example here). You just need a bit of css code that use :hover selector.