What is the "best practice" (accessibility/usability-wise) for resizing text with Javascript?
My current solution is that for when the user clicks the resize link it adds an extra class to the body tag.
It also sets a cookie and then when the page is loaded - onLoad() - it reads the cookie and reapplys the body class tag again if needs be.
The only thing not ideal is that it loads then applys - the previous solution was to edit the CSS file before the page loaded but that threw up security warnings if the CSS file was in a different directory.
So, essentially is my solution reasonable or is there a better way?
Adam
What is the "best practice"
(accessibility/usability-wise) for
resizing text with Javascript?
Best practise is "Don't".
Specify the font size in relative units and let the native browser controls change it if the user wishes.
Attempts to duplicate this functionality rarely give the font sizes that users need (and usually end up offering a choice atomic, microscopic and tiny). Yes, some users need 72pt text (or larger).
The built in browser controls work on most, if not all, sites. You don't need to use up canvas real estate duplicating them.
Your solution sounds fine, with one addition: you can read the cookie as the page loads and add the class to the body element while the markup is generated. Most server-side languages support this: PHP, JSP, RoR etc.
Other than that, you have a solid solution.
Adding a CSS style to HTML via JavaScript
I think your suggestion is an excellent way of doing it.
It means you have the flexibility of being able to add the CSS class to any sub element rather than the body so that you can change the text size of a specific element if you so desire.
Reading the cookie on page load
To get around the issue you describe I would look for the cookie in your server side language (php/asp/ruby etc) and display the content as specified by the cookie on page load.
In PHP your CSS class definition may look like this:
echo '<div class=\"'.($_COOKIE['text_size']!='' ? $_COOKIE['text_size'] : 'normal'). '\">';
What is the "best practice" (accessibility/usability-wise) for resizing text with Javascript?
"Web Accessibility Gone Wild" sums it up quite nicely imho:
If your default font size may be too small for site visitors, then make it an adequate size.
and,
All browsers allow the sizing or scaling of the page content - why duplicate this browser functionality?
Also, Care With Font Size:
The problem here is a basic usability and accessibility issue: a good design should look good without requiring the user to enlarge or reduce the text size.
However, if you have a valid reason - feel free to ignore this.
Related
How to add Keyboard navigation to an existing website using JavaScript, CSS, or HTML?
I don't want to add any paid apps. if you know free javascript library or something let me know.
similar techs I used:
tabindex="0",
a:focus{border : solid 2px blue}
Some concrete advice:
Use standard HTML5 elements where possible. Read up on HTML5 semantics, in particular headings and navigation. Before reaching for custom classes and CSS display/visibility features, make use of HTML attributes like hidden and disabled to control the visibility and availability of content and UI.
By all means use <div> and <span> elements for presentation and layout, but pay attention to document structure. Let semantic markup reflect/express the meaning you intend. ARIA landmark roles can help, although most of them are implicit in HTML already.
Note that the "Outline algorithm" mentioned in the HTML5 spec is not implemented on any browser, so don't get too hung up on perfectly sequential heading levels, just be consistent and logical. I find that starting each landmark with a new <h1> tends to be easiest to manage, but others prefer to have only one <h1> per page (thereafter starting distinctly meaningful areas or landmarks with <h2>). Both approaches are acceptable, and the exact choice should depend on complexity and did I mention consistency?
Add ARIA attributes sparingly, and only when HTML does not already express the intended semantic. (e.g. adding aria-pressed to a <button> turns it into a toggle button). No need to add aria-disabled="true" if the element already has a HTML5 disabled attribute.
It's worth knowing that ARIA attributes work well in CSS attribute selectors. If you use them, you can style your content based on their values, which keeps things synchronised.
Ensure that all operable/interactive elements are clearly labeled using standard HTML mechanisms like <label> if possible. If a visible label is not desired, or is ambiguous without visual cues, you may use aria-label to provide an 'offscreen' one.
More complex interactions may need some special keyboard handling in javascript.
Pay attention to the many articles offering guidance about color and contrast (for users with low-vision or color blindness). In particular, make sure the keyboard focus indicator is always clear and obvious. (You mentioned the CSS outline property in your question, so you are on the right track).
Provide text alternatives for all non-decorative images. If you're using an <img> tag, the alt attribute works very well. Decorative images need this too, but with a null value. (e.g. alt="")
Bear in mind different screen sizes and orientations. Consider using responsive CSS features such as media queries, grid and flex layouts. Avoid re-ordering content visually when it contradicts the meaning of the sequence in the underlying HTML code.
Consider that users may want to increase text size or line spacing using custom settings. This means leaning on relative units such as %, em and rem, rather than px, which should be reserved for hairline borders, or media query breakpoints.
VALIDATE YOUR CODE using an HTML validator. Free dev tools such as axe-core will also give very useful feedback and helpful guidance.
Use stack overflow for concrete questions. It's pretty reliable. Many good accessibility questions have already been asked and answered. Search first!
If you follow this advice, and if your product is not too outlandish in design, you will most likely be able to approach a high level of conformance with WCAG A/AA without too much pain.
Finally: Transparency is more important than full conformance. If you have WCAG violations you can't fix in the current iteration, be open and honest about it, and you will be in the clear, legally speaking. Perfect conformance is rare, and especially so for a first time accessibility implementation. Welcome to this challenging and rewarding field, and good luck!
I'm looking to control how something appears when printed from the browser to a 2.4"x4" label.
Currently, when I use a word processing application like Pages (Apple's version of Microsoft Word), I can set my document size to 2.4" x 4" and hit print and I know all of the content will fit on the label. I'm trying to achieve the same thing but in the browser.
I don't know for sure, but I'm thinking when I print from the browser currently it is including a lot of the white space, and trying to scale it all to fit on the label, which distorts the content.
I'm fairly new to front end web development, so I'm looking for some guidance on how to approach defining a printable area. I'd rather it all happen inside the browser, but I considered maybe having the site generate a PDF of the correct dimensions as I think that'll handle printing similarly to Pages.
Hope this makes sense!
While there are styling capabilities that cater to paged formatting, the web is built around continuous (paged-less) documents. Because of this, paged formatting is troublesome. For example, specifying the document page dimensions from the document isn't something you can do. Instead, the printer dialog provides a choice of page sizes and the rendering engine tries to fit your content into pages of that size.
CSS has a module for paged media which includes: page-break-after, page-break-before, and page-break-inside for telling the engine how block elements should break across pages; #page sections for specifying CSS that applies only to paged environments; and :blank, :first, :left, and :right psuedo-elements for creating rules tied to certain pages.
Should I change HTML layouts with JS or CSS?
I see a lot of use of CSS display hiding or showing elements dependent on media queries. Maybe hidden duplicate HTML that appears in a different location on mobile. A hidden mobile menu. Etc etc
But with JS i can have one layout that "morphs" dependent of screen width. No hidden duplicate markup, just moving HTML around.
Is this not a good idea?
Programatic changes on the layout will depend on the robustness and performance of your JS code.
CSS changes depends of the browser's and it's more efficient for sure.
About the enviroment's measure you can act upon them with css media-querys.
You should not forget, that some browsers/users disable JavaScript for security-reasons.
You should use CSS where it is possible. So your Website can be viewed in all Browsers.
If you have to change some styling dynamically, and there are no CSS-alternatives, javascrpit might be the right choice.
It really depends on what you want to do, if it's basic animations, then css is here for you, if it's more advanced animations, then you should use JS, as other users said, keep in mind that some users disable JavaScript for security reasons, but i think they don't exeed 5% of the users , here's some links to help you find out what's best for your use of css or JS :
Myth Busting: CSS Animations vs. JavaScript
CSS Versus JavaScript Animations
For media queries, here's an answer that respond to your question. With the media queries, you won't have to hide anything, you will use a different CSS code for the same part of the HTML, but with different CSS attributes only for mobile/responsive use
For the SEO, here's and experiment that shows that googleBots crawl the Js without problem.
Edit : if you're able to use some server side language(php, asp...), use CSS for the design part, and the server side language for the other things, and only Javascript when you find it usefull. if you can do something with the CSS instead of JS, then do it with the CSS.
I have a website that I need to convert to HTML5. I need advice and whether it can truly be converted to an HTML5.
Please tell me, how I should start? Should I just start using HTML5 code in lieu of existing HTML4.
I will need to later add video content and a image scroller. Also if need be, should I redesign the site from scratch? I dont think this should be a problem.
Also the site is not friendly with form factors other than deskop/laptop.
It does not work well with mobile small display for which case HTML5 is anyways needed.
Do not hesitate or think too much. I need to know what you guys have in mind before I take a major step. I need to do this in under a month, I cannot afford to waste anymore time on it.
I have used gimp to make the icons for this website, but i dont think much of those icons will be needed with the new code.
Also, should I make a design prototype in gimp for my website. Later on I can add the css/html5. Do you think its worth the extra time or should I use one of the ready made templates?
Yes any site can be converted in HTML5. It is simple process, first you have to change doctype from old to new which is very short doctype. Please change your doc type statement on top of site to following.
<!DOCTYPE html>
Meta coding also another thing you need to change from old version to latest which is following.
<meta charset="utf-8">
After changing your meta coding now see all div and change them to Semantics div. In past we used mostly div to separate part or to design our layout. Now try to see if some div have any specific meaning like header, footer, article, section and convert them accordingly. Only remaining div should for design purpose but all other who have specific meaning should be converted to tags which are provided by HTML5.
Now another thing need to be done is Nav, where ever you see navigation please put it in tag as html5 uses this tag to specify list of links.
When you do all this there is possibility that old browser would not support so to bring support back use add Shiv a javascript that bring these special tags in previous version of html. Now change your css as all div you change require redefining tag instead of div in css too.
As for your part of Mobile version or sizing it is not of HTML5 but it is about CSS you have to use media queries in css to customise different styles for different size. Media query will let you know what size of display is and than you have to add styles and do changes some big parts break in linear format to give perfect view in Mobile and Menu be removed and a button is added.
Now add video and other media but remember that different video formats are supported by different browser so you have to provide multiple format to be used in html5 video. Also have to use for compatibility purpose old flash.
GIMP you can use if you want to redesign or change design of site otherwise for html5 I don't see its usage.
You don't have to use GIMP to design everything from scratch, follow the steps described here:
http://www.w3schools.com/Html/html5_migration.asp
they will guide you to convert your existing website to use HTML 5
How can I detect the number of printing page will be on a form using JavaScript?
I need to get the number of pages that a form would be so I can stick a watermark per page to be printed.
Thanks.
I'd recommend that you read this article by A List Apart
#page front-matter :left {
#bottom-left {
content: counter(page, lower-roman);
}
}
(this uses CSS3)
I don't think that can be done (except, as marcgg points out, with CSS3, but that is not widely enough in use yet).
You could give the browser some pointers by inserting elements with the page-break-after or page-break-before attribute, but that will not give you total certainty about what way your pages get printed in.
Depending on your layout, you may be able to work something out by placing an absolutely positioned image in relation to an element that has page-break-before: always. I've never tried that, though, and you would have to play around with it to see whether it's any good.
Background images are obviously not an option, as they are excluded from printing by default in all browsers I know.
I think if you want to get reliable watermarks, you will have to resort to generating PDF files, for example using the PHP-Based fpdf library.
Considering that even somewhat standard paper size differ (letter vs. A4), this is not really feasible. I usually generate a PDF when I need this kind of control.
AFAIK, it's just not possible. There's no way plain JavaScript can interact with your printer to determine settings, page numbers, or anything, without an ActiveX control or other plug-in.
You can, in some browsers, use CSS to specify where pages will break and keep track of page numbers that way, but you have to rely on the users not to zoom the page or increase the text size of the page before they print.