UX accessibility checklist
Any FOLIO apps shall be easy to understand. As a UX expert, your role is to ensure that your app is intuitive and easy to use for all.
Accessibility checklist
1. Layout & hierarchy
Users shall be able to easily understand pages and perform tasks.
- If possible, use FOLIO layouts to build your app.
- If you create a custom layout, make sure to place items according to their relative level of importance, consider reading order and always place related items in proximity to one another. We also recommend looking at similar apps.
- Make sure to place pane actions on the right side of the pane header.
- Use FOLIO UX patterns to make pages appear and operate in predictable, logical and intuitive ways.
FOLIO resources:
WCAG 2.1 references:
2. Content
Users shall be able to scan a page and understand its content easily.
- Use short sentences, whenever possible.
- Use clear and descriptive headlines. Pane header titles shall always be related to the purpose of the pane and/or its relationship to another pane.
- Use descriptive page titles.
- Divide content into sections by using FOLIO accordion component.
- Have a readable and functional page when zoom to 300%.
- Apply FOLIO language rules for language consistency.
FOLIO resources:
WCAG 2.0 references:
3. Forms
Users shall easily understand and fill out a form.
- Have clear and descriptive labels.
- Describe errors/warnings to users right below the corresponding text field.
- Work with your front-end designer to use HTML form elements as much as possible.
- Test any custom interactions for use with screen readers and keyboard only.
FOLIO resources:
WCAG 2.1 references:
4. Images
If an image is meaningful, any users shall be able to easily access it and understand it.
- Work with your front end designer to implement images, that are purely decorative, in a way that can be ignored by assistive technology.
- Work with your front end designer to make sure that meaningful images include alt text if there is no label. Otherwise, consider adding tooltips to convey the meaning of an image/icon.
WCAG 2.1 references:
5. Tab order
Users shall be able to navigate through your app using a keyboard.
- Make sure to have a logical tab order to help them do so. If needed, work with your front-end designer to help him understand the order.
WCAG 2.1 reference:
6. Focus
When users navigate through your app, all interactive elements shall receive focus when needed.
- Make sure to have a logical focus order. If needed, work with your front-end designer to verify that all interactive elements receive focus.
WCAG 2.1 references:
7. Navigation shortcuts
Users shall be able to navigate using navigation shortcuts.
- Work with your front end designer to identify the basic landmark elements in your wireframes.
WCAG 2.1 reference:
8. Touch targets
Touch targets shall be big enough so anyone could click on them.
- Make sure you can reach primary actions easily with either right or left thumbs.
- Make touch targets at least 48 px. For icons, you can work with your developer to extend padding past the icon.
- Space out touch targets by 8px or more.
Resources:
Accessibility test
We recommend using aXe to test your app for accessibility. It is a great Chrome extension that allows you to see at a glance if your app has accessibility issues, where to find them and how to fix them.
Be aware: Since aXe doesn’t support transparency, you might see color contrast issues when using RGBA for instance. To accurately check your color contrast ratio, please use a Sketch plugin or the WCAG contrast checker Chrome extension tool.
Find aXe download link with instruction on how to use it in our Asset section.
More information
If you have questions about your app accessibility level, join us on Slack to talk with experts on our #accessiblity channel.