I am thinking of various ways to blackout my site for a blackout protest. Which technique would work best?
Method 1 (easiest): Replace existing style sheet with a new one that has this code in it:
* { display: none; }
The benefit here is that search engines can still crawl the site, and people that are familiar with the protest and likely to understand its ramifications can still view the content by viewing source. The downside is that people might think something is wrong as there is no content at all displayed (I am fine with that).
Method 2: Add a background-color: #000; to body and color: #000 to all text elements except for any text element that may be describing why the site looks different. The benefit to this is that more people will understand what is happening. The disadvantage is that it does not really portray the message of the protest. Also, I think it may be bad practice to give text the same color as the background as it is a proven spam technique.
Method 3: Display a test pattern.
Many sites just block out their logos or have a dismissible dialog. I think you can still support a blackout protest without a 503. The point is to make people aware of the problem. You can put up a full-page fixed black div with a message and a link to relevant information. Even a banner about it would be helpful in getting the word out.
Here's what I'm using at http://thinkingstiff.com (link potentially NSFW due to language):
<a id="sopa" href="http://sopablackout.org/learnmore/">**** SOPA</a>
<style>
#sopa {
background-color: black;
color: white;
cursor: pointer;
display: block;
font: normal 150px/500px Helvetica, Tahoma, Arial;
height: 100%;
letter-spacing: -11px;
position: fixed;
text-align: center;
text-decoration: none;
width: 100%;
word-spacing: 50px;
z-index: 9999;
}
</style>
Create a new page that returns an HTTP 503 response code and a response body with regular content. It won't hurt your SEO ratings and it won't affect the rest of your site.
Related
So rather than code dumping, I'll just link a reference to the types I've seen so far.
https://www.html.am/html-codes/marquees/html-marquee.cfm
While these are fairly close to what I want, they're just not quite right. The closest one to what I'm after is the bouncing text... But these are all made based on a container that's bigger than the text.
How can I get my text to scroll left and right only when I have text overflow? (https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow)
I thought all this would be possible in css. But if not JS would be fine.
div[type=text] {
border: solid 1px black;
height: 20px;
width: 100px;
font-family: sans-serif;
overflow: hidden;
}
<div type="text">abcdefghijklmnopqrstuvwxyz</div>
Solving the Design Issue
Deliberately designing your content to not fit within view might actually be the fundamental issue to solve here. Maybe it is better for users to show the content visibly without any need to scroll, animate, or script it.
There are many reasons not to animate stuff on your web page from problems you cause for groups of your users, to the pure distraction of moving things.
So, my main answer is you probably ought to design a different solution (such as, giving content enough space).
You'll find almost universally that the marquee tag is to be avoided (and that doesn't mean using a different tag and then animating it with CSS or JavaScript). However, we can still have some fun theoretically, just avoid in real life as it is deprecated.
Fun With Marquee
You can use alternate, with some additional non-breaking spaces to show the content in a visual feast of sliding text. I don't think this is good for your users, but marvel in the potential to have lots of moving things.
div[type=text] {
border: solid 1px black;
height: 20px;
width: 100px;
font-family: sans-serif;
overflow: hidden;
}
<div type="text"><marquee behavior="alternate"> abcdefghijklmnopqrstuvwxyz </marquee></div>
I have a download link, and I can't find any good accessible solutions for how I should handle this situation.
I have a common rule of thumb I'm following: "Buttons Do Things, Links Go Places"
My scenario is that I have a button which triggers a document download (same page)
I believe that this should be an anchor with a role of a button because its explicitly not triggering a redirect or navigation:
<a role="button" href="download.docx" download>Download File</a>
However, its strongly recommended to not change the native semantics of an element.
My colleague suggests this would be the solution
<a href="download.docx" download>Download File</a>
However: the issue with this is that the Screen reader doesn't (in my opinion) give a clean enough output. It mentions this element is a link, which could be confused with a redirect.
The role="button" solution tells the screen reader to inform the user that this link is acting like a button which I think is more specific for our particular case of the "download button".
Any clarity would be greatly appreciated.
I'm referencing: https://css-tricks.com/building-good-download-button/
Short Answer
A hyperlink is correct and expected behaviour. As your link text contains the word "download" there will be no confusion, you do not need to do anything else.
However there are additional pieces of information for downloads that you should include if you are able such as document type and file size.
Oh and please do not use the title attribute.
Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g., requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).
Source: HTML standard
Long Answer
Firstly, please do not add the title attribute to your download link, it is useless for screen readers on mobile, it is useless full stop on mobile for everyone else, keyboard users do not see it etc. etc.
Instead you should (with all links not just this particular link) provide extra information.
The additional file information that should be provided is:
File Type ("Word Document" or "docx")
File Size (in KB)
Optional - How the link behaves (new window if applicable).
In the examples below I have assumed new window just for an example, as you are downloading a document you do not need to add this information as it is assumed all actions are performed in the same window and you only need to add this if you open a new window.
Quick aside: "Buttons Do Things, Links Go Places"
A hyperlink is correct semantically so don't worry about that.
A slight variation to your phrase (which I like and am stealing by the way!) should be "Buttons Do Things, Links point to URLs". Not quite as "pithy" but better for helping you make decisions. If you can type it into the URL bar then it is a hyperlink, guaranteed.
Now onto your options...
Full information in the "button"
Now if your design and site allows it is recommended to provide the additional file information to everybody not just screen reader users.
The following fiddle shows one way you could do this
a{
display: block;
height: 50px;
width: 450px;
font-size: 22px;
padding: 10px;
background-color: #333;
border: 2px solid #666;
border-radius: 4px;
color: #fff;
text-decoration: none;
font-weight: bold;
text-align: center;
}
a span{
font-size: 16px;
font-weight: normal;
color: #ccc;
}
<a href="document.docx" download>Download Document<br/><span>Microsoft Word (docx), 246KB (Opens in New Window)</span></a>
A more realistic way to do this
Now in the real world the odds of you being able (or allowed) to show all that information in the button is very slim, but it is still useful to screen reader users even if you can't provide it to everybody.
At this point your best option is "visually hidden text".
Yup, aria-label, aria-labelledby etc still don't have full support sadly and our aim is maximum usability.
So good old visually hidden text works all the way back to IE6, if your site works that far back it would be a miracle anyway (I know mine don't!)
The below example uses my visually hidden text class, as support is better than sr-only and other screen reader only classes and it is futureproofed for the next few years (as clip has been deprecated).
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
a{
display: block;
height: 28px;
width: 450px;
font-size: 22px;
padding: 10px;
background-color: #333;
border: 2px solid #666;
border-radius: 4px;
color: #fff;
text-decoration: none;
font-weight: bold;
text-align: center;
}
Microsoft Word (docx), 246KB (Opens in New Window)</span>
aria-describedby - A hybrid approach
If you can't use the first option then we could fall back to a hybrid approach.
We make the button nice and prominent, but underneath add the file size info etc.
For this we use aria-describedby which points to the ID of the paragraph below.
THe only down side is a few browser / screen reader combinations may not support it but hey, life is about compromise and the below is clean and you are more likely to be able to implement it than all the information in the button itself.
a{
display: block;
height: 28px;
width: 450px;
font-size: 22px;
padding: 10px;
background-color: #333;
border: 2px solid #666;
border-radius: 4px;
color: #fff;
text-decoration: none;
font-weight: bold;
text-align: center;
}
p{
margin-top: 10px;
font-size: 16px;
font-weight: normal;
color: #444;
}
Download Document
<p id="doc-info">Microsoft Word (docx), 246KB (Opens in New Window)</p>
What should my link text be?
Your current link text may just be an example, but it should be descriptive.
If the document is about cheese strengths it should be "Download Cheese Strength Report".
If the title is complex then yet again use visually hidden text to give a more descriptive name to your link. This is because screen reader users do not always navigate in a linear fashion. They may decide to loop through all the links on a page, or headings, or sections etc.
For this reason if you had 3 documents on a page and their text was "Download Document" this would be completely useless to a screen reader user.
All links on a page should make sense without any surrounding information to support them.
UPDATE
It seems that the title may hurt/confuse the screen readers, so according to W3C the best way to improve a11y is by making the anchor text relevant and descriptive
More info about this, you can find here also
Old solution (do not use)
You can always use title attribute (with a copy different than the text), something like:
Download File
Here's a comparison
See more info here
I looked at all the other similar questions and couldn't find an answer.
So first of all I'm noob at programming and I just started learning CSS.
I made a page with these codes:
<html>
<style>
body {
p.Welcome {
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 23px;
font-weight: bold;
color: white;
text-align: center;
}
section {
border-radius: 1em;
padding: 1em;
position: absolute;
top: 49%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
</style>
<section>
<p class="Welcome">hi</p>
<img src="blablabla whatever image" />
</section>
<html/>
And I want to force desktop version even on mobile, like even when I open that page with mobile, the same page must show up with no change in resolution and other stuff.
I've added some comments below, just to help you correct some errors in your HTML. You have to understand that errors like this leave a lot up to interpretation of the browser, to which each may use a different engine or different method which can't guarantee uniform results.
Comments Added:
You should not use empty rule declarations (located under body rule in CSS).
Always look for closing tags. Try to use maybe Sublime, VS Code, or Atom as they have "problem" notifiers that may help you catch these mistakes when learning. (located under body rule in CSS).
If your goal is responsiveness, try and stay away from absolute positioning, or you'll have to media query your way to the same results. (located under section rull in CSS).
Every tag opened must be closed. Especially for compatibility. Every browser will handle these errors differently, so leaving it up to the browser to decide the result, you won't see the same results in every browser (located above body closing tag in HTML).
When you close HTML tags, the format is </html>. Slashes after are for self-closing tags. (located at the end of the document).
To answer your question more directly, it's difficult. You should understand all screens have varying sizes and dimensions and you must design around this, no exceptions. There is no way to force otherwise. If you set an element to have a width of 800px but the screen is 324px wide, you will not fit that element on the screen.
So my answer is that you're looking for a way to get out of designing for responsiveness, and you can't. Yes, it can be a lot of work, but you'll develop habits as you go. Might I recommend freeCodeCamp as well, since they've added some excellent challenges to help teach newer practices to make your projects more responsive, as well as fundamentals like box model.
<!-- Always specify your DOCTYPE, note that DOCTYPE is case sensitive. -->
<!DOCTYPE html>
<html>
<!-- You should have a head tag -->
<head></head>
<style type="text/css">
/* You should not use empty rule declarations */ body {}
/* Always look for closing tags. Try to use maybe Sublime, VS Code, or Atom as they have "problem" notifiers that may help you catch these mistakes when learning. */
p.Welcome {
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 23px;
font-weight: bold;
color: white;
text-align: center;
}
section {
border-radius: 1em;
padding: 1em;
position: absolute;
/* If your goal is responsiveness, try and stay away from absolute positioning, or you'll have to media query your way to the same results. */
top: 49%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
</style>
<!-- Sections are used for giving semantic clarity to your document, so summarize what the section is -->
<section id="welcome">
<p class="Welcome">hi</p>
<img src="http://whatever.com/image.jpg" />
</section>
<!-- Every tag opened must be closed. Especially for compatibility. Every browser will handle these errors differently, so leaving it up to the browser to decide the result, you won't see the same results in every browser -->
</body>
<!-- When you close HTML tags, the format is </html>. Slashes after are for self-closing tags. -->
</html>
I am currently working on making a photography website for my good friend. I have employed the custom jScrollPane scrollbars from Kelvin Luck over at www.kelvinluck.com.
However, I am having some problems.
The temporary website is hosted here: http://phr-clan.com/nikka/index.php You'll see the lovely scrollbars in action. But, there's a problem. Scroll down all the way to the bottom and you'll see that the text is being cutoff before you can scroll all the way to the bottom. It turns out that there is actually around a full couple paragraphs that aren't being displayed. And the ironic thing is that it displays correctly in IE6 (Isn't it usually the other way around?)
Anyway, what am I doing wrong? Here is my CSS file: http://phr-clan.com/nikka/styles.css
Help is greatly appreciated. I have been pulling my hair wondering why it doesn't work.
Thanks.
Just add
p.text {
text-align: left;
font-family: 'DISCORegular';
font-size: 19px;
padding: 3px;
margin-left: 10px;
margin-right: 10px;
display: block;
}
I’m reading some Html code for a web page, where author essentially wanted to create a page with header, footer and content area. The content area would be divided into three columns with center column having the right and left margins set to 200px, and these two margins are to be filled by two other DIVs docked on the page border with absolute positioning.
Here is author’s code for content area ( for the sake of clarity I’ve omitted the header and footer code ):
<div id="container">
<div id="container2">
<div id="centercol">
</div>
<div id="rightcol">
</div>
</div>
<div id="leftcol">
</div>
</div>
CSS file:
body
{
margin: 0px;
font-family: Verdana, Arial, Serif;
font-size: 12px;
}
#container
{
background-color: #818689;
}
#container2
{
background-color: #bcbfc0;
margin-right: 200px;
}
#leftcol
{
position: absolute;
top: 184px;
left: 0px;
width: 200px;
background-color: #bcbfc0;
font-size: 10px;
}
#centercol
{
position: relative;
margin-left: 200px;
padding: 0px;
background-color: white;
}
#rightcol
{
position: absolute;
top: 184px;
right: 0px;
width: 198px;
color: White;
background-color: #818689;
font-size: 10px;
}
Any idea why author decided to put both the center column and the right column inside container2? I see no advantages in doing that and in fact it just complicates the logical structure of the page?!
thanx
It looks like this was so he could have position effectively determined by the width and position of the centercol while allowing for a particular source order for the content. There are a few different ways to do this. Id guess he did it this way to avoid using floats (and the various "fixes" for IE6 compat that entails).
Not the way i would have done it i dont think but i assume it worked well for this site in the grand scheme of things.
Overall though sometimes you have to do some interesting things to match a comp with markup/css. Depending on what the designer has thrown at you and the level of abstraction needed within the system (assuming its built on some sort of dynamic content) you can end up doing something that cant possibly be construed as straight-forward. Nature of the beast until CSS and the browser implementations of it catch up to graphic designers :-)
Usually people adjust their markup due to having their layout and design in mind. That's probably what the author in that article was doing when he put those two sections together. It's not what I would have done, but at the same time you don't want to get yourself worked up about semantic debates on the internet :)
I would rather see someone author web-pages for the content and then design them in CSS (How To: Pure CSS Design)
If the author wants for search-engine purposes the main content to come first then that would be a reason. I'm not sure why he'd use absolutes though as you can't clear them and that would cause problems for a footer.