Table of Contents
This post is brought to you by…
A seven minute read.
Web accessibility is not the most popular of topics in web design in 2021, and that is truly a shame.
More Pull Media(Canadian Web Design and SEO Company) provides in this article an overview of current web accessibility topics and practices.
You need to be paying attention to the latest news in web accessibility(especially if you’re web designer).
Read on to get a summary on the current situation in terms of web accessibility.
Learn how you can make some practical applications to your website to improve it’s accessibility.
Properly developed websites are naturally accessible.
Part of properly developing websites in 2021 is ensuring a base level of accessibility to all your website users and visitors.
Website accessibility refers to the ease of use of your website for people with challenges using the web in the traditional sense(point mouse, scroll, click, read, screen reader, audio/video etc.) or have other disabilities.
While you will not be able to ensure your website is 100% accessible to 100% of users at all time, using the tools and tips below we can get as close to that mark as possible.
What makes a website accessible.
Website accessibility comes down to ensuring your website is usable to people with a diverse range of hearing, movement, sight and cognitive ability. Online accessibility means you are not unintentionally excluding people(especially disabled peoples) from using your products and services.
Why web accessibility is increasingly relevant in 2021.
In this day and age the use of the web is rapidly increasing.
With it so will the use of the web by those with demands for accessibility requirements such as those disabilities or people otherwise challenged with use of websites in traditional usage.
It is your responsibility and actually to you and your visitor’s mutual benefit to make your website as accessible possible.
Some food for thought on why you might want to take the time to make adjustments(or pay someone to make adjustments) tailored to increase your website’s accessibility:
Corporate Social Responsibility
Corporate social responsibility is gaining traction in North America and abroad for a variety of ethically oriented practices.
Website accessibility is one of the most fundamental responsibilities a company can take to immediately improve upon their corporate conscious and operate as a more holistically responsible business.
Legislature, Laws, and Government Stipulations
Legislature and or laws and government stipulations are on route(if not in place already in some countries) in regards to mandating standards of web accessibility.
A 2017 publication from Employment and Social Development Canada generally promoting the legislation and there for mandate of website accessibility notes that many Canadians support standardization of web accessibility in organizations, business, and other online endeavors.
The publication also alludes to the possibility of enforcement(audits, penalization, fines) and incentives or reward programs for companies that meet to-be accessibility standards.
In any case, implementing basic web accessibility measures right now may be future proofing your online presence and ease a transition to any type of mandated web accessibility reform. In Israel, a country in the middle east for example, government regulations on website accessibility have been in place since 2016-2017.
Increasing Overall Market Capture
Increase your market capture, as statistics show(at least in Canada eh), per Statistics Canada, 22% of Canadians in 2017 had at least one disability. You simply cannot afford to ignore one fifth of the populace.
Having a fully accessible web presence is a must have for any product or eCommerce based web business. Find out more about eCommerce accessibility.
Web Accessibility Benefits Everyone, Not Just Disabled Peoples
Web accessibility benefits people without disabilities.
There are very simple circumstances which illustrate this.
Viewing screens in direct sunlight is difficult for all computer users, ensuring properly contrasted and sized text helps mitigate this. In addition, not all disabilities are permanent – think hand or upper body injuries, or temporary impairments to vision.
In the broader scheme, generally the elderly will benefit from increased accessibility, just by ease of use or convenience of screen readers or other accessibility tools. But those with temporary ailments or injuries will naturally be looking for tools and techniques that allow them to use the web as they did prior to their unfortunate mishap. The basic usage of these tools and techniques rely on accessible web design.
The Rise of Law Suits and Litigation
Law suits and web accessibility litigation continues to steadily grow in 2021.
We are seeing most digital accessibility claims are coming out of the USA and usually settled privately.
In the United States, most relevant claims to website accessibility are typically Americans with Disabilities Act of 1990(also known as ADA) claims.
If you are reaching a large market with a product or service you definitely need to consider the possibility that some of your users may take the accessibility of your website a little more seriously than the typical user. That said as, regulations and mandated standards come into affect, the frequency and legitimacy of these sorts of claims will justly increase.
Practical tips to improve accessibility on your website or applications.
The benefits of improving your web presence’s accessibility are clear.
At More Pull Media we are all about practical advice, tips and instructions you can use to take action today.
Try out some of the below and let us know if you have any additional pointers!
Proper Color Contrasts for Text and Background.
Color contrast in text and background refers to the difference in color or shade between your text and the background on which that text is situated.
Measurements for contrast ratio can be taken to serve as a basis for improvements.
Interestingly there are separate but similar requirements for links.
Links have a different contrast ratio they must meet. generally speaking color contrast is a fundamental of web design.
Unreadable text is a common web design complaint. When in doubt, black and white is always a base level standard you can fall back on.
See this Contrast Checker tool for a very practical check of accessible color contrast ratios.
Proper Text Sizing and Sizing Choices.
Text sizing can be recommended at 16px minimum for mobile screen views, plus or minus a pixel or two for tablet and desktop views.
This is standard web design. To ensure all users can view your content at the text sizing ideal for them, consider local web text zoom functionality. If you are a WordPress developer or designer there are various plugins you can use to achieve this.
You can consider using responsive text sizing that modifies font size based on the screen and view-port variable of your website visitor’s device or browser tab size.
Explicit Text, Links, Call-outs and Buttons.
Everyone likes colorful buttons right? Yes, it’s true, but to ensure optimal accessibility you will want to be using descriptive button text. Generally your button name should be the same as the text inside the button.
In addition, it could be beneficial to use link(<a> </a>) tags to supplement the buttons for your intended website funnel ensure your linkage and internal <a> tag text best describes the route of the href=”” URL.
Aligning your <a> tag text to the context of it’s immediate use and the destination URL is crucial to ensuring clear purpose of the link. It is also best practice to typically underline and standardize the link format, color, sizing etc of all your links. Underlining links is a more of mandatory requirement and users of the web in 2021 are accustomed to seeing underlines on links.
Color contrast similarly to normal text contrast accessibility ratios has separate defined ratios of which you’ll need to adjust to meet specifications. Information on link text color contrasting. You can use the same Contrast Checker tool as mentioned above to verify your adherence to industry accessibility guidelines.
Basic formatting techniques that improve upon general user experience are also going to have positive benefits for those with disabilities.
Proper use of white space, font-size, paragraph structure, punctuation, spelling, grammar, this all naturally comes into play. Other Cascading Style Sheet(CSS) properties that you can play with to improve readability of your content are line-height, letter spacing, and margin or padding on your <p>, <h1- h6>, and <div> tags.
Tips to improve screen reader compatibility.
Alt text on images.
These are know as “alt tags: and “alt descriptions”.
The alt tag is a written copy that appears in place of an image.
Alt tags also provide a description for if an image fails to load or for those visually impaired(ie. when using a screen reader).
When users are unable to view your website images due to them having an underlying disability they and their accessibility tools often rely on alt tags. If alt tags are poorly written or non-existent then the efficacy of your visual communication is lost to visually impaired readers.
Implement descriptions of images(not using “image of” or “picture of”) to simply describe what you are showing. If you need a more detailed explanation of alt text on images you may find this article on alt text best practices quite comprehensive.
Accurate titles for your pages/posts.
An accurate descriptive title tag can help to refine the purpose of the page.
The title tag is an HTML element that specifies the title of a web page and is displayed on search engine results pages (SERPs) as the clickable link for a given query result.
A title should be accurate and concise as to describe the contents of the page. People who use a screen reader benefit greatly from a clear concise title, as it is essentially the first thing they will come across on your web page or in SERPs.
Thus this allows quick screening of content relevancy to the user. A lack of title or inaccurate title necessitates a visitor using a screen reader to wait to hear significant amounts of content prior determining whether the content on the page is relevant or not. That’s not ideal for user experience.
Use captions for on page audio and video.
Those who are hard of hearing will appreciate this one.
Captions are a text version of the speech and non-speech elements of an audio feature or video.
Captions are needed by deaf or hard-of-hearing individuals to understand content. Anyone with cognitive and/or learning disabilities can benefit from captions, they allow them to read the content and better understand it. Voice recognition software can help you to create your captions for audio and video resources provided on your website.
Form fields and labeling controls.
Providing labels next to forms means integrating an adjacent description for the entry field on your form.
Do not leave field forms blank or labels non existent. Screen readers often switch to a “Forms Mode” where they process the content within a <form> element. It’s a best practice to incorporate detailed instructions of the purpose and use of the form. Instructions will be read aloud by the screen reader and provide clear direction to the listener.
Implementing the <label> tag for your inputs and adding a bit of text instruction above the form is the basic strategy here to ensure web accessibility. Placeholder text is not a replacement for labels. It gets overwritten upon form entry and in some cases is not supported by certain browsers.
Use headings to organize content.
Screen reader users can navigate a page according to it’s headings, or get audible ques for a list of all headings, and skip back/forth to their desired heading to begin reading.
Most screen reader users will prefer to use headings to navigate larger web pages or posts to find information.
At the very basics, implement a <h1> Heading One level heading giving the title of the page. A common mistake is to make text bold when it should be heading, <h1>, <h2>, <h3> etc. Three tiers of headings is probably sufficient enough for screen readers, taking hierarchical organization beyond this is unlikely to be that beneficial to to disabled peoples or others.
Web accessibility software to be aware of.
Become aware of industry software that can expedite the full implementation of web accessibility to your business’ online presence.
By doing so, you are not only opening avenues to save you time and money in updating outdated websites.
Lend yourself you to industry innovation and the filling of service gaps as more and more countries, organizations and the public demeanor push forth to completely necessitate web accessibility.
WordPress plugins available.
WordPress has the largest market share when it comes to content management systems and right now is estimated to power approx 40% of websites according to this WordPress market share article from Kinsta.
Briefly listing some of the most relevant WordPress plugins for you to discover for yourself…
Other web accessibility software and tools.
The internet is vast, and not all websites are powered by WordPress. People with disabilities can benefit from the general implementation of accessibility tools, techniques, and on site/applications software integrations.
In no particular order, some relevant web accessibility tools, programs and software…
- NVDA Screen Reader by NV Access Limited
- Apple Voice Over
- AI for Accessibility by Microsoft
- accessiBe by accesiBe LTD
Conclusion and future considerations of web accessibility.
Web technologies that are used to develop websites and applications are constantly evolving and so are the standards that developers and designers are held to.
As a business owner or web designer it may soon be your responsibility to ensure the accessibility of your online presence or web application.
If you are concerned about your current website possibly being inaccessible to large majority of web user please reach out to More Pull Media and we’ll be more than happy to help.
By implementing and understanding the above tips, tricks, and current state of affairs of website accessibility hopefully will help you to create a strategy of a web accessibility implementation in the near future.
If you need help ensuring your site is accessible, reach out to a professional web designer. Most web accessibility changes are quite simple and you could have your entire website meeting prescribed accessibility guidelines within days.
Additional resources and references you can view to stay up to date on website accessibility.
W3C Web Accessibility Initiative (WAI) – strategies, standards and support resources to make the web accessible to people with disabilities.
WebAIM Contrast Checker – a simple tool you can use to verify your text contrast is acceptable from an accessibility standpoint.
Province of Ontario Guide on Accessibility – guidelines on compliance and standards of web accessibility for the Canadian province of Ontario.
Web Content Accessibility Guidelines – specific link for the W3C organization accessibility guidelines, basis for Canadian implementations.
Overview of Canada’s Accessibility Laws – an overview of laws and upcoming provincial accessibility laws