• Krystian Surdel

Accessibility of the website for people with disabilities.

Updated: Feb 18

A website can be designed in such a way that people with certain disabilities can browse it more easily. Here are some functions that will help with this. Here you are...

Visual Indicators

Visual indicators are blue rectangles that appear around interactive elements (like buttons or links) when your visitors use a keyboard to navigate through your live site. Visual indicators allow these visitors to see their current position clearly and with ease.

Visual indicators are an important part of improving your site's accessibility.

Skip to Main Content

Skip to Main Content is a feature that allows keyboard users to easily navigate your site.

By enabling this setting, visitors who rely on keyboard navigation can bypass topmost sections of your site (such as menus and page headings), and skip directly to the main content of the page by clicking a button.

Site Navigation

Your site should have at least two ways to navigate.

This can improve your site's accessibility, as it ensures that visitors with disabilities or impairments can navigate to your site's pages and sections. For example, site menu and search bar.

Alternative Text

Alternative text (Alt text) is a detailed description of an image on your site, The description is added to the image so that browsers and screen readers can understand what is in the image. Describe this image for people who can't see it. Adding alt text to your images and galleries helps your site to be more accessible to visitors with sight-related impairments. Alt text is a brief description of the image content, which can then be "read" by screen readers.

Adding alt text helps not just your site's Accessibility rating, but also the SEO score. In turn, this helps people find your site more easily on Google.

Heading Definition

Headings communicate the hierarchy of your page content. You can add tags to headings to indicate whether it is the page title (H1), sub-titles (H2)...etc. Think of it like a book. The book's title is like a H1 heading; the chapter titles like H2s; sections within the chapter like H3s...and so on.

Why are Headings Important?

Screen readers use headings to provide in-page navigation structure. This helps visually impaired users to know where the titles, subtitles and other headings are on your page. Having clear heading definition gives a satisfying and easily navigable experience to your visitors.

Main Heading

Heading tags are elements in your site's HTML code that represent the headings on your page. Your main heading (H1) should broadly describe what can be expected to be found on that page. For example, if you had a restaurant page with the H1 tag 'Menus'

Why is Your Main Heading Important

Your main heading is the primary source of information for telling screen readers and web-browsers what your page is all about. If your page was a book, then your H1 tag would be your title.

An accurate main heading helps your page to be discovered more easily. Both screen-readers and web-browsers scan the H1s first to find what they are looking for.

Color Contrast

Why is Color Contrast Important?

Contrast and color use are vital to accessibility, but they are also important for making your site look good. All visitors must be able to see content on the page. Creating good color contrast makes your site more engaging and easier to understand for all your visitors.

What does this mean for my site visitors?

You may have some visitors who require different accommodations in order to navigate or use your site:

• Visual accommodations: People who experience low vision or loss of vision may rely on assistive technologies (like screen readers) or visual formatting (like increased text size, higher color contrasts, etc.) to successfully navigate through your site.

• Limited motor-function accommodations: People whose motor function range limits the use of a mouse or touchpad, may instead use a keyboard coupled with visual indicators to navigate through a site.

• Auditory accommodations: People who experience any degree of hearing loss may rely on the availability of audio captions or transcripts on your site.

• Cognitive accommodations: People affected by learning or cognitive disabilities (dyslexia, ADHD, autism, etc.) rely on content structure and layout consistency to navigate successfully through your site.

• Neurological accommodations: People with sensory sensitivities (such as seizure disorders) may rely on reduced motion of animated elements, or may benefit from the option to control what triggers a movement or an animation.

• Speech accommodations: People who are affected by speech disabilities may require alternate contact methods, such as providing contact forms, chat, or email options, rather than just providing a phone number.

source: Accessibility Wizard by WIX


We support local


68 views0 comments

Recent Posts

See All