Monaghan

Accessibility


We Care


We care about making web experiences that are accessible and available to everybody.



Below are some examples of the code we've used to ensure the content on our site is easily navigable by everybody, regardless of the technologies they may be using to access it.



Images:



Whenever we include an image on our site, we make sure to include an "alt" text for our visitors who can't see/load the image.

    
    
          <img src="https://i.kym-cdn.com/photos/images/original/001/475/420/c62.gif" alt="Ewan McGregor as Obi-Wan Kenobi" />
        
    
  


ARIA Attributes:



The Web Accessibility Initiative's Accessible Rich Internet Applications (or ARIA) attributes baked into HTML help developers provide accessible alternatives for content that would otherwise be hard to understand without being able to see it. At OverScore Media, we make use of these attributes whenever necessary, including in the social icons on our website's footer:

    
    
          <a href="https://facebook.com/you" target="_blank" rel="noreferrer" aria-label="Like us on Facebook">
          <Icon :i="mdiFacebook" :title="Facebook Icon" />
          </a>
        
    
  


Semantic Markup:



While ARIA attributes are nice, HTML5 includes a bunch of helpful elements with semantic meaning. These elements help to divide a webpage's content into distinct, logical chunks, and accessibility software like screen readers are able to make sense of them. Again, whenever possible, we try to use the best HTML elements for the job, in order to make our content's layout easy to understand and navigate.

    
    
          <nav class="navbar is-fixed-top is-dark" role="navigation" aria-label="main navigation">
          </nav>

          <main class="content-wrapper">
          </main>

          <footer class="footer has-background-dark has-text-light">
          </footer>
        
    
  



We also try to ensure that the colour ratio between the background and foreground of any HTML elements is at least 3.00:1, the minimum as per the WCAG AA guidelines.



Last but not least, you may have noticed the Accessibutton in the bottom-left of your screen. Clicking it brings up a few options for making the site more readable, including colour inversion, hyperlink highlighting, and changing text to the wonderful OpenDyslexic font. It's based on https://github.com/hendrixfan/vue-accessibility-toolbar


Accessibility Toolbar Button