6

In general, if a link only contains an image, the alt attribute of that image should not describe the image but the link target. With image maps, it’s the same. The alt attribute of the img element should describe the whole image (as the image itself is not linked). The alt attribute of the area element should describe its purpose (as this image area is ...


4

Your goal is excellent, and I think the approach you are looking for is already existent in CSS as @media and display. One option HTML <a href="#" class="menu_links"><span class="hidetext">Graphic </span>Design</a> CSS @media screen { span.hidetext { display: none; } } @media aural { span.hidetext { display: inline; } } ...


4

It's my understanding that we at Google don't use any of the language meta-information within PDF files. You can, however, use the hreflang information via HTTP header or Sitemaps file for non-HTML content too.


4

What the tool seems to intend is to make sure that the contrast is high enough, but it’s beyond me why it assumes (for some elements) white as default for the foreground and the background. The contrast check should only be done for elements for which the author specifies colors, and assume some sensible default colors (e.g., those used by browsers and other ...


3

I think it actually makes quite a lot of sense. Here are some cases, were I think this would be usefull: The Title of your side is a heading (e.g. name of the company, should maybe even be the topmost h1). This would be similar to the Logo of your side, and it’s usually convention to link this to the homepage/main url of your site You have a list of posts/...


3

There's a free screen reader program for Windows called NVDA. It can be downloaded here: https://www.nvaccess.org/download/ Macs come with a screen reader program called Voiceover, WebAIM has an article on how to use it: http://webaim.org/articles/voiceover/ I found it very enlightening as a sighted person to try navigating some websites via a screen ...


3

alt="Screenshot 1", alt="Screenshot 2" would be about the same as not having anything at all. You can find information on all of your questions here: https://moz.com/learn/seo/alt-text Some context from the page about alt text uses: Adding alternative text to photos is first and foremost a principle of web accessibility. Visually impaired users using ...


2

Well as you said its semantically horrible and should be avoided, its impossible to tell if its impacting on the rankings as such as Google but it's definitely will not help rankings. You should test the following site using the following to determine how bad the situation is: Markup Validation (I suspect there are dozens to hundreds of errors). Some ...


2

The question is interesting but brings back memories of a time when people would debate IF Google could read Flash. And if text in flash was - as you ask here - visible or possibly to be viewed as a technique to add (blackhat) content. The answer to the Flash story was and is "Google reads EVERYTHING". And TEXT made for screen readers (etc) that is USEFUL to ...


2

What is not visible to users (ever) is not taken into account by Google for ranking. Hidding SFM_Tooltip is not a solution. One option in your case is to put keywords in your image's filename. Google searches for information in filenames. Another solution is to display text if someone clicks on the image. This text will be discounted for rankings since it ...


2

What is the reason for placing text in an image rather than having it loaded in the HTML? You generally want all your text crawled to be used for visitors and crawlers. Look at the clean cache of the page and use the "Fetch as Google" tool in GWT to see what Googlebot sees. Here is how your page currently looks to Googlebot: http://webcache.googleusercontent....


2

This. is. crap. I've long catered to the blind community. I use alt on all my images and have always done so. I expand every abbr. I use accessibility web "checkers" and validators. I bend over backward to provide an accessible site. But, this stuff has to stop. Per the blog post listed above. While it might seem that the nav tag would defining the nav ...


2

The relevant guideline from WCAG 1.0 Level A is: Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page. Providing a <noscript> section is one way to approach this guideline, but it isn't a very good ...


2

If you duplicate the text on the same page and change visibility depending on the viewer/screenreader you don't have to worry IF you make sure that search engines are allowed to read your CSS/JS files. Some websites are blocking CSS/JS for bots. That would make the text seem duplicated since Google wouldn't "see" that you are hiding text. This is what you ...


2

You can style alt text. You can make alt text bold, add a background or change its color. You can also add linebreaks. I don't think it's possible to make some words bold and some words normal, but if there's a solution I'd like to have it as well. Here is an example: <img src="foo.jpg" alt="Line 1 Line 2" /> <br><br> <img src="foo.jpg"...


2

Honestly i don't see how to utilize sr-only for your purpose. But adding the text to both of alt and title attributes (<img src="" alt="your content" title="your content") will finally do the job.


2

Imagine you have a camera manual printed on paper. You can have a diagram of all elements on page 1, this diagram is figure no. 1. On page 16 you can write "look at figure No. 1" This implies that a figure can be on another part of the page because you need to have it on that other part of the page. But for the SEO point of view, a figure can have (and ...


2

They don't have metric score values like the Performance Score. Each Accessibility test is a simple pass or fail with the particular category's weight contributing too the final score out of 100 for the Accessibility assessment The Accessibility score is a weighted average of all the accessibility audits. See Scoring Details for a full list of how each ...


1

I would recommend using the <caption> element. It serves a very similar purpose to the summary attribute. <caption> is visible by default, but you can position it off screen using CSS to make it visible only to screen readers.


1

The alternative to "the Microsoft way" is the Android way. Have the active letter as a superscript on the button.


1

Is there any technique or best practice or whatever I can use to hide some text only for screen readers? I can give an answer for the "whatever" part of your question. Create an image and add text in it using your image manipulation program. Then for the most secretive approach, use CSS to define your image as a background of a DIV element. Here's code to ...


1

Observations: achecker.ca lists it as "potential problem" (instead of "known" or "likely"). They document this script check in http://achecker.ca/checker/suggestion.php?id=86. They seem to justify the problem with guideline 1.4.1 Use of Color from WCAG 2.0. Let’s see: You could only have a color-related accessibility problem with a script element if you ...


1

WAI-ARIA are attributes that can make your Web site/app (more) accessible. This has nothing to do with SEO¹. If you use HTML5, you are already using WAI-ARIA, as many elements come with default implicit ARIA semantics (example). You should add WAI-ARIA attributes if you are re-purposing an element, or if you can’t use an appropriate semantic element, or ...


1

... visitors of my website can't see the JSON file from it's URL, but that JavaScript file can access it? JavaScript is the wrong thing to be using if you're dealing with secure files. It sounds like you have javascript code that fetches special JSON code from the server you don't want guests to see, but if guests view source code and figure out the URL to ...


1

This depends on the actual content (there is an important difference between, e.g., a hash and ASCII art) and the context (editable vs. presented content). So after choosing the appropriate element (and possibly WAI-ARIA), HTML5 offers the following options: The language tag zxx (IETF BCP 47/IANA registry) can be used for "no linguistic content": <span ...


1

There's no specific recommendations for WCAG 2.0 or even in HTML5 (yet). You can probably wrap it with a <code> tag (like Joel Etherton suggested). ASCII art is different though. WCAG recommends that you provide the user a text description and a way to skip it. See H86.


1

It is not always advisable to hide output with CSS as that output is still view-able in the browser console, but in this case, the only option is with CSS. If you take a look at the source code for the_posts_pagination(), you will see that it simply echos the output from get_the_posts_pagination(). If you look into the source code, you'll see that this is ...


1

HTML5 (CR) has an own section about conversations (e.g., for "dialogues in screenplays"). They recommend to use p and punctuation span/b for the speaker name (if a hook is needed for styling purposes) (but see my comment below regarding cite) i for stage directions Simple example: <p><span>Alice</span>: How are you?</p> <...


1

For your specific situation, I would recommend: Using a th element for the speaker name, as that makes more sense in the table context. Wrapping the spoken content in a blockquote element. For example, <td><blockquote>What they said.</blockquote></td> However I feel like there must be a way to achieve the design you want using the ...


Only top voted, non community-wiki answers of a minimum length are eligible