At Sage, we use an obtainable design highest observe tick list to verify we’re making our merchandise and communications obtainable for every type of customers. It is crucial that our designers imagine accessibility from the beginning of the design procedure, and all over construction at Sage – making an allowance for as many angles as imaginable to incorporate customers of various skills.
We be sure that as a lot of this data as imaginable is handed to the individuals who construct our Sage merchandise and for our web site in order that we will be able to create obtainable reviews.
Our accessibility tick list is consistently reviewed in opposition to Internet Content material Accessibility Pointers (WCAG) to forestall pages, patterns, or elements turning into inaccessible.
We inspire the use of our tick list as a part of your personal design procedure, to assist in making your designs extra obtainable for all.
Labelling and exhibiting content material
It is very important imagine how all on-page content material is gifted to customers. For instance, photographs, buttons, and shape fields would require you to take additional steps to make those extra obtainable. The underneath issues must be incorporated:
- All buttons with icons must have a visual textual content label
- Pictures must have a textual content selection that appropriately describes the content material or which means of the picture
- Keep away from describing elements or on-page parts through place, color, measurement, form, and many others
- Show all content material on-page i.e. no longer hidden in tooltips
- Designs should be conscious of viewport measurement – this must account for consumer behaviours reminiscent of zooming in, making use of customized kinds for textual content spacing, and other tool 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 must no longer disappear till the consumer dismisses it
- *Use vertically ‘stacked’ or indexed shape labels reminiscent of hints/assist, error, and enter structure
- 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 essential to be sure that your designs imagine layout and styling parts when making content material inclusive for customers with various accessibility wishes.
- Use sentence case textual content for labels and headings, slightly than identify case or all-caps
- Believe how the ideas shall be offered and marked up. For instance, is the ideas higher offered as a desk or an inventory, and is that this being marked up with the right kind Schema?
- Don’t depend on color to be in contact which means
- Textual content and different consumer interface (UI) parts should have a enough color distinction between their backgrounds and adjoining textual content and/or parts
- Buttons should no longer appear to be hyperlinks, and hyperlinks must additionally no longer appear to be buttons
- All the time test your designs with a color blindness clear out to verify it’s nonetheless readable
Navigation and consumer revel in
Many customers with bodily, motor, and cognitive disabilities frequently use the to navigate. That is frequently instead of a touchscreen, monitor pad, or mouse. Because of this, we should be sure that the whole thing we produce, from virtual merchandise to internet pages and communications, are obtainable to keyboard-only. This permits customers to accomplish duties like surfing or clicking thru content material extra simply, the use of the capability of a keyboard to get right of entry to the content material as meant. When developing elements, the underneath issues must be thought to be:
- All elements are configured to be accessed by the use of keyboard reader
- When the use of the tab key to navigate buttons, hyperlinks, and shape fields, ensure that the order of center of attention is predicted, and the point of interest indicator is obviously visual.
- Keyboard shortcuts must use modifier keys
- Drag and drop capability must be an enhancement of a button-based mechanism for reordering – and no longer the one solution to reorder
- Goal sizes must be 44px × 44px anywhere imaginable; 24px × 24px at a minimal
- Navigation may also be skipped through keyboard customers
- Web page titles should describe what’s on every web page
- Navigation should be constant from web page to web page
- Elements that do the similar factor should glance and paintings in the similar means
- Be sure more than one tactics to navigate from web page to web page (as an example, navigation and on-page hyperlinks)
- Web page content material must no longer exchange considerably when a sort part price (like a radio button) is modified
- Web page content material must no longer exchange considerably when a component receives center of attention
- Similar content material and controls should be grouped intently to assist customers know that they’re to be had, if the use of display screen magnification
- Headings should be used to assist the consumer determine teams of content material on a web page
- Hyperlinks, headings, buttons, and shape box labels should be descriptive
- Hyperlinks should be underlined
Activates for shape or activity final touch
Accessibility for in-product or on-page activity final touch is a very powerful to be sure that mistakes are minimised for customers who can have disabilities that make inputting knowledge tougher. Accessibly integrated activates for shape submission or enter fields can assist all customers engage with those elements as meant, letting them supply extra correct, proper data.
- Mistakes should be flagged the use of textual content
- Tips may also be given inside error messages to assist the consumer entire their activity
- Lend a hand and trace textual content should be used the place essential
- Notifications or flagging must be used to assist customers test and ensure essential data earlier than filing
- Supporting content material or assist assets must be obtainable from each and every web page, must the consumer want it
Audio, visible, and animated on-page parts
When together with interactive on-page parts reminiscent of audio recordsdata, video content material, or animations, additional concerns shall be had to make those obtainable to all customers.
- All movies should have captions
- Come with closed captions and transcripts, and audio descriptions
- Auto-playing animations or video content material must be able to be paused
- Flashes in video or animation must be saved to a minimal, or have shyed away from utterly
- A static selection to any animated illustrations must be designed and incorporated within the belongings for construction
The above tick list has been created in step with the WCAG (Internet Content material Accessibility Pointers), 2.0, Degree AA and was once remaining 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 higher serve our Sage consumers.
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 particular merchandise, please view our accessibility statements.