Basically I have a client that needs us to add some information to their website that will basically add a note in the code that the accessibility reader can say something like:
If you need assistance viewing this website please call (Insert Phone Number here).
This note does not need to display on the front end of the website if they are just browsing normally without a accessibility reader.
Is this possible? Is there something like a meta tag that we can add to the site?
Consider that keyboard users may benefit from this as well. To that end, there are plenty of "skip nav" or "jump to content" patterns that may do what you want, including ones friendly to keyboard users.
I made a CodePen example of a keyboard-friendly skip nav, but here is the code...
HTML
Skip Navigation
<main id="Skip">
<h1>The Page Is About This</h1>
<p>
This is some page content
</p>
</main>
CSS
a[href="#Skip"] {
display: block;
color: #fff;
background: #000;
margin: 0;
padding: .5em 1em;
font-weight: bold;
}
a[href="#Skip"]:link,
a[href="#Skip"]:visited {
color: #fff;
text-decoration: none;
}
#media screen and (min-width: 62em) {
a[href="#Skip"] {
position: absolute;
left: -1000px;
z-index: 2;
}
a[href="#Skip"]:active,
a[href="#Skip"]:focus,
a[href="#Skip"]:hover {
display: block;
top: 0;
left: 0;
}
}
In your case you could just change the link to a phone number:
Call us if you...
And key your CSS off that href or a class or id attribute:
a#a11yCall { ... }
Just hide the text at the top level with a position:fixed and left:-9000px.
It should be read but not visible.
Just few words. Accessibility isn't only for the blind people !
There is no such common thing as an "accessibility reader".
You might be thinking about a "screen reader", but there is a small part of population using those tools, and they do not give any benefit to people with low vision, using for instance a screen magnifier or some other specific tool (enhanced contrast, ...), nor they give any benefit to people with auditive, cognitive, or musculoskeletal disorders.
The assumption that only blind people using a screen reader need to have assistance is the first problem in designing accessible websites.
Having a content not accessible to non-blind people is also discrimination.
Now, if you really still want a note designed specifically for screen reader users, use aria-label. Do not use any CSS trick.
Related
I have been creating a website using Cargo Collective (CSS) and need to publish my website before I will have had time to optimise it for mobile use.
I am looking to add a prompt that will appear when the site is visit from a mobile device. This will tell any visitors that open the link from a mobile device to instead visit the website from a desktop or laptop.
Alternatively, if I were able to force the site to only load in the desktop version, even on mobile sites, this would be okay for now. Cargo collective automatically implements a mobile optimised version which I cannot seem to turn off.
Any help would be greatly appreciated.
I have tried to use #media in the CSS, however I built the website using the cargo designer, not by writing the code myself, so I am struggling to identify how to target different elements of the design.
What you can do is add a custom element with fixed position that wraps the entire screen on the desired resolutions and requests the user to use a larger screen. You just need to add the class to an element and it'll do.
.wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* Optional rules. */
display: grid;
place-items: center;
color: #000;
background-color: tomato;
/* Will be displayed in the center of the element. */
content: "Please use a larger screen with atleast 768 pixels of width.";
}
#media (min-width: 768px) {
.wrapper {
display: none;
}
}
I need an extra help with this, i'm just learning to code, already found this preview question but i don't understand completly how the css file must be done and upload. Or if any other way to do the same.
This is my page and this is the code that SCM provides
!-- SCM Music Player http://scmplayer.net -->
<script type="text/javascript" src="https://www.scmplayer.net/script.js"
data-config="{'skin':'skins/black/skin.css','volume':50,'autoplay':true,'shuffle':false,'repeat':1,'placement':'top','showplaylist':false,'playlist':[{'title':'blalbla','url':'test'}]}" ></script>
<!-- SCM Music Player script end -->
What I want to do it's hide it and delete the extra space that gives to the bottom.
You need something like
#playerW {
display: none!important
}
I don't like using !important because it's usually a sign of poor code, but here I think it's required as the css properties for the scm player are being set by javascript. The other method might be:
html body iframe #playerW {
display: none;
}
This adds more specificity to the target element. You want to load this after the scm.css link in your template.
However I would also check that these things are not already configurable within your theme.
Based on your last comment (and looking at the current implementation of your theme) I have this hack
#scmframe {
display: block;
background-color: transparent;
position: fixed;
top: -30px; // change this from 0px
left: 0px;
width: 100%;
height: 120%; //change this from 100%
z-index: 1667;
}
Question: Is the second OOCSS principle really valid?
According to the OOCSS second principle you're not supposed to have location dependent styles:
Quote from https://github.com/stubbornella/oocss/wiki
Essentially, this means “rarely use location-dependent styles”. An object should look the same no matter where you put it. So instead of styling a specific h2 with .myObject h2 {...}, create and apply a class that describes the h2 in question, like h2 class="category".
Lets take a practical example of this. Say I have a standard 2.0 setup with a normal body (white background) and a huge footer (black background). In the body we have black links and in the footer of course we need white. Isn't the simplest and most intuitive way to achieve this simply to:
a{ color: #000; }
.footer a{ color: #FFF; }
If I where to follow OOCSS principles I'd have to first create a class:
.inverted{ color: #FFF; }
Then proceed to add that class to every link I want inverted. That seems like a hassle.
Isn't the purpose of the whole language that styles are made to Cascade?
Am I misunderstanding something here?
I think you are right in the sense that yes, in your specific example.. perhaps doing it your way would be easier. But then again, if you look at the first sentence in the OOCSS page:
How do you scale CSS for thousands of pages?
In that context.. the second principle makes perfect sense.. so using your same example (ie let's assume we implemented your solution).. let's say that a year down the road your company decides to create light grey buttons in the black footer having black text:
<!-- inside footer -->
<a class="button lightGrey">link</a>
in this case.. all the a tags will be white because they're covered by your cascading. So then we will have to go create another sytle just to undo what your solution did:
.footer a.button.lightGrey {
color: #000; /* huh? but i thought we did this before with a {color: #000;} ?*/
}
where as if we simply made a decision that all a tags by default are black (see last note):
a{ color: #000; }
then in the footer we will create a special type of link that are supposed to be white:
.footerLinks { color: #FFF }
then a year later some of the links are still white.. others within the greyLight button will be black:
<a class="button lightGrey">link</a>
then here we don't have to worry about undoing anything.. a tags have a default color.. and that's it. if 2 years later someone decides that the links inside the lightGrey buttons (anywhere on the site, not only withen the footer.. which is the whole point of OOCSS) should be red.. then this would be the OOCSS approach:
.redLink {
color: red;
}
and the html will be
<a class="button lightGrey redLink">link</a>
in this case it won't matter if we take out the .lightGrey class, or we can have this code within or not within a footer .. it's all the same.. it results in more predictable and re-usable code.. which is OOCSS (I'm very glad that they're finally formalising this.. thanks a lot for the post btw).
One last note: To be pure OOCSS, one shouldn't change the default color of a ie a {color: #000;} is wrong!, it should be left to it's default color (which is blue).. whenever anyone wants to change that color.. then they must specify it ie
<a class="redLink">..</a>
so in this case it's more like the default a is the parent class.. and everything else subclasses it and overrides its default behaviour..
update - response to comments:
reputable site argument:
such initiatives are almost always driven by the community then adopted by reputable companies.. and even when they are adopted by larger companies it usually happens from the bottom up through enthusiastic developers who advocate for such change.. I for one was such an advocate when I was working in Amazon. And even when it's adopted.. it's usually at a small scale and not across all units in the org. it wouldn't even be a good idea for the Googles and the Amazons and the facebooks etc to enforce such a rule b/c there will always be a difference of opinion.. not to mention that such micromanagement would constrain the engineer's creativity.. there could be a guideline in a wiki for a team (ie we had one for the Amazon Kindle Touch app store) but to enforce that rule across 10,000 engineers working across the company wouldn't be practical nor desirable.
So in short if you see value in OOCSS, and start implementing on your site, and advocating it to your fellow web devs, and then it becomes a trend, that's when it eventually becomes an industry wide best practice and that's when you can expect to see it on facebook etc.
example:
take a look at this:
simple: http://jsfiddle.net/64sBg/
a bit more detailed: http://jsfiddle.net/64sBg/2/
without going too much detail (I'm sure you will see the pattern) you can see that the granularity in css descriptions allows for subtle changes without any redundancy in style definition. So notice the left arrow vs right arrow.. also the .red and .blue styles can be subsequently applied to tables etc..
also notice that there isn't a single cascading in my css.. so my styles can be completely independently applied (ie implementing the rule An object should look the same no matter where you put it)
lastly.. there is still use for cascading.. you can definitely use it in your jQuery selectors for example.. also cascading happens by default (ie without you having to explicitly set it in your css styles).. so if you take look at the css below.. you will notice that the font properties of body has cascaded down to all the buttons.
<a class="button blue dark">
<div class=" arrowDownWhite rightArrow">Analytics</div>
</a>
<a class="button red dark">
<div class=" arrowDownWhite leftArrow">Actions</div>
</a>
<a class="button grey light">
<div class=" arrowDownRed leftArrow">options</div>
</a>
and css:
body
{
font-family: Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 15pt;
}
.button
{
padding: .5em 1em;
display: inline-block;
text-decoration: none;
}
.dark {
color: white;
}
.light{
color: #E40E62;
}
.blue
{
background-color: #51C8E8;
}
.red
{
background-color: #E40E62;
}
.grey
{
background-color: #E0E0E0 ;
}
.arrowDownWhite
{
background-image:url(http://s2.postimage.org/ywam7ec4l/small_Arrow_Down_White.png);
background-repeat:no-repeat;
}
.arrowDownRed
{
background-image:url(http://s2.postimage.org/je5743t2d/small_Arrow_Down_Red.png);
background-repeat:no-repeat;
}
.leftArrow
{
padding-left: 1em;
background-position: left center;
}
.rightArrow
{
padding-right: 1em;
background-position: right center;
}
It is worth the hassle of separating your skin from the container.
Lets look beyond colors. I wish Nicole Sullivan provided better examples than she does. I have 23 web sites that an contain
Menus
Tabs
Toolbars
Horizontal and Vertical Lists of Links
All of them are Skins of the Nav abstraction
I started off created an abstraction class to handle the common code between all of them. I added a few modifiers to change the orientation from horizontal to vertical, and also the floated position of it. I kept all colors out of the abstraction as well as css rules that can change based on the skin I apply to it.
/* Object */
.nav
{
margin-bottom: 1.5em; margin-left: 0; padding-left: 0; list-style: none;
}
/* Modifier */
.nav--stack .nav__item
{
display: block;
}
.nav--right
{
float: right;
}
/* Elements */
.nav__item
{
float:left
}
.nav__item__link
{
display:none;
}
Menu Skin
I needed a skin that made the .nav abstraction look like a sidebar menu. In case you are wondering, I did not put the padding for .nav_item_link above is because it can change based on the skin. The tabs skin has it set for 2px.
/* Object */
.menu
{
}
/* Elements */
.menu .nav__item--current.nav__item__link
{
color: #fff; background: blue;
}
.menu .nav__item__link
{
padding: 4px; border-radius: 4px;
}
.menu .nav__item__link:hover
{
background: #eee
}
Notice to keep things location-independent - I have 0 tag names. I don't style li and a children on .nav like bootstrap does. This code could be used on dls or even divs and has better performance based on how selector engines read rules.
To me the benefit of just having to skin the objects I have for all 23 sites I have is worth any hassle.
I'm learning a bit of CSS from test and trial, and couldn't find a solution for this particular problem through web searches.
I help a person who's learning English, and she uses a lot of Google Translate on a small screen. I've been able to hide Google's toolbars and the annoying "Download Google Chrome" popup with the following (I'm using Stylish):
.jfk-butterBar.jfk-butterBar-info.jfk-butterBar-shown {
display:none!important;
}
#gb {
display:none!important;
}
#gt-appbar {
display:none!important;
}
The problem is: they are hidden, but the translated website is left on a frame with a space that varies from 70px to 160px on the top. The corresponding piece of code I'm talking about is here:
<div id="contentframe" style="top: 70px; left: 0px;">
And this is the best I could come up with after searching, but doesn't work:
#contentframe {
top: 0px;
}
Thank you!
You need to outweigh the specifity of the inline-style top: 70px; with the !important rule.
#contentframe {
top: 0 !important;
}
I'm developing a website for mobile phones (mostly Blackberry).
I can't figure out how one develops like this. Some phones don;t support CSS. If I want a button with an up and a down state, how do I do it? I'd usually make an anchor, then put the image in the background, then I could control the background position with pseudo classes link and active.
<a id="btnSearch"></a>
#btnSearch{
height: 16px;
overflow: hidden;
background-image: url(img/btnSearch.png);
}
#btnSearch:link,
#btnSearch:visited,
#btnSearch:hover{
background-position:0 0;
}
#btnSearch:active{
background-position:0 -16px;
}
but I can't do this because some mobile devices will show nothing.
Well, if they don't support CSS, then you obviously can't get button effects such as those you describe. The best you can do is provide alternate text within the anchor:
<a id="btnSearch"><span>some text</span></a>
and hide that text in browsers that do support CSS:
#btnSearch > span {
display: none;
}