Try ShortPoint nowOnce you enable ShortPoint Accessibility on your intranet, your users will have a fully accessible experience of all your site pages that meet WCAG, ADA, and other international accessibility standards.
In this article, we will provide you with some guidelines that you should follow when designing pages using ShortPoint to ensure that they are compliant with accessibility standards (especially when it comes to visually impaired users).
TABLE OF CONTENTS
- Prerequisites
- Layout Requirements for Keyboard Navigation and Screen Readers
- Applying Proper Layout
- Testing For Keyboard Navigation And Screen Reader Accessibility
Prerequisites
- You have ShortPoint SPFx version 7.8.x.xx or later installed on your SharePoint tenancy
- You have an active license as a ShortPoint User
- ShortPoint Accessibility is active on your intranet site and you have either a trial or paid license
- You must be using the AI-powered version of the widget (trial/paid) for remediations to be done in the background and for your site to be accessible. Check out our support article on the Differences Between the Free and Paid Accessibility Widgets to learn more.
Layout Requirements for Keyboard Navigation and Screen Readers
When using keyboard navigation or enabling screen readers on your site pages, you may notice that it does not follow the logical way of reading your content the way you intended it when designing the page. Instead of moving down to the next group of contents below your first element, it may move sideways to the content on its left or the other way around. This affects how your content is consumed and may cause confusion and readability issues.
The way the Design Elements are laid out on the page plays a big part in making sure your content is read naturally, as intended, by accessibility solutions on any of your intranet pages. You need to make sure that you structure your page in a way that makes sense for the AI engine to understand.
In general, when using ShortPoint layout options, keyboard navigation and screen readers read content from top to bottom within a Column and left to right between Columns within a Row.
Applying Proper Layout
To design a Section of a page to look like our example below and make it navigable:
Incorrect Layout
You need to avoid inserting a separate Row for the titles and another row for its content. This will cause the screen reader to read the titles first from left to right and then move to the content in the Row below.
Correct Layout
Instead, the title and the content should be in the same column so that the screen reader will read the title, then the content, and then move to the 2nd column and do the same.
After you structure your elements correctly, the screen reader will read the page correctly finishing the left column in the row first, and then moving to the column on the right.
Testing For Keyboard Navigation And Screen Reader Accessibility
Before publishing your intranet pages, it is always a best practice to test them for keyboard navigation and screen reader accessibility. This is an important step to ensure that your page is accessible for vision-impaired users.
To test for keyboard navigation:
- Use the right and left arrows on the keyboard to move between items and contents on the page
- Use the Tab key (Shift+Tab to go back) to move between headings, buttons, and links only
To test for screen readers:
- Enable screen reader on your SharePoint Accessibility widget
- Use keyboard navigation to go through your page
Our partners at UserWay® provided in-depth documentation of some do's and don'ts and other requirements to ensure success in complying with international accessibility standards: Learn the Success Criteria for Making A Websites Accessible | UserWay® Website Accessibility.
That is it! You are on your way to putting together a fully accessible intranet site.
Related Articles:
