Website Accessibility Tricks & Tips

Article Pre-Evaluation:

Estimated read-time: 14 Minutes

Level of reading competence and understanding: Semi-Technical

Author: Gavin McQuienn, Lead Front-End Engineer, Aceik


What we cover in this article:


What is Website Accessibility?

Website accessibility is the inclusive practice of structuring a website to ensure that the maximum number of people can access/navigate and obtain information within websites on the World Wide Web, in particular for those with physical disabilities & situational disabilities, such as socio-economic restrictions on bandwidth and speed.

In technical-speak, it is the practice of implementing/leveraging the proper usage functionally-descriptive HTML tags, best practices-practice HTML structures, CSS, images and media, such as video and audio.

Accessibility Users – Web Statistics & Debunking the Myths 

In the past, there has often been a mindset that users utilising disability related accessibility website features were the minority. Well here are a few things that most do not consider when casting thought upon this subject.

Accessibility – not only benefits people with disabilities 

Business Cases for Accessibility Improvements

  • Legal & General Group – doubled visitor numbers, cut maintenance costs by two thirds and increased natural search traffic by 50%. 
  • Tesco – £35 thousand GBP to build their accessible website, £13 million GBP per year in resultant revenue. 
  • CNET – 30% increase in traffic from Google after CNET started providing transcripts, “We saw a significant increase in SEO referrals when we launched an HTML version of our site, the major component of which was our transcripts.” – Justin Eckhouse, CNET, 2009.
  • This American Life is a broadcast heard on more than 500 National Public Radio (NPR) stations by about 2.1 million listeners each week in the United States. In 2011, the broadcaster committed to creating transcripts for their entire archive of recorded programs and recorded. This subsequently resulted in:
    • search traffic increased 6.86%,
    • better comprehension for visitors who use English as a second language,
    • visitors were able to use transcripts in noisy or sound-sensitive environments,
    • ability to more easily translate, and
    • ability to search text to reference a specific section of audio.
  • “Many organisations are waking up to the fact that embracing accessibility leads to multiple benefits – reducing legal risks, strengthening brand presence, improving customer experience and colleague productivity.” – Paul Smyth, Head of Digital Accessibility, Barclays

Accessibility Internet Traffic Statistics 

In the USA ~ according to the Census Bureau on July 25, 2012:

  • 54% of adults living with a disability go online.
  • 56.7 million Americans (18.7% of the population), that is a figure of 19.9 million (roughly 8.2%) have proven to have difficulty lifting or grasping objects, which could impair their ability to use a mouse or keyboard.
  • 8.1 million (3.3%) suffer from vision impairment. Such demographics commonly use tools such as a screen magnifier, screen readers, or might have a form of color blindness, to which colour contrasts become ever so important.
  • 7.6 million (3.1%) have been proven to have a hearing impairment – given such disabilities would rely heavily on transcripts and/or captions for audio/video media.
  • Sight and hearing impairments cover an average of 6.8 percent of the population aged 15 years +. These figures jump to a whopping 21.3 percent of the population when you look specifically at the ageing population, people aged 65+.
  • The Baby Boomer generation (born between 1945 and 1964) is going to cross that 65-year barrier in 2010. This same web-savvy generation created the Internet, for the most part and represents one of the largest single demographics in the United States.

What can you do to increase your website’s accessibility?

Implementing accessibility features has been proven to not only increase the overall user experience and usability of a website, which will ultimately translate into higher traffic and increased SEO impact / reach, but will ensure modern best-practice standards are adhered to, which ultimately instills a higher level of code and content quality throughout a site. 

There are many things that you can start doing today, but to successfully administer a high level of accessibility is generally a 3-pronged approach:

  1. Design considerations
    1. Ensuring that even at the initial design phase that colour-contrasts, disability user-journey/navigation & audio/video media content alternatives are considered
  2. Content editors preparation, structures, awareness and consideration 
    1. Preparing audio/video media and written content for multiple demographics, such as transcripted media, listing average article read-time estimations, competency reading level grading & text alternatives for media including images, video and audio
  3. Adopting technical development hygiene / strategies 
    1. Making use of the correct usage and structured HTML, such as tab-indexed links/navigation items, hidden content for screen-readers, and especially accessibility related HTML tags & CSS, such as Aria labels, CSS user-interaction related Pseudo classes. 

Accessibility – Technical Standards, approaches, best practices & things to consider.

We have separated some well-known strategies into categories of implementation-difficulty and ultimately, development/preparation related costs/efforts ~ it must be noted that some of these tactics can be implemented to existing codebases in a, ‘moving forward’ mentality / approach, which will still slowly start to increase your accessibility support.

This may include, but is not limited to such items as:

Low Cost / Effort / Preliminary planning required
Implementing correct usage of functionally user-interactive CSS Pseudo-Classes such Focus, Active, Visited, Hover, etc

.btn {
  &:hover,
  &:focus,
  &.focus {
    color: $purple5;
    background-color: darken($yellow1, 10%);
  }
}
  • Meaningfully named, underlined/colored (or otherwise differentiated) Anchor links
  • Textual equivalents provided for images
  • Providing meaningful `alt` & `title` tags for all imagery
<img src="" alt="ENTER IMAGE DESCRIPTION - Helpful with SEO" title="This is an image of a Ragdoll cat jumping">

`Tab-indexed` user journey-tested Anchor Links and Buttons, as well as `title` tags explaining functionality 

<a class="btn btn-secondary" href="#" tabindex="0" title="Click here to see cats from category 1">
Pictures of category 1 cats
</a>
<a class="btn btn-secondary" href="#"  tabindex="1" title="Click here to see cats from category 2">
Pictures of category 2 cats
</a>
<a class="btn btn-secondary" href="#"  tabindex="2" title="Click here to see cats from category 3">
Pictures of category 3 cats
</a>

Medium Cost / Effort / Preliminary planning required

  • Text and images are large and/or enlargeable
  • Mobile optimised imagery, media & mobile-specific layouts 
  • Textual equivalents provided for images 
  • Text and images are large and/or enlargeable

High Cost / Effort / Preliminary planning required

  • Keyboard supported Menu-Navigations
  • Magnifying text/imagery options for content
  • Alternate methods of obtaining information regarding visual/audio media, such as  closed captioned and/or a sign language versions
  • Captha’s that have multiple options to human validity, such as Audio options regarding successful passphrases, or modern captchas do not require input from a user


  • Print-friendly web pages – making sure that your pages are accessible and usable even when printed or saved as a PDF file

Aria Label HTML Tags & Screen Reader Specific CSS Classes 

What are Aria Labels HTML related Tags?

ARIA stands for Accessible Rich Internet Applications and is a set of attributes that define/provide alternatives to make web applications / content (in particular those written using Javascript) more accessible to people with disabilities.

Aria Labels extend HTML and pass information to assistive technologies related to interactions and widgets commonly used in applications, which provide the user with additional information that would not otherwise be accessible. For example, ARIA enables accessible navigation landmarks in HTML4, form hints and error messages, live content updates, JavaScript related widgets and many more. 

Luckily HTML5  provides a lot more descriptive HTML tags, which are designed to provide additional information to the end user regarding the type of element they are viewing, while enabling more descriptive code which enables developers to more easily decipher new code block/snippets, which in turn increases productivity and the efficiency one can alter existing components. 

Here’s the markup for a progress bar widget: ~ snippet taken from Developer.Moziila

<div id="percent-loaded" role="progressbar" aria-valuenow="75"
    aria-valuemin="0" aria-valuemax="100">
</div>

Here we have a progress bar and it is built using a `<div>`, which actually gives the user no meaning. Currently HTML5 has new inbuilt tags that allow you to break up your elements with more meaning, but unfortunately, a lot of the time there isn’t a more semantic tag available for developers to use HTML4 or 5, so we need to include ARIA roles and properties. 

In this example, we are adding specified attributes to the element such as the `role=”progressbar”` attribute, which notifies the browser that this element is a Javascript driven progress bar widget. The `aria-valuemin` and `aria-valuemax` attributes specify the minimum and maximum values of the element, and the `aria-valuenow` expresses the current state of the progress but, so this must be kept in sync with the JavaScript.

Screen Reader Specific CSS Classes

There are occasional instances where content should be made available to screen reader users, but hidden from sighted users. In the vast majority cases, content that is available visually should be available to screen reader users, and vice versa. Cases where verbose cues or instructions are provided only for screen reader users are most likely a reflection of poor design, usability, and accessibility. However, there are a few cases where information or meaning is apparent visually, but may not be apparent to screen reader users. In these rare cases, it may be appropriate to cause content to be read by a screen reader, but remain invisible to sighted users.

Techniques for hiding content 

There are several mechanisms that can be used for hiding content. It’s important that a technique be implemented that results in the desired outcome and accessibility.

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

Here is a few approaches of embedding additional information for the user to utilise

  • `display:none` or `visibility: hidden`
display:none;
// or
visibility: hidden;
  • hidden attribute
<p hidden></p>
  • `width:0px`, `height:0px` or other 0 pixel sizing technique
width: 0px;
height: 0px;
  • `text-indent: -10000px;`
text-indent: -10000px;
  • Absolutely positioning content off-screen
.sr-only {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
  • The `.sr-only` CSS class, which stands for  “screen reader only”, is just an abrtiory name and can be called anything you wish, but whatever you name this should then be referenced from within the tag of the element being hidden, as shown:
<div class="sr-only">This text is hidden.</div>

For more information regarding these techniques, please visit WebAim.org

Resources for Online Accessibility Audits

The following is a list of websites and web tools that are built to help you plan, design and also evaluate any accessibility flaws that may have been overlooked in the development of your current site. 

Most of these tools are free (at an entry-level anyway) and if nothing else can evaluate and provide feedback into any website that is currently live on the internet and include tools that can help evaluate colour contrasts, HTML structures / markup that could be improved to ensure small, and sometimes large wins in regards to increasing accessibility compliance.

There are many tools and services available at www.w3.org/WAI/ER/tools, but a lot are actually links to businesses trying to entice you to let them assess & implement your accessibility upgrade, so finding the hidden-gems that are free can be a little painstaking. So here is shortlist we recommend:

Accessibility Evaluation / Compliance tools & helpers: 

Best Practice Examples of Accessible Websites

Here, in no particular order are some examples of websites that meet a high accessibility standard and still look modern, fun and/or are highly functional: 

Based on what you’ve just read above, take a look at these websites and let us know what accessibility features you can find. Post a comment below or reply back to info@aceik.com.au

Technical Legalities around Accessibility

More and more cases are starting to surface regarding end-users suing companies for negligence in regards to not adhering to Accessibility compliance, which means your organisation’s website could be at risk without you realising it. The reality here is, you are not alone.  

Here are some related statistics regarding Accessibility Laws and also some examples of what has happened in the past when an end-user of these websites decides to take these companies to court, in regards to failure to comply with these laws and the needs of individuals with disabilities.

Some surprising statistics regarding Accessibility Law

  • In the UK alone, on average 70% of websites are not compliant with accessibility laws. Globally, around 10% of the world’s population (650 million people) live with a disability. As life expectancy increases, this number is also expected to grow.
  • 92% of the most popular federal websites fail to meet basic standards for accessibility, says a study from the Information Technology and Innovation Foundation

Accessibility related Legal Case Studies in the US

  • In January 2019, Beyoncé Knowles’ company, Parkwood Entertainment, became the defendant in a class-action lawsuit alleging that it violated the Americans with Disabilities Act (ADA). The suit, filed by a blind woman from New York, claimed that the company’s website, Beyonce.com, did not provide accommodation for people with significant vision impairments, leaving an estimated 2 million blind people and others with vision impairments unable to access the primary portal for news about all things Bey.
  • A blind man filed a lawsuit against Domino’s in September 2016 and claimed that he was unable to order customized pizza or take advantage of online-only discounts because both the website and mobile app wouldn’t work with his screen reading software. Neither the website or app met basic Web Content Accessibility Guidelines (WCAG) and a judge ruled in favor of Guillermo Robles, the man who filed the lawsuit.
  • A class action lawsuit was filed in January 2018 against Burger King by a visually-impaired woman. The individuals involved were using screen reading software to understand and interact with the website. Because there were no alt-tags or other features in place, the individuals reached significant barriers in accessing basic information on the website.

Accessibility related Legal Case Studies in Australia

  • Coles.com.au – Closer to home, a case originated in early November 2014 where coles.com.au was sued by disability-user who claimed that she was being discriminated against in regards to being able to access the website ~ Please follow these related article links: Coles lawsuit Article 1, Coles lawsuit Article 2
  • 2000 Sydney Olympics – On the 7th June 1999, The Maguire Law Firm made a complaint to the Human Rights & Equal Opportunity Commission (HREOC), alleging that the Sydney Organising Committee for the Olympic Games (SOCOG) had discriminated against him as a disbled person, in contravention of the Disability Discrimination Act 1992 in three aspects: 
    • The failure to provide braille copies of the information required to order Olympic Games tickets
    • The failure to provide braille copies of the Olympic Games souvenir programme, and
    • The failure to provide a website which was accessible to Maguire

After the completion of the ticket book case (Maguire v SOCOG 1999 ) on 30 September 1999, conciliation on the remaining matters was attempted but by 29 November 1999, the talks failed. ~ This information taken from Wikipedia

Aceik – Current Accessibility Examples 

We thought it best to highlight a couple of examples from our current clientele that highlight some great development-integration accessibility pieces that we have had the honour of implementing of late:

  • The City of Yarra Council – https://www.yarracity.vic.gov.au/
    • Including features such as a fully keyboard function navigation, the ability to increase website text-sizes, print-friendly page options have been included, multi-language selection abilities, clearly highlighted link focus states and whole range other accessible consideration can be found throughout this website.
  • Chisholm Institute of Tafehttps://www.chisholm.edu.au/
    • Once again the navigation here is completely keyboard accessible, link focus and hover-states are clearly highlighted, colour contrasts have been carefully  considered, images are clearly labelled and media accessibility has also been considered, this allowing users multiple methods to access non-written media.

Personal notes from the author

In closing, personally I have researched this topic for years, and to my knowledge no one document or article pulls together all related facets (and so extensively) on this subject matter as I have attempted to do here, hence why I have made this quite a lengthy piece. 

It really is a massive topic to cover and there are so many angles one needs to consider to gain a holistic understanding that will empower/compel business-owners and stakeholders to justify the additional effort, cost and benefits associated with implementing extensive and well planned Web-Accessibility, so I hope this helps to empower not only business owners, but also educates and increases the level of Website Development standards, industry wide.

Article Resources

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: