I am working on a toggle button for enabling/disabling accessibility on a website. Similar to that in iphones.
For example, on the canada.ca government website, they shouldn't have italics but clients rarely consider accessibility when writing their contents.
I was thinking of this idea but I'm not sure if it's a good solution.
Any suggestions/feedback?
You will have to think about everything you wish to change in order to improve "accessibility"... Or be it "readability".
Example:
italic
fonts smaller than __ px
font colors
etc.
So if you taugth about it just a bit, at writting time, by adding some classes... A data attribute can be used to match them and provide a button to toggle these classes out.
Then, the user could "remove those harder to read styles.
$(document).ready(function(){
$("#control button").on("click",function(){
$("*[data-readability]").each(function(){
$(this).toggleClass($(this).data("readbility"));
});
});
});
.small{
font-size:0.4em;
}
.italic{
font-style:italic;
}
.yellow{
color:yellow;
}
#control{
position:fixed;
top:0.5em;
right:0.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
<span class="small" data-readability="small">This is real small fonts.</span> <span class="italic" data-readability="italic">This is italics.</span> <span class="yellow" data-readability="yellow">This is a hard to read color.</span>
</div>
<div id="control"><button>Click here for a better readability</button></div>
So if all the styling left is not a problem to readbility... And the page still is acceptably nice, that's a way.
Now what can possibly be a problem to readability and accessibility is defined somewhere here.
I think the idea is better than having no accessibility, however by using semantic HTML generally it is not hard to make sites accessible so I would just work on making the page/site accessible as a whole and not only based off a toggle.
Related
I'm making a new website which is under development:
https://wowwdigital.wpengine.com
I'm using a Wordpress theme called Salient which uses colours set from the theme settings:
http://themenectar.com/docs/salient/theme-options/accent-colors/
There is a specific element called "fancy box" which has a variable for colour, but instead of input of hex codes, it has a dropdown for the 6 accent colours.
I want to use the gradient options, but I want more than two.
Unlike other normal elements where one can find the class and override the existing class this has something which I haven't seen before
data-color="extra-color-gradient-2"
Now I don't quite understand what this means. I'd really appreciate some guidance on how I could override the CSS to add in gradient colours for the fancy boxes.
I appreciate any tips, so thanks in advance!
<div class="nectar-fancy-box " data-style="color_box_hover" data-animation="" data-box-color-opacity="1" data-delay="" data-alignment="left" data-color="extra-color-gradient-2"><div class="box-inner-wrap"><div class="box-bg"></div> <div class="inner" style="min-height: 200px"><div class="inner-wrap"><i class="icon-default-style iconsmind-Code-Window" data-color="extra-color-gradient-2" style="font-size: 50px!important; line-height: 50px!important;"></i><i class="icon-default-style hover-only iconsmind-Code-Window" data-color="white" style="font-size: 50px!important; line-height: 50px!important;"></i>
Website Design
Professionally built WordPress websites that are fast, mobile friendly and stunning to look at.
I am working on a website for a client who has become a fairly close friend, so I am trying to get everything perfect for him (he'd probably overlook this issue but that's not the kind of work I want to be doing). The site is working fine in the development environment but in (pre-)production on Heroku there is a very disconcerting judder on pageload (particularly when clicking the navigation link at the top of the page) which you can see by visiting the Heroku URL:
https://gentle-headland-62741.herokuapp.com/products
There are a fair few different SCSS, HTML and JS files being loaded so it wouldn't make sense to reproduce them all here, but here are what seem to be the most likely sections of code to track down the culprits:
products.scss
#import "bootstrap";
.row {
margin-top: 25px;
}
.accordian {
overflow: visible !important;
}
.accordian > div {
background-color: #eaeaea !important;
overflow: scroll !important;
}
.ui-state-focus {
outline: none;
}
.servicestext {
overflow: scroll !important;
}
.paper-image {
padding: 15px;
}
.text-box {
background: #efefef;
box-shadow: 5px 5px 2px #888888;
}
home.html.erb
<% provide(:title, "Products and Solutions") %>
<%= stylesheet_link_tag 'products' %>
<div class="row">
<div class="image-box image-left-box col-md-5"><%= image_tag("cogs-binary-shiny.jpg", class: "image", id: "paper-image") %></div>
<div class="synopsis-text text-box col-md-6"><h1>Products and Solutions</h1>
<p class="product-text">Simutronix offers multiple profit optimisations solutions, tailored
to suit the needs of any business, large or small. From face to face consultancy,
to bespoke optimisation solutions, to the off the shelf <em>SimutronX</em>, we have
something to suit every business model.
</p>
</div>
</div>
<div class="row">
<div class=" text-box col-sm-5" id="services_accordian">
<h2>Profit Optimisation; Cost Reduction; Services Streamlining</h2>
<div class="accordion">
<h3>Profit Optimisation</h3>
<div class="accordian-title">
<p>We can take your business and turn it from
a loss making venture into a formula for success.
We use cutting edge mathematical techniques
derived from derivations of historical data
processing methodologies created by some
of the greatest minds in history.</p>
</div>
<h3>Cost Reduction</h3>
<div class="accordian-title">
<p>We can make sure every part of your
business works properly with every other
part. From traditional, albeit two-dimensional,
sales and marketing synergies through
to a complete and holistic approach,
seeing your entire company as a living,
breathing organism in its own right. A
moving, changing, <em>dynamic</em> body
of ever differing elements that is far,
far more than the sum of its parts,
and yet is always an expression of all
of its constituent elements.
</p>
</div>
<h3>Services Streamlining</h3>
<div class="accordian-title">
<p>When your sales team are producing works of fantasy,
often through no fault of their own, it can
be difficult to know what specification to manufacture to.
Of course, no-one entirely understands what the market will do
next but you know that what you want, what your company
absolutely needs is to be flexible while retaining its
core ethos, its belief system and the markets that
made it successful in the first place.</p>
<p>That success may have come easier to start with,
but if you're honest with yourself, you've found things
becoming more difficult, more complex. You're sure
you could break through to the next level, if only
you could reliably model what's actually happening
within your company and outside, in the wider world
where you products, your services are being sold.
And that's why sometimes you need those old-fashioned
things, like maths, science, models and formulae,
to get control back, and to really push things
forward in exactly the way you have <em>always</em>
been capable of.</p>
</div>
</div>
</div>
<div class="image-box image-right-box col-sm-6"><%= image_tag("new-small-statue.jpg", class: "image", id: "statue-image") %></div>
</div>
<div class="row">
<div class="image-box image-left-box col-md-5"><%= image_tag("pen-hand-small.jpg", class: "image", id: "pen-image") %></div>
<div class="copytext text-box col-md-6">
<h2>Margin Improvement</h2>
<p><em>Margin improvement is about making more profit by improving what you already do.</em> Cost engineering, better and sharper buying, pricing appropriately, discounting less and investing in equipment
which will do more, quicker and with less man-hours expended. In conjunction with optimisation, the two can result in truly
startling profit improvements.</p>
</div>
</div>
custom.js (uses jQuery accordion as a called library)
$(document).on('turbolinks:load', function(){
$(".accordion").accordion({
collapsible: true
});
$(".ui-accordion-header").css("background","grey");
$(".ui-accordion-header").css("focus","grey");
$(".ui-accordion-header").css("border","#acb8a9");
});
If anyone could help me with this I would be extremely grateful as I really want to get the website as close to perfect as possible for the client, who has been friendly, understanding, and just in general a joy to work for.
The judder can be seen in this gif:
The judder also appears present in Firefox, but is much less noticeable.
I'm trying to figure out out to create a event to appear in front of my home without it opening a new page. It would, for lack of a better word, expand to fill the browser. I know I'll have to do some work with z-index and javascript. The month would hover and then the user would click to see the event.
Home and event
My HTML
<div class= "month sep_box">
<h1 class= "sep">SEP</h1>
<div class= "year">2016</div>
</div>
CSS
.sep_box{
background-image: url("images/design_disrupt.svg");
background-repeat: no-repeat;
background-size: cover;
background-clip: content-box;
background-position: center;
float: left;
width: 25%;
height: 25vh;
transition:.25s ease;
}
EDIT: Screen-shoted HTML now copied
<article>
<div><h1 id="design_disruptors">
DESIGN <br />DISRUPTORS</h1></div>
<div><p class="child_day">THURSDAY</p></div>
<div><p class="child_day_number">15</p></div>
<div><p class="child_event_about">JCM 2121<br />7:00pm</p></div>
<div><p class="child_rsvp">RSVP</p></div>
<div><p class="child_desc">Design Disruptors reveals<br />
a never-before-seen<br />
perspective on the design approaches of these<br />
companies and how they<br />
are overtaking billion dollar industries though design.</p>
</div>
</article>
https://jsfiddle.net/es60r7cv/
The comments aren't going to work at this point because of the character limit, so I'm going to try my best to give you some hints here. I am a little unsure as to how far along you are in your development to this point, and the intent of the design, but let's give it a shot.
Firstly, if I understand your design image correctly, you want almost the entire screen to look different except for the square that was clicked. This is going to be difficult, as you'll need to position a lot of elements in just such a way that you can have a transparency in exactly the right spot. Given your design, and how important pixel-perfection is going to be to making it work, and where you are in your development, I'm wondering if it would be ideal to simply fix the width of the whole design (no growing or shrinking with the screen).
I would also recommend you use jQuery for this project, as it will be easier for you.
To add an event listener to all your month boxes using jQuery, you would write it:
$(document).on('click', '.month', function (evt) {
// your event handling code here
}
I would give each month element an id for the month it represented, then create your overlays with a similar id. So, for example, the December month box would be <div class="month" id="december"><!--your_content--></div> and the overlay for the month could be <div class="overlay" id="decemberOverlay"><!--your_overlay_content--></div>. That way you could target it by getting the clicked month boxes id, and getting the overlay by doing that id + "Overlay".
You could fetch your overlay content on the fly using AJAX, but to reduce complexity for yourself you may just always load all overlays to the page and hide them with CSS, but also include the positioning code:
.overlay {
display: none;
z-index: 10;
position: absolute; /* this will position it to the document, or the first parent that is relatively or absolutely positioned */
top: 0;
left: 0
}
We are using absolute positioning because:
we want to be able to position the overlay directly over the original image, and not influence the flow of the rest of the document, and
z-index requires some non-static position value to be applied
Then, in your script, you would update it do be this:
$(document).on('click', '.month', function (evt) {
var clickedMonth = this.id;
var correspondingOverlay = $(clickedMonth+"Overlay");
correspondingOverlay.show();
}
Based on your fiddle and code, I think perhaps you are not very far along yet. Hopefully this gives you a bit of a head start on how to achieve your desired result.
Edit:
One last thing-- this is a cleaner way to style your markup:
<article>
<div>
<h1 id="design_disruptors">DESIGN <br />DISRUPTORS</h1>
</div>
<div>
<p class="child_day">THURSDAY</p>
</div>
<div>
<p class="child_day_number">15</p>
</div>
<div>
<p class="child_event_about">JCM 2121<br />7:00pm</p>
</div>
<div>
<p class="child_rsvp">RSVP</p>
</div>
<div>
<p class="child_desc">
Design Disruptors reveals<br />
a never-before-seen<br />
perspective on the design approaches of these<br />
companies and how they<br />
are overtaking billion dollar industries though design.
</p>
</div>
</article>
Clean HTML will be easier to read and easier to spot errors.
I used to just use Javascript to toggle elements, which was annoying.
Then I learned of doing it this way, which seemed like a godsend:
<script type="text/css">
input[type=checkbox]+div
{
display:none;
}
input[type=checkbox]:checked+div
{
display:block;
}
</script>
<label for="foo"><button>Toggle!</button></label>
<input id="foo" type="checkbox" />
<div>
This is getting toggled.
</div>
That works, but it's very much a hack that doesn't make any sense semantically, unless you're actually styling stuff in a form.
Someone pointed out the :target selector the other day, which is easier and makes much more sense semantically:
<script type="text/css">
a
{
display:none;
}
a:target
{
display:block;
}
</script>
<button>Toggle!</button>
<a id="foo">
This is getting toggled.
</a>
The trade-off is that, unlike a checkbox, the target is one-way: a checkbox goes on and off, whereas a target just goes "on". To make it go "off" you have to click another anchor, which isn't always desirable.
Is there some kind of way of toggling in a semantically-appropriate way without having to resort to Javascript?
Using this plugin works great, but when I stop the scroll fixed position, it creates the following div.
<div style="display: block; width: 1621px; height: 104px; float: none;"></div>
The dimensions resemble to size of the div being scrolled.
Example: http://litl.it/ simply scroll past the maps area, then scroll back up and there will be an odd blank space.
Anyone know how to remove this issue? I've found one other example that has been closed, but the issue was resolved with a work around creating extra containers, with additional css to comply with the 'random' div created. I'd like to avoid that if possible.
code:
<section id="devices" data-speed="10" data-type="background">
<h1>litl.it now, bookmark it for later</h1>
<p>we provides an easy link shortening solution with better features above the competition, you can now shorten & bookmark your links with control.
</section>
<section id="demographic" data-speed="7" data-type="background">
</section>
<div id="mapoverlay">
<div class="mapcontainer">
<h1>litl.it it records data of your audience</h1>
<p>here you can see litl.it users litling links across the world!</p>
</div>
</div>
<section id="trackstats" data-speed="4" data-type="background">
<h1>Tracking Stats</h1>
</section>
This issue occurs in the Windows Chrome browser (based upon additional comments from users), here is an example:
Edit: it occurs for me in all browsers, maybe the issue is due to the window being too large, resulting in the bottom of the page preventing the scroll from passing over the target div.
Can I please ask you to attempt creating the issue with a small window to ensure the scrolling div passes over the tracking stats box.