Accessibility (Barrierefreiheit)

[solth]

Is your feature request related to a problem? Please describe. Kitodo.Production does currently not have sufficient accessibility support.

Describe the solution you'd like Kitodo.Production should support all relevant accessibility requirements. This entails - but is not necessarily limited to - several points like color schemes with high color contrasts to ensure readability, support for screen readers by assigning alt and title tags to corresponding UI components, meaningful link texts, defining a tab order for traversing through input elements in a well-defined and sensible order and creating interactive UI elements with CSS rather than Javascript.

Additional context Several tools exist to support developing accessibile/barrier-free web applications, like

• ANDI (Accessibility tool)
• Color contrast analyzer
• Contrast checker

[stefanCCS]

I would add two work packages: 1) Improve accessibility based on ANDI tool results Evaluate all pages with the ANDI tool and improve/change the software for all reasonable tool results. "Reasonable" is everything, which

• improves the accessibility
• does not change the normal function
• can be done with limited effort

2) Create a 2nd color schema for text elements Evaluated existing colors using a Color Contrast Analyzer tool Invent new color scheme for all text elements, which do not fulfill the minimum requirement (1.4.3). For using this new Color Schema two options: a) change standard implementation to use this new color scheme. This is especially possible in cases, where the color change is small. On the other hand, it shall not be a "big" color change be done in the standard implementation, which would change look&fell. b) implement this second color scheme and make it configurable This configuration can be fixed for the whole system (=kitodo_config.properties) A configuration per user would be appreciated, but might have too much effort to implement.

Hint: Any color change should be put for discussion and agreement to the Community-Board.

@solth : Your opinion?

[solth]

@solth : Your opinion?

Sounds good. "can be done with limited effort" might be problematic, though, and probably just shifts the vagueness from "reasonable" to another term. Perhaps this needs to specified more in detail to better be able to estimate the cost of implementing this feature.

[anspallek]

Good Points. Here are a few suggestions on how to specify the points in more detail

Fonts: Evaluate the accessibility of the fonts

• Recommendations for accessible fonts https://www.accessibilitychecker.org/blog/accessible-fonts/

APCA (Advanced Perceptual Contrast Algorithm): new colour contrast guide for web creators as part of the Web Content Accessibility Guidelines (WCAG) 3 update

• https://git.apcacontrast.com/documentation/WhyAPCA

• new: “readability contrast”

• Short Introduction: https://www.lightflows.co.uk/blog/improving-accessibility-with-apca/ New scoring system. The new APCA scores accessibility by level out of 100 instead of ratios. The higher the number, the higher the contrast. 15 is the minimum for non-text elements, while 75 is the preferred level for body text. Weight and text size. The new guidelines consider the size and weight of text to measure accessibility. The thinner the text, the lower the score. Swapping text and background colours. If you swap text and background colours, the accessibility result differs, unlike WCAG 2, which yields the same results. Contrast is modelled perceptually, not mathematically. Unlike WCAG 2, the new APCA considers that humans do not perceive contrast linearly across hue and lightness.

• Tools: https://git.apcacontrast.com/documentation/thirdpartytools shows both WCAG 2 and WCAG 3 (APCA) evaluation: https://accessiblepalette.com/ different evaluation of graphical and text elements / sizes: https://www.getstark.co/blog/stark-APCA-beta/

How accessible is the colour Orange?

• https://ux.stackexchange.com/questions/147057/accessibility-question-company-has-secondary-brand-color-orange-that-doesnt#:~:text=Most%20shades%20of%20orange%20will,is%2C%20it%20might%20also%20pass.
• Test of the University of Tennessee for Orange: Test: https://uthsc.edu/brand/accessibility-colors.php New Guidelines: "Orange is the UT System’s brand color but avoid using this color for text on a white background (or white text on an orange background). Use orange for the UT icon and supporting elements (borders, decorative elements, icons, backgrounds with 80% black or darker text, etc.) in your designs." https://brand.tennessee.edu/color/color-accessibility/

Color Scheme for metadataeditor: A coordinated color scheme can increase the focus. Some colors like bright colors can be distracting.

• "For instance, warm colors such as red and orange can create a sense of urgency, making users more likely to take action" https://wirsindbaerenstark.de/the-impact-of-color-schemes-on-web-design/#improving-user-experience

[stefanCCS]

@anspallek : Many thanks for providing this input. I think this is good now to be discussed for "Development Fund".

Just to not forget: Before this issues goes into a "Request for Quotation" it must be put into a status, where it is clear stated for a company what (and what not) to do.

[solth]

Votes: 8

[stweil]

Before this issues goes into a "Request for Quotation" it must be put into a status, where it is clear stated for a company what (and what not) to do.

That also requires metrics which report accessibility issues. From our own experience I know that manual checks are very time consuming, so I don't think that such checks are the right solution. Automated checks can be done by the Firefox web developer tools for example. Some issues like images without an alternate text might also be detectable by a static code analysis.

How many different pageviews exist for Kitodo.Production, and which of them should be fixed? Maybe the task should focus on the most relevant ones?