Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility documentation - Colour Contrast #1

Open
jonnymuir opened this issue Sep 22, 2024 · 2 comments
Open

Accessibility documentation - Colour Contrast #1

jonnymuir opened this issue Sep 22, 2024 · 2 comments
Assignees

Comments

@jonnymuir
Copy link

Draft some documentation for the Umbraco docs, detailing out how to be mindful of colour contract best practices.

@jonnymuir jonnymuir converted this from a draft issue Sep 22, 2024
@jonnymuir
Copy link
Author

jonnymuir commented Sep 22, 2024

I am going to look at this, but I am starting from a pretty basic understanding of what is required for the Umbraco docs, therefore I've created this as an issue (so I create some comments), I think the tasks are:

@jonnymuir jonnymuir self-assigned this Sep 22, 2024
@jonnymuir
Copy link
Author

jonnymuir commented Sep 22, 2024

In addition to following the guidelines, style guides, vale linter as above I suggest we have standard for our accessibility documentation pages to encourage consistency and familiarity. Below I've done a starter for 10, open to opinions and views...

# The main title goes here

Example - Color Contrast. Note - use the American spelling of color for consistency. 

## Overview

Introduce the concept and its importance to accessibility. Include the reason why it is important both the "essential for some" and the "useful for all" parts of accessibility

Example:

An adequate color contrast is crucial for users with visual impairments to understand your content. It also enhances the overall usability of your design by improving legibility for everyone.

## Success criteria

Clearly state the relevant WCAG criteria with links to:
The Web Content Accessibility Guidelines (WCAG) 2.2 
The relevant WCAG 2.2 Understanding Docs


Example:

[WCAG 2.2 Success Criterion 1.4.3: Contrast (Minimum)](https://www.w3.org/TR/WCAG22/#contrast-minimum)
[Understanding Contrast](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)

## Implementation in Umbraco

Show how to use in a standard out of the box Umbraco install including screen shots.

Include any best practise (for instance using CSS variables), pitfalls, tips etc.

Example

Install Umbraco latest and TheStarterKit

    dotnet new umbraco --name ContrastExample
    cd ContastExample
    dotnet add package Umbraco.TheStarterKit
    dotnet run


## Testing

Show how to test for this success criteria for instance with WAVE.

Example - TODO

## Reporting using the Umbraco accessibility reporter

Show how the standard is reported using https://github.com/mattbegent/umbraco-accessibility-reporter

Example - TODO

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: In Progress
Development

No branches or pull requests

1 participant