I have a list of hotkeys for an application where keyboard arrows are represented with an unicode character e.g. ↓. I do understand the reason that screen reader are not reading such characters. Because of that I want to provide a custom text for these cases.
My question is what is the cleanest way to make screen reader read "j or down" instead of "j or[pause]".
I've tried multiple approaches, all of them listed in code below:
<style>
.readerOnly
{
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
</style>
<h1>A sample list of app hotkeys</h1>
<dl>
<dt>
<kbd>j</kbd> or <kbd>↓</kbd>
</dt>
<dd>
Move down.
<!--Well, it's a vanilla HTML, but SRs have problem reading the ↓ character.-->
</dd>
<dt>
<span aria-label="shortcut j or down." class="lo">j or ↓</span>
</dt>
<dd>
Move down.
<!--This is how Google does it in their Drive - I was thinking about similar solution, but well... it's not working with any of tested SRs.-->
</dd>
<dt>
<span role="note" aria-label="j or down." class="lo">j or ↓</span>
</dt>
<dd>
Move down.
<!--It works only in JAWS, but it's pretty hacky way. It's not semantically correct, so I don't want to use it.-->
</dd>
<dt>
<kbd>j</kbd> or
<kbd>
<span class="readerOnly">down</span>
<span role="presentation">↓</span>
</kbd>
</dt>
<dd>
Move down.
<!--Works perfectly in both SR, but again... super hacky (CSS hax, messy HTML)-->
</dd>
</dl>
Also another way to go might be simply replacing the arrow characters with image icon, then provide a proper alt and we're good but I'd like to avoid redundant graphics.
Screen Readers that I'm working with are JAWS 16 and NVDA 2015.2 at Win7/Win8.1
Unfortunately, the only way to do it that works everywhere right now is the off screen text (your last example). You could mark it up this way:
<dl>
<dt>
<kbd>j</kbd> or
<kbd>
<span class="readerOnly">down</span>
<span aria-hidden="true">↓</span>
</kbd>
</dt>
<dd>
Move down.
<!--Works perfectly in both SR, but again... super hacky (CSS hax, messy HTML)-->
</dd>
</dl>
Related
At the moment I'm using the Opening Hours plugin on Wordpress (https://wordpress.org/plugins/wp-opening-hours/ ) and I have a question about the shortcode. FYI: I'm using Wordpress and Elementor.
At the moment the following can be seen on my website (text is in Dutch): https://imgur.com/a/95pauul
The following code has been used:
[op-overview set_id=".." show_closed_days="true" show_description="false" highlight="day" compress="true" include_io="true" include_holidays="true" template="list" caption_closed="Gesloten" style="color:#ffffff;"]
I would like to capitalize the first letter of the day and outline the opening hours (the numbers) to the left, so this is in line with the days. However, I have no idea how to code this eventhough it seems to be a quite easy task. Is anyone able to help me out? Thank you in advance.
EDIT: Here is the HTML from his site that was output by the plugin:
<dl class="op-list op-list-overview">
<dt class="op-cell op-cell-heading highlighted">maandag – vrijdag</dt>
<dd class="op-cell op-cell-periods highlighted"><span class="op-period-time ">08:00 – 17:30</span></dd>
<dt class="op-cell op-cell-heading ">zaterdag</dt>
<dd class="op-cell op-cell-periods "><span class="op-period-time ">08:30 – 12:00</span></dd>
<dt class="op-cell op-cell-heading ">zondag</dt>
<dd class="op-cell op-cell-periods "><span class="op-closed">Gesloten</span></dd>
</dl>
And here is the custom css to accomplish the changes:
.op-list-overview .op-cell.op-cell-heading {
text-transform: capitalize; /*Capitalizes the first letter of every word in the heading cell with the days in it.*/
}
.op-list-overview .op-cell.op-cell-periods {
margin-left: 0; /*Clears the left margin on the hours*/
margin-bottom: 5px; /*for space beneath the hours*/
}
Not seeing your site I wouldn't be able to tell if those work.
To add custom CSS to WordPress, log into the dashboard and, in the left menu, click "Appearance" then "Customize." In the customizer, the bottom option on the left should be "Additional CSS." That will give you a text box where you can add code like the CSS I provided above. Just be careful adding code you don't understand from someone you don't know (like me). If you need to, google some of the things in my code to make sure you know what it is and what it's doing.
I have a list of items with a detailed description that I would like to be able to display or hide individually. My html currently looks like
<dl class="stuff">
<dt>title 1</dt>
<dd> this is the first item
<pre>
A hidden by default lengthy description
that should be copy and pastable
</pre>
</dd>
<dt>title 2</dt>
<dd> this is the second item
<pre>
Another lengthy description
</pre>
</dd>
</dl>
The answers to the question Hide Show content-list with only CSS, no javascript used were quite helpful in getting me started. The closest I got is https://jsfiddle.net/nja66om7/1/ which has all the desired behaviour, but requires creating a new id as soon as I add a new item to the list.
My target list would have dozens of items and new items would be added regularly. And although I could generate the html and the css code programmatically and obtain the desired behaviour, I would prefer to keep the css simple. Is there a way to achieve the same behaviour (or a similar one) without creating a new id for each item?
I would prefer not to resort to javascript.
Good day, I have one single <dl> with multiple <dt> and <dd>.
What I'm hoping for, is through CSS (2 or 3), allow for one <dt> and it's child <dd> to be on a left column, the other one on a right column through a CSS class.
My current HTML:
<dl>
<dt class="LeftList">DT Name</dt>
<dd>DD Info 1</dd>
<dd>DD Info 2</dd>
<dt class="RightList">DT Name</dt>
<dd>DD Info 1</dd>
<dd>DD Info 2</dd>
</dl>
My current CSS:
.LeftList{
float:left;
margin-left:1.333em;
display:inline-block}
.RightList{
float:left;
margin-left:13em;
display:inline-block}
float elements are automatically displayed as a block elements, thus your inline is being ignored. Can you supply a picture of what you are trying to get?
I am just guessing that you are trying to get something like this:
For now I just changed your CSS a bit, as can be seen from the fiddle
.RightList{
margin-left:13em;
display:block}
http://jsfiddle.net/nx7zws31/2/
please share with us a bit more information, abut your vision.
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.
I am using XMetaL 6.0 to display styled XML using a limited subset of CSS. One thing that I have been tasked to do is display a definition list in a tabular format without borders. What I am trying to achieve is something like Example 2 at http://www.the-art-of-web.com/css/format-dl/#section_2. However, I am limited to the subset of CSS described at http://na.justsystems.com/webhelp/en/xmetaldeveloper/cg/6.0/cg.html#View%20support%20for%20properties%20and%20selectors. Does anyone have any suggestions on how I might best pull this off?
Just for sake of example, and in case someone asks, let's say that my xml for this snippet is something like:
<dl>
<di>
<dt>first item</dt>
<dd>
<p>definition for first item in list</p>
</dd>
</di>
<di>
<dt>second item</dt>
<dd>
<p>definition for second item in list</p>
<p>extending across more than one line</p>
</dd>
</di>
<di>
<dt>third item</dt>
<dd>
<p>definition for third item in list</p>
</dd>
</di>
</dl>
Any suggestions would be greatly appreciated. Please let me know if I can provide any additional details.
According to the XMetal specs, you can style elements to look like tables using display:table;, etc. Read more here.
So you could do this
dl {
display: table;
}
di{
display:table-row;
}
dt{
display:table-cell;
font-weight:bold;
padding-right:15px;
}
dd{
display:table-cell;
padding-bottom:10px;
}
Example: http://jsfiddle.net/jasongennaro/E5yG8/