Table of Contents
Table of Contents maxLevel 3 minLevel 2 style square separator pipe
Why is accessibility important?
“Accessibility is the right thing to do. And not just the right thing; it’s profoundly the right thing to do, because the one argument for accessibility that doesn’t get made nearly often enough is how extraordinarily better it makes some people’s lives. How many opportunities do we have to dramatically improve people’s lives just by doing our job a little better?”
Steve Krug (author) "Don’t Make Me Think: A Common Sense Approach to Web Usability"
...
POs must play a role in ensuring that web development best practices are followed and that some level of user testing is conducted. The effort is not time-consuming AND should be included in frontend developers and POs' definition of done. And this effort will improve the user experience of all FOLIO platform users.
...
TEST! TEST! TEST!
Keyboard testing must be conducted on all apps.
Keyboard testing is one of the best and easiest ways to identify accessibility issues. If a user must use a mouse to navigate or complete an action then it is not accessible. Keyboard testing should take no more than 30 minutes for the most complex of apps. Check out a great table by WebAIM on how to conduct keyboard testing https://webaim.org/techniques/keyboard/#testing.
...
Keyboard focus is on Titles tab | When conducting keyboard testing you want to check:
How to start this effort?
|
Color contrast analysis tool must be run on all apps
Poor contrast makes for a poor user experience for all users. FOLIO must be in compliance with WCAG 2.1 Priority AA Color Contrast requirements which are the following: "The visual presentation of text and images of text has a contrast ratio of at least 4.5:1." Read more at https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum.
Running Inventory app through a color contrast tool. | The screenshot reflect running a color contrast analysis tool on the Inventory app. Note that the app passes with the exception of the publisher and publisher year values on the pane header. In addition to running this tool, ask yourself, do you find the FOLIO UI easy to read? If the answer is NO then color contrast maybe one of the culprits. How to start this effort?
|
Accessibility compliance checker tool must be run on all apps
Accessibility Compliance Checker(s) will not capture all accessibility issues. But many will capture the following issues: missing alt tags, missing labels, missing headings, missing IDs, etc (all things markup). A free Chrome extension to use is the aXe Deque compliance tool, for more details, visit https://ux.folio.org/docs/assets/axe/. Run the checker and quickly get results. NOTE: This tool may return false positives for color contrast issues. This is due to FOLIO's use of colors that accessibility compliance checker tools do not have support to check. So ignore color contrast results for now.
Accessibility Compliance Checker - Inventory App results | How to start this effort?
|
User testing is important
"Queensland Urban Utilities" by Luciana Albuquerque is licensed under CC BY-NC-ND 4.0 | Using the tools and practices described above will identify many accessibility issues but user testing will remain the method for validating the user experience! How to start this effort?
|
...
POs | What your requirements should consider
Readability. Keep language simple, consistent, and accessible
POs can support accessibility by ensuring that the language used on the FOLIO platform is simple, consistent, and accessible. Yale has a great document on ensuring language supports accessibility https://yale.app.box.com/s/pfxe0q6gnx07pbq6qjl7dd12taqzd21z. And also review WCAG documentation: https://www.w3.org/WAI/tips/writing/. | Tips
|
Color and images/icons
Color can never be the only UI indicator. Same for images. In the case of images/icons, if you have a label then you are good. If you do not have a label then include in your user story an alt text requirement for that image/icon IF that icon is meaningful. Alt text allows the screenreader to read the image/icon's description. For more details on when to apply alt text, please read this WebAIM post https://webaim.org/techniques/alttext/.
Good example | alt text is not required because a label displays | Bad Example | Color can never be the only UI indicator on Settings > System Information | Tips
|
Forms Accessibility
eholdings: New custom title form | Tips
|
Put yourself in the position of a screenreader user when defining UI designs and requirements.
For example, no update or action should automatically occur without a screenreader announcing a change. A screenreader user must be made aware of what is happening on the user interface.
...