Accessibility

Our School Jotter 3 sites implement various accessibility features in order to ensure compliance with the WCAG guidelines whilst also ensuring that our sites are accessible to end users.

Accessiblity tool

All of our School Jotter 3 websites come with an accessibility button that can be switched on easily.

What you need to do:

Go to Sites from the dashboard.
Click Settings on the left hand side.
Scroll down and set the "Add accessibility toolbar on the page" slider to Yes then click Save.

The accessbility button allows website visitors to easily set the text size, text spacing, high contrast amongst other things.

Keyboard Navigation

According to WCAG guidelines, a website and its navigation menus must be fully accessible using a keyboard, without requiring a mouse.

All of our School Jotter 3 websites meet this requirement. All essential navigation elements such as menus, buttons, and forms can now be operated using keyboard controls.

How to navigate a School jotter 3 websites menu by using keyboard navigation

Navigating through menu items (Tab / Shift + Tab)
- Tab moves focus to the next menu item.
- Shift + Tab moves focus to the previous menu item.
Moving within the menu (Arrow Keys):
- Up / Down Arrows – navigate between different menu levels (open and close submenus).
- Left / Right Arrows – navigate between items on the same menu level.
Quick access to the first and last item (Home / End)
- Home – moves to the first item on the current menu level.
- End – moves to the last item on the current menu level.
Opening and closing submenus (Enter / Space / Esc)
- Enter or Space opens a submenu.
- Esc closes an open submenu and moves focus back to its parent item.
Selecting a menu option (Enter / Space)
- Enter or Space activates the selected menu item.
Automatic menu closing
- The menu should close after selecting an option or clicking outside of it.

Keyboard Navigation throughout the website

For users who navigate with a keyboard (such as people with disabilities or those who prefer keyboard controls over a mouse), it is essential that the website remains fully functional without requiring a cursor.

Navigating Through Page Elements

Tab – moves focus to the next interactive element (button, link, form field).
Shift + Tab – moves focus to the previous element.
Enter – activates the selected link, button, or other interactive elements.
Space – scrolls the page down or activates certain elements (e.g., checkboxes).

Scrolling the Page

Down Arrow (↓) – scrolls the page down.
Up Arrow (↑) – scrolls the page up.
Page Down / Page Up – scrolls a full page down or up.
Home – moves to the top of the page.
End – moves to the bottom of the page.

Alternative Text

The alt attribute in HTML is a form of alternative text that describes the content of an image. It is used in the <img>element to provide a textual description of the graphic when the image cannot be loaded or when a user relies on a screen reader. You can now add alternative text to slideshows, images, and awards etc. Being able to add alternative text is essential for those that use screen readers to view your website.

You should always make sure to use alternative text for any images, icons, buttons and graphics.

Examples of Good and Bad Alt Text

Lets imagine that you have added a picture of a cat to a class page on your school website. You would like to add some appropriate alternative text to describe the image.

"Picture of a cat" is too vague – it's better to describe what the cat is doing

"A black cat curled up on a red blanket" would be a much better description as it includes much more detail about what is in the image.

How to add alt text to an image

In order to add alternative text to an image do the following:

Whilst in edit mode left click the image you wish to add alternative text to.
Click the image icon in the editing toolbar and image settings will appear.
Type in the alternative text you wish to use in the Alternative description box.

Please see the image below to show where this option is located.

How to add alt text to slideshow images

If you have added a slideshow to a page on your website, you can easily add alt text for the images. In order to do so:

Go to the page where you added your slideshow.
Left click on the slideshow to make sure it is selected.
Click the cog shaped settings icon in the blue tab that appears at the top right of the slideshow.
Enter the text in to the Alternative description box then click Submit.

How to add alt text to the main home page slideshow

The process for adding alternative text to the main slideshow on the home page is a little different.

You will need to:

Go to Sites from the dashboard
Click the Slideshow button on the left hand side.
Click the "Add alt text" button to add alt text to slideshow images.
Click Save once done.

Adding Alt text to the footer awards