I'm adding WCAG accessibility to non-Google display ads. I produce ads using transparent PNGs that tween to 0,0 to animate and build the ad and to show the focus/hover state. Our text in the ad is part of the PNGs. My simplified code below is:
<!DOCTYPE html>
<html>
<head>
<meta content="width=300,height=250" name="ad.size">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<title>300x250</title>
<link href="300x250.css" rel="stylesheet" type="text/css">
<script defer src="https://url.com/script-that-animates-images/" type="text/javascript"></script>
</head>
<body>
<div id="container">
<a href="https://url.com" title="Advertisement — Text that repeats the image's text. Call to action." id="rolloverCatch">
<div id="content">
<!-- animated images that include the text -->
<img src="https://www.fillmurray.com/300/250">
</div>
</a>
</div>
</body>
</html>
I've added title to the anchor — on hover the image text is repeated — but is that correct and enough? (e.g., alt is for images, title for links, is this correct?) I realize the ideal situation would be to render plain text but what more can be done to better align with accessibility requirements using only images in a display ad? On the images themselves, should I be adding aria-hidden=true? Is there an appropriate reference to use here?
Concerning Google display ads, is the accessibility functions added within that system? I'm tracking I do not have anchors within the uploaded HTML source, should Google display ads have alt text on the top-most image instead?
I'm using accessibleweb.com and Disability Studies Quarterly as references for the above but I'm having trouble finding timely or better resources.
I think in your example the most natural way to do it is to add an alt attribute to the <img> element:
<div id="container">
<a href="https://url.com" id="rolloverCatch">
<div id="content">
<!-- animated images that include the text -->
<img src="https://www.fillmurray.com/300/250" alt="Advertisement — Text that repeats the image's text. Call to action.">
</div>
</a>
</div>
When the <a> element has a text, or another element having itself an accessible name between its opening and closing tags, it takes that as its own accessible name.
And by the way, all the images that have something meaningful must have an alternative text (with alt, aria-label or aria-albelledby).
Related
it there a way to make the HTML elements be in dark mode
if the user has activated in his system "dark mode"
and if the user is like to use standard colors, to be "light mode"
all this automatically when the user opens the website.
without any buttons.
and I want that if the user changes the theme color preference from the setting, it will automatically switch to the correct one directly without refreshing the page.
the black and white color of text, I want that don't use any CSS
so not using CSS. in this project I am using only HTML.
<!-- here is example of tags to color automatically for the answer -->
<h1>
<span>hello world<span>
<input>
if there a way to do this with one line or 2 maximum.
maybe adding a library with no configuration needed, but I don't find it
add this CSS property color-scheme: light dark; to the <html> css selector (is only one line of css)
OR if you need only html you can use this <meta> tag
<meta
name = "color-scheme"
content = "light dark"
/>
https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
watch this youtube video for more details: https://youtu.be/n3lcjY4Mm00
it does all the things you listed before!
<html>
<head>
<meta name="color-scheme" content="light dark">
</head>
<body>
<h1>hello world</h1>
<span>hello world</span>
<input type="text" placeholder="hello world">
</body>
</html>
You can add meta tag in your section if you want to use only HTML. You can use it like this:
<head><meta name="color-scheme" content="light dark"></head>
<body>
<h1>
<span>hello world<span>
<input>
</body>
Hope this helps you.
I can add line height in the OneNote app, but when I download the page's HTML via the API, I don't see any HTML that would indicate the line height is set.
For example - take this page...
OneNote page - plain text input - no line spacing
The HTML generated is...
<html lang="en-US">
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="created" content="2022-02-17T21:57:00.0000000" />
</head>
<body data-absolute-enabled="true" style="font-family:Calibri;font-size:11pt">
<div style="position:absolute;left:48px;top:115px;width:720px">
<p style="margin-top:0pt;margin-bottom:0pt">~~~...ALL THAT TEXT FROM THE IMAGE...~~~</p>
</div>
</body>
</html>
Here's how I set the line spacing...
Setting the line spacing in OneNote for the page
And here's the OneNote page with the line spacing applied
But, as you can see, the HTML retrieved for that page from API doesn't really change.
<html lang="en-US">
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="created" content="2022-02-17T21:57:00.0000000" />
</head>
<body data-absolute-enabled="true" style="font-family:Calibri;font-size:11pt">
<div style="position:absolute;left:48px;top:115px;width:720px">
<p style="margin-top:0pt;margin-bottom:0pt">~~~...ALL THAT TEXT...~~~</p>
</div>
</body>
</html>
At this point, my guess is the line height (like the page background, etc.) is not stored with the page and not accessible via the API (unless someone knows different). So, I think I'm going to have to try to work with the OneNote supported HTML tags to figure out a different solution.
Again, I'm trying to control line height / spacing. All I could find on allowed tags is in the MS Graph API documentation, but it links out to what appears to be a more complete list, but the link is broken -- https://github.com/microsoftgraph/microsoft-graph-docs/blob/main/concepts/onenote-create-page.md
I've tried -
The line height style, but that seems to have no effect (assuming it's not supported by OneNote)
I've tried making every space in the content a span with a different font-height and space, but that ends up with some weird formatting
I am not export in OneNote, But as per your requirement it seems we can get the below INPUT attribute in OUTPUT attribute on our HTML code.
data-id,data-tag,id,style
For example:
Input Attribute:
<h1>Heading <i>One</i> text</h1>
<p style="font-size:8pt;color:green;font-family:Courier;text-align:center">Some text</p>
<p>Some <span style="font-size:16px;color:#ff0000;font-family:Segoe UI Black">more</span> text</p>
Output Attribute:
<h1 style="font-size:16pt;color:#1e4e79;margin-top:11pt;margin-bottom:11pt">Heading <span style="font-style:italic">One</span> text</h1>
<p style="text-align:center"><span style="font-family:Courier;font-size:8pt;color:green">Some text</span></p>
<p>Some <span style="font-family:Segoe UI Black;font-size:12pt;color:red">more</span> text</p>
For more information please refer this MICROSOFT DOCUMENTATIONs:- Input and output HTML in OneNote pages & Create OneNote pages
I have a strange situation with my website where whenever it appears on Google Search, the alt text of one of the images is also displayed despite not being part of the <title> tag.
On my website (sparen.github.io), I have the following header:
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>Andrew Fan's Code Dump: The Embodiment of Code and Hacks (AFCDTECH)</title>
<link rel="stylesheet" type="text/css" href="blah.css">
<meta content="Andrew Fan's Code Dump: The Embodiment of Code and Hacks (AFCDTECH)"
name="description">
<meta name="keywords" content="Sparen, Touhou, Danmakufu, ph3, Tutorial, Script, Project">
<meta name="viewport" content="initial-scale=1">
<script>
<!-- Removed Google Analytics stuff for purposes of StackOverflow Question-->
</script>
</head>
<body id="mhome">
<div class="yui-t1" id="top">
<center><img alt=""Site Logo"" src="images/logo.png" style="width:90%"></center>
However, in Google Search, the title appears as follows:
***This is actually a different page, but all pages on my website seem to have the same issue, and all have the same header structure.
I don't know why it has that extra 'Site Logo' thing, which only appears as part of the image alt text in my banner (which is not even in the head but rather the body of the page).
It hasn't disappeared in the past few months, and it'd be nice to know if there's something I never took into consideration when originally building my website or if there's something BlueGriffon did before I migrated away from it.
Google seems to be confused by your quotes inside the alt text. Just remove them or use
<img alt='"Site Logo"' src="images/logo.png" style="width:90%">
Am I wrong or this could be a flaw (vulnerability?) in Google Search?
Tumblr meta tags help a lot with making theme, and I recently found out about "select" meta tag and I want to use it now to make it easy to change post width.
<meta name="select:post width" content="400" title="400px">
<meta name="select:post width" content="250" title="250px">
<meta name="select:post width" content="500" title="500px">
However it's not good to me when it comes to setting up Photo, Photoset and Video posts because this doesn't and can't work:
{Video-{select:post width}}
so I wanted to make {block:ifpostwidth400} thing like you can do with text, e.g.
<meta name="text:link1" content="home" />
...
{block:iflink1}
...
{/block:iflink1}
but it I can't find a way to make this happen, is it even possible?
yes it is possible, but you have to clarify the variable first.
{block:ifLink1} {/block:iflink1}
would be given value through the following variables...
1st.
{block:Description}
<meta name="description" content="{block:Description}
{/block:Description}
2nd.
<meta name="if:link1 content=1>
3rd.
below <style type="text/css"> and {custom CSS}
you clarify where the variable is used such as 'ids' , and placing them
where you desire.
example: in the <body> </body> you put <div id="links>{block:link1}</div>
the variable will then have a value...
I hope this helped, it's late but oh well :/
As far as I know you can't handle the options as ifs. But on my tumblr theme I have an image in the sidebar with the blog title that can be hidden, above the image or below it, and I did it with a select.
Here's the code I used, I hope you can apply it to your problem.
<meta name="select:Title position" title="Hidden" content="title-hidden"/>
<meta name="select:Title position" title="Above the image" content="title-above-image"/>
<meta name="select:Title position" title="Under the image" content="title-under-image"/>
<div id="sidebar">
<h1 id="title1" class="{select:Title Position}">{Title}</h1>
<a href="/">
<img src="{image:Sidebar photo}" />
</a>
<h1 id="title2" class="{select:Title Position}">{Title}</h1>
</div>
And CSS
.title-hidden{
display:none;
}
.title-above-image#title2{
display:none;
}
.title-under-image#title1{
display:none;
}
I don't know if using it on every post affects performance, but here it is anyway.
When creating an html document my code works either way, but how do others like to organize their html hierarchy? for example I like to put my site's banner and the navigation bar in <head>.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script type='text/javascript' src='script.js'></script>
<title> User's Profile'</title>
<div id="header">
<img src="http://svc004.bookeasy.com/images/MARGS/flourish-website-banner3.jpg" />
</div>
<div id="toolbar">
<span>Username</span>
<p>Profile</p>
<p>Medals</p>
<p>Account Settings</p>
<p>logout</p>
</div>
</head>
<body>
<div id="left_nav">
<p>Home</p>
<p>Scout</p>
<p>Attack</p>
<p>Fourms</p>
<p>Contact</p>
</div>
</body>
</html>
You shouldn't put anything in your head that you want to display as en element, because it's not the correct element for it.
It may work but you never know when it may not (or have subtle bugs). It will also confuse anyone who has to maintain this markup after you.
The spec says that the <head> element has to contain:
One or more elements of metadata content, of which exactly one is a title element.
Further down:
Metadata content is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other "out of band" information.
You can only put these tags in there:
<base>
<link>
<meta>
<noscript>
<script>
<style>
<title>
The way you're doing it isn't good. Put the header in a <header> element in the <body>.