Start Here

How to make a web project more accessible?

Before you begin to implant this add-on remember that:

  1. SU-Class (among others "Accessibility Add-Ons") does not give a full solution for accessible website / application and a human intervention on core code is a MUST.
  2. SU-Class will work only on the SAME page. If you wish to manipulate external pages on the whole website / app - you should use cookies or localStorage.

Think Like Screen Reader

Screen readers read a web page in the same order as it's elements appear in the DOM. This is always like so, regardless of the CSS. It has a great advantage over having to manually specifiy an order: It's simple. You just have to structure your web page using structural elements appropriately.

To verify that it makes sense for a screen reader user, you can read your HTML code from top to bottom and completely forget about visual placement. This later exercise is widely known as linearization, and that's basically what screen readers do and how screen reader users perceive web pages.

Another way to verify will be to imagine that you have recorded your page on an audio CD: You can listen to each title one after the other, or jump directly to the beginning of a track, (but not easily jump directly to the middle of a song).
Jumping to the beginning of a track is a metaphor for the jump to next heading or next section of screen readers.
Selecting a track from the track list is also possible with screen readers, as most of them provide a list of sections or headings to jump to.

NOT Screen readers only

Using proper HTML markdown is a must not only for screen readers, but also for SEO ranking.
Keep it clean, simple, and comprehension and all your users will benefits.
If you want to hide text on the screen but you don't want the screen reader to skip it, you can use a special class for that.
Note: Most popular frameworks have there own class for screen readers text only.
Example for how to do it:

.SU-sr-only {
  visibility: hidden; /* make the element hidden */
  position: absolute; /* move the element out from the flow so it won't "take place" */
}
				

Instructions

In order to use SU-Class add-on you should have a basic knowledge of:

  1. HTML - In order to use it properly.
  2. CSS - In order to style it fancy.
  3. JavaScript - In order to edit it for your special project's needs.

If you want to study these subjects first, I suggest using the tutorials on MDN.


I will demonstrate how to use vanilla JavaScript in order to improve user usability. Each section demonstrates one area field of accessibility. On every section I added some information with an accessibility point of view that related to the specific subject.
On the bottom of the page you can find some basic themes I styled for accessible navigation.
If you wish to download this project scroll to the bottom of the page, or use the nav.

Enjoy code!

Fonts

Couple of notes for fonts:

  1. When choosing fonts to display text remember that: sans-serif fonts are considered easier to read than serif fonts.
  2. (It is a good habit to) Use <span> as the text-containers.
  3. In order to Allows a user to change the text size in browsers with the add-on, you must set font-size value in relative units.

You will probably will want to style / modify it to your needs, so this is how it looks:

Font Demonstration

Click the button and/or slide the range in order to see how the text reacts:

×
  1. Change Font-Size with Button

    The Markdown of Font-Size-Button:

    <p>Font-Size-Button: <button id="SUchangeTextSize">Normal</button></p>
    <hr />
    <h1><span>This is type-1 Header</span></h1>
    <a href="#"><span>Links</span></a>
    <p><span>This is Paragraph</span></p>
    <p>Text Whitout SPAN won't affect</p>
    <small>Elements with absolute font-size like small won't affect, so don't use them.</small>
    							

    The Script of Font-Size-Button:

    // SU-Class - Font-Size-Button
    var SUTextSpan = document.getElementsByTagName('span'); // All text suppose to be inside spans.
    SUTextSpan.toggleStatus = 'smaller'; // Set Default toggle options
    var SUchangeTextSize = document.getElementById('SUchangeTextSize'); // Get The action button
    SUchangeTextSize.onclick = function(){  // Trigger Clicks
      switch(SUTextSpan.toggleStatus){ // Toggle options
        case 'normal': // Option 1 - Normal Size
          SUTextSpan.toggleStatus='smaller'; // Another click will activate this case
          for (i = 0; i < SUTextSpan.length; i++) { // Choose all spans
            SUTextSpan[i].style.fontSize = '100%'; // Set font-size
          }
          SUchangeTextSize.textContent = 'Normal'; // Show value on button
          break;
        case 'smaller': // Option 2 - Smaller Size
          SUTextSpan.toggleStatus='larger'; 
          for (i = 0; i < SUTextSpan.length; i++) {  SUTextSpan[i].style.fontSize = '85%';  }
          SUchangeTextSize.textContent = 'Smaller';
          break;
        case 'larger': // Option 3 - Larger Size
          SUTextSpan.toggleStatus='big';
          for (i = 0; i < SUTextSpan.length; i++) { SUTextSpan[i].style.fontSize = '125%'; }
    	  SUchangeTextSize.textContent = 'Larger';
          break;
        case 'big': // Option 4 - Doubble Size
          SUTextSpan.toggleStatus='normal'; 
          for (i = 0; i < SUTextSpan.length; i++) { SUTextSpan[i].style.fontSize = '200%'; }
    	  SUchangeTextSize.textContent = 'Doubble';
          break;
      }
    }
    							
  2. Change Font-Size with Range Slider

    The Markdown of Font-Size-Range:

    <label for="SUrangeInput">
      Font-Size-Range
      <input type="text" id="textInput" value="100" size="4" readonly disabled />
    </label>
    <input id="SUrangeInput" type="range" name="SUrangeInput" min="50" max="300" value="100" oninput="SUupdateTextInput(this.value);" />
    							

    The Script for Font-Size-Range:

    // SU-Class - Font-Size-Range
    var SUTextSpan = document.getElementsByTagName('span'); // All text suppose to be inside spans.
    var rangeSlider = document.getElementById('SUrangeInput'); // Range Slider
    var textInput = document.getElementById('textInput'); // Display the value container
    function SUupdateTextInput(val){ // Dynamically update font-size
      textInput.value = val + '%'; // Set font-size value
      for (i = 0; i < SUTextSpan.length; i++) { // Loop all spans
        SUTextSpan[i].style.fontSize = val+'%'; // Modify font-size value.
      }
    }
    							
  3. Cahnge Font-Family

    The Markdown of Font-Family:

    <label>Font-Family:
      <input type="radio" name="fontfamily" id="serif" value="'Times New Roman', Times, serif" oninput="SUchangeFontFamily(this.value);" checked /> 
      <label for="serif">Serif</label>
      <input type="radio" name="fontfamily" id="sans" value="'Lucida Sans Unicode', 'Lucida Grande', sans-serif" oninput="SUchangeFontFamily(this.value);" />
      <label for="sans">Sans-serif</label>
      <input type="radio" name="fontfamily" id="mono" value="'Lucida Console', Monaco, monospace" oninput="SUchangeFontFamily(this.value);" />
      <label for="mono">Monospace</label>
    </label>
    							

    The Script of Font-Family:

    // SU-Class - Font-Family
    var SUTextSpan = document.getElementsByTagName('span'); // All text suppose to be inside spans.
    var fontfamily = document.getElementsByName('fontfamily'); // All font-family from radio buttons
    function SUchangeFontFamily(val) { // oninput
      fontfamily.value = val; // selected radio
      for (i = 0; i < SUTextSpan.length; i++) { // Loop all spans
        SUTextSpan[i].style.fontFamily = val; // change font-family to selected radio
      }
    }
    							

Colors

Did you know?

5% from the people on this planet are suffering from color-blindness, so don't use colors in order to transmit information ("Push the red button" etc is really a bad habit). Moreover, The standard of black text on white background doesn't fit all users. In order to find the right formula of color mixture, please visit Web Content Accessibility Guidelines

Most modern browsers do support the input type color. If you are running a legacy machine consider using predefined colors and a button as demonstrate here.

On this section I will demonstrate how to dynamically set the:

  1. Color of text and background using inputs.
  2. Color of text and background using predefined button.

You will probably will want to style / modify it to your needs, so this is how it looks:

Colors Demonstration

Click the button or choose your color in order to see how the colors reacts.

×
  1. Setting Colors with Input

    The Markdown of Colors input:

    <label for='fontcolor'>Dynamically Set Text Color
      <input type='color' id='fontcolor' value='#000000' oninput='SUchangeColor(this.value);' />
    </label>
    <br />
    <label for='backgroundcolor'>Dynamically Set Background Color
      <input type='color' id='backgroundcolor' value='#ffffff' oninput='SUchangeBGColor(this.value);' />
    </label>
    <hr />
    <div class="SUaccess">
      <h1><span>Header</span></h1>
      <p><span>Text in Paragraph</span>, <a class="SUaccess" href="#"><span>Links</span></a></p>
      <p>Note: every element with class="SUaccess" will be affected.</p>
    </div>
    							

    The Script for text color and background color:

    var SUText = document.getElementsByClassName('SUaccess'); // all content that will be affected
    // SU-Class - text color input
    function SUchangeColor(val) { // triggers on input
      fontcolor.value = val; // taking the chosen value
      for (i = 0; i < SUText.length; i++) { // loop the elements
        SUText[i].style.color = val; // set text color to the chosen value
      }
    }
    // SU-Class - background color input							
    function SUchangeBGColor(val) { // triggers on input
      backgroundcolor.value = val; // taking the chosen value
      for (i = 0; i < SUText.length; i++) { // loop the elements
        SUText[i].style.backgroundColor = val; // set background color to the chosen value
      }
    }
    							
  2. Using predefined colors

    The Markdown of predefined button:

    <p>Setting Predefined Colors with <button id="changeColors">Button</button></p>
    <hr />
    <div class="SUaccess">
      <h1><span>Header</span></h1>
      <p><span>Text in Paragraph</span>, <a class="SUaccess" href="#"><span>Links</span></a></p>
      <p>Note: every element with class="SUaccess" will be affected.</p>
    </div>
    							

    The Script for predefined button:

    var SUText = document.getElementsByClassName('SUaccess'); // all content that will be affected
    // SU-Class - predefined button
    var flipColors = document.getElementById('changeColors'); // the button
    SUText.toggleStatus = 'onColor'; // use for decide which set of colors will trigger
    flipColors.onclick = function(){  // attaching onclick event
      switch(SUText.toggleStatus){ // 3 options (you can change / add more if you like)
        case 'onColor': // yellow on black - high contrast
          SUText.toggleStatus='flipColor'; // clicking again will active the second case
          for (i = 0; i < SUText.length; i++) { // loop the elements
            SUText[i].style.color = 'yellow'; // set text color
            SUText[i].style.backgroundColor = 'black'; // set background color
          }
        break;
        case 'flipColor':
          SUText.toggleStatus='off';
          for (i = 0; i < SUText.length; i++) {
            SUText[i].style.color = 'white';
            SUText[i].style.backgroundColor = 'black';
          }
        break;
        case 'off':
          SUText.toggleStatus='onColor';
          for (i = 0; i < SUText.length; i++) {
            SUText[i].style.color = 'inherit';
            SUText[i].style.backgroundColor = 'inherit';
          }
        break;
      }
    }
    							

Images

On this section I will demonstrate how to dynamically switch between animated images to static ones.

Couple of notes for images:

  1. You must add Alternative text (the "alt" attribute) to every image.
  2. Do not use images instead of text.
  3. (It is a good habit to) Wrap images with <figure></figure> element, and also add a <figcaption></figcaption>.
  4. In order to make the images responsive use css selectors instead html attribute.

Images Demonstration

Click on the picture in order to switch animation on and off:

×

You will probably will want to style / modify it to your needs, so this is how it looks:

  1. Switch between images

    The HTML Markdown:

    <figure>
      <figcaption>This gif taken from <a href="http://www.gifgifs.com/">GifGifs.com</a></figcaption>
      <img id="accessIMG" src="Banana_love_animated.gif" alt="A monkey hold banana and dance" />
    </figure>
    							

    The Script for image switch

    // SU-Class - switch image
    var image = document.getElementById('accessIMG'); // the img we want to chgane
    image.addEventListener('click', changeImage); // Attaching onclick event
    image.style.cursor ='pointer' ; // change mouse selector 
    function changeImage() { // onclick - basically looking at file name source to match string and set the image
      if (image.src.match('stat')) { image.src = "Banana_love_animated.gif"; }  // gif
      else { image.src = 'Banana_love_stat.png'; } // png
    }
    							

Links

HTML links are hyperlinks meaning a text (actually it does not have to be text: It can be an image or any other HTML element) that user can click on, and jump to another document or another section on the same document.

By default, links will appear as follows in all browsers:

  1. An unvisited link is underlined and blue: EXAMPLE
  2. A visited link is underlined and purple: EXAMPLE
  3. An active link is underlined and red: EXAMPLE

That is old as the days of Explorer and Netscape and this is what all users used to search when they looking for anchors in the content page.
SULinks class will add outline border for the links in order to emphasizing them without affect the layout, and a function to add / remove this class from the anchors over the page.

You will probably will want to style / modify it to your needs, so this is how it looks:

  1. Emphasize Anchors with class toggle

    The HTML Markdown:

    <style>.SULink {outline: 2px dashed red;}</style>
    <button id="SULink">Emphasize <br/> Anchors</button>
    <hr />
    <a href="#">Link Example</a>
    							

    The Script for class toggle:

    // SU-Class - Emphasize Anchors
    window.onload = function() { document.getElementById("SULink").addEventListener( 'click', changeClass); } // adding event listener for the button
    function changeClass() {
      var anchors = document.querySelectorAll("[href]"); // get ALL links on the page
      for (var i=0; i < anchors.length; i++) { anchors[i].classList.toggle('SULink'); } // toggle class
    }
    							

Language

This little function is handy when it comes to multilingual content. Couple of notes:

  1. Translate between languages with machine-translation not very accurate, and lacking the "human spirit" on them. So you should do it on your own (or with help from experts).
  2. Wrap any textual content with <span> with the appropriate lang attribute value. Example: lang="en".
  3. This will work only on the same page. If you wish to activate the selection to the whole website / app you should use cookies or save it with local host.

I styled it as native HTML select box element. You will probably will want to style / modify it to your needs, so this is how it looks:

  1. Language selection

    HTML Markdown:

    <label for="SUlangSwitch">
      <span lang="en">Language</span>
      <span lang="he">בחירת שפה</span>
    </label>
    <select id="SUlangSwitch">
      <option value="en" selected>English</option>
      <option value="he">עברית</option>
    </select>
    <p>
      <span lang="en">This is some English Text</span>
      <span lang="he">פסקה עם מלל בעברית</span>
    </p>
    							

    The script:

    // SU-Class - Switch Language
    var SUlangSwitch = document.getElementById('SUlangSwitch'); // select box with language options
    SUlangSwitch.addEventListener('change', changeLang); // Attaching onchange event
    function changeLang() { // Function for displaying the selected language
      var langChoose = document.querySelectorAll("[lang="+SUlangSwitch.value+"]"); // All elements with the language to display
      var langLength = document.querySelectorAll("[lang]"); // All elements with "lang" attribute
      for (var i=0; i < langLength.length; i++) { langLength[i].style.display = 'none'; } // Hide all
      for (var i=0; i < langChoose.length; i++) { langChoose[i].style.display = 'inline-block';} // Show selected
    }
    changeLang(); // call the function on load
    							

Language Demonstration

Select the language for the page:

×

Keyboard

Giving the user the ability to navigate / handle a web site / app is crucial for some people.

Although it's possible, avoid triggering unexpected event on expected situation.
Example: pushing "enter" key will reset form instead submitted it – etc - DON'T DO THAT!

Click the demo in order to find how to attach the desired key to a function.

  1. How does it work?
    // SU-Class - Keyboard event
    document.addEventListener("keydown", function(event) {  // listen to keyboard
      if (event.code == KEY CODE) { YOURFUNCTION(); } // if user type your desired key your function to execute 
    });
    							

Keyboard Demonstration

Click the desired key on your keyboard in order to see how to attach a function to it:

×

Back to Top

You can find a live demonstration in this page.

It's best to fixed the position of the button in a place it won't overlap the content.

You will probably will want to style / modify it to your needs, so this is how it looks:

  1. Back to top button

    The HTML Markdown:

    <button role="button" id="SUTop">Back To Top</button>
    							

    The Script for back to top button:

    // SU-Class - Back To Top
    window.onscroll = function() {scrollFunction()}; // attaching scroll event to activate the function
    function scrollFunction() { // Check wehter to display the button
      document.getElementById("SUTop").addEventListener("click", topFunction); // attaching onclick event to the button
      if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) { // this is the place that the button appear. in pixels.
        document.getElementById("SUTop").style.display = "block"; // show button
      } 
      else {
        document.getElementById("SUTop").style.display = "none"; // hide button
      }
    }
    function topFunction() { // onclick
      document.body.scrollTop = 0; // scrooling to top of the page
      document.documentElement.scrollTop = 0; // fallback for old devices
    }
    							

Themes

On all demonstrations above I gave you the CORE functionality of the add on, and I let your browser decide how to style the elements.
Every project got it's on style, so it's better that you write your own CSS.
If you are using frameworks you can check this table to see some demonstrations on how it can look:

Simplicity Usability Themes For Popular Frameworks
Framework Note Demonstration
Bootstrap v3 Using native Dropdown DEMO
Bootstrap v4 Using native Dropdown DEMO
Foundation v5 Using off-canvas navigation DEMO
W3.CSS v2.5 Using off-canvas navigation DEMO

Download

Feel free to download this project and modify it for any purpose.

File name:
SimplicityUsability.zip
File size:
1mb
First Created:
05/16
Last modified:
01/19
.zip

Like this project? Show some love and buy me a beer!

Make a donation using PayPal