Accessibility Audit

[bmos]

It seems like we have some substantial room for improvement.
I'm not so familiar with Jekyll, but it seems like some of these fixes would be theme related and some would be a matter of potentially doing edits to header tags within articles (so that article headers start at h2 and cascade down from there.

https://accessibe.com/accessscan?website=feed.dsausa.org

Key areas for improvement:

• Alt text for avatars. Ideally it would be descriptive, but even "the Pittsburgh DSA logo" would be a start. This would allow easier on-page navigation and (if descriptive) provide more information to users who can't see the details included in the logo design. Assigned: @bmos
• Add skip to main content button at top of page: <a href="#maincontent" class="sr-only sr-only-focusable">Skip to main content</a> linking to the div with the classes container my-4 p-0. Assigned: @bmos
• Show more/less buttons are built with input/label/span tags which means no keyboard navigation despite adding the tags for it. Need to figure out how to redesign using a button tag, ideally without JS. Assigned: @bmos
• Adjust order of keyboard navigation within article info (should be title, author, skip the date, show more. Ideally we would only jump to links inside the article if it's expanded.
• The DSA feed logo is inside an a tag but missing the href attribute. This could lead to confusing screenreader output if it's reported as a link. Assigned: @airbr
• Some color, font, background combinations are lacking contrast. Assigned: @airbr
• Work on headings to ensure that the pages include only headings of a proper hierarchical structure (h1, h2, h3, etc). There is likely only so much we can do since we are showing content from many places).

[airbr]

Hello @bmos , thank you for bringing this issue to wider attention. For context, I believe that this website was created with a burst of good development to get it working and now it is definitely in need of refinement.

I ran some tests that confirm what you are saying about issues with Accessibility.

I attach two screenshots that elaborate on this- A Lighthouse test score that captures the page state (couldn't get it to load navigation past cloudflare) that shows a bunch of detail about how we are failing some audits.

The W3C validator, basically the rolls royce of validators, raises a number of issues and also has an outline report which shows our heading structure needs improvement.

I feel able to help lead this work, but I don't want to do it alone as its actually quite a fun and good project it is going to be a big improvement when finished.

[airbr]

Accessibility tools I am familiar with:

• Lighthouse testing
• W3C Validator aka. Nu HTML Checker
• Axe Core with a front end testing library like Playwright

These are not a replacement for manual testing by people with accessibility tools but supplement.

Im happy to teach people about these tools if desired, and do some of the work myself

[airbr]

@bmos @colinmahns I successfully cloned, built and served this website locally. I am ready to start working on this. Like I said, I want to ideally take someone along the journey too.

[victoria-riley-barnett]

Hi all! I originally adapted the current theme, very quickly, from another theme to fit DSA design language and would be willing to help with this effort if you need a partner for sure! 🌹 Soli, Victoria B

…

On Tue, Mar 12, 2024 at 10:30 PM, Morgan Murrah ***@***.***(mailto:On Tue, Mar 12, 2024 at 10:30 PM, Morgan Murrah <<a href=)> wrote: ***@***.***(https://github.com/bmos) ***@***.***(https://github.com/colinmahns) I successfully cloned, built and served this website locally. I am ready to start working on this. Like I said, I want to ideally take someone along the journey too. — Reply to this email directly, [view it on GitHub](#64 (comment)), or [unsubscribe](https://github.com/notifications/unsubscribe-auth/ACEXWJ7NTODUH6EVYEDVVNDYX7QABAVCNFSM6AAAAABEIB55O6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOJTGU4TOMJXGU). You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[airbr]

@victoria-riley-barnett Awesome! good stuff, it was really cool pulling down all the blog posts and looking at them.

The stuff that these tests pull are often generally not as noticeable unless you have the issue - the color contrast looks fine to me for example, but the tests are saying we could improve that in some areas. Ive seen this happen with DSA colors before when applied to backgrounds or text in some instances, when the colors for the text and color around the text should be sort of distinct from the DSA color usage. @bmos has laid out some good tasks dividing up the issues.

Im ready to start making PR's on this to get it started, and then I will be able to happily show anyone about the tools I use for testing that are going to guide the process I take . I may need some permissions to push up branches, or should I do this from a fork? I got a 403 when I tried to push up a branch @colinmahns

[bmos]

Wow, what a great team 😃

I'll see if we can get you both added to the dsa-planet team so you have permissions. I messaged Colin on the forum and see Morgan has mentioned him here.

So great to have the person who worked on the original implementation here, @victoria-riley-barnett.

Thank you @airbr for sharing those (much better) validation tools, your expertise with web accessibility is greatly appreciated.

It was really cool pulling down all the blog posts and looking at them.

Isn't it? Seeing all that DSA history coming in is a great pick-me-up.

I went back to the first post and updated the tasks with some links to the relevant files to save time looking for the right bits.

How do we want to spread out this work? The parts that seem most in line with my familiarity are adding alt-text to the avatars and applying programmatic changes to downloaded feed content (if we can integrate it in a more accessible manner -- likely will have questions about best practices for this).

Would it make sense to break out this issue into smaller issues for each task and, if so, are there missing tasks or should they be restructured at all?

[airbr]

@bmos I think Im going to try and fix the Headings order of DSA Planet, and fix the a tag around the logo. Then ideally I will make some very basic changes to improve color contrast on some of the text. Im just working on a branch :)

[bmos]

I have added basic programmatic alt text to the avatars and totally rebuilt the showmore/less buttons using javascript so they could use the native button tag which is usable via keyboard navigation.

[bmos]

@colinmahns is away but @ce-warren has added you, @airbr.

[airbr]

Thank you ! I'll get a chance to take a look at this soon

[airbr]

@bmos I created #86