aws-amplify / aws-amplify/docs

Alt text is not descriptive [Build UI pages]

Open
#7,062 0 comments 0 reactions 0 assignees View on GitHub
web accessibility
Dominant language
MDX
Stars
506
Forks
1.1k
Avg merge
3h 14m
Merged PRs (30d)
1

Description

**Describe the content issue**:
Images listed below do not have descriptive/informative alt text. For markdown the alt text is located between the square brackets, `![alt text](...)`.

The list below isn't exhaustive since I found these images based on the word count for the alt text, but it should be a good starting point to make our alt text better for people who use screen readers.

Some resources to help write alt text:
- https://webaim.org/techniques/alttext/
- https://www.a11yproject.com/posts/are-you-making-these-five-mistakes-when-writing-alt-text/

 

https://github.com/aws-amplify/docs/blob/main/src/pages/[platform]/build-ui/uibuilder/index.mdx:
```
130 1. Duplicate the new [Figma community file](https://www.figma.com/community/file/1047600760128127424) into your Figma account.
131: ![Duplicate the new figma file](/images/console/ui-figma-file.png)
132 1. In the _new_ Figma file, open the AWS Amplify UI Builder Figma plugin. Navigate to the **Theme presets/Import** tab. Click in the paste your theme input and paste (ctrl/cmd + v). This should update the new file with your theme.

153 * Add TextAreaField primitive component. You can change any existing TextField into a TextAreaField by selecting the desired TextField instance and choosing "TextAreaField" under the Swap Instance dropdown.
154: ![Convert TextField to TextArea](/images/console/ui-figma-textfield-to-textarea.gif)
155
```

 

https://github.com/aws-amplify/docs/blob/main/src/pages/[platform]/build-ui/uibuilder/collections/index.mdx:
```
66
67: ![Screenshot showing data binding](/images/console/ui-collections-databind.png)
68

72
73: ![Screenshot showing setting filters](/images/console/ui-collections-set-filters.png)
74

84
85: ![Screenshot showing setting sort conditions](/images/console/ui-collections-set-sort-conditions.png)
86

90
91: ![Screenshot showing collection layout edit](/images/console/ui-collections-layout.png)
92

105
106: ![Screenshot showing search](/images/console/ui-collections-search.png)
107

111
112: ![Screenshot showing pagination](/images/console/ui-collections-pagination.png)
113
```

 

https://github.com/aws-amplify/docs/blob/main/src/pages/[platform]/build-ui/uibuilder/databinding/index.mdx:
```
41
42: ![Screenshot showing UI component editor](/images/console/ui-component-editor.png)
43

64 1. **Edit component in Figma**: This will deep link you into the Figma file to edit the component.
65: 2. **Shuffle preview data**: When you bind UI to static data or data from data models, use shuffle preview to see how your component renders with different data. ![shuffle](/images/console/ui-shuffle.gif)
66 3. **Create collection**: Create a collection out of a component. [Learn more](/[platform]/build-ui/uibuilder/collections/).

96
97: ![Screenshot showing static data binding](/images/console/ui-staticbind.png)
98

102
103: ![Screenshot showing static data binding](/images/console/ui-staticbind2.png)
104

112
113: ![conditional](/images/console/ui-conditional.png)
114

118
119: ![concatenation](/images/console/ui-concat.png)
```

 

https://github.com/aws-amplify/docs/blob/main/src/pages/[platform]/build-ui/uibuilder/eventhandling/index.mdx:
```
56 |-|-|
57: |![Studio interface to configure "Go to URL"](/images/console/go_to_url_studio.png) | ![Interactive website](/images/console/go_to_url_app.gif)|
58
```

 

https://github.com/aws-amplify/docs/blob/main/src/pages/[platform]/build-ui/uibuilder/override/index.mdx:
```
270
271: ![Hover override using class names](/images/console/hover-override.gif)
272
```

 

https://github.com/aws-amplify/docs/blob/main/src/pages/[platform]/build-ui/uibuilder/slots/index.mdx:
```
53
54: 1. On the left-hand side, you'll see the elements of your component. Select a Figma **Frame** (![Figma frame icon](/images/console/figma-frame-icon.png)) within your component.
55
```

 

https://github.com/aws-amplify/docs/blob/main/src/pages/[platform]/build-ui/uibuilder/theming/index.mdx:
```
54
55: ![Modify brand colors](/images/studio/theming/pick-brand-color.gif)
56

62
63: ![Use brand colors in Figma](/images/studio/theming/color-styles.gif)
64

83
84: ![Modify UI primitive colors](/images/studio/theming/component-color.gif)
85

93
94: ![Use space definitions in Figma](/images/studio/theming/space.gif)
95

102
103: ![Apply theme values in Figma](/images/studio/theming/apply.gif)
104

112
113: ![Use font sizes in Figma](/images/studio/theming/font-size.gif)
114

127
128: ![Use borders in Figma](/images/studio/theming/border.gif)
129
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.