Jump to content

Help with js needed for adding aria-label to link html

Recommended Posts

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!

Link to comment
  • Replies 2
  • Views 943
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

1 hour ago, westfoxdesign said:

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

Can you confirm the issue still exists, or perhaps I am looking in the wrong place? 

image.thumb.png.37540b722c3591f76683a522f4da7cb5.png

When I check the "5E's framework" page section (see above) the links appear to have been updated since you received the feedback. Each link now has different link text that correctly describes the destination. For example the first two are as follows:

<a href="/engineering">Engineering</a>
<a href="/education">Education</a>

Screen readers should therefore read this link text, making each link distinguishable.

Did this help? Please give feedback by clicking an icon below  ⬇️

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

@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."

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.