We run a site with WordPress and use a template for our design.
On our homepage we have a scroll of our blog posts that includes a title, author/post info, reading time and an "excerpt"?
We're trying to get rid of the "excerpt"
blog-post-content-list-sider is the div and the text is just a #text within.
Everything I've looked up is something like .blog-post-content-list-sider { display: none; } but that would hide the entire thing not just one aspect of it (if I understand correctly)
This is the code for 1 blog-post-content-list-sider
The part that starts with "A Cutting-Edge" is the text that I need removed from each post on our page.
<div class="blog-post-content-list-sider">
<div class="textalignleft subtitle_post_standard">
Artificial Intelligence Emerging Technology Medicine</div> <h3 class="title_post_standard"> AI: The Key to Fertility Treatment? </h3>
<div class="fancy_one ig_meta_post_classic textaligncenter">
<span><div class="indie_author">By <b> <div class="vcard author">
Sohail Merchant</div> </b>
</div><div class="indie_on">on </div><div class="updated indie_date"> <b> August 30, 2020</b> </div> </span></div>
<span class="rt-reading-time" style="display: block;"><span class="rt-label rt-prefix">Reading Time: </span> <span class="rt-time">4</span> <span class="rt-label rt-postfix">minutes</span></span>
A Cutting-Edge Discussion about AI’s Eminent Role in Reproduction Intro Artificial intelligence has been widely useful in the diagnosis and treatment of diseases. However, little has been discovered about its capabilities in the realm of fertility treatment. Well, all that is about to change because we will soon experience the first application of AI in […]
</div>
EDIT:
I tested this CSS code and it works. Codepen link here
Please try
.blog-post-content-list-sider{
visibility:hidden;
}
.blog-post-content-list-sider>*{
visibility:visible;
}
Related
Here is an example using aria-describedby
<div role="application" aria-labelledby="calendar" aria-describedby="info">
<h1 id="calendar">Calendar</h1>
<p id="info">
This calendar shows the game schedule for the Boston Red Sox.
</p>
<div role="grid">
...
</div>
</div>
Say I changed to this:
<div role="application" aria-labelledby="calendar" aria-describedby="info">
<h1 id="calendar">Calendar</h1>
<div id="info">
<svg />
<div></div>
<div>
<p>This calendar shows the game schedule for the Boston Red Sox.</p>
</div>
</div>
<div role="grid">
...
</div>
</div>
Is screen reader like NVDA still announces This calendar shows the game schedule for the Boston Red Sox same as the first example?
Short Answer
The examples would both be announced as "calendar, This calendar shows the game schedule for the Boston Red Sox.** in the majority of screen reader / browser combos. This is assuming the SVG is handled correctly and the empty div you added is indeed empty (see end of this answer).
Long Answer
aria-labelledby would be announced first, with aria-describedby announced second in most screen readers.
They are not normally used together on the same element as both can contain a list of IDs to announce.
I would suggest that for ease of maintenance you change it to:-
aria-labelledby="calendar info", this would ensure reading order is consistent across all browser / screen reader combinations.
Although they would (should) be announced the same from your given example, this is assuming that you hide the SVG from screen readers with aria-hidden="true". It also assumes that the <div> you added is indeed empty (and not just a placeholder).
As an aside make sure you also add focusable="false" to your SVG to account for Internet Explorer users (otherwise they can focus the SVG). Nothing to do with the announcement issue in this question just a good practice.
I would suggest your second example should be marked up as follows to save a lot of hassle and to allow the SVG to be part of the document if you wish:-
<div role="application" aria-labelledby="calendar info">
<h1 id="calendar">Calendar</h1>
<div>
<svg focusable="false" aria-hidden="true"/>
<div></div>
<div id="info">
<p>This calendar shows the game schedule for the Boston Red Sox.</p>
</div>
</div>
<div role="grid">
...
</div>
</div>
Final thought
Do you really need the <h1 id="calendar" to be read out at all? Your description says "This calendar` at which point stating "Calendar" before is redundant.
Always try to avoid repetition.
If this is the case then you can simplify your example further to just have aria-labelledby="info".
Also one last observation role="application" is something that should be used sparingly as it causes all keyboard events to skip the screen reader and go straight to your application. Be very careful using this as in most circumstances it is not needed and can cause a lot of accessibility headaches. Here is a brief article that explains a bit more about the pros and cons of the role.
If you remove role="application" then the aria-labelledby may not work on a static div so replace it with an appropriate role.
Thanks in advance for any help here.
I have a sandbox and a live site that I'm making some minor tweaks to. There's one section that I just can't figure out what's causing the issue. Photos below.
Inside a li there's menu items that have a title, description and price. In some instances there's no price for the item and when that field is empty in the CMS the lines style themselves differently.
Here is the way I want it to appear: Live Site: https://www.crownshy.nyc/menus/#cocktails
cocktails page non-alc with no prices
The following is the way it's populating on the sandbox: https://crownshy-sandbox.getbento.com/menus/#cocktails
Sandbox cocktails page non-alc no prices
There's really nothing special about the code here, which is why I'm a bit confused. I just need to take a break and come back with a fresh eye but hoping you all can speed this along. I'm happy to post the CSS but figure because it's several classes that it would be easier to look at it on the developer console
<section class="menu-section">
<div class="menu-section__header">
<h2>Non-Alcoholic</h2>
</div>
<ul>
<li class="menu-item">
<p class="menu-item__heading">No Mas</p>
<p>Pear, Citrus, Rose, Lemon, Yogurt</p>
<p class="menu-item__details menu-item__details--price">
</p>
</li>
<li class="menu-item">
<p class="menu-item__heading">Ginger Jammer</p>
<p>Ginger, Mango, Togarashi, Lime, Soda</p>
<p class="menu-item__details menu-item__details--price">
</p>
</li>
<li class="menu-item">
<p class="menu-item__heading">Hojito</p>
<p>Hoja Santa, Lime, Tonic, Seasonal Herbs</p>
<p class="menu-item__details menu-item__details--price">
</p>
</li>
</ul>
</section>
On Sandbox the heading appears to be missing a width.
p.menu-item__heading {
width: 100%;
}
You put the style on span tag of on live site with this class name .menu-item__currency
You can use that class name or you can put a new tag and add float:left property with that class, I think then the issue will resolve.
W3.CSS is a very new web technology and I cannot find any information about it other than w3schools.com. I was wondering if anyone here knows how to have their sidenav start out open?
Here is a working example that shows one in action:
https://jsfiddle.net/8orgp5xv/
#import 'http://www.w3schools.com/w3css/w3full.css';
<nav id="id01" class="w3-sidenav white w3-depth-2">
Close ×
Link 1
Link 2
Link 3
Link 4
Link 5
</nav>
<div class="w3-content">
<div class="w3-header teal">
☰
<h1>My Header</h1>
</div>
<img src="img_car.png" alt="Car" width="100%">
<div class="w3-panel">
<p>
A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads,
to have seating for one to eight people,
to typically have four wheels. (Wikipedia)
</p>
</div>
<div class="w3-footer teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>
</div>
I just need to know how to make it start open when the page loads.
I tried messing with w3-sidenav and w3-closenav with no luck. Anyone know?
The relevant bit of code appears to be:
.w3-sidenav:target {
width: 25%;
display: block;
}
.w3-sidenav:target + .w3-content {
margin-left: 25%;
}
.w3-sidenav:target + .w3-content .w3-opennav {
display: none !important;
}
.w3-sidenav:target + .w3-content .w3-closenav {
display: block !important;
}
This means that the navigation show/hide and the surrounding layout changes are driven by CSS :target and hash fragments. Which means unless you rewrite or duplicate these rules and use .w3-sidenav:not(:target) and change the a element triggering the sidenav, or something similar, it's going to be difficult to tell the layout to load with the sidenav open in pure CSS.
Needless to say, this is made trivial by either setting the appropriate hash on page load, or better yet, rewriting the entire component to use JavaScript instead of hash fragments and :target.
First, W3.CSS is not a "very new web technology". It's just a stylesheet.
If you want to know how to use it, see the documentation of the authors, or learn CSS to understand it directly.
In this case, the code that opens the sidenav is
.w3-sidenav:target {
width: 25%;
display: block;
}
The :target is a pseudo-class that matches the element whose ID (or name) equals the fragment identifier (the part of the URI after #).
Therefore, you should use some JS to set the fragment identifier to the id of the element when the page loads. This can be done using hash:
document.location.hash = 'id01';
document.location.hash = 'id01';
#import 'http://www.w3schools.com/w3css/w3full.css';
<nav id="id01" class="w3-sidenav white w3-depth-2">
Close ×
Link 1
Link 2
Link 3
Link 4
Link 5
</nav>
<div class="w3-content">
<div class="w3-header teal">
☰
<h1>My Header</h1>
</div>
<img src="img_car.png" alt="Car" width="100%">
<div class="w3-panel">
<p>
A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads,
to have seating for one to eight people,
to typically have four wheels. (Wikipedia)
</p>
</div>
<div class="w3-footer teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>
</div>
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've put together this small little piece but I'm having problems with the renderings below IE9.
I've been going over a bunch of tutorials and have even tried a version of the "html shiv" technique, but to no avail.
I'm not sure what the problem is. I cross tested it and it works in pretty much every browser minus IE8 and below. I'm just curious if I'm going to have to rework an entire style sheet for the IE8 and less bunch or if I'm just missing something.
In IE8/IE7/IE6 the hover states for the buttons work, but it's as though all of the boundaries disappear.
http://www.brodieyazaki.com/matt_tiles
is a live working version.
Here's the HTML (I would include the CSS but it's long, but you can view it in developer tools sorry for the inconvenience).
<section id="tile">
<button id="toggle_button"></button>
<section id="tile_content">
<figure id="tile_content_figure" class="clearfix">
<img src="imgs/tile_pic.png">
<h1>
“Siri's Default Settings Leave
Your iPhone 4S Exposed”
</h1>
</figure>
<div id="tile_content_link">
<p id="from_in">
From nytimes.com in arab spring
</p>
</div>
<div id="tile_content_comment" class="clearfix">
<img src="imgs/user_img.png">
<p>
"This is the basic version of the tile"
</p>
</div>
</section>
<footer id="tile_foot">
<div id="foot_wrap" class="clearfix">
<figure class="like_view">
<img src="imgs/like.png">
<span>10</span>
</figure>
<figure class="like_view">
<img src="imgs/view.png">
<span>100</span>
</figure>
<article id="social" class="clearfix">
<button id="facebook"></button>
<button id="tumblr"></button>
<span>share</span>
</article>
</div>
</footer>
</section>
Just looking to get pointed in the right direction. I know that the CSS has features that IE8 and below won't pick up, but the head scratcher for me is that it's as though the style sheet in its entirety is broken.
please help, and thank you
< ie9 doesn't understand your html5 elements: article, footer, section, figure; offhand i'd just go ahead add html5.js and then turn them on in your css:
article,figure,section,footer{display:block}
i think that should fix what you are talking about
You have lots of duplicate id's. id's must be unique per element or a browser may ignore subsequent instances of the id. You should also declare a document encoding, among other HTML Validation errors...
http://validator.w3.org
Your site is more likely to work as expected, in all browsers, when its HTML code is fully compliant.