Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[docs] Improve homepage accessibility #18745

Merged
merged 11 commits into from
Dec 9, 2019
Merged

[docs] Improve homepage accessibility #18745

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
9fc613f
[docs] Use empty alt text for decorative images, add aria-label to th…
mbrookes Dec 8, 2019
b917d19
[docs] Remove empty ul from footer
mbrookes Dec 8, 2019
bfc8af9
[docs] Fix homepage heading hierarchy
mbrookes Dec 8, 2019
e34a999
[docs] Fix backer alt text
mbrookes Dec 8, 2019
9582032
[docs] Add aria label to footer version page link
mbrookes Dec 8, 2019
560635f
prettier
mbrookes Dec 8, 2019
f7ab239
[docs] Hide linked themes image from assistive tech
mbrookes Dec 8, 2019
667a19f
[docs] Revert VSCode prettier plugin changes
mbrookes Dec 8, 2019
24dcc02
[docs] Make WAVE stop complianing about non-issue
mbrookes Dec 9, 2019
e0a51eb
apply patch everywhere
oliviertassinari Dec 9, 2019
06b5187
remove themes image from tab flow
mbrookes Dec 9, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ via [Patreon](https://www.patreon.com/oliviertassinari)
via [OpenCollective](https://opencollective.com/material-ui)

<p style="display: flex; justify-content: center; flex-wrap: wrap;">
<a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="callemall" title="The easy way to message your group" width="100" loading="lazy"></a>
<a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="call-em-all" title="The easy way to message your group" width="100" loading="lazy"></a>
</p>

Gold Sponsors are those who have pledged $500/month and more to Material-UI.
Expand Down
6 changes: 1 addition & 5 deletions docs/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,11 +117,7 @@ export default function HomePage() {
<main id="main-content" tabIndex="-1">
<div className={classes.hero}>
<Container maxWidth="md" className={classes.content}>
<img
src="/static/images/material-ui-logo.svg"
alt="Material-UI Logo"
className={classes.logo}
/>
<img src="/static/images/material-ui-logo.svg" alt="" className={classes.logo} />
<div>
<Typography
variant="h3"
Expand Down
21 changes: 11 additions & 10 deletions docs/src/modules/components/HomeFooter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,14 +56,14 @@ function HomeFooter(props) {
<Container maxWidth="md">
<footer className={classes.footer}>
<Grid container>
<Grid item xs={12} md={3}>
<Grid item xs={12} sm={4}>
<div className={classes.logo}>
<img src="/static/images/material-ui-logo.svg" alt="Material-UI Logo" />
<img src="/static/images/material-ui-logo.svg" alt="" />
<Typography color="primary">Material-UI</Typography>
</div>
</Grid>
<Grid item xs={6} md={3} className={classes.list}>
<Typography component="h3" gutterBottom>
<Grid item xs={6} sm={4} className={classes.list}>
<Typography component="h2" gutterBottom>
{t('footerCommunity')}
</Typography>
<ul>
Expand Down Expand Up @@ -97,8 +97,8 @@ function HomeFooter(props) {
</li>
</ul>
</Grid>
<Grid item xs={6} md={3} className={classes.list}>
<Typography component="h3" gutterBottom>
<Grid item xs={6} sm={4} className={classes.list}>
<Typography component="h2" gutterBottom>
{t('footerResources')}
</Typography>
<ul>
Expand All @@ -119,15 +119,16 @@ function HomeFooter(props) {
</li>
</ul>
</Grid>
<Grid item xs={6} md={3}>
<ul className={classes.list} />
</Grid>
</Grid>
<Typography className={classes.version} color="textSecondary" variant="body2">
<Interpolate
replacement={{
versionNumber: (
<Link color="inherit" href="https://material-ui.com/versions/">
<Link
color="inherit"
href="https://material-ui.com/versions/"
aria-label={`v${process.env.LIB_VERSION}. View versions page.`}
>
{`v${process.env.LIB_VERSION}`}
</Link>
),
Expand Down
2 changes: 2 additions & 0 deletions docs/src/modules/components/HomeSteps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,6 +199,8 @@ function HomeSteps(props) {
data-ga-event-action="click"
data-ga-event-label="home-image"
className={classes.link}
aria-hidden="true"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why would we hide this link from assistive technology?

Copy link
Member

@oliviertassinari oliviertassinari Dec 9, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have seen the Wave Chrome extension report the same adjacent issue on the homepage:

Capture d’écran 2019-12-09 à 16 25 59

Alerts - Redundant link

What It Means

Adjacent links go to the same URL.

Why It Matters

When adjacent links go to the same location (such as a linked product image and an adjacent linked product name that go to the same product page) this results in additional navigation and repetition for keyboard and screen reader users.

How to Fix It

If possible, combine the redundant links into one link and remove any redundant text or alternative text (for example, if a product image and product name are in the same link, the image can usually be given alt="").

The Algorithm... in English

Two adjacent links go to the same URL.

Standards and Guidelines

2.4.4 Link Purpose (In Context) (Level A)

tabindex="-1"
>
<NoSsr>
<img
Expand Down
2 changes: 1 addition & 1 deletion docs/src/modules/components/HomeUsers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ function HomeUsers(props) {
<Divider />
<NoSsr>
<Container maxWidth="md" className={classes.container}>
<Typography variant="h4" align="center" gutterBottom>
<Typography variant="h4" component="h2" align="center" gutterBottom>
{t('whosUsing')}
</Typography>
<Typography variant="body1" align="center" gutterBottom>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/modules/components/backers.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ via [Patreon](https://www.patreon.com/oliviertassinari)
via [OpenCollective](https://opencollective.com/material-ui)

<p style="display: flex; justify-content: center; flex-wrap: wrap;">
<a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="callemall" title="The easy way to message your group" width="100" loading="lazy"></a>
<a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="call-em-all" title="The easy way to message your group" width="100" loading="lazy"></a>
</p>

Gold Sponsors are those who have pledged $500/month and more to Material-UI.
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/discover-more/backers/backers.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ via [Patreon](https://www.patreon.com/oliviertassinari)
via [OpenCollective](https://opencollective.com/material-ui)

<p style="display: flex; justify-content: center; flex-wrap: wrap;">
<a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="callemall" title="The easy way to message your group" width="100" loading="lazy" /></a>
<a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="call-em-all" title="The easy way to message your group" width="100" loading="lazy" /></a>
</p>

Gold Sponsors are those who have pledged $500/month and more to Material-UI.
Expand Down