Skip to content

Commit 5f73234

Browse files
committed
issue: Semantic-Org#4427; Added the Alternate text to image tags because alt text is important to understand the image
1 parent 038b306 commit 5f73234

26 files changed

+49
-49
lines changed

.github/CONTRIBUTING.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -317,7 +317,7 @@ Sometimes it is convenient to use props to generate markup. Example, the [Label
317317

318318
```html
319319
<a class="ui image label">
320-
<img src="veronika.jpg">
320+
<img src="veronika.jpg">
321321
Veronika
322322
<div class="detail">Friend</div>
323323
</a>

README.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!-- Logo -->
22
<p align="center">
33
<a href="https://react.semantic-ui.com">
4-
<img height="128" width="128" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/public/logo.png">
4+
<img alt="Logo" height="128" width="128" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/public/logo.png">
55
</a>
66
</p>
77

@@ -36,9 +36,9 @@ See the [**Documentation**][2] for an introduction, usage information, and examp
3636
## Built With
3737

3838
<p align="center">
39-
<img height="50" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/public/amazon-logo.png" />
40-
<img height="50" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/public/netflix-logo.png" />
41-
<img height="50" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/public/microsoft-logo.png" />
39+
<img alt="Amazon" height="50" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/public/amazon-logo.png" />
40+
<img height="50" alt="Netflix" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/public/netflix-logo.png" />
41+
<img height="50" alt="Microsoft" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/public/microsoft-logo.png" />
4242
</p>
4343

4444
- Amazon Publishing — the full-service publisher of Amazon — [APub.com](https://amazonpublishing.amazon.com)
@@ -122,7 +122,7 @@ Created by [@levithomason][26] and an amazing community of [contributors][20].
122122

123123
Made possible only by [@jlukic][32] authoring [Semantic UI][5].
124124

125-
Blazing deployments by <a href="https://vercel.com/?utm_source=semantic-ui-react"><img height="12" width="14" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/public/vercel-logo.svg" /> Vercel</a>.
125+
Blazing deployments by <a href="https://vercel.com/?utm_source=semantic-ui-react"><img alt="Logo" height="12" width="14" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/public/vercel-logo.svg" /> Vercel</a>.
126126

127127
[1]: https://github.com/Semantic-Org/Semantic-UI-React/blob/master/.github/CONTRIBUTING.md
128128
[2]: https://react.semantic-ui.com/

docs/src/components/CarbonAd/CarbonAdNative.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ class CarbonAdNative extends PureComponent {
112112

113113
return (
114114
<a id={id} href={ad.statlink} target='_blank' rel='noopener noreferrer'>
115-
<img src={ad.image} />
115+
<img src={ad.image} alt="Ad" />
116116
<span>{ad.company}</span>
117117
{' — '}
118118
<span>{ad.description}</span>
@@ -125,14 +125,14 @@ class CarbonAdNative extends PureComponent {
125125
/>
126126

127127
{/* Impression */}
128-
<img src={`${ad.statimp}`} style={{ display: 'none' }} />
128+
<img alt="Ad" src={`${ad.statimp}`} style={{ display: 'none' }} />
129129

130130
{/* Pixel */}
131131
{ad.pixel &&
132132
ad.pixel
133133
.split('||')
134134
.map((pixel, i) => (
135-
<img
135+
<img alt="Ad"
136136
key={i}
137137
src={`${pixel.replace('[timestamp]', ad.timestamp)}`}
138138
style={{ display: 'none' }}

docs/src/components/DocsLayout.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ class DocsLayout extends Component {
6464
<Grid.Column {...bottomColumnWidth} textAlign='center'>
6565
Blazing deployments by{' '}
6666
<a href='https://vercel.com/?utm_source=semantic-ui-react'>
67-
<img height='12' width='14' src='/vercel-logo.svg' /> Vercel
67+
<img height='12' width='14' alt="Vercel-Logo" src='/vercel-logo.svg' /> Vercel
6868
</a>
6969
.
7070
</Grid.Column>

docs/src/examples/collections/Menu/Types/MenuExampleAttached.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const MenuExampleAttached = () => (
4242
</Menu>
4343

4444
<Segment attached='bottom'>
45-
<img src='/images/wireframe/paragraph.png' />
45+
<img alt="WireFrame" src='/images/wireframe/paragraph.png' />
4646
</Segment>
4747
</div>
4848
)

docs/src/examples/collections/Menu/Types/MenuExamplePointing.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export default class MenuExamplePointing extends Component {
3535
</Menu>
3636

3737
<Segment>
38-
<img src='/images/wireframe/paragraph.png' />
38+
<img alt="Wireframe" src='/images/wireframe/paragraph.png' />
3939
</Segment>
4040
</div>
4141
)

docs/src/examples/collections/Menu/Types/MenuExampleSecondaryPointing.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export default class MenuExampleSecondaryPointing extends Component {
3737
</Menu>
3838

3939
<Segment>
40-
<img src='/images/wireframe/media-paragraph.png' />
40+
<img alt="Wireframe" src='/images/wireframe/media-paragraph.png' />
4141
</Segment>
4242
</div>
4343
)

docs/src/examples/collections/Menu/Types/MenuExampleTabularOnTop.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export default class MenuExampleTabularOnTop extends Component {
3434
</Menu>
3535

3636
<Segment attached='bottom'>
37-
<img src='/images/wireframe/paragraph.png' />
37+
<img alt="Wireframe" src='/images/wireframe/paragraph.png' />
3838
</Segment>
3939
</div>
4040
)

docs/src/examples/elements/Button/Variations/ButtonExampleVerticallyAttached.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const ButtonExampleVerticallyAttached = () => (
55
<div>
66
<Button attached='top'>Top</Button>
77
<Segment attached>
8-
<img src='/images/wireframe/paragraph.png' />
8+
<img alt="Wireframe" src='/images/wireframe/paragraph.png' />
99
</Segment>
1010
<Button attached='bottom'>Bottom</Button>
1111
</div>

docs/src/examples/elements/Button/Variations/ButtonExampleVerticallyAttachedGroup.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const ButtonExampleVerticallyAttachedGroup = () => (
88
<Button>Two</Button>
99
</Button.Group>
1010
<Segment attached>
11-
<img src='/images/wireframe/paragraph.png' />
11+
<img alt="Wireframe" src='/images/wireframe/paragraph.png' />
1212
</Segment>
1313
<Button.Group attached='bottom'>
1414
<Button>One</Button>

docs/src/examples/elements/Label/Content/LabelExampleImage.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const LabelExampleImage = () => (
88
Elliot
99
</Label>
1010
<Label as='a'>
11-
<img src='/images/avatar/small/stevie.jpg' />
11+
<img alt="avatar" src='/images/avatar/small/stevie.jpg' />
1212
Stevie
1313
</Label>
1414
</div>

docs/src/examples/elements/Label/Types/LabelExampleIcon.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@ import { Icon, Label } from 'semantic-ui-react'
44
const LabelExampleIcon = () => (
55
<div>
66
<Label image>
7-
<img src='/images/avatar/small/ade.jpg' />
7+
<img alt="avatar" src='/images/avatar/small/ade.jpg' />
88
Adrienne
99
<Icon name='delete' />
1010
</Label>
1111
<Label image>
12-
<img src='/images/avatar/small/zoe.jpg' />
12+
<img alt="avatar" src='/images/avatar/small/zoe.jpg' />
1313
Zoe
1414
<Icon name='delete' />
1515
</Label>
1616
<Label image>
17-
<img src='/images/avatar/small/nan.jpg' />
17+
<img alt="avatar" src='/images/avatar/small/nan.jpg' />
1818
Nan
1919
<Icon name='delete' />
2020
</Label>

docs/src/examples/elements/Label/Types/LabelExampleImage.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ import { Label } from 'semantic-ui-react'
44
const LabelExampleImage = () => (
55
<div>
66
<Label as='a' image>
7-
<img src='/images/avatar/small/joe.jpg' />
7+
<img alt="avatar" src='/images/avatar/small/joe.jpg' />
88
Joe
99
</Label>
1010
<Label as='a' image>
11-
<img src='/images/avatar/small/elliot.jpg' />
11+
<img alt="avatar" src='/images/avatar/small/elliot.jpg' />
1212
Elliot
1313
</Label>
1414
<Label as='a' image>
15-
<img src='/images/avatar/small/stevie.jpg' />
15+
<img alt="avatar" src='/images/avatar/small/stevie.jpg' />
1616
Stevie
1717
</Label>
1818
</div>

docs/src/examples/elements/Label/Types/LabelExampleImageColored.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@ import { Label } from 'semantic-ui-react'
44
const LabelExampleImage = () => (
55
<div>
66
<Label as='a' color='blue' image>
7-
<img src='/images/avatar/small/veronika.jpg' />
7+
<img alt="avatar" src='/images/avatar/small/veronika.jpg' />
88
Veronika
99
<Label.Detail>Friend</Label.Detail>
1010
</Label>
1111
<Label as='a' color='teal' image>
12-
<img src='/images/avatar/small/jenny.jpg' />
12+
<img alt="avatar" src='/images/avatar/small/jenny.jpg' />
1313
Jenny
1414
<Label.Detail>Friend</Label.Detail>
1515
</Label>
1616
<Label as='a' color='yellow' image>
17-
<img src='/images/avatar/small/christian.jpg' />
17+
<img alt="avatar" src='/images/avatar/small/christian.jpg' />
1818
Christian
1919
<Label.Detail>Co-worker</Label.Detail>
2020
</Label>

docs/src/examples/elements/Label/Variations/LabelExampleBasic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const LabelExampleBasic = () => (
1010
Pointing
1111
</Label>
1212
<Label as='a' basic image>
13-
<img src='/images/avatar/small/elliot.jpg' />
13+
<img alt="avatar" src='/images/avatar/small/elliot.jpg' />
1414
Elliot
1515
</Label>
1616
<Label as='a' basic color='red' pointing>

docs/src/examples/views/Advertisement/Types/AdvertisementExampleAdvertisement.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Advertisement } from 'semantic-ui-react'
33

44
const AdvertisementExampleAdvertisement = () => (
55
<Advertisement unit='medium rectangle'>
6-
<img src='/images/wireframe/image.png' />
6+
<img alt="avatar" src='/images/wireframe/image.png' />
77
</Advertisement>
88
)
99

docs/src/examples/views/Feed/Content/FeedExampleExtraImages.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ const FeedExampleAdditionalInformation = () => (
1212
</Feed.Summary>
1313
<Feed.Extra images>
1414
<a>
15-
<img src='/images/wireframe/image.png' />
15+
<img alt="avatar" src='/images/wireframe/image.png' />
1616
</a>
1717
<a>
18-
<img src='/images/wireframe/image.png' />
18+
<img alt="avatar" src='/images/wireframe/image.png' />
1919
</a>
2020
</Feed.Extra>
2121
</Feed.Content>

docs/src/examples/views/Feed/Content/FeedExampleImageLabel.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const FeedExampleImageLabel = () => (
55
<Feed>
66
<Feed.Event>
77
<Feed.Label>
8-
<img src='/images/avatar/small/elliot.jpg' />
8+
<img alt="avatar" src='/images/avatar/small/elliot.jpg' />
99
</Feed.Label>
1010
<Feed.Content>
1111
You added Elliot Fu to the group <a>Coworkers</a>

docs/src/examples/views/Feed/Content/FeedExampleSummaryDate.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const FeedExampleSummaryDate = () => (
55
<Feed>
66
<Feed.Event>
77
<Feed.Label>
8-
<img src='/images/avatar/small/jenny.jpg' />
8+
<img alt="avatar" src='/images/avatar/small/jenny.jpg' />
99
</Feed.Label>
1010
<Feed.Content>
1111
<Feed.Summary>

docs/src/examples/views/Feed/Types/FeedExampleBasic.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const FeedExampleBasic = () => (
55
<Feed>
66
<Feed.Event>
77
<Feed.Label>
8-
<img src='/images/avatar/small/elliot.jpg' />
8+
<img alt="avatar" src='/images/avatar/small/elliot.jpg' />
99
</Feed.Label>
1010
<Feed.Content>
1111
<Feed.Summary>
@@ -29,10 +29,10 @@ const FeedExampleBasic = () => (
2929
</Feed.Summary>
3030
<Feed.Extra images>
3131
<a>
32-
<img src='/images/wireframe/image.png' />
32+
<img alt="WireFrame" src='/images/wireframe/image.png' />
3333
</a>
3434
<a>
35-
<img src='/images/wireframe/image.png' />
35+
<img alt="Wireframe" src='/images/wireframe/image.png' />
3636
</a>
3737
</Feed.Extra>
3838
<Feed.Meta>
@@ -89,10 +89,10 @@ const FeedExampleBasic = () => (
8989
</Feed.Summary>
9090
<Feed.Extra images>
9191
<a>
92-
<img src='/images/wireframe/image.png' />
92+
<img alt="Wireframe" src='/images/wireframe/image.png' />
9393
</a>
9494
<a>
95-
<img src='/images/wireframe/image.png' />
95+
<img alt="Wireframe" src='/images/wireframe/image.png' />
9696
</a>
9797
</Feed.Extra>
9898
<Feed.Meta>

docs/src/examples/views/Feed/Variations/FeedExampleSizeLarge.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,10 @@ const FeedExampleSizeLarge = () => (
4444

4545
<Feed.Extra images>
4646
<a>
47-
<img src='/images/wireframe/image.png' />
47+
<img alt="Wireframe" src='/images/wireframe/image.png' />
4848
</a>
4949
<a>
50-
<img src='/images/wireframe/image.png' />
50+
<img alt="Wireframe" src='/images/wireframe/image.png' />
5151
</a>
5252
</Feed.Extra>
5353

docs/src/layouts/ResponsiveLayout.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -535,7 +535,7 @@ const ResponsiveLayout = () => (
535535
<Container>
536536
<Menu stackable>
537537
<Menu.Item>
538-
<img src='/logo.png' />
538+
<img alt="logo" src='/logo.png' />
539539
</Menu.Item>
540540
<Menu.Item>Features</Menu.Item>
541541
<Menu.Item>Testimonials</Menu.Item>
@@ -547,7 +547,7 @@ const ResponsiveLayout = () => (
547547
<Container>
548548
<Item.Group divided>
549549
<Item>
550-
<Item.Image src='/images/wireframe/image.png' />
550+
<Item.Image alt="Wireframe" src='/images/wireframe/image.png' />
551551
<Item.Content>
552552
<Item.Header as='a'>Content Header</Item.Header>
553553
<Item.Meta>
@@ -558,14 +558,14 @@ const ResponsiveLayout = () => (
558558
A description which may flow for several lines and give context to the content.
559559
</Item.Description>
560560
<Item.Extra>
561-
<Image avatar circular src='/images/wireframe/square-image.png' />
561+
<Image avatar circular alt="Wireframe" src='/images/wireframe/square-image.png' />
562562
Username
563563
</Item.Extra>
564564
</Item.Content>
565565
</Item>
566566

567567
<Item>
568-
<Item.Image src='/images/wireframe/image.png' />
568+
<Item.Image alt="Wireframe" src='/images/wireframe/image.png' />
569569
<Item.Content>
570570
<Item.Header as='a'>Content Header</Item.Header>
571571
<Item.Meta>
@@ -585,7 +585,7 @@ const ResponsiveLayout = () => (
585585
</Item.Content>
586586
</Item>
587587
<Item>
588-
<Item.Image src='/images/wireframe/image.png' />
588+
<Item.Image alt="Wireframe" src='/images/wireframe/image.png' />
589589
<Item.Content>
590590
<Item.Header as='a'>Content Header</Item.Header>
591591
<Item.Meta>

docs/src/pages/Introduction.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const ButtonHTML = `<button class="ui small green button">
3939
</button>`
4040
const LabelJSX = "<Label image='veronika.jpg' />"
4141
const LabelHTML = `<div class="ui image label">
42-
<img src="veronika.jpg">
42+
<img src="veronika.jpg">
4343
</div>`
4444
const RatingJSX = '<Rating rating={1} maxRating={5} />'
4545
const RatingHTML = `<div

src/modules/Embed/Embed.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ const Embed = React.forwardRef(function (props, ref) {
116116
return (
117117
<ElementType {...rest} className={classes} onClick={handleClick} ref={ref}>
118118
{Icon.create(iconShorthand, { autoGenerateKey: false })}
119-
{placeholder && <img className='placeholder' src={placeholder} />}
119+
{placeholder && <img alt="Placeholder" className='placeholder' src={placeholder} />}
120120
{renderEmbed()}
121121
</ElementType>
122122
)

test/specs/modules/Embed/Embed-test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ describe('Embed', () => {
115115
it('renders img when defined', () => {
116116
const url = '/images/wireframe/image.png'
117117

118-
shallow(<Embed placeholder={url} />).should.contain(<img className='placeholder' src={url} />)
118+
shallow(<Embed placeholder={url} />).should.contain(<img alt="Placeholder" className='placeholder' src={url} />)
119119
})
120120
})
121121

test/specs/views/Feed/FeedLabel-test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@ describe('FeedLabel', () => {
1515
describe('image prop', () => {
1616
it('renders <img> with string', () => {
1717
const src = faker.image.imageUrl()
18-
const wrapper = shallow(<FeedLabel image={src} />)
18+
const wrapper = shallow(<FeedLabel alt="faker" image={src} />)
1919

2020
wrapper.should.have.descendants('img')
2121
wrapper.find('img').should.have.prop('src', src)
2222
})
2323

2424
it('renders node', () => {
2525
const src = faker.image.imageUrl()
26-
const img = <img src={src} />
26+
const img = <img alt="faker" src={src} />
2727
const wrapper = shallow(<FeedLabel image={img} />)
2828

2929
wrapper.should.have.descendants('img')

0 commit comments

Comments
 (0)