Since 1999, accessibility for websites has become a growing concern for everyone who develops and manages websites. The Web Content Accessibility Guidelines (WCAG) were created as a standard for websites to follow if they wish to provide a full-featured experience to those with disabilities.
In early 2022, Zoomforth released features and HTML changes that would allow users to easily build sites that follow the WCAG 2.1 AA guidelines. Here are the fundamental principles we followed and the tools that are now available for our users.
The currently focused element should be visual
Focus elements refer to the element that is currently being looked at. Visitors who use a mouse typically interact by hovering over elements in a website. Visitors who are restricted to using their keyboard to navigate need a different experience to help them understand what elements can be interacted with and where they are on the site.
This is where the focus elements become important.
The WCAG outlines that focus states should be visually apparent. When a visitor presses the tab to navigate through your website, they should see a clear border with a highly visible color identifying what element they are currently looking at. Screen-readers and other assistive technology will announce the currently focused element which gives them a chance to participate in the content you have written.
Zoomforth sites have had their underlying HTML rewritten to use web elements that web browsers already provide focus elements for. Every interactive element in the sites you create from now on will have focused borders by default.
You may modify this border color in your theme editor by:
Select your theme from the themes dashboard
Open the theme editor
In the left sidebar find Site Basics > Misc > Keyboard Focus
Set the color you wish for the focused border
The focus order should follow a clear hierarchy
Websites are read from top to bottom and it is expected behavior that clicking TAB on your keyboard will start from the top and progress down the site. In short, the experience should be linear and predictable.
Zoomforth has ensured that sites follow this concept and that visitors can easily tab through entire sites in a predictable way.
Images should have descriptive alt text
Alt text (alternative text) is text that appears in place of an image on a webpage if the image fails to load on a user's screen.
This text helps screen-reading tools describe images to visually impaired readers and allows search engines to better crawl and rank your website.
Accessible sites ensure that even without images, a visitor can understand what is being presented.
Zoomforth has introduced a new field in the media library and in the site editor sidebar for each image in your site. For a fully accessible site, you should add alt text everywhere it makes sense. Learn more about how to do this by checking out this article.
Use headings to introduce content
Sites should use headings to designate different sections and the importance of different items. Headings also allow visitors to understand the hierarchy of your site.
Websites have different sizes of heading ranging from H1 to H6.
When building your sites you should typically:
Use one H1 tag per subpage. This is the most important heading on the page which outlines what the page is about.
Use H2 tags to differentiate different sections or areas of content.
Use smaller headings to designate distinct sections within a larger section. This helps to break up large paragraphs and shows a clear relationship to the above headings.
Every site is different so there isn't a clear blueprint to follow. However, if you follow the above principles you will create a much better user experience for all visitors.
List elements are used for list content
Lists show visitors that content is related. HTML provides tags such as <ol>, <ul>, and <li> for creating these lists in a predictable way that screen-readers and browsers understand.
Zoomforth sites have had their HTML rewritten to use lists in places where they make sense. Navigation and sub-navigation now use these elements and define the purpose they serve on the site.
For example, the main navigation applies to the global site. Screen-reader technology will announce to the visitor that they are viewing elements in the global navigation.
In text tiles and sections where you are listing information, it is important that you use our built-in lists which are available in the text editor.
Links should be recognizable as links
A large portion of building accessible sites is that they should be predictable. Visitors expect that anything they can click on should be visually recognizable, so they can easily spot this content and decide whether they want to interact with it.
Links are an example where, by default, web browsers set an eye-catching color and add an underline to them. This distinction makes them easy to spot when scanning a website. It is best practice to follow these principles when creating your own themes and defining the look and feel of your links.
For example, if your paragraph text is black then it would be best to have a contrasting and vibrant color to signify the links, such as blue. If your links were also black then they could be easily missed and your visitors may not be able to interact with the website as you expected them to.
Skip links should be provided
Skip links are ways for your users to "skip" visuals or other content that is not relevant to them. Zoomforth has implemented two types of skip links to sites.
The first is a subpage-level skip link.
When a visitor first loads your website and presses TAB on their keyboard they will be introduced to a button in the top left corner which allows them to skip to the main content of the site.
Visitors with visual impairments may choose to skip an opening video for example and start reading the actual content of the site instead.
By default, this skip link will take you to the top of the first section of your subpage. However, you may change this in the site editor if your first section is not the main content for that subpage.
In the site editor, hover or click on the section you wish to mark as the main content of that subpage.
Find the make main content link in the top right of the section display.
Click this option and it should say that the selected section is now the main content.
Now when visitors access your site and use the skip link, they will be taken to the designated section that you chose for that subpage.
The second type of skip link that we have introduced is section-level skip links.
Complex components such as iframes, slideshows, video playlists, and presentations can sometimes be disorienting for visitors. They can also take a long time to tab through for someone who is using their keyboard.
We have introduced a skip link over these complex section types that will appear when the visitor is tabbing through the site. Clicking this link will move their focus below that component so they can continue down the site.
Visitors should be warned when an action opens a new tab or window
Context switching can be challenging for anyone. It is oftentimes disorienting when you click a link and realize that it opened a new tab or it opened in the same window that you are currently viewing.
Accessible sites should have visual queues that help visitors understand the intentions of your links.
Zoomforth will automatically show a small tool when a visitor tabs to a link or hovers over a link that opens in a new tab or window.
Table elements are used to describe tabular data
Tables have been around since the inception of the web. They provide a rigid structure to display data to visitors in rows and columns. Tables should make it clear what data is being displayed and should use the elements defined by the world wide web standards.
Some principles to follow when creating tables:
You should use table headers at the top of each column to define what data is in the column.
Table headers should be visually different than the data below them.
If your table requires headers for rows then they should be formatted similar to headers and should be used in the right column of the table.
Data should be easy to read with enough space between the borders.
Important: Zoomforth tables cannot currently allow you to add captions to them. These captions are meant to describe the table as a whole. For a fully accessible site that meets strict WCAG 2.1 guidelines, it is currently recommended not to use tables in your content.
Forms should be accessible
Forms are another integral part of the web that allows visitors to input data and submit it. Zoomforth offers a fully-functional form builder which allows you to create and embed forms in the sites you create.
Forms were rewritten so they can follow the WCAG 2.1 guidelines:
All inputs have a corresponding label element. This label, when clicked, allows you to focus on the form input it refers to. It also describes what the field is for.
Fieldsets and legends are used where appropriate. Elements such as checkboxes and radio buttons now are embedded in a fieldset to help visitors understand that they are related to one another.
Form input errors are displayed in a list above the form when it is submitted.
Error states should not be expressed purely by colors. This means that the errors should be descriptive and related to the field that has the error.
We have also introduced a new option in the form editor which allows you to set the placeholder text for a given field. Placeholder text is the shadow text that appears inside the form field before a user types. It can help provide example responses or describe more about what the field's intention is.
Colors should fit distinct contrast ratios
Colors are one of the most important aspects of designing accessible websites. Users with visual imparities may find certain colors harder to read in relation to the background color that is used.
WCAG 2.1 outlines that:
Normal-sized text should have a 4.5:1 contrast ratio between the background and text color.
Large-sized text should have a 3:1 contrast ratio between the background and text color.
Icons should have a 3:1 contrast ratio between the background and icon color.
Borders on form input elements should have a 3:1 contrast ratio between the background and icon color.
Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
This means that, when designing your theme, you should test your color choices for contrast before publishing your site to your audience.
We have found the following tools helpful in checking color contrasts and selecting different color choices:
In conclusion
Building fully accessible sites can be a daunting process, however, don't let it overwhelm you. We have taken the initiative to build accessible sites and provide a platform that enables you to do the same. By following the above guidelines, you will begin developing sites that are compliant with web standards and available for a larger audience.