netlify[bot]
commented
11 months ago Deploy Preview for spacelab-main ready!
| Name | Link |
|---|---|
| Latest commit | ba5f2951ad0a8348081f9e740f73707efefb1d5b |
| Latest deploy log | https://app.netlify.com/sites/spacelab-main/deploys/65666d64db3af30008126cc7 |
| Deploy Preview | https://deploy-preview-443--spacelab-main.netlify.app/ |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site configuration.
Issue: the current "title" attributes in the social media elements are not read by screen readers. In this case, the title attribute may fall into the exception mentioned in the following article and may be read to screen readers, but I think best practice is to avoid using title attributes for accessibility.
reference article: https://silktide.com/blog/i-thought-title-text-improved-accessibility-i-was-wrong/#:~:text=The%20only%20very%20tiny%20exception,title%20attribute%2C%20don't.
Title attributes are great for when you hover over an icon and want to see more info about that icon though!
To resolve this, I:
Added aria labels to each social media link: I basically took Anna's first suggestion of adding descriptive text to each icon, but instead of using an alt tag, which is not supported for elements, I used the "aria-label" attribute. This basically adds a label to the tag, which the screen reader will read aloud.
Hid Icons from screen reader I set the "aria-hidden" attribute to "true" for each icon so that the screen reader skips it. The entire element itself will be announced to the screen reader, and since each icon is already enclosed in an element, there is no need to announce the icon inside as it will serve no purpose to the screen reader.
code reference: https://savvas.me/accessibility/problem-with-social-icons