1 of 66

Let’s Talk About Koha Accessibility for Library Staff

August 15, 2024

Koha-US, Round Rock, TX

1

2 of 66

Presenters

Jennifer Weston

Product and Education Manager

jweston @equinoxOLI.org

Stephanie Leary

Front End Developer

stephanie.leary@equinoxOLI.org

3 of 66

About Equinox

4 of 66

Open Source Products

5 of 66

Accessibility in open source

library software

Accessibility 101: software considerations for people with disabilities
Standards and legal requirements
Challenges for open source
Accessibility issues in Koha
Integrating accessibility into the development process

5

6 of 66

Accessibility is…

Making web interfaces work with assistive technologies
Avoiding design patterns that cause distress or confusion
Ensuring that everyone can accomplish tasks despite physical or mental health challenges

7 of 66

Accessibility is…

diagrams from Inclusive 101, by Microsoft

8 of 66

Types of disabilities

8

Visual

Hearing

Mobility

Cognitive

9 of 66

Types of disabilities

Visual

Blindness
Low vision
Color blindness

Hearing
Mobility

Paralysis
Tremors
Neuropathy

Cognitive

ADHD
Autism
Dyslexia & dyscalculia
Memory & learning issues
Sensory processing

Seizure disorders triggered by flashing lights
Vestibular disorders triggered by animation

10 of 66

Assistive devices

Glasses & contacts
Hearing aids
Screen readers: read aloud
Screen magnifiers: zoom in
Braille displays
One-handed keyboards
Voice input: dictation for interactive controls
One- and two-button switches
Eye trackers

10

11 of 66

Support?!

Most accessibility problems are pretty easy to find.
Report usability problems!
A small problem for an able-bodied person can be a very large problem for someone using assistive devices.

11

12 of 66

Top accessibility issues

Form fields: labels with IDs; error messages linked via ARIA
Buttons: onClick actions on <a>, <div> etc. do not include keyboard support; use <button>
Headings and structure: landmarks allow skimming & skipping; tables have extra keyboard support
Tab order: can you reach everything from the keyboard, in order? Can you see the focus outlines?
Unique link names: “read more” what?
Alt text for images

13 of 66

Cognitive accessibility (WCAG 3)

Attention: your focus is not interrupted unexpectedly
Visual noise: borders and high contrast elements kept to a minimum
Color: emergency alert colors (red, orange, yellow) are not pervasive
Mobile support: screen layout and inputs work with handheld devices
Memory: layouts for similar functions are consistent across the site; forms support autocomplete for personal info

14 of 66

5-minute testing

Browser with keyboard tabbing turned on
Browser Tools

Chrome Lighthouse or Firefox Accessibility Inspector

Extensions

WAVE or Axe DevTools
SkipTo Landmarks & Headings
High Contrast Toggle

14

15 of 66

Accessibility Laws

15

16 of 66

US accessibility laws before

Federal: several, including…

Section 508 (covers all software, not just web)
Americans with Disabilities Act

State: patchwork of laws referencing 508

non-discrimination
software procurement

WAI US law reference: https://www.w3.org/WAI/policies/united-states/

17 of 66

US now: ADA Title II update

April 2024 : Updated DOJ rule clarifying ADA Title II & web accessibility

Timeline depends on institution/constituency size:

State and local government size	Compliance date
0 to 49,999 persons	April 26, 2027
Special district governments	April 26, 2027
50,000 or more persons	April 24, 2026

18 of 66

Canada accessibility laws

Canada

British Columbia

Manitoba

Accessibility for Manitobans Office

Newfoundland and Labrador

Newfoundland and Labrador Accessibility Act.

Nova Scotia

Nova Scotia Accessibility Act

18

19 of 66

Canada accessibility laws

Ontario

Quebec

Act To Secure Handicapped Persons In The Exercise Of Their Rights With A View To Achieving Social, School And Workplace Integration

Saskatchewan

Accessible Saskatchewan Act

19

20 of 66

Accessibility laws worldwide

Australia

Australian Standard for Accessibility: AS EN 301

Aotearoa New Zealand

Web Accessibility Standard 1.1

European Union

EN 301 549 has been passed, countries will now revise their laws using this as a baseline

United Kingdom

Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018

21 of 66

Accessibility laws worldwide

Web accessibility laws & policies around the world
Don’t stress: they’re all WCAG

22 of 66

Web Content Accessibility

Guidelines (WCAG)

Perceivable - Available through multiple senses
Operable - Used with keyboard, mouse, voice control, or other input devices
Understandable - Easy to comprehend
Robust - Works across browsers, mobile devices, and assistive technologies

WCAG website: https://www.w3.org/WAI/standards-guidelines/wcag/

WebAIM quick reference: https://webaim.org/resources/quickref/

The good news is that laws everywhere are all based on the Web Content Accessibility Guidelines, or WCAG. These are the rules that govern web interfaces. Every state, provincial, or national law on web accessibility, no matter where you are in the world, is based on this set of guidelines or a translation of it. Some of them specify a version number, but it’s best to just use the most recent release, since they’re backward compatible, and those new rules are there for a reason. These guidelines are based on four principles, listed here. Web interfaces have to be perceivable: things can’t be available using only one sense; you have to be able to perceive them in multiple ways. Operable: you have to be able to operate it in multiple ways, using multiple types of input devices, which is the robust principle. And it has to be designed and written in a way that you can understand. I’ve linked the WCAG standard itself here, but it’s kind of a lot, so if you want a shorter checklist of the basic principles and requirements, the WebAIM quick reference is very helpful, and there are other checklists and guides on their site as well.

23 of 66

Accessible Design Principles

23

24 of 66

25 of 66

26 of 66

Accessibility in Open Source

26

27 of 66

Open source stacks

The software you use

Front end framework

Language framework

Programming language

Accessibility problems can come in here

The part we make

28 of 66

Koha admin UI stack

28

Bootstrap

Template Toolkit

Perl

Accessibility problems come in here

The part we control

Koha UI

jQuery

DataTables

+

jQueryUI

+

29 of 66

Accessibility challenges in

open source software

Awareness
Education
Motivation
Consequences

30 of 66

Designer and developer

awareness & education

Accessibility is a niche specialty in most degree programs
Bad advice is everywhere
Training materials omit accessibility considerations

“It’s too complicated and we don’t have time to cover that.”
“It doesn’t affect that many people, does it?”

31 of 66

Designer and developer

motivation

Open source volunteers aren’t employees
How to mandate training?
Who sets the standards for the project?
“If someone has a problem, they can file a bug.”

Do they know where in the stack to file it?
Is the bug system accessible?

Are accessibility bugs prioritized by leadership?

“Treat accessibility issues as bugs, not feature requests.”

32 of 66

Lack of consequences for

open source frameworks

Accessibility laws don’t apply to the projects, only the organizations using them
Interface bugs are filed on the end products, not the underlying frameworks
Who holds the framework developers accountable?

33 of 66

Accessibility in Bootstrap

33

34 of 66

Bootstrap issues

Color contrast
Mouse-only interactive toggles
Form examples without labels
Incorrect ARIA roles

“Home pages in the sample that utilize the popular Bootstrap framework had 9.6 more accessibility errors on average…” �– WebAIM Million 2023 report

34

35 of 66

Bootstrap text colors

35

From Stripe.com

36 of 66

Bootstrap button colors

36

From Stripe.com

37 of 66

Bootstrap focus outlines

v3

completely unusable (focus is turned off!)

v4

introduced styling based on box-shadow
easy to accidentally remove when using shadow classes
lacks contrast
doesn’t work in high contrast / forced colors mode

v5

focus-ring utility

37

See Bug #25983

38 of 66

Bootstrap Autocomplete

v3

completely unusable (no form label)

v4

suggestions are not announced

Alternatives

Alphagov Autocomplete (UK Design System)
Adam Silver’s Autocomplete demo
can be styled with Bootstrap classes!

See Bug #34113

38

39 of 66

Bootstrap tips

Bootstrap 3-4-5 Class Migration Reference
Windows High Contrast Mode enhancements for Bootstrap 5

Bootstrap Forced Colors CSS

Stuck with Bootstrap 3 templates?

Bootstrap 3 Accessibility Plugin from PayPal improves:

Alert
Tooltip
Popover
Modal dialog

Dropdown menu
Tab panel
Collapse
Carousel

39

40 of 66

Accessibility in Koha’s Staff Interface

40

41 of 66

Overview

Bootstrap 3
Autocomplete
Color contrast
Headings & landmarks
Form buttons
Tables

Action links & reflow issues
DataTables filter inputs & ARIA labels

41

42 of 66

Color contrast

42

43 of 66

Color contrast

43

44 of 66

Headings & landmarks

44

45 of 66

Headings & landmarks

45

46 of 66

Landmarks & HTML5

Header, footer, main, aside should enclose major regions

Nav should enclose navigation menus

Search should enclose search forms (all related fields)

46

47 of 66

Header

48 of 66

Footer

49 of 66

Main

50 of 66

Aside

51 of 66

Search

52 of 66

Nav

53 of 66

Header

Search

54 of 66

Header

Aside

Search

Footer

Main

Nav

55 of 66

Search forms

55

Search

56 of 66

Search forms

56

Search:

aria-label=�”Item search”

Search: aria-label=”Check out”

57 of 66

Search forms

57

Nav: aria-label=”Breadcrumbs”

58 of 66

Submit buttons

58

59 of 66

Tables & action links

Action links at the end of each row are a problem for…

Screen magnifier users
Mobile users
Laptop users
… everyone

Solutions?

Always in the first column?
Use JS to append the links to the first column, or primary key column?
Other?

59

60 of 66

DataTables & form labels

60

61 of 66

ARIA

Labels and descriptions

aria-label and aria-labelledby are overrides!
“The first rule of ARIA is: don’t use ARIA.”

Status announcements (live regions)

Billing totals updated
Tabs changed (search bar)
Search rows added or removed

Interactive controls & parent/child relationships

List items in nav menus

61

62 of 66

Accessibility at Equinox Open Library Initiative

62

63 of 66

64 of 66

Community awareness & developer training

Evergreen ILS accessibility bugfixes
CORAL UI rewrite coming soon
VuFind® theme, bug fixes contributed to default theme; ongoing work
Bug reports and pull requests to Bootstrap, ngBootstrap, WAI-ARIA pattern library, etc.

64

We are working on resources for developers to make all of this easier. We have a new developer’s guide to accessibility, sponsored by our Evergreen partners at the King County Library System. It’s not just for Evergreen, though–it’s a concise but comprehensive guide to accessibility with a focus on Bootstrap and ARIA, which will be helpful to all open source projects that use Bootstrap. We did a poster at ALA in June; grab that for a quick reference on all the design considerations for different types of disabilities. I am in the issue queues for Bootstrap and the other frameworks and third-party libraries we use–if the problem starts there, I’m either working with that team to get it fixed, or finding an alternative that we can swap out, like the carousel plugin VuFind uses. We are just getting started; we have some additional training workshops on accessibility coming up this fall, and more developer resources in the works!

65 of 66

66 of 66

Questions?

CONTACT US

Email

stephanie.leary@equinoxOLI.org

jweston@equinoxOLI.org

Equinox Mailing List

https://www.equinoxOLI.org/#signup