Ensure your website works well for people with disabilities. This helps people perceive, understand, navigate, & interact with your website.
What is Web Accessibility?
Making websites and apps work well for people with disabilities. This helps people perceive, understand, navigate, and interact with the web. Our recommendations are based on the Web Content Accessibility Guidelines (WCAG) as well as Ideaform’s Accessible Customer Service Policy.
Types of Disabilities:
-
Visual – blind, deaf-blind, low vision, colourblind
-
Auditory – d/Deaf or hard of hearing, deaf-blind
-
Cognitive – dyslexia, ADHD
-
Physical – arthritis, quadriplegia, repetitive strain injury (RSI)
-
Neurological – autism, cerebral palsy
-
Speech – non-vocal
-
Epilepsy - seizure
Accessibility Benefits Everyone:
-
People with disabilities
-
Anyone using devices with small screens, different input modes
-
People with changing abilities
-
People with temporary disabilities
-
People with situational limitations
-
People with slow Internet connection, limited bandwidth
-
The Google Search algorithm considers accessibility in ranking a site, so this can improve a site's SEO
Tips for Making your Website more Accessible
Colors
Ensure there is a distinct contrast (4.5:1) between colors on your website. This can be applied to colors used for your website's background color, text color, and accent color.
To check the contrast between colors, install a color picker extension (such as ColorPick Eyedropper for Chrome) to view specific hex codes.
Then, download a WCAG approved color picker (such as https://www.tpgi.com/color-contrast-checker/ ) where you can input selected hex codes to see if they meet the required 4.5:1 colour ratio.
Buttons
Use contrasting colors (4.5:1) for buttons used on Slideshows, Mailing Lists, and Contact Forms, ensuring the button background has a colour fill.
For Slideshows and Mailing Lists, set the button style to Solid rather than Outline by navigating to Customize Design > Button Style > Solid:
For Contact Forms, go to Design > Theme > Custom Pages > View All > Button Background Colour to ensure an appropriate button background colour has been selected.
Typography
Ensure your selected font style is easily legible and that the font size is appropriate for its placement (body text, header text, website title etc). Although the layout of Format sites will adapt for display on mobile devices, tablets and laptop/desktop screens automatically, we suggest checking your site's typography on various devices to ensure your chosen font can be easily read. To review how you can preview the mobile version of your website, please refer to our Previewing the mobile view of your site guide.
Ensure all hyperlinks are underlined as this provides a secondary indicator (aside from color) that a link is indeed clickable. This is not required by WCAG but is generally best practice to improve usability. To review setting text links across your Format website, please refer to our How to add a link to a page guide.
Text Overlays
Ensure text overlays used for Slideshows, Mailing Lists, and Collection Pages have a distinct contrast and allow text to be clearly deciphered.
For Slideshows, this could mean increasing the overlay opacity by navigating to Customize Design > Overlay Opacity:
For Mailing Lists, this could mean choosing a solid background color over an image background to ensure the text can be easily read:
For Collection Pages with text overlay (Page Link Position set to Overlay) we recommend ensuring sufficient contrast between image and text content. If this is not possible due to the thumbnail image characteristics, we recommend setting the Page Link Position to be below the thumbnail image, instead of as an overlay. These settings can be accessed via the Design > Theme > Collection Pages area and will vary by theme.
Autoplay Features
When setting a Slideshow to autoplay, ensure it is set to a minimum of 5 seconds per slide to allow time for site visitors, screen readers, and other assistive technology to review content. To set this, navigate to Customize Design > Autoplay:
Refrain from setting Hosted Videos to autoplay or loop as this can be distracting for some people.
Site Menu
Ensure your page titles and headings accurately relate to your page content. This allows for a more intuitive and accessible user experience.
When applicable, turn the Fixed Site Menu variable Off or change to Scrolling as this allows folks to view a larger portion of the screen without having a fixed site menu narrowing the frame. If this design variable is available within your current theme, it will be located in the Design > Theme > Site Menu > View All area of your account:
Image Descriptions
Add image descriptions to help those who are visually impaired, or have certain sensory processing and/or learning disabilities, to view your site. Screen readers can read the image description, translating text-to-speech to describe the image. If an image is unable to be displayed, the image description may be shown in its place (if a browser has been set to block images, for example).
Image descriptions help search engine crawlers to index your images properly, which will make it easier for people to find your website when performing a search related to your content.
To add Image Descriptions to Images on your Format website, please refer to our Adding Image Descriptions to images guide.
Reach us at our live chat or via our email info@format.com if you have any more questions. We’re happy to help!