I'm having a task that require Voice Assistant on Android to read "monday to friday" for the text "Monday - Friday" displayed on HTML page.
This is my code:
<html>
<p tabindex="0">We have received your request.</p>
<p tabindex="0"><strong>Have a question?</strong></p>
<p tabindex="0">You can call us on <a href="tel:132265">13 22
65</a> for all general and credit card enquiries<br></br>
<span aria-labelledby="to">Monday - Friday</span> 8am - 7pm (AEST/AEDT)<br>
</br>
Weekends 9am - 6pm (AEST/AEDT)</p>
<p tabindex="0">Or, you can call us on <a href="tel:131012">13 10
12</a> for all business banking, agribusiness banking and nabhealth
enquiries<br></br>
<span aria-labelledby="to">Monday - Friday</span> 8am - 9pm (AEST/AEDT)<br>
</br>
Weekends 9am - 6pm (AEST/AEDT)</p>
<p tabindex="0"> </p>
<span id="to">monday to friday</span>
</html>
I have try <span aria-label="monday to friday">Monday - Friday</span> but this doesn't work either.
Any suggestion is much appreciated
Do not try to force pronunciations on screen readers. Users can personalize how punctuation is spoken the way they like it (e.g. what if they wanted to hear "Monday through Friday"). See the question linked by #aardrian for more detail.
That said, a hyphen is the wrong character here and you should be using an – to separate ranges. Some screen readers will actually read that as "to".
Related
I have a too long title and i want to brake it with a in a specific place.
(It is a Wordpress Woocommerse single item page product title in a child theme.)
Original:
<h1 itemprop="name" class="product_title entry-title">Something long text – 2023. 05. 27. 10:30</h1>
Expected:
<h1 itemprop="name" class="product_title entry-title">Something long text <br> 2023. 05. 27. 10:30</h1>
The question is how can i read the "Something long text – 2023. 05. 27. 10:30" and how can i write back.
I can make the character replaceing (i think). :)
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;
}
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.
I jus got the following PSD design:
(sorry about the grid line in between , that blue line really is not needed.).
Now i was wondering with all there html5 tags , what would be a great and semantic markup to code the above design , iám usually a guy who goes old school and uses div and spans , but this time i used cite , when i read the MDN doc's there seems to still be no clarity weather a name/designation can be used in cite , basically the way look at cite is , it a tag to be used only when you have a definitive resource to be added to you markup. Even though neither name nor designation is a definitive resource, i came up with the following markup.
<div class="testimonia-details">
<img src="img/res/p1.png" alt="testimonial giver">
<p>
<span>Brian</span>-May 2015
<span>Managing Partner.<cite>Tammy Lenski LLC</cite></span>
</p>
</div>
can anybody tell me what would be a more semantic way to code the testimonial details ? Thank you , i would greatly appreciate any help or guidance, i have always wonder what would be a semantic markup especially for a scenario like above.
Using schema.org metadata
<div class="testimonia-details" itemscope itemtype="http://schema.org/Person">
<img src="img/res/p1.png" alt="testimonial giver" itemprop="image">
<p>
<span itemprop="name">Brian</span>-May 2015
<span itemprop="jobTitle">Managing Partner.<span itemprop="worksFor">Tammy Lenski LLC</span></span>
</p>
</div>
I have two iframes on a page and I can't figure out why the text is overlapping the second iframe. Any suggestions? Thanks!
<h1>Spanish Springs Library </h1>
<hr />
<div align="left" id="text" style="float: left;">
<div border="0" align="right" id="tour" style="float: right; width: 450px; height: 300px;"><iframe width="448" frameborder="0" src="http://tours.blackhawkvirtualmedia.com/public/vtour/full/55789" border="0" height="280"></iframe>
<div border="0" align="right" id="map" style="float: right; width: 200px; height: 200px;"><iframe scrolling="no" marginwidth="0" width="200" frameborder="0" src="http://maps.google.com/maps/ms?ie=UTF8&hl=en&oe=UTF8&msa=0&msid=108756021178700849594.000457097404325161dd5&ll=39.618251,-119.728832&spn=0.026447,0.034332&t=p&z=13&output=embed" marginheight="0" height="200"></iframe><br /><small>View a larger version of this map</small> </div>
</div>
<p>Calendar of Events<br />7100A Pyramid Lake Highway<br />Sparks, NV 89436 </p>
<p><strong><br />Hours:</strong> Mon, 10am - 6pm<br /> Tue - Wed, Noon - 8pm<br /> Thurs, 10am - 6pm<br /> Sun, 10am - 5pm <br /> Fri - Sat, Closed<br /><strong>Phone:</strong> 775-424-1800<br /><strong>FAX:</strong> 775-424-1840 </p>
<p>Spanish Springs Library is located on the Pyramid Highway in Spanish Springs. An octagonal building with open spaces set off by a 64 foot ceiling over the atrium, comfortable seating and thirty-nine public access/Internet computers, it is truly a destination for the entire family. Features include a drive-through service point to pick up and drop off materials, and a 24-hour book return. </p>
<p>The Nell J. Redfield Foundation Young People's Library features a unique oversized stack of books at the entrance and a separate Story Time room. Seven of the thirty-nine public computers (including an adult station so parents and children can work side by side, and two children’s games computers) and a family restroom complete the area as a family friendly place.</p>
<p>The teen zone is a comfortable place with eight of the thirty-nine public access computers and an area for group study and projects.</p>
<p>Programs for all ages are offered including Story Times, guest speakers and artists, craft programs, book discussion for all ages, an art gallery, displays, and much more!</p>
<p>An ADA computer station with a Braille printer is available to the public.</p>
<p>E.L. Cord community meeting rooms provide spaces for groups to meet and groups may arrange to stay after the library is closed.</p>
<p>Self-serve features include express check-out, the ability to pick up holds, Downloadable ebook and audio-book station, automated computer sign-ups, and printing. Offering wireless internet access and printing from your laptop, laptop locks, a public fax machine, a flatbed scanner for public use, and study rooms, the library is truly a destination for the whole family.</p>
<p>Citizens may request exam proctoring at the Spanish Springs Library. </p>
<p>The atmosphere is enhanced by the cozy fireplace, coffee cart and comfortable seating throughout the building.</p>
</div>
Your code is very confusing. Try to use only one tag <p> along the text and for the days/hours, use a <table>. If you can use a <div> and make the formatting of the text first and last place the <iframe> of Google Maps.