STP Creative

Category: Uncategorized

tldr; (summary)

Your website’s accessibility is very important, not just for providing a good experience for your customers and viewers, but also for ensuring that you are complying with all laws and policies for enabling people with disabilities access to your products and services.

Some people prey on small businesses with websites that are not accessible, we’ve listed some common accessibility issues to help keep your site from being targeted.

Web accessibility is the allowance for all users to fully interact and utilize a website and its contents regardless of any disabilities they may have.

The most widely accepted standards for evaluating compliance are the WCAG(Web Content Accessibility Guidelines) standards, created by the W3C(World Wide Web Consortium) WAI(Web Accessibility Initiative.) 

WAI works to improve the browsing experience across the web for people with disabilities and their guidelines go through the W3C process for being approved. W3C is a group that ensures standardization for web development.

The current standard is WCAG 2.0 and 2.1, while an additional addendum in 2.2 will be added this year. In the longer term, WCAG 3.0 is projected to be ready in a few years and those standards will supersede the 2.x standards.

Current WCAG (2.0 & 2.1)

Drafts (2.2 & 3.0)

Proper web accessibility is very important for providing a good experience for every user. Accessibility needs are far-ranging and consist of more than what people commonly think of such as auditory and visual impairment accommodations. 

The need for accessibility is more than just a good cause for helping people with disabilities. There are potential legal ramifications for not maintaining an accessible website.

Additionally, it’s just plain good for business, and building a strong brand. If a potential customer cannot use your website, then that is an opportunity lost and a bad experience associated with your brand.

The most common disabilities that are thought of when considering who may have trouble accessing content on a website are visual and auditory disabilities. However, users with needs for accessibility features can be more common than that. 

A user with carpal tunnel, for example, could have issues navigating your site with a mouse and would need to use just a keyboard. Or a user may have difficulty steadying their hand and may not be able to properly interact with an element if the interaction area is too small or requires too precise control with no alternative. The WAI has a good list of examples of accessibility use cases on its website.

The remedies most thought of for those users are screen readers and transcribed or captioned audio, however, as you can see a properly accessible site goes well beyond that.

Now for the real question, outside of creating a good experience for your audience who may have disabilities, does your website need to be accessible? In short, yes. 

There are multiple laws and policies which protect people with disabilities from discrimination. Including on the web. The most commonly referenced policy is the Americans with Disabilities Act of 1990 with ADA Amendments Act of 2008. 

This policy, and others, say that access to services should be made available without discrimination to people with disabilities. If you have a website that is essential to access a product or service you provide, then it should be accessible to people with disabilities. 

Legally, accessibility for non-government sites does not require compliance with WCAG standards, just the ability to demonstrate that your website is accessible. However, WCAG is the most widely accepted standard for rating accessibility and is the best model to follow to ensure that your website is accessible. 

Levels of accessibility in WCAG are broken into three groups ‘A’, ‘AA’, and ‘AAA’, where ‘A’ meets the minimum standards and ‘AAA’ are the strictest standards. A full list of WCAG conformance standards can be found on their website.

Most websites only need to meet the minimum requirements of ‘A’ to be suitably protected legally but should still strive to be as compliant as possible. However, if your website is a government site, or provides a critical service then it is required to meet the standards of WCAG fully ‘A’ and mostly ‘AA’ compliant.

Laws & Policies

  1. Text color contrast

    Good color contrast with your text is not only good for accessibility but it is a fundamental design principle.

    A good rule of thumb is to strive for a contrast ratio of 4.5:1. You can test the contrast of colors with this web tool contrast-ratio.com.

  2. Images without proper alt text

    Alt text is very important if there is text, important information, or user direction contained in an image.

    Good alt text also has the benefit of improving your SEO score and helping your content rank higher in search engines.

  3. Out of context / non-descriptive links

    This is a very common issue in a lot of websites and it is when a link or interaction has text that does not properly describe the interaction.

    An example is a button that just says ‘Learn More’ but does not have an associated heading or label to describe what the user would learn more about. Another example is a link in a paragraph that is just the word ‘here’.

    While reading the whole paragraph the user may be able to infer what ‘here’ is, a user tabbing through links in a site with a screen reader would just be told ‘here’ with no context.

  4. Out of order heading tags

    Heading tags are HTML elements and they are represented as <h1>, <h2>, <h3>, etc in code. They are meant to be used in proper order on a page and when they are not, it makes it difficult for the user to navigate.

    An <h1> tag should always be the first heading tag on a page, then <h2>, <h3> and so on. Once these tags appear the following tags can appear in any order.

  5. Improper use of HTML5 elements

    HTML5 elements are meant to improve machine readability of a site but it requires proper use of the tags such as <nav>, <main>, <header>, <footer>, <aside>, <section>, and <article>

  6. Unlabeled sections

    In addition to proper use of HTML5 elements, they also need to be labeled with descriptions that accurately describe the content and use of each section.

  7. Improperly labeled form fields

    Form inputs have multiple components, the two most important are the input element and the label element.

    Inputs need to have appropriate labels associated with them to ensure the user knows what the intention of the field is.

  8. Un-tabbable user interactions

    For users that rely on a form of navigation without a mouse, all interactions must be tab indexed, meaning they can reach it through the tab key input. 

  9. Undescribed user interactions

    Features such as sliders, accordions, file trees, video, and others have multiple buttons and interactions that use icons, these interactions need to be described appropriately in the code for users that are visually impaired.

  10. Visually distinguishable hover/click interactions

    Interactions on a site should have a clear way to visually identify that a user can interact with it and when they are hovering or tab focused on that interaction.

  11. Keyboard input controls 

    Interactive web components such as videos, sliders, file trees, tabs, or any other interactive component should also be able to be controlled from a keyboard.

There are many free tools available that will give you an idea if your site has any easy-to-spot issues. Some issues, such as properly descriptive labels, cannot be detected with automated tools and do require a human eye. 

Our process combines the use of automated tools to go through every single page to find any quick fixes, additionally, we read through each line of code to ensure your site is appropriately WCAG compliant. 

Reach out today for a free quote

or if you prefer you can

Request a free consultation