Accessibility of html elements that change innerHTML using Javascript - javascript

I have this number credibility counter on my site that as the user scrolls, the headings with numbers count upwards from zero to the final total. I think it's an eye-catching way of showing off credibility, but as far as accessibility goes, I don't know if dynamically changing the numbers with JavaScript will confuse people who use screen readers. I thought about adding an "aria-labeledby" attribute to the heading so that the screen reader will read that instead of the dynamically changing text, but all of my google searches say that headings don't need aria labels, because screen readers will read the text inside the heading tags.
My question is if I add an "aria-labeledby" attribute to the heading, will that mess up how screen readers read the element?

You normally don't need to do anything special.
Given that JavaScript is supported in the user's browser, the text of the heading will also change dynamically for screen readers, too.
That dynamic change in content may be problematic for screen readers if it isn't reasonably expected.
More especially, for example, when something currently being read is suddenly replaced by something else or completely deleted without user intervention.
A common case of this is a carousel with content that changes every few seconds. Such carousels are usually bad for accessibility if they can't be easily stopped because of this reason among others.
However, in your case, for a simple counter, it's probably all right. There probably won't have much harm.
Attributes aria-label and aria-labelledby can only be used reliably with interactive elements that can be focusable.
ON non-interactive elements, it isn't guaranteed to have them read on all platforms/browsers/screen readers.
So, it's anyway not a good solution here.

Related

seo friendly modal box

I have created a modal box that initially hides the modal box contents with css display: none. Then, I heard from some article that using this display:none could prevent google bot from crawling the contents, and it is not good for SEO.
Instead, it recommends me to use absolute positioning to create negative position values and hide that content.
I am trying to look for some good example of modal box that actually use this technique but I was wondering if:
modal box contents are really hidden from google to crawl?
Is this common practice to use negative position value for absolute positioning when creating a modal box?
Any good example I could look?
Don't use 0 height, negative margins to hide content. Google is able to understand now that you have hidden content in this way. Actually, inserting zero height for an element with text in it might trigger a flag with the Googlebot.
If you need to send text info to the crawler, then insert that text in the meta description tag. This way visitors do not see that, but Google will.
I'm an SEO. Google never gives a definitely yes or no answer, but the general consensus is placing content in modals and hiding them results in that content still being crawled, but it is held with less significance. This makes sense as most of the information Google is looking for would/should be presented to the user when the webpage is opened, not after. The majority of your ranking results will be due to your immediate on page seo. I wouldn't experiment with trying to transition or hide content in this way as Google does have methods of detecting this sort of thing, an could result in an even worse outcome for the site.

Accessibility issues with modifying DOM with JavaScript/jQuery

I am developing a website for a report. The majority of the report fits within a column that can be no larger than 800px. However there are a couple of sections of the report that include tables that are just so detailed it is impossible to fit within that space.
The solution I am considering is to use JavaScript/jQuery to detect tables that are too large for the column and turn them into links, that when clicked, brings up a light box using more available screen space and displays the table.
This does not seem to difficult to do… but then I started considering accessibility.
So after detecting the oversized tables should I cut them out of the DOM and store them in a variable or should I hide them?
Do accessibility devices such as screen readers use the original source or do they respect changes made by Javascript?
If you hide the content with display:none then the screen reader will not see it until you toggle that attribute.
You could also rip the content out of the DOM as the screen reader only looks at the rendered DOM.
When you create a lightbox, you will have to set focus into the lightbox in order for the screen reader to read the content.

Scale height of div with jquery - How will google react (SEO)?

Suppose I have a big div including much text. I want to show my readers only the first few text-lines. So I thought about scaling down the height of the div with javascript/jquery and add a "Read more" button.
Like that:
$('#content').height(20);
Here's a complete example: http://jsfiddle.net/zvQsX/1/
I guess google will index all the content, but will google interpret this as spam?
Thanks for your help!
Best
Andi
I'm not sure, but I think Google interprets a bit of CSS and display:none and simply would consider a hidden content as non-existent or at-least as less relevant than what you display directly.
Your technique is different and I honestly don't know how Google would interpret it. If we consider the law's intent, you are actually giving your users the whole thing (they can read it if they want and it's on the same page), and it shouldn't be considered as black hat thingy.
That said, why do you want to use scaling of div instead of display:none or text-indent:-9999px ?

Blur all the objects(Images,div,text..) that comes behind a div tag

Need your help.
I created a static semi-opaque banner which stays at the top of a website. When a user scrolls the website the entire container objects goes underneath the banner. I want all the objects (images, text..etc) getting blury effect as it goes underneath the banner.
Thanks
The only way you're going to be able to do this is by getting fancy with some CSS and javascript. CSS doesn't support blur directly, but you can emulate it with text-shadow. Images can also be blurred with a little jquery/css/javascript magic, but will be problematic because you can't partially blur an image (what happens when only part of the image is under the banner?). It could probably be done by layering your images and keeping track of their position on screen, but all of this seems like a lot of work for a very small return.
So, assuming you've decided to give all of this a shot, you're going to have to use javascript to determine which parts of the page have passed under the banner and apply the style to those parts. The difficulty of this task will scale with the complexity of your page layout. In a best case scenario, your banner and content container are both 100% the width of the html body. At this point, it would be fairly trivial to write some kind of scanner that traverses the dom every time you page scroll to find elements that the blur should be applied to. However, best-case-scenario is rarely the case at hand, at which point I'd recommend abandoning the effort to pursue something with a greater ROI.
This isn't possible with CSS nor jQuery. You might be able to do something with IE's filters, however that's IE only (of course), and will invalidate your CSS.
Currently, there is no way to do this, although something might come along in CSS 4 or something.
The Chrome nightly builds support some filters, however there isn't an alpha blur filter (yet, at least).

Text being different sizes in different browsers

I'm sure someone's had this problem before but I can't figure it out because I guess I just don't know enough.
I have a form. One of the inputs has some JS attached so that as the user types (keyup), a div elsewhere on the page updates with what they're typing. e.g. They type "hello" and it appears in a div below.
I don't want the div which updates to get any bigger than 900px wide and only one text line high.
At the minute I have the div with overflow hidden so any extra text just disappears, also I have the maxlength of the input set so it can't get too big. However, since different browsers space text differently, in some browsers it'll allow (for example) 10 words, in others it'll allow 11.
I have done the css reset thing which is meant to get all browsers acting the same but the spacing of text doesn't seem too affected.
Is my only option trying to use css to make the spacing between characters the same accross browsers?
Can anyone suggest any alternatives?
EDIT
here's the css reset I'm using:
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}
The font I'm using is Arial 32px
Your CSS reset is a pretty poor one. It fixes a lot of display problems but down not address text sizing at all, so it's useless for this issue. You can find a more comprehensive one here, but changing your reset page may have unintended effects. I'll suggest using some inspection tools to check if you have padding or margin shrinking the available size to write text in, and if not then setting all aspects of the text so that it is rendered consistently.

Categories