I'm trying to make a project fully accessible, but the screenreader reads some elements from my list multiple times.
Edit: It seems this issue only happens in google chrome
this is the source code:
<ul class="o-contact__list">
<li *ngIf="page?.result?.fields?.contactAddress">
{{ page?.result?.fields?.contactAddress }}
</li>
<li *ngIf="page?.result?.fields?.contactEmail">
{{ page?.result?.fields?.contactEmail }}
</li>
<li *ngIf="page?.result?.fields?.contactTel">
{{ page?.result?.fields?.contactTel }}
</li>
<li *ngIf="page?.result?.fields?.contactPrice">
{{ page?.result?.fields?.contactPrice }}
</li>
</ul>
And this is the HTML output:
<ul class="o-contact__list">
<!--bindings={"ng-reflect-ng-if": "mainstreet 123"}--><li>
mainstreet 123
</li>
<!--bindings={"ng-reflect-ng-if": "info#email.com"}--><li>
info#email.com
</li>
<!--bindings={"ng-reflect-ng-if": "tel.: 555 7125"}--><li>
tel.: 555 7125
</li>
<!--bindings={"ng-reflect-ng-if": "free"}--><li>
free
</li>
</ul>
For some reason the first item gets read 3 times. The 2 following items get read twice, and the last item only gets read 1 time.
I have found the problem lay in the styling.
The list-items had a ::before which cause the issue with the multiple readings. I changed it to ::after which solved the problem .
I don't know exactly why this is tho so if someone still know the answer to this I would love to hear!
Related
I want to create generic url for my menu from db
If I hard code the router link for example with the value memo then the application works
<ul>
<li *ngFor="let menu of contractMenus"><a [routerLink]="['memo']">{{ menu.facetName }}</a></li>
</ul>
However if I want to make it generic like so
<ul>
<li *ngFor="let menu of contractMenus"><a [routerLink]="['{{ menu.facetUrl }}']">{{ menu.facetName }}</a></li>
</ul>
Then I get stuck on Loading.... And nothing happens I do not understand why or how I can fix this issue.
I think the solution to your problem is quite simple.
Due to the binding with [] you don't need the string interpolation for the more generic approach ;)
If you change it, like following, it should work:
<ul>
<li *ngFor="let menu of contractMenus"><a [routerLink]="[menu.facetUrl]">
{{ menu.facetName }}</a>
</li>
</ul>
I have two array and I want to display them in a
conversation manner using ng-repeat
assume two array are defined like this
messages_send = ["hi","good, How about you?","cool","LOL","NFW"]
messages_received = ["hey, How are you?","good, Thanks","hmmm","asdfsda"]
<ul>
<span ng-repeat="i in [0,1,2,3,4]">
<li>
messages_send[i]
</li>
<li>
messages_received[i]
</li>
</span>
</ul>
I did it that way and it wroked only problem is it messed up the conversation layout I had. Is there another way to do this I mean iterating through two arrays using ng-reapet without messing up the layout ?
Thanks
You could do some variation of this but you'll need to error check the array to make sure it has the same number of elements. I'm just using an ng-show for that error check but something like this:
<ul>
<span ng-repeat="msg in messages_send track by $index>
<li>
{{msg}}
</li>
<li>
<span ng-show='messages_received.length>=$index'>
{{messages_received[$index]}}
</span>
</li>
</span>
</ul>
I thought that I could do the following:
<ol style = "type:numeric; glyphs: '0' '1';">
<li> Item 0 </li>
<li> Item 1 </li>
<li> Item 2 </li>
</ol>
to produce a list that counted in binary. That is, the above example should have produced:
0. Item 0
1. Item 1
10. Item 2
But alas, it did no such thing. Firefox just ignored my style suggestions.
I was reading about this on http://www.w3.org/TR/css3-lists/ (section 8.1.2)
But clearly I've misread / misunderstood the specification. Any help?
Thank you!
The type and glyphs properties go in side a #counter-style declaration, so you need to define counter style then use it.
#counter-style mybinary {
type: numeric;
glyphs: '0' '1' '2';
}
<ol style = "list-style-type:mybinary;">
<li> Item 0 </li>
<li> Item 1 </li>
<li> Item 2 </li>
</ol>
I don't think any browser implements this though as this is all I found on it besides the working draft and this line from MDN
CSS Lists and Counters Module Level 3 Working Draft Adds support for and adds identifiers used in #counter-style rules to keywords.
These changes are not yet reflected on this page as no browser currently implements them.
If you want to do it visible in every browser, you need to do it with another language (javascript/jquery, or with something comming from your server)
In the end, you just need to have something like that :
http://jsfiddle.net/KdhxX/
<ol>
<li value="0"> Item 0 </li>
<li value="1"> Item 1 </li>
<li value="10"> Item 2 </li>
</ol>
with the value inserted inside your "li" populated by javascript, or your server-side language
I need to markup a ladder for upcoming tournaments, and I can't find any way to mark it up semantically. The only way I've seen so far is to mark it up as a table, and I'd like to avoid that at all costs.
Any ideas?
I've found one example at Accessible NCAA Tournament Bracket which uses a mix of ul/li to achieve it. It's far from perfect (it could uses li + li instead of the "top/bottom" classes, but it's a start.
I'd do it like this, although would also maybe add title attributes to the list items also in order to make the horizontal relationship more accessible
eg <li class="gameThree" title="winner of round One game 2 vs winner of round one game 5">
<ol id="tournamentLadder">
<li id="roundOne">
<ul class="matches">
<li class="gameOne>
<ol class="teams">
<li class="home">Teamname1</li>
<li class="visitors">Teamname2</li>
</ol>
</li>
</ul>
</li>
<li id="roundTwo">
</li>
<li id=final">
</li>
</ol>
I am trying to develop/design a main menu/site map for our website.
The brief is that the menu should look like a directory tree and each item on the menu should either expand to reveal more menu items or link to another page on the site.
On top of this, every item should have the functionality to be added to the sites "Favourites" application, so that every user can more quickly find items that are buried deep within the menu structure.
Because of my insane OCD to make sure that everything is done correctly and to the best possible standards, I am having issues getting my markup to be semantically correct and accessible.
Here's what I've got so far:
<ul>
<li>
<ul>
<li>
Collapse "Menu Item 1"
</li>
<li>
Add "Menu Item 1" to Favourites
</li>
<li>
Menu Item 1
<ul>
<li>
<ul>
<li>
<a href="example3.html">Open "Menu Item 1's
First Child"</a>
</li>
<li>
<a href="example4.html">Add "Menu Item 1's
First Child" to Favourites</a>
</li>
<li>
<a href="example3.html">Menu Item 1's First
Child</a>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="example5.html">Open "Menu Item 1's
Second Child"</a>
</li>
<li>
<a href="example6.html">Add "Menu Item 1's
Second Child" to Favourites</a>
</li>
<li>
<a href="example5.html">Menu Item 1's Second
Child</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
Expand "Menu Item 2"
</li>
<li>
Add "Menu Item 2" to Favourites
</li>
<li>
Menu Item 2
</li>
</ul>
</li>
<li>
<ul>
<li>
Open "Menu Item 3"
</li>
<li>
Add "Menu Item 3" to Favourites
</li>
<li>
Menu Item 3
</li>
</ul>
</li>
</ul>
As you can see, things start to get very complicated very quickly.
Is this the best way to convey this information or am I over complicating the matter?
Can you think of a better way for me to do this?
IMO you're using this list wrong. Collapse/Open/Add to favs... these elements don't belong to the tree, but you treat them as if they were part of it.
Your tree should has following structure:
<ul>
<li>
<span>menu item 1<span>
<ul>
<li>
<span>child node 1</span>
</li>
<li>
<span>child node 2</span>
</li>
</ul>
</li>
...
</ul>
That's the base of the tree. Now you should add actions (open/add... etc.). They might by placed as another, independent list after span element. Then just use class to separate childNodes list from actions list:
...
<li>
<div>
<span>menu item 1</span>
<ul class="actions"> ... </ul>
</div>
<ul class="childNodes"> ... </ul>
</li>
...
Well... in theory classes aren't required but it's much easier to handle with classes rather ... ul > li > div > ul selectors etc.
According to first comment
Base functionality of the website shouldn't rely on JavaScript. That's why I thing addition of whole tree using JS is bad idea. Actions like add to favs should be available without JS, but you may feel free to take control over that action, and overwrite it's functionality. So in HTML you have:
Add to favs
But using JS you do something like this (pseudo-code):
actionLink.addEventListener("click", function...
var id = take id: 123
do ajax request here
return false;
});
It's the best way to provide good availability and functionality at the same time.
About open/collapse actions. These requires JS by their nature so they can be added to actions list by JS. But once again... remember about "non-JS users". HTML/CSS should display a whole tree - JS should collapse its branches.
Sometimes I do as per Crozin's answer above but on a large site it can be impossible to load such a large tree (I have built systems for sites with over 100k pages).
A hybrid solution is to load in the tree so that the path down to the parent page only contains the current path and then display all the children of the parent. Then add JavaScript behaviour to add additinal parts of the tree.
Doing things this way means that non JS browsing can completely navigate the site but JS browsing gets the enhance functionality, all without the performance hit of building the entire tree.