What is Accessibility?

Website accessibility is crucial for making the Internet inclusive and fair for everyone. It ensures that all individuals, regardless of  their abilities, can access and use online content and services. Adhering to accessibility guidelines demonstrates a company’s commitment to social responsibility. In addition, accessible websites offer a better user experience, helping businesses reach a wider audience.  

Why Accessibility Matters?

Accessibility in design ensures that  everyone, regardless of their abilities, can use and interact with products and places. It enables individuals with disabilities to navigate technology, buildings, and services independently. Focusing on accessibility and good design ethics shows social responsibility and fosters creative solutions that benefit everyone. Ultimately, accessibility helps create a more inclusive and fair society for all.

Best Practices for Accessible Folloze Boards

Headings & Labels

Clear and descriptive headings are essential for website accessibility. They help users, including those using screen readers, to navigate and understand the structure of content. Properly nested headings improve the user experience by providing a logical flow of information, making it easier
for all users to find the content they need.
 

Note: Setting the heading in the text editor does not change the tag used in the actual page. For example, if you set a carousel title to heading1, it will still render as an h2. Folloze keeps the heading HTML tags for SEO purposes.  You can control the sizes of each heading and paragraph through the theme object.

 

Recommendations

1. Use the banner as the first section containing an H1 title and reserve H2 tags for titles in subsequent sections. Avoid using the H1 tag in any section other than the first section banner. 
2. The H1 tag is vital for SEO, as it highlights the main topic of a webpage. It helps search engines understand the content, improving the page's ranking. A good H1 tag should be unique, concise, and include relevant keywords. Using a single H1 tag per page enhances clarity and user experience. 
3. Unless necessary, do not alter the text hierarchy within sections. If certain text is not needed, disable the text toggle.
   
   TIP:
   To create a section containing only a paragraph, go to the Columns section, select a single column, and enable only the paragraph toggle. 

4.  Ensure all headings and labels appropriately describe the topic or purpose. 

Colors & Contrast Ratios

The Folloze theme includes key design features such as font sizes, colors, and buttons and is controlled at the organizational level. This ensures consistency and alignment with the brand elements throughout the board.

As a board builder, you can control text and background colors in each section, ensuring high contrast for better accessibility. Additionally, you can select how the button looks according to the options defined in the theme object. 

Choosing accessible colors involves ensuring sufficient contrast between text and background to make content readable for everyone, including those with visual impairments. Avoiding color combinations that are problematic for color-blind users and providing alternative indicators beyond color enhances both accessibility and usability.

Examples:

1. Button labels must have high contrast with its background.
2. Heading and paragraphs must have high contrast with the background.
3. The icons on the item thumbnail must have high contrast with its background.

Color Contrast Checker

https://accessibleweb.com/color-contrast-checker/

Images

Accessible images are essential for inclusivity. Each image should have descriptive alt text to convey its content and purpose, aiding users with visual impairments. 

Avoid using images of text if possible. If images of text are necessary, such as logotypes in an image, ensure that suitable alt text is provided describing the text.

Buttons

Accessible buttons are vital for user interaction. They should be clearly labeled, easy to click, and distinct from other elements. Ensuring keyboard accessibility and screen reader compatibility allows all users to effectively interact with web content.

TIP:
If you don't want to use a button in the section, toggle the eye icon off to hide the button. Removing the label does not remove the button.

Keyboard navigation

Folloze boards support navigation by keyboard.
Keyboard navigation is an accessibility feature that allows users to navigate through a website by pressing specific keys on the keyboard to easily move between different elements on the page. This makes access to content and services on the site accessible.

Keys Supported:
Tab:  move to next item
Shift + Tab: move to last item
Enter:  click on button / link / item
Up Arrow / Page Up:  scroll up
Down Arrow / Page Down:  scroll down

Header Navigation

An accessible navigation menu is essential for enabling all users to explore a website efficiently. Menus should be easily navigable using a keyboard, with clear labels for each link to help screen reader users. Logical structure and organization are crucial, ensuring  users can understand and predict the navigation flow. By making navigation menus accessible, websites provide a smoother and more inclusive browsing experience for all users.