When we include Google Custom Search capability on our website, we get automatic code returned from Google containing some Google branding - images - that do not have alt tags for accessibility. I couldn't find a solution other than to write my own JavaScript to add alt tags to these images. Here is my solution, but my question: is this something that we should or shouldn't do? I want to make sure all parts of the website pass accessibility tests.
var x = document.getElementsByClassName("gsc-branding-img");
for (i = 0; i < x.length; i++) {
if(x[i].tagName == "IMG") {
x[i].alt = "";
}
}
The image in question is the Google logo, and it's presented as part of a phrase "powered by Google", where "Google" is the logo image. This phrase doesn't make sense to a screen reader user without alternative text.
Here's the section of the Google Custom Search plugin in question:
<td class="gsc-branding-text">
<div class="gsc-branding-text">powered by</div>
</td>
<td class="gsc-branding-img">
<img src="https://www.google.com/uds/css/small-logo.png" class="gsc-branding-img">
</td>
Here's a variation on your solution to add alternative text to that image:
document.querySelector('img.gsc-branding-img').alt = "Google"
view it at jsfiddle
You could also add the text content to the parent tag and visually hide that text with CSS.
This article on Making Google CSE Accessible was helpful in building a solution (for your same question) in a previous project I worked on.
You can build a callback like:
window.__gcse = {
callback: imgAltTagsFix
};
var imgAltTagsFix = function() {
$('img.gsc-branding-img').attr("alt", "Google Custom Search Branding");
$('input.gsc-search-button').attr('alt', "Google Custom Search Button");
};
Be sure to check out the Using the JavaScript API to render elements section for more details on how to expand this solution.
Related
Basically, I want to be able to show title and some text on hover on all my index thumbnail like this website.
http://www.timboelaars.nl/
However, in the current squarespace template that I am using (I believe it's called York), the markup is only grabbing the page title and therefore displaying the page title on hover. (See the below code block, you can see the page title in there, that's the only thing that the template displays on Hover)
<div class="index-item-text-wrapper">
<h2 class="index-item-title">
<a class="index-item-title-link" href="/google-shopping/" data-ajax-loader="ajax-loader-binded"><span class="index-item-title-text">**PAGE TITLE**</span></a>
</h2>
</div>
There's no field for me to put any HTML so I am seeking help to use javascript to manually inject custom HTML markup to every single thumbnail, then show them on hover.
TL;DR I want to be able to display more than just the title on hover (ideally my own HTML markup so I can customize the style) on my thumbnails but that's not supported by the template.
Here is my website http://shensamuel.com/
I am really weak at Javascript and I've searched for a solution for this problem for quite long. Any help will be much appreciated!
Thanks!
The following Javascript can be used to insert text for each tile on the page. The code would be inserted using the footer code injection area (unless you're using Developer Mode in which case you'd insert it with the rest of your scripts).
<script>
(function() {
var tiles = document.getElementsByClassName('index-section');
var thisTile;
var titleText;
var description;
var parent;
var i, I;
for (i=0, I=tiles.length; i<I; i++) {
thisTile = tiles[i];
titleText = thisTile.getElementsByClassName('index-item-title-text')[0];
parent = thisTile.getElementsByClassName('index-item-text-wrapper')[0];
description = document.createElement('span');
description.className = 'index-item-description-text';
switch(titleText.innerHTML.toLowerCase()) {
case "google shopping":
description.innerHTML = "Some custom text.";
break;
case "hana":
description.innerHTML = "More text that's custom.";
break;
case "wali":
description.innerHTML = "Custom text here.";
break;
case "cypress":
description.innerHTML = "Type anything you want.";
break;
case "ryde":
description.innerHTML = "Just another bit of text.";
break;
default:
description.innerHTML = "";
}
parent.appendChild(description);
}
})();
</script>
Observe the pattern in the code in order to add new tiles or edit existing ones. You will see that the script attempts to match (a lower case version of) the 'title' text and then inserts text based on each title. This allows you to add more in the future by repeating this 'case' pattern. Of course if you ever change the title of a tile you'd have to correspondingly change this Javascript code.
You can then style the description by inserting CSS via the Squarespace CSS Editor (or via your base.less file if using Developer Mode). For example:
.index-item-description-text {
display: block;
font-size: 1.2em;
color: #FFFFFF
}
Note that while there is an alternative method that would use each tile's respective URL to do an AJAX query and obtain meta data about each project (and therefore allow you to use the Squarespace content manager to insert this 'description'), that method seems unnecessarily complex for your case.
Update 8/17/2016: Regarding AJAX and how to disable AJAX loader in Squarespace: Jason Barone has suggested adding this snippet to your Code Injection > Footer to disable the "AJAX" pageloader. He noted that it will disable the smooth, AJAX transitions between pages, but will allow custom Javascript like usual.
<script>
//Credit: Jason Barone, http://jasonbarone.com/
window.Template.Constants.AJAXLOADER = false;
</script>
Also, some templates have an option to disable AJAX within the style editor (image credit: SSSUPERS):
Update 9/28/2016:
It has been reported that the code provided above no longer disable AJAX. However, some newer templates have added an 'Enable AJAX Loading' setting that can be toggled off.
I visit a webpage that I would like to make a little (for me) more user-friendly.
It consists of a list movie titles with links to imdb.com.
The IMDB user rating can be viewed as a tooltip (the title attribute), and that's the problem. It takes forever (it feels like ;-) to view the ratings with 50 movies per page.
I tried to alter the page by using the Chrome plugin Stylebot with no luck.
(That was after I asked the owner of website if a change could be made...)
Is there a way to make the tooltip visible all the time? Just after the picture would be fine – there is plenty of space for the text.
The code:
<div class="showtitle">
<a target="_blank" href="htts://www.imdb.com/title/tt1254207/">
<img src="imdb.png" style="" title="Rating: 6.7/10 (1573 votes)">
</a>
</div>
Installed the Chrome Pugin RWeb that enables custom JavaScript.
The following works but improvements to my code are welcome – has hardly done any JavaScript before ;-)
ready(function() {
var showtitleList = document.getElementsByClassName("showtitle");
for (var i=0; i<showtitleList.length; i++) {
var elementAList = showtitleList[i].getElementsByTagName("a");
if(elementAList.length>0){
var aImgElement = elementAList[0].getElementsByTagName("img");
if(aImgElement.length>0){
var imdbRating = aImgElement[0].title;
elementAList[0].innerHTML = imdbRating;
}
}
}
});
Not sure if this is possible, but is there a way to do something like this:
JavaScript
$scope.getSearchResults = function(searchString) {
for (i = 0; i < 10; i++) {
// Do a google image search with searchString
var currentUrl = searchOutput;
$scope.googleSearchResults.push(currentUrl)
}
}
$scope.getSearchResults('Mountains');
HTML
<div ng-repeat="imageURL in googleSearchResults| limitTo: 5">
<img ng-src="{{imageURL}}" />
</div>
So basically, using JavaScript or Angular or something to search google images, and grab the urls of the first however many you want? And googleSearchResults would either have an object of each image or even just a url of the image to display in the html?
Anyone know if this is possible?
It looks like you'd need to make a call to the Custom Google Search API:
https://developers.google.com/custom-search/
Yes its possible. Use ajax to pull a search result from google as an html document then use the DOM of that page to find the images and store them in your array.
I am trying to use this API to run an iteration over some Google Documents. However, I have very little experience concerning Javascript. How would I replace a keyword, say <"image">, with an actual inline image from a URL? Does ChildIndex support indexes within a paragraph? Bonus points for code!
If you want to add an actual inline image from a URL, try this:
var img_name_Url = "URL of the image";
var img_name_Blob = UrlFetchApp.fetch(img_name).getBlob().setName("img_name_Blob");
In the document you want to use it in:
htmlBody : "The content for the inline image <img src='cid:img_name'>",
inlineImages:
{
img: img_name_Blob
}
I have a static HTML page where I am using span tags and javascript to highlight selected portions of text. On a separate page, I would like to link back to this HTML page and have specified highlighting active. See provided code below.
The issue is the required style="background: transparent" tag. It has to be there so that the highlight is only active when clicked upon, but this also means that when I attempt to link to this page as specified below, the highlight is not active.
Any help would be much appreciated. Thanks.
Clicking this link highlights specified portions of text in the document.
<span title="Warscape"><a title="Warscape" onclick="highlightSpan(this.getAttribute('title'))" href="">Warscape</a></span>
This is the text that is highlighted when clicked.
<span title="Warscape" class="highlight" style="background: transparent">During this month while we have been building Fort No 1 Spring field Missouri, quite a No of Regiments have arrived from the north & now the Army of the Frontier [is?] formed</span>
Code to link to page with highlighting.
<a href="j_62sept.html?highlight=Warscape">
CSS re. highlighting
.highlight {background:#bcdbda;}
Javascript re. highlighting
function highlightSpan(spanTitle)
{
var spans = document.getElementsByTagName("span");
// take away color
for (var i = 0; i < spans.length; ++i)
{
spans[i].style.backgroundColor = "transparent";
}
// add color
for (var i = 0; i < spans.length; ++i)
{
if (spans[i].getAttribute('title') == spanTitle)
{
spans[i].style.backgroundColor = "#bcdbda";
}
}
}
I recognise that this is an old thread, but this problem can now be addressed for Chrome using the Scroll to Text Fragment feature described here:
https://chromestatus.com/feature/4733392803332096
In short, it allows you to provide a link which jumps to a specific string of text and (in Chrome's implementation) highlights that section. A basic version of the link would look like this:
https://en.wikipedia.org/wiki/Cat#:~:text=Felis%20catus
when your clicking the links to the page where the highlighting takes action (<a href="j_62sept.html?highlight=Warscape">
) you need to somehow read querystring value on that page to highlight the right span. You can use javascript for this. See this example: http://www.bloggingdeveloper.com/post/JavaScript-QueryString-ParseGet-QueryString-with-Client-Side-JavaScript.aspx
This is an interesting question. If you'd like to have the javascript pick up on parameters in the url, you can use the window.location.href parameter to pull it out. So, quite simply the following function:
function CheckForHighlight(){
href = window.location.href;
values = href.split('?')[1] // Remove the url
highlight = values.split('=')[1]; // Grab the second parmeter
highlightSpan(highlight); // Highlight it!
}
Please Note that this is a very basic example. I encourage learning through simplicity, and this function can be expanded to dynamically parse all url varaibles. Brain Exersise for you!