There was a rising debate recently that pits accessibility towards usability, however there’s no purpose we will’t have each. If you may make a web page extra usable with out making it much less accessible, by all means achieve this; don’t let your lack of ability to translate sure usability enhancements into accessible capabilities or options limit your use of these enhancements. So long as the enhancements don’t limit accessibility, go for it.
Article Continues Under
As lots of you already know, with JavaScript and the DOM, we have now the power to manage each ingredient on a well-structured net web page. It’s my feeling that, utilizing the DOM, we will enhance the usability of a web page with out proscribing its accessibility. Sprinkle in somewhat CSS, and we have now the recipe for an exquisite expertise throughout, whatever the browser, platform or gadget getting used.
Substances: a well-structured doc#section2
To start, we want a well-structured doc. My instance might be an article, this one the truth is, consisting of a single web page with soar refs to the varied content material sections.
Let’s set up that our objective is to current this text in a extremely accessible, but solely usable means. The article is split into sections and, as human psychology demonstrates, info is simpler to digest in chunks. One method to make a prolonged article simpler to observe is to show the content material part by part. This not solely sida in digesting the data however reduces scrolling (which appeals to the numerous who stay satisfied that the overall inhabitants nonetheless has no clue the right way to scroll).
How can we meet this usability objective with out inflicting accessibility points? Enter the DOM.
Preparation: pour within the DOM; combine and bake#section3
As you’ve gotten most likely seen, the navigation hyperlinks inside the header part of the doc are soar refs to the completely different sections (divisions) of the article. The primary hyperlink (“Introduction”) takes you to the introduction of the article (wrapped in <div id="intro"></div>). This not solely makes the web page simpler to navigate, nevertheless it additionally makes it simpler for different folks to reference explicit sections of the article from their very own work (by way of citations or hyperlinks). The useful “Again to high” hyperlinks additionally reorient customers as wanted.
Glancing on the supply, we will see that the entire doc makes use of semantic ids for divvying up the doc into manageable chunks. This affords us a world of potentialities. With the help of the DOM, we will simply traverse the web page, wanting on the ids of the divisions, hiding those we don’t need instantly seen. The essential code would look one thing like this:
operate hideDivs()
{
var divs =
doc.getElementsByTagName("div");
for(var i=0; i < divs.size; i++)
{
var div = divs[ i ];
var id = div.id;
if ((id != "header") &&
(id != "footer"))
{
div.type.show = "none";
}
}
}
window.onload = operate()
{
hideDivs();
}First, we accumulate the entire <div>s on the web page into an array, after which we loop via the array, hiding all of them aside from those with ids of “header” and “footer”. Within the curiosity of hiding the script from older browsers which don’t perceive doc.getElementsByTagName, we should always add the next line to the start of the operate:
if (!doc.getElementsByTagName) {
return null;
}
Now we have now hidden all the pieces from the browser (aside from the header and footer <div>s), which implies that no article content material is on the market for the person to learn. We should always present the introduction proper off the bat, so we have to make a slight modification to the hideDivs operate. We may arduous code a conditional assertion for id == "intro" into the operate (alongside the header and footer ones), however that doesn’t give us a lot flexibility. If we add an argument to the operate known as exempt, we will specify a <div> to exclude from the operate on the fly:
operate hideDivs(exempt)
{
if (!doc.getElementsByTagName) {
return null;
}
if (!exempt) exempt = "";
var divs =
doc.getElementsByTagName("div");
for(var i=0; i < divs.size; i++)
{
var div = divs[ i ];
var id = div.id;
if ((id != "header") &&
(id != "footer") &&
(id != exempt))
{
div.type.show = "none";
}
}
}
window.onload = operate()
{
hideDivs("intro");
}
We move the worth “intro” to the operate upon web page load because the exemption, and that units up our doc for its preliminary state. However how can we enable the person to view different sections? If we check out the doc construction, we have already got hyperlinks to the various sections as soar refs. That is good, as a result of every soar ref hyperlink (e.g. #elements) already accommodates the id of the <div> we wish it to indicate. All we have now to do is discover a method to change the hyperlink in order that it triggers a JavaScript funtion to indicate the chosen part and conceal the others. Enter the DOM once more:
operate fixLinks()
{
if (!doc.getElementsByTagName) {
return null;
}
var anchors =
doc.getElementsByTagName("a");
for(var i=0; i < anchors.size; i++)
{
var a = anchors[ i ];
var href = a.href;
if ((href.indexOf("#") != -1) &&
(href.indexOf("header") == -1))
{
var index = href.indexOf("#") + 1;
href = "javascript:present('" +
href.substring(index) + "');";
a.setAttribute("href",href);
}
}
}
On this operate, we parse the doc in search of <a> tags which comprise “#” within the href attribute. As a way to keep away from grabbing the “Again to high” hyperlinks, we add in an exclusion of hyperlinks containing the time period “header”. The id of the <div> the hyperlink was referencing is separated from the #, and the href is then reconstituted because the goal <div> id wrapped inside a JavaScript operate known as present. We add fixLinks to the listing of capabilities known as upon within the onload operate, and we’re midway there.
The brilliance of getting JavaScript rewrite the hyperlink as a JavaScript name is that we already know JavaScript is working on the person’s gadget, so we’re assured that <a href="https://alistapart.com/article/eatcake/javascript:present(‘elements’);"> is not going to be meaningless to the shopping gadget. If a person’s shopping gadget doesn’t help JavaScript (or doesn’t help it to the extent that it understands doc.getElementsByTagName), the hyperlinks stay unchanged, soar refs to the completely different divisions of the web page. Likewise, the divisions all stay seen, so each accessibility and usability are well-served.
Now, about that present operate… This can be a easy operate that makes use of the DOM to indicate an recognized node and conceal the remaining. We have already got a terrific multi-purpose hiding operate in hideDivs, so all we want is the “present” half. Right here’s the code:
operate present(what)
{
if (!doc.getElementById) {
return null;
}
showWhat =
doc.getElementById(what);
showWhat.type.show = "block";
hideDivs(what);
}
We start by testing to make sure doc.getElementById is supported, after which we show the <div> with an id equal to the worth we handed to the operate. We wrap all of it up with a name to hideDivs, passing it the worth of the newly proven <div> because the exemption. The ensuing web page solely wants us to make it somewhat extra enticing.
Ornament: liberal utility of CSS#section4
This half is as much as you; beautify as you see match. My fundamental instance has a cakey theme with minimal ornament. Other than aesthetics, nonetheless, there are some enhancements we will make to what we have now completed to this point utilizing CSS.
An issue with the code we’ve written turns into clear when a person goes to print the article (which I hope they do). You see, having JavaScript change the show type of a node causes most (if not all) browsers to deal with the type utility as an inline type. In response to the cascade guidelines of CSS, inline has the best priority, so it overrides all different kinds. If we wish somebody to have the ability to print the complete article and never only one part at a time, we have to guarantee that all sections of the web page are seen. That is completed by creating a category (let’s name it “hidden”) inside a stylesheet that’s utilized to the display media kind solely, and hides the content material:
.hidden {
show: none;
}
In your print stylesheet (in case you have one), leaving out this class would trigger something classed with it to be displayed by default.
Now we will return and repair the JavaScript capabilities accordingly:
operate hideDivs(exempt)
{
if (!doc.getElementsByTagName) {
return null;
}
if (!exempt) exempt = "";
var divs =
doc.getElementsByTagName("div");
for(var i=0; i < divs.size; i++)
{
var div = divs[ i ];
var id = div.id;
if ((id != "header") &&
(id != "footer") &&
(id != exempt))
{
div.className = "hidden";
}
}
}
operate fixLinks()
{
if (!doc.getElementsByTagName) {
return null;
}
var anchors =
doc.getElementsByTagName("a");
for(var i=0; i < anchors.size; i++)
{
var a = anchors[ i ];
var href = a.href;
if ((href.indexOf("#") != -1) &&
(href.indexOf("header") == -1))
{
var index = href.indexOf("#") + 1;
href = "javascript:present('" +
href.substring(index) + "');";
a.setAttribute("href",href);
}
}
}
operate present(what)
{
if (!doc.getElementById) {
return null;
}
showWhat =
doc.getElementById(what);
showWhat.className = "";
hideDivs(what);
}
window.onload = operate()
{
hideDivs("intro");
fixLinks();
}
One last housekeeping word: we should always re-examine these “Again to high” hyperlinks. Now that we have now a web page which solely exhibits sections based mostly upon the hyperlink we click on, we merely don’t want them round, complicated folks. Moreover, we don’t need them popping up in a print model of the web page, the place they actually don’t serve any operate. One fast addition to the fixLinks operate can clear up this:
operate fixLinks()
{
if (!doc.getElementsByTagName) {
return null;
}
var anchors =
doc.getElementsByTagName("a");
for(var i=0; i < anchors.size; i++)
{
var a = anchors[ i ];
var href = a.href;
if (href.indexOf("#header") != -1) {
a.className = "alt";
} else if ((href.indexOf("#") != -1) &&
(href.indexOf("header") == -1))
{
var index = href.indexOf("#") + 1;
href = "https://alistapart.com/article/eatcake/javascript:present("" +
href.substring(index) + "');";
a.setAttribute("href",href);
}
}
}
With the addition of an .alt type to the display and print stylesheets…
.alt {
show: none;
}
…all of it comes collectively properly. I encourage you to discover print stylesheets additional by studying Eric Meyer’s excellent reference on the topic, CSS Design: Going to Print.
Steered serving: one doc, infinite potentialities#section5
This text, although on no account meant to be the end-all, be-all on the idea of serving to usability and accessibility play properly collectively, will hopefully offer you inspiration and strategies to enhance your personal initiatives, with a view to meet numerous wants, whereas excluding nobody. As accessibility turns into a larger concern within the non-public sector, we have to preserve usability recent in our minds as nicely. The examples created right here are supposed to offer you concepts for rewriting your usability enhancements with accessibility in thoughts and designing accessible pages with usability in thoughts. There are infinite potentialities on the market… bake your personal and luxuriate in.