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.
Still have questions? Reach us on our live chat or email us at info@format.com We’re here to help!