I have the following code, which is generating dynamically.
<a href="www.someurl.com">
<div class="sub">Sub Title</div>
<div class="main">Main title</div>
</a>
Now If I open site in Android mobile and go to Accessibility > Talkback > On
go to Website and do swipe Left to Right to announce all items one after one
When I reach to <a> tag, its announcing all divs inside the <a> tag, and on next swipe again its announcing 1st div and 2nd div.
Can you please suggest me how can I make the <a> tag announce only once. Thanks..
Related
When I turn on voiceover and focus over the image I see "Shadow Content (User Agent)" appear in the dom and voice over will read out a few more divs inside of that shadow dom. I've tried adding aria-label on both the img and the outer class, but it still reads the contents in the shadow dom. A work around I am doing is adding attribute "role=banner" since it is a logo and fits the banner description under wai-aria recommendations.
Does anyone know how to fix this or is this expected behavior for Safari?
<div class="org-logo">
<img class="org-logo__image" src="assets/images/logo.svg" alt="Logo">
> Shadow Content (User Agent)
</img>
</div>
To make a span into a clickable link.
I have made a span that contains only a background image (as part of a Gilder/Levin image replacement technique) into a clickable link, and it seems to work fine -- but, so far, that is only on my own desktop computer, and on Chrome, Opera, and IE 11.
Is this viable?
<div id="logo">
<a href="[absolute url]">
<span></span>
</a>
<h1>page name</h1>
</div>
It works on my computer, with Chrome, IE11 and Opera. Will it work universally?
While it might look okay in most browsers, you're using the <a> element incorrectly, as what goes inside it should be a meaningful label. The proper thing to do would be to wrap the entire <h1> in the link, or to put the <a> within the <h1> (both are valid HTML5).
<a href="[absolute url]">
<span></span> <h1>page name</h1>
</a>
But judging from your comments, it's probably too early for you to start worrying about image replacement techniques an web semantics when you're still figuring the syntax out.
What's the point of image replacement techniques and why using an empty <a> tag is bad?
The Gilder/Levin image replacement technique involves adding non-semantic elements to a page (such as <span> elements) and using CSS to replace them with icons, so that these elements are ignored by screen readers. After all, an icon next to a menu button might make the button more visible for someone who can see, but the icon becomes redundant when you're blind and are using a screen reader which will read the text of the button out loud anyway. This also might make your website easier to parse by search engines.
However, in the original code, you didn't put any label on the link (actual text between the <a> and </a>), therefore making it especially confusing for screen readers and robots to know what this link is supposed to be. The entire title should be within the <a> element in this case, allowing the whole line to be clicked to follow the link. It's definitely not a good practice to use an empty <a> element, and the fact that there is a <span> within it changes nothing.
And since the idea of leaving an <a> element is semantically absurd, I haven't found any reliable place documenting the behavior of such an element across browsers.
wasn't pretty sure what you are asking for:: or trying to achieve.
3. wrap span in a href tag.
2. span onclick() function with javascript
1. span:hover with css.
<div id="logo">
<a href="[absolute url]">
<span>this span is now like link text.</span>
</a>
<h1>page name</h1>
</div>
<div id="logo">
<span onclick="myFunction()">this span is now like link text.</span>
<h1>page name</h1>
</div>
<style>
span:hover{color:red;}
span:active {color:green}
</style>
The css one isn't really click stuff.
Yes, it's a reliable way to put <span> or <img>(or any element you want to be a link) in a <a> tag.
click here for Definition and Usage
The tag defines a hyperlink, which is used to link from one page
to another.
The most important attribute of the element is the href attribute,
which indicates the link's destination.
I am new to HTML. In my HTML code I have different sections. In my projects section I have 3 child sections but somehow my resume section header which is underneath my projects section and a separate section display as part of the projects section.
link to my repository: https://jobarkhuizen.github.io/FreeCodeCampPersonalPage/
I run my code through W3C validator and included the source, outline and clean up html in the run. Validator run return no error and the outline shows that Projects and Resume sections are both children of the Body tag and Columns Tribute page, Landing page and Technical page are children of Projects section
<section id="projects">
<h2><a id="portfolio">Projects</a></h2>
<section id="col1"><h3 style="text-align: center;">Tribute Page</h3>
<a href="https://jobarkhuizen.github.io/FCC_Tribute_Page/" target="_blank">
<img class="project-tile" src="tributepage.jpg" alt="Tribute Page Picture"></a>
<p>The following guidelines was provided for the tribute page. It should have a div element with a corresponding id="img-div". Within the img-div element, there should be an img element with a
corresponding id="image". Within the img-div element, there should be an element with a corresponding id="img-caption" that contains textual
content describing the image shown in img-div. There should be an element with a corresponding id="tribute-info", which contains textual content
describing the subject of the tribute page. Ther should be an a element with a corresponding id="tribute-link", which links to an outside site
that contains additional information about the subject of the tribute page, this link must open in a new tab. The img element should responsively
resize, relative to the width of its parent element, without exceeding its original size and should be centered within its parent element.
</p>
</section>
<section id="col2"><h3 style="text-align: center;">Landing Page</h3>
<a href="https://jobarkhuizen.github.io/LandingPage/" target="_blank">
<img class="project-tile" src="Landingp.jpg" alt="Landing Page Picture"></a>
<p>The following guidelines was provided for the product landing page. The page should have a header element with a corresponding id="header".
An image within the header element with a corresponding id="header-img".
Within the #header element a nav element with a corresponding id="nav-bar".
At least three clickable elements inside the nav element, each with the class nav-link.
When you click the nav-link button in the nav element, it goes to the corresponding section of the landing page.
Embed a watch-able video with id="video".
A form element with a corresponding id="form". Within the form, there is an input field with id="email" where you can enter an email address.
The #email input field should have placeholder text to let the user know what the field is for and uses HTML5 validation to confirm text is correct.
Within the form, there is a submit input with a corresponding id="submit".</p>
</section>
<section id="col3"><h3 style="text-align: center;">Technical Page</h3>
<a href="https://jobarkhuizen.github.io/FCC-Technical-Page/" target="_blank">
<img class="project-tile" src="technicalp.jpg" alt="Technical Page Picture"></a>
<p>The following guidelines was provided for the technical page. Should have a main element with a corresponding id="main-doc", which contains the page's main content.
Within the #main-doc element, you should have several section elements, each with a class of main-section.
The first element within each .main-section should be a header element which contains text that describes the topic of that section.
Each section element with the class of main-section should also have an id that corresponds with the text of each header contained within it.
Any spaces should be replaced with underscores (id="Javascript_and_Java").
The .main-section elements should contain at least 10 p elements in total.
The .main-section elements should contain at least 5 code elements in total.
The .main-section elements should contain at least 5 li items in total. A nav element with a corresponding id="navbar".</p>
</section>
</section>
<section>
<h2><a id="resume">Resume</a></h2>
<p>Studying Responsive Web Design through FreeCodeCamp. My next project is studying and completing JavaScript and SQL.</p>
<p>I have done automated testing on Winrunner and QTP and managed projects through TestDirector.</p>
<p>Did testing in both waterfall and agile development environments. </p>
<p>This portfolio page is for Freecodecamp certification. I have loaded a personal portfolio page on my Github account which I will update as soon as possible.</p>
</section>
The headings should have a brown background only and be center aligned, but my whole Projects section has a brown background and the Resume heading is on the right side of the page within the projects section
When you use css float property as left, then the content flows to the right of that element. This is unlike the normal flow of block elements which is vertically stacking one below another.
There are many ways to get around this, one way suggested in the spec is to use clear as both:
both: Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that
resulted from elements earlier in the source document.
So make your resume section as
<section class="resume">
</section>
and add its css as:
.resume {
clear: both;
}
For the complete story refer Visual Formatting Model
Also, note that CSS has introduced a number of new features that we dont have to use floats for a column layout. We have grid and flex layouts for the same.
Please use the below code
CSS
<pre>
<style>
.clear{clear:both;}
</style>
<section id="projects">
...
</section>
<div class="clear"></div>
</pre>
Are either of these valid to make a container with a hover effect become a link? I have six of these on my homepage, addition to a few text links a the top of the page?
I thought wrapping the whole div would work, then thought maybe I just wrap the hover state. Neither worked.
<a href="/organdonor.html">
<img src="/images/console/organdonor.jpg" />
<div class="mask">
<h2>Organdonor.gov</h2>
<p>GOVERNMENT</p>
</div>
</a>
</div>
<a href="/coach.html">
<div id="console_coach" class="view">
<img src="/images/console/coach.jpg" />
<div class="mask">
<h2>Coach</h2>
<p>FASHION</p>
</div>
</div>
</a>
These are both valid according to HTML5. However, please do notice older versions of HTML did not consider non-inline elements as valid child elements of an anchor tag.
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link:
https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element
Consider this page # http://www.bloodbone.ws/screwed.html
I need to be able to have the a.grow element expand to the dimensions of the div.column-header so that if you target anywhere in the div the whole area is clickable.
It works in Firefox + Safari, but I can't get it to work in any IE browser.
The h2 and img elements always break the a.grow so there are areas that aren't clickable.
I've tried everything I can think of, adding zoom: 1 etc. to no avail.
The h2 and img have to be visible, but any mouse hover over the area should be clickable.
To have it "SEO compatible", you have 2 options:
Aplly several anchor tags to cover all your div;
Use a framework like JQuery to make the div clickable (and when clicked follow the anchor href), and mantain the anchor inside the div for SEO purposes.
will
<div class="column-header">
<a class="grow" href="http://www.google.com">Google</a>
<h2>What's On</h2>
<a href="http://www.google.com">
<img src='http://www.bloodbone.ws/images/mainHeader.jpg' alt='boo' />
</a>
</div>
do?