Distinguish samey links with aria attributes

[joemull]

Fixes #251.

I tested all these with Android TalkBack.

There was a slight complication in that buttons are now sensitive to variables called labelledby and describedby and aria_label from the parent context, so care has to be taken when including the template not to let something leak down and pollute the correct label, such as from an h2 when the best reference is a closer h3. I tested for all possible occurrences of this and made fixes to avoid them. This can be protected against in a more general way if we upgrade the button templates to components using Django Components, which has a syntax for controlling component context and scope, but I believe that's beyond the scope of this fix.

[StephDriver]

In addition to other comments, while looking at this I found a few places where "signup" is used - I find that voiceover can't pronouce this properly, as it is two words run together, needs to be "sign up or "sign-up".

[StephDriver]

I am unconvinced by the use of "find out more" in the aria for these:
site/become-a-supporter

These are essentially three links and a download - while there is visual design symmetry to using the find out more links, it does feel like this is oddly verbose for non-visual users.

A read more /find out more at the end of a paragraph - sure. A read more directly after a heading? that doesn't convince me.

Similarly the ones where we have a link with a short description.
site/how-we-work

Contrast this to how you handled a similar "Read more" situation with the Featured Journals:

Here the "read more" is replaced with the name of the journal. This is more what I was expecting in the other places.

<h3 id="open-library-of-humanities" class="font-poppins-bold text-lg max-lg:text-center grow">
    Open Library of Humanities
</h3>
<a class="
...
  " aria-labelledby="open-library-of-humanities" href="http://localhost:8000/olh">
        <span class="
...
        >
          Read more
        </span>
...
</a>

``
<img width="1166" height="839" alt="image" src="https://github.com/user-attachments/assets/29f9e584-4f41-4314-b307-ddf72f18dd52" />
 


Could you think about these further - perhaps a discussion for a design meeting? 

[StephDriver]

When testing with voiceover I have a chaining of almost identical aria here, it comes in the pattern of

• "Read more" (text of the link itself)
• The article title linked as a describedby
• The aria for the article landmark - which is the article title (line 4).

So I end up with the article title being read aloud twice, one after the other.

May I suggest pointing the Read more describeby at the article landmark rather than the article title?

[joemull]

Doing away with the article landmark and putting the news items in a list resolves this issue, I believe. I've also changed the strong around the item title to an appropriate heading, either h2 or h3.

[StephDriver]

Something's not right here. The view all bars on the announcements-blog page are not being described in a way that tells me where that link goes.

What I get is:

Read our news section

link, announcement, complementary

Hear our ideas section

link, blog, complementary

News from our journals section

link, all, complementary

I think the complementary comes from it being an 'aside'. But this isn't an aside, it is part of the section as above - if it could be in that section, then it should read out that landmark instead of 'complementary' which could be enough not to need more description. However I do think the names need to be different (i.e. announcement, blog, do not give enough context for user to know where they are going).

I don't think that is is what is being passed in by announcements-blog.html

[joemull]

Great catch--there was a bug and a less than ideal use of aside here, and I've fixed both.

[StephDriver]

see view_all_bar.html comment. The label being passed to view_all_bar doesn't seem to match what is being put on the page by that component.

[StephDriver]

Download links need to make it clear they are for download not a link to another page - Elsewhere we use "Download PDF" but here we don't.

I also think it woudl be good to have the download links as a list.

[joemull]

Regarding the become-a-supporter and how-we-work pages, sure, it's a simple change to using labelledby for the three links and a direct aria-label for the other one.

[StephDriver]

thank you - I particularly like your 'download' button solution.