[docs] Improve homepage accessibility #18745

mbrookes · 2019-12-08T15:57:37Z

I have followed (at least) the PR section of the contributing guide.

Fix some accessibility issues found with axe beta:

[docs] Use empty alt text for decorative images, add aria-label to themes link 9fc613f
Remove empty ul from footer b917d19
Fix homepage heading hierarchy bfc8af9
Fix backer alt text e34a999
Add aria label to footer version page link 9582032

Issues not fixed:

Search input text contrast ratio < 4.5:1
Twitter button contrast ratio < 4.5:1
Scrollable content not keyboard accessible (Installation section font code sample)
ARIA role not suitable for element (combobox role on search input. (I believe this may be an axe bug.)

…emes link

https://www.w3.org/WAI/GL/wiki/Using_aria-label_for_link_purpose

mui-pr-bot · 2019-12-08T16:08:31Z

Details of bundle changes.

Comparing: 816fe82...06b5187

bundle	Size Change	Size	Gzip Change	Gzip
docs.landing	▼ -9 B (-0.02% )	52.4 kB	▲ +44 B (+0.39% )	11.5 kB
@material-ui/core	--	355 kB	--	97.1 kB
@material-ui/core[umd]	--	312 kB	--	90.1 kB
@material-ui/lab	--	175 kB	--	52.4 kB
@material-ui/styles	--	50.8 kB	--	15.3 kB
@material-ui/system	--	14.5 kB	--	4.03 kB
AppBar	--	62.4 kB	--	19.5 kB
Autocomplete	--	127 kB	--	39.8 kB
Avatar	--	63.9 kB	--	20.1 kB
AvatarGroup	--	60.9 kB	--	19.1 kB
Backdrop	--	66.4 kB	--	20.5 kB
Badge	--	64 kB	--	19.8 kB
BottomNavigation	--	61.1 kB	--	19.1 kB
BottomNavigationAction	--	74.1 kB	--	23.4 kB
Box	--	69.4 kB	--	21 kB
Breadcrumbs	--	66.7 kB	--	20.8 kB
Button	--	78.1 kB	--	23.9 kB
ButtonBase	--	72.6 kB	--	22.7 kB
ButtonGroup	--	80.7 kB	--	24.8 kB
Card	--	61.4 kB	--	19.1 kB
CardActionArea	--	73.7 kB	--	23.1 kB
CardActions	--	60.7 kB	--	19 kB
CardContent	--	60.7 kB	--	18.9 kB
CardHeader	--	63.7 kB	--	20 kB
CardMedia	--	61 kB	--	19.1 kB
Checkbox	--	80.6 kB	--	25.4 kB
Chip	--	81.2 kB	--	24.8 kB
CircularProgress	--	62.8 kB	--	19.7 kB
ClickAwayListener	--	3.87 kB	--	1.56 kB
Collapse	--	66.6 kB	--	20.6 kB
colorManipulator	--	3.85 kB	--	1.52 kB
Container	--	61.9 kB	--	19.3 kB
CssBaseline	--	56.2 kB	--	17.6 kB
Dialog	--	81.3 kB	--	25.4 kB
DialogActions	--	60.8 kB	--	19 kB
DialogContent	--	60.9 kB	--	19 kB
DialogContentText	--	62.7 kB	--	19.7 kB
DialogTitle	--	63 kB	--	19.7 kB
Divider	--	61.3 kB	--	19.2 kB
docs.main	--	609 kB	--	194 kB
Drawer	--	83 kB	--	25.2 kB
ExpansionPanel	--	69.9 kB	--	21.8 kB
ExpansionPanelActions	--	60.8 kB	--	19 kB
ExpansionPanelDetails	--	60.6 kB	--	18.9 kB
ExpansionPanelSummary	--	76.7 kB	--	24.2 kB
Fab	--	75.4 kB	--	23.4 kB
Fade	--	22.2 kB	--	7.68 kB
FilledInput	--	72.1 kB	--	22.3 kB
FormControl	--	63.1 kB	--	19.6 kB
FormControlLabel	--	64.2 kB	--	20.1 kB
FormGroup	--	60.7 kB	--	19 kB
FormHelperText	--	61.9 kB	--	19.4 kB
FormLabel	--	62.1 kB	--	19.2 kB
Grid	--	63.8 kB	--	20 kB
GridList	--	61.2 kB	--	19.2 kB
GridListTile	--	62.4 kB	--	19.5 kB
GridListTileBar	--	61.9 kB	--	19.3 kB
Grow	--	22.8 kB	--	7.8 kB
Hidden	--	64.6 kB	--	20.2 kB
Icon	--	61.5 kB	--	19.2 kB
IconButton	--	74.8 kB	--	23.3 kB
Input	--	71.1 kB	--	22.1 kB
InputAdornment	--	63.8 kB	--	20 kB
InputBase	--	69.2 kB	--	21.6 kB
InputLabel	--	64 kB	--	19.9 kB
LinearProgress	--	64 kB	--	20 kB
Link	--	65.3 kB	--	20.5 kB
List	--	61 kB	--	19 kB
ListItem	--	75.7 kB	--	23.6 kB
ListItemAvatar	--	60.8 kB	--	19 kB
ListItemIcon	--	60.9 kB	--	19 kB
ListItemSecondaryAction	--	60.7 kB	--	19 kB
ListItemText	--	63.6 kB	--	19.9 kB
ListSubheader	--	61.4 kB	--	19.3 kB
Menu	--	86.9 kB	--	26.7 kB
MenuItem	--	76.8 kB	--	23.9 kB
MenuList	--	64.6 kB	--	20.2 kB
MobileStepper	--	66.4 kB	--	20.8 kB
Modal	--	14.3 kB	--	5 kB
NativeSelect	--	75.4 kB	--	23.7 kB
NoSsr	--	2.19 kB	--	1.03 kB
OutlinedInput	--	72.6 kB	--	22.5 kB
Paper	--	60.9 kB	--	18.9 kB
Popover	--	81.3 kB	--	25.1 kB
Popper	--	28.7 kB	--	10.2 kB
Portal	--	2.9 kB	--	1.3 kB
Radio	--	81.5 kB	--	25.6 kB
RadioGroup	--	61.9 kB	--	19.3 kB
Rating	--	68.7 kB	--	22 kB
RootRef	--	4.21 kB	--	1.64 kB
Select	--	113 kB	--	33.5 kB
Skeleton	--	61.2 kB	--	19.3 kB
Slide	--	24.3 kB	--	8.3 kB
Slider	--	74.3 kB	--	23.3 kB
Snackbar	--	75.8 kB	--	23.7 kB
SnackbarContent	--	64.3 kB	--	20.2 kB
SpeedDial	--	84.7 kB	--	26.7 kB
SpeedDialAction	--	116 kB	--	36.5 kB
SpeedDialIcon	--	63.2 kB	--	19.8 kB
Step	--	61.3 kB	--	19.2 kB
StepButton	--	80.9 kB	--	25.5 kB
StepConnector	--	61.4 kB	--	19.3 kB
StepContent	--	67.7 kB	--	21.1 kB
StepIcon	--	63.3 kB	--	19.7 kB
StepLabel	--	67.3 kB	--	21.1 kB
Stepper	--	63.4 kB	--	19.9 kB
styles/createMuiTheme	--	15.4 kB	--	5.44 kB
SvgIcon	--	61.7 kB	--	19.2 kB
SwipeableDrawer	--	90.4 kB	--	27.9 kB
Switch	--	79.8 kB	--	25 kB
Tab	--	75 kB	--	23.6 kB
Table	--	61.2 kB	--	19.2 kB
TableBody	--	60.8 kB	--	19 kB
TableCell	--	62.7 kB	--	19.7 kB
TableFooter	--	60.8 kB	--	19 kB
TableHead	--	60.8 kB	--	19 kB
TablePagination	--	139 kB	--	40.7 kB
TableRow	--	61.2 kB	--	19.1 kB
TableSortLabel	--	76 kB	--	23.8 kB
Tabs	--	84.1 kB	--	26.5 kB
TextareaAutosize	--	5.06 kB	--	2.11 kB
TextField	--	122 kB	--	35.5 kB
ToggleButton	--	74.8 kB	--	23.6 kB
ToggleButtonGroup	--	61.9 kB	--	19.4 kB
Toolbar	--	61 kB	--	19.1 kB
Tooltip	--	99.5 kB	--	31.4 kB
TreeItem	--	72.3 kB	--	22.8 kB
TreeView	--	65 kB	--	20.4 kB
Typography	--	62.3 kB	--	19.4 kB
useAutocomplete	--	12.3 kB	--	4.6 kB
useMediaQuery	--	2.47 kB	--	1.04 kB
Zoom	--	22.3 kB	--	7.68 kB

Generated by 🚫 dangerJS against 06b5187

docs/src/modules/components/HomeSteps.js

docs/src/modules/components/backers.md

eps1lon

I don't see a consistent logic for when images are decorative or not. I learned that logos are usually not decorative (https://webaim.org/techniques/alttext/#logos or https://www.deque.com/blog/great-alt-text-introduction/)

eps1lon · 2019-12-09T12:07:23Z

docs/src/modules/components/HomeSteps.js

@@ -199,6 +199,7 @@ function HomeSteps(props) {
            data-ga-event-action="click"
            data-ga-event-label="home-image"
            className={classes.link}
+            aria-hidden="true"


Why would we hide this link from assistive technology?

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

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)

mbrookes · 2019-12-09T13:22:38Z

logos are usually not decorative

Both logos are accompanied by the text "Material-UI". Labelling them would be redundant, therefore they're decorative.

Why would we hide this link from assistive technology?

Because it's redundant.

eps1lon · 2019-12-09T15:18:05Z

If something is redundant then we could remove it. Again logos are usually next to text. That fact makes them not decorative. Do you have some ressources explaining this and why is webaim or dequeue not a reliable ressource in your opinion?

mbrookes · 2019-12-09T21:09:45Z

If something is redundant then we could remove it.

That's what aria-hidden does. It removes it from the accessibility tree.

Again logos are usually next to text. That fact makes them not decorative. Do you have some resources explaining this

Sure, here you go:

https://webaim.org/techniques/alttext/#logos

Alternative text may be provided in the alt attribute or in the surrounding context of the image.

https://www.deque.com/blog/great-alt-text-introduction/)

When Do Images Need Alt Text?

The short answer to this question – and the answer many people don’t expect – is that not all images need alt text. In the accessibility world, we differentiate between images that are decorative and images that are informative.

Decorative images usually don’t need alt text. They may exist on the page for purely aesthetic reasons – in other words, to make the page look pretty. Or they may be repeating information that is already on the page as text. In that case, adding alt text to the image is redundant.

oliviertassinari · 2019-12-09T21:38:24Z

@mbrookes Are you sure the patch solves the problem? It seems that I can still navigate to the image link with VoiceOver (but I have no more description of what the link is about) and Wave still reports a link duplication warning (not an error).

What about keeping the duplicate link (ignoring the problem)?

mbrookes · 2019-12-09T23:04:07Z

Are you sure the patch solves the problem?

It seems Safari behaves differently to Chrome. Okay, I give up for now. Perhaps @eps1lon will have more luck.

Wave still reports a link duplication warning (not an error).

Yes, I had queried it with them. Apparently it's intentional - a hidden item might be programatically unhidden, so they warn anyway, but said the warning can be ignored if it will always be hidden.

mbrookes added 5 commits December 8, 2019 15:09

[docs] Use empty alt text for decorative images, add aria-label to th…

9fc613f

…emes link

[docs] Remove empty ul from footer

b917d19

[docs] Fix homepage heading hierarchy

bfc8af9

[docs] Fix backer alt text

e34a999

[docs] Add aria label to footer version page link

9582032

https://www.w3.org/WAI/GL/wiki/Using_aria-label_for_link_purpose

mbrookes added accessibility a11y docs Improvements or additions to the documentation labels Dec 8, 2019

prettier

560635f

oliviertassinari reviewed Dec 8, 2019

View reviewed changes

docs/src/modules/components/HomeSteps.js Outdated Show resolved Hide resolved

oliviertassinari reviewed Dec 8, 2019

View reviewed changes

docs/src/modules/components/backers.md Outdated Show resolved Hide resolved

mbrookes and others added 4 commits December 8, 2019 23:43

[docs] Hide linked themes image from assistive tech

f7ab239

[docs] Revert VSCode prettier plugin changes

667a19f

[docs] Make WAVE stop complianing about non-issue

24dcc02

apply patch everywhere

e0a51eb

oliviertassinari requested a review from eps1lon December 9, 2019 10:50

oliviertassinari approved these changes Dec 9, 2019

View reviewed changes

oliviertassinari added the PR: ready to ship label Dec 9, 2019

eps1lon requested changes Dec 9, 2019

View reviewed changes

remove themes image from tab flow

06b5187

oliviertassinari removed the PR: ready to ship label Dec 9, 2019

mbrookes merged commit d30e5ae into mui:master Dec 9, 2019

mbrookes deleted the homepage-accessibility branch December 9, 2019 21:11

snyk-bot mentioned this pull request Jan 7, 2020

[Snyk] Upgrade @material-ui/core from 4.4.0 to 4.8.2 srdjan-19/rent-a-car-service#3

Open

snyk-bot mentioned this pull request Feb 15, 2020

[Snyk] Upgrade @material-ui/core from 4.3.1 to 4.9.0 aubreyyan/1f5374286c#17

Open

snyk-bot mentioned this pull request Feb 25, 2020

[Snyk] Upgrade @material-ui/core from 4.1.1 to 4.9.1 baaahs/sparklemotion#199

Closed

oliviertassinari mentioned this pull request Jan 6, 2021

[website] Add about us branding page #24095

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] Improve homepage accessibility #18745

[docs] Improve homepage accessibility #18745

mbrookes commented Dec 8, 2019

mui-pr-bot commented Dec 8, 2019 •

edited

Loading

eps1lon left a comment

eps1lon Dec 9, 2019

oliviertassinari Dec 9, 2019 •

edited

Loading

mbrookes commented Dec 9, 2019

eps1lon commented Dec 9, 2019

mbrookes commented Dec 9, 2019 •

edited

Loading

When Do Images Need Alt Text?

oliviertassinari commented Dec 9, 2019 •

edited

Loading

mbrookes commented Dec 9, 2019 •

edited

Loading

[docs] Improve homepage accessibility #18745

[docs] Improve homepage accessibility #18745

Conversation

mbrookes commented Dec 8, 2019

mui-pr-bot commented Dec 8, 2019 • edited Loading

eps1lon left a comment

Choose a reason for hiding this comment

eps1lon Dec 9, 2019

Choose a reason for hiding this comment

oliviertassinari Dec 9, 2019 • edited Loading

Choose a reason for hiding this comment

Alerts - Redundant link

What It Means

Why It Matters

How to Fix It

The Algorithm... in English

Standards and Guidelines

mbrookes commented Dec 9, 2019

eps1lon commented Dec 9, 2019

mbrookes commented Dec 9, 2019 • edited Loading

When Do Images Need Alt Text?

oliviertassinari commented Dec 9, 2019 • edited Loading

mbrookes commented Dec 9, 2019 • edited Loading

mui-pr-bot commented Dec 8, 2019 •

edited

Loading

oliviertassinari Dec 9, 2019 •

edited

Loading

mbrookes commented Dec 9, 2019 •

edited

Loading

oliviertassinari commented Dec 9, 2019 •

edited

Loading

mbrookes commented Dec 9, 2019 •

edited

Loading