Accessibility Tick list | Sage UK

At Sage, we use an out there design very best follow tick list to make sure we’re making our merchandise and communications out there for every type of customers. It is important that our designers believe accessibility from the beginning of the design procedure, and all through construction at Sage – making an allowance for as many angles as conceivable to incorporate customers of various talents.

We be sure that as a lot of this knowledge as conceivable is handed to the individuals who construct our Sage merchandise and for our web site in order that we will create out there studies.

Our accessibility tick list is constantly reviewed in opposition to Internet Content material Accessibility Tips (WCAG) to stop pages, patterns, or parts changing into inaccessible.

We inspire the usage of our tick list as a part of your individual design procedure, to help in making your designs extra out there for all.

Labelling and showing content material

You will need to believe how all on-page content material is gifted to customers. For instance, pictures, buttons, and shape fields would require you to take additional steps to make those extra out there. The underneath issues will have to be incorporated:

• All buttons with icons will have to have a visual textual content label
• Photographs will have to have a textual content choice that correctly describes the content material or that means of the picture
• Keep away from describing parts or on-page components via place, color, dimension, form, and many others
• Show all content material on-page i.e. no longer hidden in tooltips
• Designs will have to be aware of viewport dimension – this will have to account for consumer behaviours comparable to zooming in, making use of customized types for textual content spacing, and other software or window sizes
• Dynamically up to date content material will want to be communicated to display screen reader customers
• Content material like pop-up messages will have to no longer disappear till the consumer dismisses it
• *Use vertically ‘stacked’ or indexed shape labels comparable to hints/assist, error, and enter format
• Keep away from ‘placeholder’ textual content inside of shape inputs; particularly for labels or trace/assist textual content

Formatting and styling content material

Formatting and styling on pages may also be distracting or might dilute messages. It’s necessary to be sure that your designs believe structure and styling components when making content material inclusive for customers with various accessibility wishes.

• Use sentence case textual content for labels and headings, reasonably than name case or all-caps
• Imagine how the ideas will likely be introduced and marked up. For instance, is the ideas higher introduced as a desk or an inventory, and is that this being marked up with the proper Schema?
• Don’t depend on color to keep in touch that means
• Textual content and different consumer interface (UI) components will have to have a enough color distinction between their backgrounds and adjoining textual content and/or components
• Buttons will have to no longer seem like hyperlinks, and hyperlinks will have to additionally no longer seem like buttons
• At all times take a look at your designs with a color blindness clear out to make sure it’s nonetheless readable

Navigation and consumer enjoy

Many customers with bodily, motor, and cognitive disabilities continuously use the to navigate. That is continuously rather than a touchscreen, monitor pad, or mouse. Because of this, we will have to be sure that the whole lot we produce, from virtual merchandise to internet pages and communications, are out there to keyboard-only. This permits customers to accomplish duties like surfing or clicking via content material extra simply, the usage of the capability of a keyboard to get admission to the content material as meant. When developing parts, the underneath issues will have to be thought to be:

• All parts are configured to be accessed by means of keyboard reader
• When the usage of the tab key to navigate buttons, hyperlinks, and shape fields, be certain that the order of center of attention is predicted, and the point of interest indicator is obviously visual.
• Keyboard shortcuts will have to use modifier keys
• Drag and drop capability will have to be an enhancement of a button-based mechanism for reordering – and no longer the one option to reorder
• Goal sizes will have to be 44px × 44px anywhere conceivable; 24px × 24px at a minimal
• Navigation may also be skipped via keyboard customers
• Web page titles will have to describe what’s on every web page
• Navigation will have to be constant from web page to web page
• Elements that do the similar factor will have to glance and paintings in the similar manner
• Be certain that a couple of techniques to navigate from web page to web page (for instance, navigation and on-page hyperlinks)
• Web page content material will have to no longer alternate considerably when a sort component worth (like a radio button) is modified
• Web page content material will have to no longer alternate considerably when a component receives center of attention
• Similar content material and controls will have to be grouped intently to assist customers know that they’re to be had, if the usage of display screen magnification
• Headings will have to be used to assist the consumer determine teams of content material on a web page
• Hyperlinks, headings, buttons, and shape box labels will have to be descriptive
• Hyperlinks will have to be underlined

Activates for shape or job final touch

Accessibility for in-product or on-page job final touch is the most important to be sure that mistakes are minimised for customers who will have disabilities that make inputting information more difficult. Accessibly integrated activates for shape submission or enter fields can assist all customers engage with those parts as meant, permitting them to supply extra correct, proper knowledge.

• Mistakes will have to be flagged the usage of textual content
• Ideas may also be given inside error messages to assist the consumer entire their job
• Lend a hand and trace textual content will have to be used the place essential
• Notifications or flagging will have to be used to assist customers take a look at and ensure necessary knowledge prior to filing
• Supporting content material or assist sources will have to be out there from each and every web page, will have to the consumer want it

Audio, visible, and animated on-page components

When together with interactive on-page components comparable to audio information, video content material, or animations, additional issues will likely be had to make those out there to all customers.

• All movies will have to have captions
• Come with closed captions and transcripts, and audio descriptions
• Auto-playing animations or video content material will have to be able to be paused
• Flashes in video or animation will have to be saved to a minimal, or have shyed away from totally
• A static choice to any animated illustrations will have to be designed and incorporated within the belongings for construction

The above tick list has been created in keeping with the WCAG (Internet Content material Accessibility Tips), 2.0, Stage AA and used to be final up to date in September 2022. We be sure that all of our Sage merchandise and internet pages are aligned with this tick list to raised serve our Sage shoppers.

For additional details about our accessibility pledge at Sage, head to our accessibility hub to determine extra about what we do. For notes on our explicit merchandise, please view our accessibility statements.