westfoxdesign Posted January 4, 2023 Posted January 4, 2023 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!
paul2009 Posted January 4, 2023 Posted January 4, 2023 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? 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 ⬇️ Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
westfoxdesign Posted January 4, 2023 Author Posted January 4, 2023 @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."
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment