creativecommons / vocabulary

A cohesive system of design for Creative Commons
https://vocabulary-docs.netlify.app
Creative Commons Zero v1.0 Universal
8 stars 67 forks source link

[Functionality] Website Accessibility Improvements #64

Open Mariam-Senzia opened 1 month ago

Mariam-Senzia commented 1 month ago

Problem

The current HTML and CSS code has several accessibility issues that can make it difficult for users with disabilities to navigate and use the website. Specifically, the code is missing ARIA attributes that define ways to make web content and web applications more accessible to people with disabilities.

Below is an audit showing some of the accessibility issues: Screenshot from 2024-10-02 17-15-38

Description

Add ARIA attributes: We can add ARIA attributes to HTML elements to provide a way for screen readers and other assistive technologies to interpret the content and interactive elements on the site.

Alternatives

  1. Use a CSS framework: We can use a CSS framework like Bootstrap or Tailwind CSS that has built-in accessibility features.
  2. Use a accessibility tools: We can use a accessibility tools like Accessibility Checker or WAVE to identify and fix accessibility issues.

Additional context

Improving accessibility is an ongoing process that requires regular testing and maintenance. We should regularly test the website for accessibility issues and make updates as needed.

Implementation

possumbilities commented 1 month ago

Hi @Mariam-Senzia can you please list out the Accessibility Issues you have mentioned regarding ARIA in the Issue. The Screenshot you provided seems to only mention click targets sizes, and not ARIA at all.

In most cases ARIA is useful, but if the HTML is semantic and there isn't a lot of JavaScript driven interaction we wouldn't need them. ARIA is usually a layer added to correct, amend, or rectify meaning when it can't as easily be described with baseline semantics.