Is there any way to tell an assistive tool to treat an element (e.g: <div>) as a whole, and not split it in child elements?
First example
Using iOS VoiceOver and a with a field on it, it gets splitted into two different elements:
Second example
This elements are splitted in two parts, where the best solution would be read "122 points" and "First position":
<div class="row">
<div class="stat lg col-xs-6">
<span>122</span>
<i class="icon icon-prize" aria-hidden="true"></i>
<h5>Points</h5>
</div>
<div class="stat lg col-xs-6">
<span>1º</span>
<i class="icon icon-prize" aria-hidden="true"></i>
<h5>Position</h5>
</div>
</div>
VoiceOver on iOS does indeed sometimes split a sentence, although your example code actually works fine. I used your code as the first line in the screen shots below and then copied the text without the <a> tag as the second line. The second line gets broken up by VoiceOver but the <a> tag does not.
<span class="label info">
<a href="/round/next">
Next round starts <strong>in 3 days</strong>
</a>
</span>
<br>
Next round starts <strong>in 3 days</strong>
(Note: I have the enhanced outline turned on for VoiceOver so the black outline is probably thicker than what you're used to seeing.)
I found that using role="button" the element is treated as a group and its innerText property is read, but announced as a button.
Related
This markup is able to be read by JAWS arrow navigation in IE11, however in Microsoft Edge it only allows it to be fully read via tab navigation. Does anyone have any idea why Edge refuses to read this list item? We have other list items that are similar to this that are read just fine, but this one in particular doesn't seem to be available to be read via JAWS arrow navigation.
<li id="some-id">
<a href="/destination">
<span class="submenu"></span>
<span class="label"> Destination </span>
<span class="count">
<span class="value" data-info=0></span>
</span>
</a>
</li>
I've tried setting data-info=0 with and without quotes. I'm stumped.
Simple question, but probably a hard answer. I'm doing an Angular 5 app which has multiple components. These are two of them:
ChartPicker
<div>
<span>
<div class="btn-group btn-group-small" *ngIf="available_charts.chart_types.length > 1">
<label *ngFor="let type_key of available_charts.chart_types" class="btn btn-default active" [class]="type_key.name == available_charts.chart_types.selected ? 'active' : ''" (click)="available_charts.selected = type_key.name">
<i class="fa fa-bar-chart" aria-hidden="true"></i>
</label>
</div>
</span>
</div>
GranularityPicker
<div>
<span>
<select [(ngModel)]="config.granularity.selected">
<option [selected]="false" *ngFor="let option of config.granularity.available" [ngValue]="option">
<span class="option-txt"> {{option}} </span>
</option>
</select>
</span>
</div>
Both are quite easy... right? Well, I put them in the app like this, with another component called segments which is located at the left side of the page:
<segments [config]="config"></segments>
<chart-picker [config]="config" class="chart-picker"></chart-picker>
<granularity [config]="config" class="granularity-picker"></granularity>
Chart-picker is before granularity, and the CSS of both classes have some margin to the right side, and a float:right.
... but the chart-picker, the one which should be first, appears the last, at the right of the granularity one.
This makes absolutely no sense. And it doesn't matter what I try to change it the CSS... it just won't work. Any ideas on how to fix this?
Both elements have float:right. The floats are calculated in document order, so the first element ends up floating all the way to the right, then the second one floats next to the first, leaving them in the "wrong" order. You probably want to be using inline or inline-block elements instead of float here.
.r {float:right}
<div class="r">First</div>
<div class="r">Second</div>
I have a problem with building an xpath, maybe you have an idea.
I am working on some automation and I really need to get the full path to this "delete reminder" button, but it must be also checking name, which is located in span 7 (Dh3M5EdV6l in this case). Tried everything, nothing works, it must be that name somewhere included, but I just have no idea how to combine values from 2 spans into one path. Is it possible?
CSS might work too
<li class="row-fluid" data-target="upcoming_reminder_row">
<div class="span7">Dh3M5EdV6l</div>
<div class="span3">Oct 10, 2025 12:00 PM EDT</div>
<div class="span2">
<div class="pull-right">
<i class="icon-Edit" data-target="edit_reminder" data-value="67">
</i>
<i class="icon-Close" data-target="delete_reminder" data-value="67">
</i>
</div>
</div>
</li>
Basically, we need to locate the li element that has the "span7" element with an appropriate text. Then, we'll locate the desired button inside it. Both things in a single XPath expression:
//li[#data-target = "upcoming_reminder_row" and div[#class = "span7"] = "Dh3M5EdV6l"]//i[#data-target = "delete_reminder"]
I can't find any tile component in MDL on getmdl.io. The card component is well documented, but not the tile component.
I assume you mean Grid Lists instead of tiles. As far as I can tell there is no tile specification.
If this is the case, then you would need to combine the grid component and cards. This would get you most of the way there with a little extra custom code for card sizing and maybe shifting a few other bits around if needed.
I found something great when going through codepen the other day: http://codepen.io/zavoloklom/pen/wtApI.
<a class="tile tile-lg tile-sqr tile-red ripple-effect" href="#">
<span class="content-wrapper">
<span class="tile-content">
<span class="tile-img" style="background-image: url(http://www.google.com/design/images/design-minutes.png);"></span>
<span class="tile-holder tile-holder-sm">
<span class="title">Design Minutes</span>
</span>
</span>
</span>
</a>
If you want to take your own approach.I suggest learning about the cell item and moving on from there: http://mdlhut.com/2015/07/understanding-the-mdl-grid/
I’m making a website that has a title with differently colored words and fonts. To do this, I’ve put each word in a different div id to change the text color. I’m not sure if there is a better way than this…
Anyway, the first half of the title (the colored part) is lower than the rest of the title. It shows up this way on Firefox and Chrome, but on Internet Explorer it looks just fine. I’m not sure why there is a difference, I’ve tried out different fonts, which sometimes lessens the problem, but never completely eliminates it. Of course, when I add padding to make it line up, it messes it up on Internet Explorer.
Here’s the link for the page: http://www.dinneronthespot.com/index2.html
The solution is, use span
<span id="dotPerfect">
<span id="color1">Dinner </span>
<span id="color2">On The </span>
<span id="color3">Spot </span>
</span >
<span id="dotPersonal">Personal Meal Service is perfect for...</span>
try this:
#topText > h1 > div {
display: inline;
}
add this code in the stylesheet
Use span instead of div for this kind of actions.
<h1>
<span id="color1">Dinner </span><span id="color2">On The </span><span id="color3">Spot </span>
</h1>
I’ve put each word in a different div id to change the text color.
I’m not sure if there is a better way than this…
It's better to use <span>-Tags
DIV-Tags do also have a default property "display:block" from user agent style, that's the reason why you have to set "float:left" (which is really ugly in this case).
Try this
<div id="dotPerfect">
<div id="color1">Dinner </div>
<div id="color2">On The </div>
<div id="color3">Spot </div>
<div id="dotPersonal">Personal Meal Service is perfect for...</div>
</div>
Move the div with id dotPersonal to div with id dotPerfect.