westfoxdesign

@paul2009 the problem links are just below that section under "Additional Key Actions" - I believe the other issue is that the links under "additional key actions" are generated as a summary block of the various posts throughout the site and as such use the same <a> link urls. The WCAG guideline in questions is " 2.4.4 Link Purpose (In Context)" and here are the instructions I've been given: (1) " For links under "additional key actions", add and an underline to indicate that these are links, then add unique IDs to each link and the corresponding heading (change these to H4 tags) and reference the ID of link and ID of the heading in an aria-labelledby attribute added to the Education link, in that order. For example, <h4 id="heading1">Action 1: Bike Skillls in Schools</h4>...<a href="" id="link1" aria-labelledby="link1 heading1">Education</a>. For the other links within the page body add an aria-label attribute that contains the visible link " and additional information about the link destination, in that order" and (2) " Add descriptive aria-label attribute to each category link for each item under "additional key actions" (aria-label="Education category posts") using javascript. Add descriptive aria-label attribute to the Engineering and Community navigation menu links (aria-label="Engineering submenu", aria-label="Community submenu") and add ARIA attributes (aria-haspopup, aria-expanded) to submenu links."

I've done web design and development for a number of years and so offered to help my non-profit bring a project to the finish line (and satisfy grant requirements, making us available for this year's round of grants). Here is the feedback we received from the grant administrators: "Is it possible to add aria-label attributes to the category links? There are multiple links that use the same link text but go to different pages. For example, the links under "the 5E's framework" (Education, Encouragement, Equity & Access", "Evaluation & Planning) go to the main page and the links under "additional key actions" go to the category page. These need to be distinguishable for screen reader users. For example, aria-label="Education Category Posts". Alternatively you could change the link text to "Education Posts", etc." I understand that I will have to add javascript to the code injector that targets the links and adds aria labels hopefully from text that is already present since there are 13 links under "additional key actions" that need aria-labels, but I dont know how to write that code. I've searched around and tried to mosh posh some code together but it isn't working. Site: https://bicyclingforeveryone.squarespace.com/ Thank you!