scidsg / scidsg-website

Public site for Science & Design.

Science & Design

Science & Design builds public interest, free and open-source software, and helps other non-profits do the same.

🌎 Public Website

🧅 Onion Site

❤️ Donating

📖 Decision Making

scidsg-website's Issues

Add skip-to-content button

Usuall it's a good practise to add a skip-to-content link at the very beginning of the page that is visible only in tab-navigation. This allows keyboard users to skip the navigation links and jump to the content of the page. We don't have a super long list of navigation, so I won't say it's absolutely necessary, but still a good to have.

Implementation: https://css-tricks.com/how-to-create-a-skip-to-content-link/

Add user research signup

Use semantic HTML tags

There are few items which I feel can benefit from better HTML tags. Ideally we can maybe update the CSS to be applied on tag instead of a class in the design system if there is a fixed style for the elements, but I don't mind keeping the designs in class instead of HTML tags. Some elements I noticed:

• Highlighted text: Let's use <mark> for anywhere we are using highlighted text.
• Striked out text: Let's use <s> for striked out text, e.g. prices
• <div role="main"> : Let's replace this with <main>

Don't use `role=button` in anchor tags if it's supposed to be a link

role=button should be avoided as much as possible and instead the <button> tag should be used. It doesn't matter if a link aesthetically looks like a button. What really decides whether an interactive element is a button or a link is this:

• Does clicking on it take you to a different page, or a different view, or a different section of the same page? It's a Link
• Does clicking on it open a modal, switch a tab panel, toggle some item, open navigation in smaller screen? Basically it stays in the same page and doesn't go somewhere else. It's a Button

For example in the home page, all the "Learn More" links are given a role=button which is wrong since it goes to a separate page. So it's a link. We should remove all such role=button because it acts just like a <button> tag for assistive technology and confusing for users.

Refs: https://www.youtube.com/watch?v=8XjwDq9zG4I

Ensure landmarks are unique

In some pages like teams page or who-we-serve page, we have multiple <nav> elements for multiple navigations. It's best practise that if there are multiple elements of the same landmark, then one should add an aria-label to denote what each of these landmarks mean. So i think we can just update the HTML to add aria-labels, e.g.:

• aria-label: "Main navigation" for the top navigation
• aria-label: "Page navigation" for the tabs pointing to different sections of the page (Can suggest some other text as well which is more meaningful maybe @glenn-sorrentino ?)

Add an accessibility statement

An accessibility statement helps in saying to the viewers that we care about accessibility and all our users. It also gives further information aout the standards that we are following, known accessiility issues we have and also a way for people to report any accessibility issues they find in our website.

Refs & examples:

• https://www.w3.org/WAI/planning/statements/
• https://www.a11yproject.com/accessibility-statement/
• https://wagtail.org/accessibility/

Images have incorrect alt attribute

Describe the bug
In the "Who we server" page, the images under the "Areas of focus" have placehold alt text and not proper alt text.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://scidsg.org/who-we-serve.html#users
2. Check the alt attribute of any of the images. They are all "Unless the image is decorative, add alt text."

Expected behavior
Images should ideally have a proper alt text, i.e. "avatar representing a journalist", "avatar representing an activist". If we are not too sure about the text, we can just remove them so that the images are treated as decorative and removed from the accessibility DOM tree.