Everything looked great until I widened my site.
I have checked the code, firebugged all and for 2days I have only gotten more frustrated and am praying someone here could be of help - maybe a fresh set of eyes will help.
I have linked the page and the cssdesk code for you see what is going on.
Thanking you in advance.
In css desk the columns are correct but on the website it looks like everything is pushed down for some reason.
http://www.cssdesk.com/BVCf2
http://jason.carpedp.com/coinlogistics/charities-co-ordinator/aviation-sector/
don't use closing p without opening p and don't use -- in comments, some browsers interpretate it as end of comment.
<div class="left"><!--COLLEFT--NOTHING-->
</p>
<div class="airport"><!--CENTER--><br/>
</p>
<h4>AIRPORTS</h4>
use w3c validator to find more errors:
http://validator.w3.org
I had a look at the code and did a quick download of the page and dropped it into a HTML editor.
From what I gathered, there is a blank tag (code line 86 on my editor) in the airports column which is setting everything down a level.
After removing that it started displaying fine on my side again.
Original
<div class="airport"><!--CENTER--><br>
<p></p>
<h4>AIRPORTS</h4>
<p><img alt="Donation boxes are strategically placed in busy areas of the airport" src="./Aviation Sector - Coin Logistics_files/airport.jpg">
</p>
<p>With a substantial rise in international and foreign travel in recent years; the volume of foreign coins entering and departing the airports have increased. This makes airports the perfect location for the donation boxes to be located, giving travelers the opportunity to rid themselves of their unwanted change and enabling them to perform the good deed of donating to the designated charity and allowing their small change to make a big difference.
</p>
</div>
New
<div class="airport"><!--CENTER--><br>
<h4>AIRPORTS</h4>
<p><img alt="Donation boxes are strategically placed in busy areas of the airport" src="./Aviation Sector - Coin Logistics_files/airport.jpg">
</p>
<p>With a substantial rise in international and foreign travel in recent years; the volume of foreign coins entering and departing the airports have increased. This makes airports the perfect location for the donation boxes to be located, giving travelers the opportunity to rid themselves of their unwanted change and enabling them to perform the good deed of donating to the designated charity and allowing their small change to make a big difference.
</p>
</div>
if you check your html code in firebug you 'll found some unnecessary empty tags like <p></p> and <br/> just remove them and that is all.
Related
We have a project at my work at the moment around ensuring we meet accessibility standards on our website.
Our emails are built using Salesforce Marketing Cloud layouts. Does anyone know how we can see or test how 'accessible' they are?
I can test using ReturnPath to see how they render on various devices and that gives me results for colour blindness, but I'm not sure how to test how well they would or wouldn't work with a screen reader for example
Emails are a tough one from an accessibility perspective. We are still stuck using tables for layout even in 2021!
We can't use WAI-ARIA and CSS is very limited.
As such I have a smaller checklist for emails that covers the important stuff we can control.
The main things I would look at are:
Reading order
Make sure that the email reads left to right and then downwards (assuming the language is a left to right language, otherwise reverse it)
Use headings
Email marketers often just style normal text instead of putting proper headings in. Make sure headings are in fact <h2> to <h6> with a single <h1> explaining the purpose of the email at the start.
Also make sure that the headings do not skip levels (so don't go from <h2> to <h4> for example).
Colour contrast
The exact same rules for websites apply to emails. I would recommend running the colours through the Web Aim colour contrast checker for your text and background around the text, button backgrounds and text etc.
Alt Attributes
Alt attributes on images is the big one you need to check for especially in emails where images might be the only content within a hyperlink. As you can't use aria-label or visually hidden text in an email alt attributes are the only way you can make a link have meaning if it contains an image (plus as email clients block images it means there is meaningful text for everyone else not just screen reader users).
Meaningful Link Text
Along the same lines make sure links do not just say "Read more". Instead make link text meaningful e.g. "Read our article on X Y Z".
Use a descriptive subject line
This one is the only one that is "difficult" as a marketer. You want subject lines to intrigue people to open the email, however for people with cognitive impairments cryptic subject lines can be disturbing / confusing etc.
Getting the balance between "giving the game away" and meaningful subject lines is difficult, if unsure err towards meaningful (it may help your open rate / conversion rate anyway so A / B test it!)
View in Browser
Due to the limitations of email clients the best way to ensure accessibility is to have a custom "view in browser" link in the email (as salesforce etc. are very unlikely to do a good job of the browser versions of their emails).
That way you can use WAI-ARIA, visually hidden text etc. and mark the page up properly, complying with WCAG 2.1 (and very soon WCAG 2.2) requirements.
Obviously I am aware of the amount of work this entails but once you have a template and components built that are accessible it does become much easier.
Testing
Personally I would just test manually, but I am sure somewhere out there an email testing service exists similar to Axe Accessibility Checker.
But given the length of a typical email I would say a manual check will only take 2 minutes once you know what to look for so a service may not be worth it.
You could always copy and paste the email HTML into a file and save it with a .html extension and then open and test it in a browser / accessibility checker. But you might get a load of issues you can't resolve due to the use of tables for layout.
Finally - learning to use a screen reader takes less than an hour, grab NVDA or VoiceOver and test the email yourself, if you can understand it and access all the same information as everyone else then send it!
Is this possible an correct to have more than one element on a page marked with role="main" attribute?
There is a page with search results divided into portions. Portions are similar to pages, but a new portion appears on a page when more data came with AJAX.
I would like users of JAWS (and so on) understand the structure of the document and provide them with information that there is a search result page in front of them and it is divided into portions.
This markup is pronounced by JAWS exactly as I wish:
<div class="main" role="main" aria-label="Search results">
<div class="main__portion" role="main" aria-label="Page 1">
Link 1<br/>
Link 2
</div>
<div class="main__portion" role="main" aria-label="Page 2">
Link 1<br/>
Link 2
</div>
</div>
But is looks overheaddy to mark every single portion with role="main". Which role suits better? And the requirement is that JAWS has to read "Search results page 1" when focusing on the first link.
Marking each div as main will validate, but it doesn't provide useful information to a non-sighted user. Main is used to mark the primary content as distinct from secondary content, so using it on your outer div as you already have is appropriate. Putting it on all the inner divs as well just becomes noise and one more thing to listen to before they get to the actual content.
Screen reader users will find it more useful to know how many results there are in total and which one they're up to. This can be done using list markup, or giving a total at the top of the page then numbering each result as part of its title/heading/link text. As a general rule, any information which is obvious to a sighted user should also be present in the content or the markup, with ARIA only providing a fallback or additional support if necessary.
WAI-ARIA main role:
Within any document or application, the author SHOULD mark no more than one element with the main role.
But it’s a SHOULD, not a MUST.
(Note that HTML5’s main element may only be used one time in a document.)
I'm not a web developer. I'm a budding game developer and I'm just making myself a website for my portfolio.
I made this as a little college project. Its just one html page with almost nothing on it. And everything is added to the DOM with javascript (when you go to a new 'page' the last stuff is removed)
For my portfolio site I want to do something similar to this. Where the title / breadcrumbs and so on remain static and the content changes depending what project you want to look at.
In my bookshop example the JS add/remove was convenient cus all the books had the same types of info and it was just stored in a little database like structure.
For my portfolio website each project content bit might have a different layout / info as each project is different. (eg some might be just a video, some might be all text etc.)
So iframe springs to mind but I know that iframes are bad for accessibility and thats something I want to avoid as a general principle.
Any of you web guys have any ideas as to how to load a page (or achieve something similar) into another page without iframe so it is really part of its host page and reads that way not just visually but would read properly by a blind person say (I forget the word for this!)
Consider using php to fill a div with the information. You can then store the project content in a separate file from the rest of the page, and it is separated from a markup standpoint as well (which is what I'm guessing your after?)
Note that the user will receive both pages together, its only separate from the server's point of view.
For example (untested):
<html>
<body>
<div id="projects">
<? $page = file_get_contents("projects.html"); echo $page; ?>
</div>
</body>
</html>
I've read several similar posts but am still at a loss so I'd appreciate some help here.
In Firefox & Chrome the page looks exactly as it should http://www.deductyourhome.com.au/ wheras at the widget, Home Middle 3, the Recent Comments scroll has ridiculously huge font and is and overlaid.
Further down that widget, "Take The Test Now" is too large and the following font is in bold when it shouldn't be and below that, the font under "Contact Us Today" also should not be in bold.
Essentially, this widget should render the same as Home Middle 2 (i.e. the column to the left).
At Home Bottom 1, 2 & 3, all font except headings should not be in bold and the second one is clearly erroneously enormous and overlaid.
Here's the code for Home Middle 3 widget:
<!-- home middle 2 -->
<iframe width="290" height="290" src="http://www.youtube.com/embed/S4q4mas5aPE?hl=en&fs=1" frameborder="0" allowfullscreen></iframe>
<div><h1 align="center" style="line-height: 26px">
A Substantially Tax Deductible Home Improves Your Wealth & Lifestyle!</h1></div>
<div align="justify" style="font-size: medium; color: #333399; font-family: helvetica">
<p>Deduct Your Home provides fresh thinking that's vastly superior in many ways to anything your financial planner, finance broker, stock broker, bank, real estate agent, lawyer & accountant have ever put on the table or could hope to devise and perfect anytime soon!</p>
<p>It shreds debt fast saving you tens to hundreds of thousands in mortgage interest!</p>
<p>It smashes tens of thousands or more from your annual assessable income by legally claiming a huge proportion of your home mortgage interest, council and water rates & building insurance and even lets you claim depreciation on your home!</p>
<p>It sends capital gains tax packing if you later sell your home at a profit (here’s hoping when the time comes)!</p>
<p>It’s often cash-flow positive within mere months leaving the rest of your life to soak it up!</p>
<h1 align="center" style="line-height: 26px">
Checked & Approved By The Authorities!
</h1></div>
<div align="justify" style="font-size: medium; color: #333399; font-family: helvetica">
Our system, products and services have been extensively examined and approved by each of the Australian Securities and Investment Commission, the Australian Taxation Office & the Tax Practitioners Board to the extent they've respectively confirmed we’re not operating an unlicensed financial services business, promoting illegal tax exploitation schemes or providing unregistered tax agent services!</p>
<p>Furthermore, in response to our correspondence to The Federal Treasurer (in seeking certainty for our clients), we requested that he discuss our home business proposals with the Federal Commissioner of Taxation and to kindly get back to us with any concerns etc and where we have since been twice informed in writing by his office, that in speaking, the Commissioner said our clients can obtain the Government's protection regarding their tax affairs by way of applying for a private tax ruling as based on our home business proposal. Ladies and gentlemen, this is as good as it gets - period. Accordingly, you can now tap into our exclusive intellectual property (IP), confidential information or know-how (it's all the same thing), to achieve optimum, ultra-safe outcomes on this basis and that noone can compete with or deny.
</p><p>
We further take this opportunity to thank the ATO for respecting our claim of ownership in the IP in NOT having published any details into the public domain as would otherwise normally have occurred under the circumstances in which the relevant taxation officers were made aware.
</p><p>
Of note, BetterLifePanel®, a related entity of our parent company, is Australia’s sole training provider to progressive accountants, registered tax agents, lawyers and financial planers, regarding proprietary and highly advanced, adviser training and client management systems on these same cutting-edge processes. Accordingly, once we have assisted you to secure your own tax ruling, we can point you towards qualified and suitably trained, professionals to assist you into the future with these and other matters!
</p><p>
The bottom line is we'll help you to obtain written ATO confirmation on your circumstances that the sorts of things we'll discuss with you are true and proper etc!</p>
Now that's safe!
</p>
<h1 align="center" style="line-height: 14px">
Make It Good Debt!
</div>
And here's the code for Home Bottom 1 widget:
<!-- Home Bottom #1 -->
<div align="justify" style="font-size: medium; color: #333399; font-family: helvetica">
<p>John earns $120,000 p.a in his job.</p>
<p>He lives in a nice home that's worth around $1,000,000 with a mortgage of $600,000 # say 8% interest (long-term average).</p>
<p>He can likely restructure himself to attain deductions of around $50,000 p.a. that he can use to offset his wage and salary income going forward thus saving him around $18,500 p.a in tax (medicare levy excluded).</p>
<p>He can also pay no capital gains tax in future should he hopefully sell his property for a profit.</p>
<p>See more examples HERE</p>
</div>
<!-- Start of StatCounter Code -->
<script type="text/javascript">
var sc_project=6797160;
var sc_invisible=0;
var sc_security="c52d8549";
</script>
<script type="text/javascript"
src="http://www.statcounter.com/counter/counter.js"></script><noscript><div
class="statcounter"><a title="wordpress visitor"
href="http://statcounter.com/wordpress.com/"
target="_blank"><img class="statcounter"
src="http://c.statcounter.com/6797160/0/c52d8549/0/"
alt="wordpress visitor" ></a></div></noscript>
<!-- End of StatCounter Code -->
And here's the code for Home Bottom 3 widget:
<!-- Home Bottom #1 -->
<div align="justify" style="font-size: medium; color: #333399; font-family: helvetica">
<p>“Imagination is everything. It is the preview of life's coming attractions". ~Albert Einstein.</p>
</br>
"Some people get lost in thought because it's such unfamiliar territory". ~G. Behn.</p>
</br>
"No problem can withstand the assault of sustained thinking". ~Voltaire.</p>
</br>
"Too often we enjoy the comfort of opinion without the discomfort of thought". ~John F. Kennedy.</p>
</br>
"Thinking is the hardest work there is which is probably the reason so few engage in it". ~ Henry Ford.
</div>
Your Take the Test title does not have a font-size specified for the h1 tag so it just uses whatever the browser default is. Try specifying default font sizes for all your h tags. This may fix your other problems too. You specify one for h1.content, but the widget is outside the content area I believe.
Seems like rel-license only applies to pages not to specific elements... anyone spotted usage for page elements in the wild?
Have a look here and see if this is along the lines of what you're needing...
Microsoftmats rel-license information
The fact that rel-license doesn't cover specific elements is a known bug.
The following is specifically marked as an open issue on the master list of rel-license issues:
2006-04-07 raised by Evan:
It's not clear how to associate a license with part of a page, such as an image or embedded object in the page, or a single news entry on a news page. A typical use-case would be a Flickr page, for which the image is licensed under a CC license but the page itself is not.
I've never personally run into a situation that required this yet, but would be inclined to do something like this:
<p id="someparagraph">Lorum ipsum dolor sit amet.</p>
<div about="#someparagraph">
cc by 2.0
</div>