Comments (3)
Hey @dylanhthomas can please point to some resources about this ? Especially "title attributes shouldn't be used". Thanks for your contribution!
from ghostwriter.
Hi @jbub, more than happy to, and please let me know if you want to discuss further.
1 - title attributes:
https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/
TL;DR - title attributes are treated so inconsistently across browsers and devices that there is no way they can be counted on to always show content.
If you are using titles for accessibility, aria-label is the much better attribute to use since it is designed for that.
2 - icon hiding
I misspoke saying "without function"...the social icons are semantic, but the treatment I proposed still works.
FontAwesome has a pretty good write-up on this:
https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility
TL;DR - when using webfont icons, they should be aria-hidden="true" with their meaning conveyed using sr-only text or aria labels if they are semantic, and hidden if they are decorative.
3 - labeling
Because titles may or may not be processed (per 1), the social links in the header do not contain any always readable text. As such a screen reader may or may not announce "Facebook" in the current:
<a title="Facebook" href="{{ . }}" title="Facebook"><i class="fa fa-facebook"></i></a>
Whereas in the following options the Screen reader says "Facebook link":
aria-label on <a>
:
<a href="{{ . }}" aria-label="Facebook"><i class="fa fa-facebook"></i></a>
screen reader only text inside <a>
(.sr-only class exists in code base that hides visually, but not from screen readers)
<a href="{{ . }}"><i class="fa fa-facebook"></i><span class="sr-only">Facebook</span></a>
from ghostwriter.
Impressive summary, thank you very much.
from ghostwriter.
Related Issues (20)
- Support of cards... ? HOT 2
- Missing / in resource url when previewing on Netlify HOT 2
- Logo display help HOT 1
- Logo display help HOT 1
- Support for author key in params
- Site not building in Netlify HOT 2
- Security issues with yarn.loc? HOT 7
- Link to headers? HOT 9
- Change main page HOT 2
- Remove 'feed' icon on front page? HOT 2
- Add support of i18n? HOT 1
- Security Issues HOT 1
- config.toml alternative to config.yaml HOT 1
- Code formatting HOT 1
- Move CSS/JS files to assets folder, use pipes, remove dist folder HOT 3
- multiple <header> elements on each page HOT 3
- RSS icon missing label
- Remove Google+
- Cannot activate menu system through config file HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ghostwriter.