Building awareness for accessible websites

Global Accessibility Awareness Day (GAAD) takes place on the third Thursday in May, with this year bringing awareness to digital accessibility on May 18th, 2023. The first mention of GAAD was written by Jon Devon, a Los Angeles-based developer, who wrote a blog post on how accessibility know-how needs to go mainstream with developers. He wrote: “Let’s agree on a Global Accessibility Awareness Day. This will be a day of the year where web developers across the globe try to raise awareness and know-how on making sites accessible.”

Why does digital accessibility need awareness?  

GAAD writes that 1 billion people worldwide have some form of impairment or disability, including visual, auditory, cognitive, and motor impairments or disabilities. While many agree on the importance of providing a great, first-rate digital user experience to every user – there are many websites that fall short.

How can websites be designed to be more accessible? 

Enable ARIA Labels 

In Mono Editor, you can enable ARIA by clicking the Site settings icon> Settings and then in the left-hand menu, click Website settings and select Accessibility settings from the dropdown. Tick the Enable ARIA box.  
 
Enabling ARIA (Accessible Rich Internet Applications) makes your website more accessible for a diverse range of visitors such as visually impaired users using screen readers, magnifiers, etc to make sense of elements that do not have text labels on them. Read more about ARIA here. 

Enable and style the skip navigation element 

In the same Accessibility settings section in Mono Editor, you can enable and style the skip navigation element. By enabling 'Skip to content', users will bypass all main navigation elements and jump down to the beginning of the main website content. 
 
This feature is important for when keyboard-only users interact with a website, as they use the tab key to jump from element to element. When a user opens up a new page on the website, this means that they must tab through all the links in the main navigation menu in the header to get to the content of the page. The ‘Skip to content’ feature allows them to easily bypass this and make the browsing experience less repetitive.

Enable and style the focus indication element 

You can also find, enable, and style the focus indication element in the Accessibility section in Mono Editor. With 'Focus indication' you can enable a colored outline around actionable elements on your website, clearly indicating to visitors when they are moving among objects. You can style the focus indication in Global Styling. 
 
Read more about enabling ARIA, the skip navigation and focus indication elements here.

Use proper color contrasts 

It is important that you use sufficient contrast between text and background colors, so texts are easy to read. To fine-tune and determine the proper color contrast you wish to use depends on your primary target group of website visitors. High Contrast (ex. Dark text on a light background or bright text on a dark background) is required by some with visual impairments, for example, elderly who have lost contrast sensitivity due to ageing. However, others with reading disabilities such as dyslexia require low contrast.  
 
Tip #1: Use global colors and global texts throughout the site – this way you can quickly and easily test different color contrasts and change the visual presentation of the website in just a matter of seconds. 
 
Tip #2: After you've decided on a color palette, run the website through one of the many freely available contrast checkers on the internet, for example https://accessible-colors.com/.   

Review your font sizes 

Generally, Smaller font sizes can be difficult for many to read, straining the eye of the visitor. Oftentimes, we see smaller font sizes are also seen with walls of text, which can overwhelm the website visitor.  
 
In general, it is a good idea to use larger font sizes to make the website easier to navigate and read for the website user, but especially when designing for accessibility.  
 
Some assistive software allows visually impaired visitors to enlarge texts themselves in the browser, but doing this may break the overall website design as it causes paragraphs to overlap. Therefore, it is better to design the website to have larger font sizes by default.

Add alt text to relevant images 

Another tip for when designing for accessibility is to add alt text to an image. Screen reader software will be able to read the alt text out to the user, meaning alt text makes it possible for visually impaired users to understand images even though they can’t see them. In Mono Editor, alt texts can be added to images in the File Manager as well as through all modules containing images.  
 
Here are some guidelines for when and when not to add alt text on an image:  
 
An alt text should be provided for: 
• Images that convey meaning. 
• Images that contain text/caption. The text of the image should be part of the image’s alt text attribute. 
 
The alt text attribute should be left blank for: 
• Images that are decorative and do not convey any meaning that is relevant to the content which surrounds it. 
• Images that are already described by sibling text elements. For example, if there's an image of a magnifying glass and right next to it you have the word “Search”, then the magnifying glass image should not have an alt text. 

Mark up headings in text paragraphs with H tags 

Make it easy for visitors and assistive technologies to understand the structure of your website content by marking it up with sequentially-descending heading element tags (H1, H2, H3, etc.). This way people can navigate to the headings - including keyboard-only users and those using a screen reader. You can add heading tags in the Text Editor. 

Use icons available in the Editor  

In Mono Editor, the modules that contain icons have already been assigned a meaningful ARIA label. It is recommended to use these then if you're adding icons to a website.  Try to avoid using an Image module to show icons as you would need to input an alt text for those images (which would take you more time).   
 
You can add icons through the following modules in the Editor:  
• Icon list module 
• Payment icons module 
• Link and download module 
• List module 
• Accordion module 
• Social media links module 

Use proper page title conventions 

First and foremost, give your page a title. Good page titles are particularly important for orientation to help people know where they are and move between pages open in their browser. The first thing screen readers say when the user navigates to a different web page is the page title. For Accessibility purposes, best practice is for titles to be "front-loaded" with the important and unique identifying information first. 

Examples of poor titles: 
• Welcome to the home page of Parkview Medical 
• Parkview Medical | About us 
• Parkview Medical | Contact us 

Examples of good titles: 
• Parkview Medical home page 
• About Parkview Medical 
• Contact Parkview Medical 
 

Additional accessibility-enhancing measures you can apply include:

• No flashing or blinking content. 
• A language has been declared on all pages
• All link texts have discernible names 
• All buttons have accessible names 
• All contact form fields contain form labels 

Note: These features have already been applied to all newer Mono templates. Read more about the accessibility enhancing features in our new Mono Templates here. You can also find additional tips on building accessible-friendly sites here. 

How can you see how well you are doing?

In the Mono Editor:

As mentioned previously, there are a lot of tools that help you as a designer to build a more accessible-frinedly website: global colors and texts, accessibility settings, etc. One helpful tool yet mentioned in this post is the SEO checker located under the Content dropdown in the top menu. With a click of a button, you can see an overview of all your pages and what is missing on each. For example, missing H1 tags, page titles, and a list of images without alt text is presented instantly. Read more about our SEO checker here. 

Want to see accessibility put into practice? See examples of accessible small business websites created using the Mono platform here:
• https://www.sangakbueggs.com/
• https://www.dirkvanlaere.de/ 
• https://www.tmbil.no/
• https://www.selbuspinneri.no/ 
• https://www.kalter-rae.de/ 
• https://www.mrmobile.no/ 

PageSpeed Insights:

PageSpeed Insights is an external tool that you can use to get an overview on accessible the published website is. Read more about PageSpeed Insights here or use the tool here: https://pagespeed.web.dev/

Wrapping Up:

We hope that this article has helped inspire you to build more accessible-friendly websites quickly and easily in the Mono Editor to provide great digital experiences for every user. 

About Mono

Mono was founded on the belief that all small businesses deserve the same level of online presence and performance as larger companies. With Mono platforms and products, we want to provide resellers with an all-in-one solution to build and manage customer websites. Request a demo here.