shoutem · mirabtellegen · Nov 6, 2023
diff --git a/docs/extensions/my-first-extension/_posts/1970-01-01-Introduction.md b/docs/extensions/my-first-extension/_posts/1970-01-01-Introduction.md
@@ -15,15 +15,15 @@ Before you start the My First Extension tutorial series, you should go through [
 Here's a preview of what the completed app will look like.
 
 <p class="image">
-<img src='{{ site.url }}/img/my-first-extension/extension-preview.jpg'/>
+<img alt='Preview of the Getting Started app' src='{{ site.url }}/img/my-first-extension/extension-preview.jpg'/>
 </p>
 
 ## What are Extensions?
 
 Extensions represent features in the app. The app owner picks extensions that he wants to use in his app through the Shoutem Builder. Shoutem prepared a bunch of [open sourced](https://github.com/shoutem/extensions) extensions which you can easily customize to fit your needs.
 
 <p class="image">
-<img src='{{ site.url }}/img/my-first-extension/shoutem-extensions.png'/>
+<img alt='Gallery of extension icons' src='{{ site.url }}/img/my-first-extension/shoutem-extensions.png'/>
 </p>
 
 You can develop extensions both within apps made by `shoutem clone` and as stand-alone extensions that you plan on using within multiple apps. In this tutorial, we'll be working on the Restaurants extension we made in Getting Started, so it'll be treated as one within a _cloned_ app.
@@ -37,13 +37,13 @@ Shoutem uses [React](https://facebook.github.io/react/) and [React Native](https
 We use [JSX](https://facebook.github.io/react/docs/introducing-jsx.html) as a simple way to write UI components with tags. Building an app screen with JSX is as easy as:
 
 <p class="image">
-<img src='{{ site.url }}/img/my-first-extension/jsx-component-example.png'/>
+<img alt='Example jsx app code' src='{{ site.url }}/img/my-first-extension/jsx-component-example.png'/>
 </p>
 
 On top of React and React Native, we're using [Redux](http://redux.js.org/), a library which simplifies state management.
 
 <p class="image">
-<img src='{{ site.url }}/img/my-first-extension/redux.png'/>
+<img alt='Redux state flow chart' src='{{ site.url }}/img/my-first-extension/redux.png'/>
 </p>
 
 Even though _we_ use Redux, _you_ can use any other state management library (like [MobX](https://github.com/mobxjs/mobx), or just don't use any at all! Again, we don't want to restrict you on how you use React Native.

diff --git a/docs/extensions/my-first-extension/_posts/1970-01-03-InitializingExtension.md b/docs/extensions/my-first-extension/_posts/1970-01-03-InitializingExtension.md
@@ -10,7 +10,7 @@ section: My first extension
 Here's the mockup of the Restaurants extension that we saw in the [Introduction]({{ site.url }}/docs/extensions/my-first-extension/introduction). Through the course of this tutorial, we'll turn the **Restaurants** extension from [Getting Started]({{ site.url }}/docs/extensions/tutorials/getting-started) into this list of restaurants.
 
 <p class="image">
-<img src='{{ site.url }}/img/my-first-extension/extension-preview.jpg'/>
+<img alt='Preview of the Getting Started app' src='{{ site.url }}/img/my-first-extension/extension-preview.jpg'/>
 </p>
 
 The left app screen lists the restaurants and the right one shows the details of each specific restaurant when you tap on it.
@@ -97,7 +97,7 @@ See it in the builder: {{ site.shoutem.builderURL }}/app/{{ site.example.appId }
 Uploading the extension is self-explanatory, but let's elaborate on installing and uninstalling extensions. In the Builder, you can go to the `Extensions` tab to see which extensions are installed in your app. If you successfully installed your Restaurants extension from [Getting Started]({{ site.url }}/docs/extensions/tutorials/getting-started), you should see it there under the `Custom` category.
 
 <p class="image">
-<img src='{{ site.url }}/img/my-first-extension/extension-tab-extension.png'/>
+<img alt="Shoutem interface Custom tab" src='{{ site.url }}/img/my-first-extension/extension-tab-extension.png'/>
 </p>
 
 Extensions are installed into specific apps, not all apps on your account.

diff --git a/docs/extensions/my-first-extension/_posts/1970-01-04-CreatingShortcutAndScreen.md b/docs/extensions/my-first-extension/_posts/1970-01-04-CreatingShortcutAndScreen.md
@@ -103,7 +103,7 @@ Scanning folders for symlinks in /path/to/Restaurants/node_modules
 ```
 
 <p class="image">
-<img src='{{ site.url }}/img/tutorials/getting-started/03-lets-eat.png'/>
+<img alt="Phone showing Let's Eat text" src='{{ site.url }}/img/tutorials/getting-started/03-lets-eat.png'/>
 </p>
 
 > #### Note
@@ -128,7 +128,7 @@ export default class List extends Component {
 After reloading the emulator, your new line of text should be visible immediately:
 
 <p class="image">
-<img src='{{ site.url }}/img/my-first-extension/real-time-preview.png'/>
+<img alt="Phone showing Let's Eat, Can't do anything on an empty stomach" src='{{ site.url }}/img/my-first-extension/real-time-preview.png'/>
 </p>
 
 Your extension only has a simple screen right now, let's add some [UI components]({{ site.url }}/docs/extensions/my-first-extension/using-ui-toolkit).
diff --git a/docs/extensions/my-first-extension/_posts/1970-01-05-UsingUIToolkit.md b/docs/extensions/my-first-extension/_posts/1970-01-05-UsingUIToolkit.md
@@ -92,7 +92,7 @@ Success!
 The app preview will be shown after Shoutem bundles the new app. `List` is now showing the list of restaurants.
 
 <p class="image">
-<img src='{{ site.url }}/img/my-first-extension/extension-rich-list.png'/>
+<img alt='Phone showing list of restaurant photos and names' src='{{ site.url }}/img/my-first-extension/extension-rich-list.png'/>
 </p>
 
 This looks exactly how we wanted.
@@ -329,7 +329,7 @@ export default class Details extends PureComponent {
 Now when you reload the app and tap on a restaurant in the list, this is what you get:
 
 <p class="image">
-<img src='{{ site.url }}/img/my-first-extension/extension-rich-details.png'/>
+<img alt='Phone showing information for Gaspard Brasserie' src='{{ site.url }}/img/my-first-extension/extension-rich-details.png'/>
 </p>
 
 If you aren't previewing with an [emulator on your local machine]({{ site.url }}/docs/extensions/tutorials/setting-local-environment), you will have to _push_ the extension:

diff --git a/docs/extensions/my-first-extension/_posts/1970-01-06-UsingCloudStorage.md b/docs/extensions/my-first-extension/_posts/1970-01-06-UsingCloudStorage.md
@@ -162,25 +162,25 @@ Success!
 Go to the [Builder]({{ shoutem.builderURL }}), open your app and select `Restaurants` under `Main navigation` to see the Shoutem CMS page.
 
 <p class="image">
-<img src='{{ site.url }}/img/my-first-extension/empty-cms-page.png'/>
+<img alt='Shoutem interface Restaurants tab' src='{{ site.url }}/img/my-first-extension/empty-cms-page.png'/>
 </p>
 
 Click on `Create Items` to start adding content. This will open a modal that contains the `CMS` interface, where you can manage the content for your extension. Apps that get content from the Shoutem CMS will immediately show new content once you edit or add it.
 
 <p class="image">
-<img src='{{ site.url }}/img/my-first-extension/empty-cms.png'/>
+<img alt='Restaurants tab with Add Item button' src='{{ site.url }}/img/my-first-extension/empty-cms.png'/>
 </p>
 
 Click on `Add item`. This will open a modal for inserting data for the `Restaurants` model, which you defined with your data schema.
 
 <p class="image">
-<img src='{{ site.url }}/img/my-first-extension/cms-modal.png'/>
+<img alt='Shoutem interface New Item form' src='{{ site.url }}/img/my-first-extension/cms-modal.png'/>
 </p>
 
 Add at least one restaurant. Now you can see the data in the CMS settings page of your Restaurants extension:
 
 <p class="image">
-<img src='{{ site.url }}/img/my-first-extension/full-cms.png'/>
+<img alt='Shoutem interface Restaurants tab containing list of restaurant data' src='{{ site.url }}/img/my-first-extension/full-cms.png'/>
 </p>
 
 Although you've added some restaurants in the Builder, your extension is still coded to use static data from the `assets` folder you set up earlier in the tutorial series. Let's change that and start fetching the data from Shoutem Cloud Storage using the `@shoutem/redux-io` package.
diff --git a/docs/extensions/my-first-extension/_posts/1970-01-07-WorkingWithData.md b/docs/extensions/my-first-extension/_posts/1970-01-07-WorkingWithData.md
@@ -232,7 +232,7 @@ Success!
 ```
 
 <p class="image">
-<img src='{{ site.url }}/img/my-first-extension/working-with-data.png'/>
+<img alt='Shoutem interface Restaurants tab containing list of restaurant data' src='{{ site.url }}/img/my-first-extension/working-with-data.png'/>
 </p>
 
 Works like a charm! You just made your first extension using the **Shoutem UI Toolkit** and **Shoutem Cloud Storage**. Great job!
diff --git a/docs/extensions/my-first-extension/_posts/1970-01-08-Publish.md b/docs/extensions/my-first-extension/_posts/1970-01-08-Publish.md
@@ -20,7 +20,7 @@ Version `0.0.1` of `Restaurants` extensions was published!
 Publish your app now to the stores. You can let Shoutem publish it for you to both stores (premium feature) or publish it manually following [our tutorial]({{ site.url }}/docs/extensions/tutorials/publish-your-app). Shoutem has developed an easy and intuitive process of app publishing. Simply insert information at one place and Shoutem will take care of the rest.
 
 <p class="image">
-<img src='{{ site.url }}/img/tutorials/setting-local-environment/settings.png'/>
+<img alt='Shoutem setting app info tab' src='{{ site.url }}/img/tutorials/setting-local-environment/settings.png'/>
 </p>
 
 ## Using the app dashboard!
@@ -30,13 +30,13 @@ Once the app hits the stores, the dashboard really starts to shine. You can mana
 To send push notifications, navigate to the _Push_ tab in the Builder and customize the push notification you want to send.
 
 <p class="image">
-<img src='{{ site.url }}/img/my-first-extension/push-notification.png'/>
+<img alt='Push notification settings tab containing form' src='{{ site.url }}/img/my-first-extension/push-notification.png'/>
 </p>
 
 Tracking what users are doing within your app is also in the palm of your hand with our _Stats_ tab.
 
 <p class="image">
-<img src='{{ site.url }}/img/my-first-extension/analytics.png'/>
+<img alt='App stats tab showing graph' src='{{ site.url }}/img/my-first-extension/analytics.png'/>
 </p>
 
 ## What's next?

diff --git a/docs/extensions/reference/_posts/1970-01-01-Overview.md b/docs/extensions/reference/_posts/1970-01-01-Overview.md
@@ -32,7 +32,7 @@ Our app architecture is completely modular. At the center of everything is only
 Some of our extensions are `system` ones. They're hidden from our non technical app owners (who don't have a developer account registered). Only `shoutem` developer can create `system` extensions.
 
 <p class="image">
-<img src='{{ site.url }}/img/references/platform/system-extensions.png'/>
+<img alt='System tab containing extension types' src='{{ site.url }}/img/references/platform/system-extensions.png'/>
 </p>
 
 ##### Extension lifecycle

diff --git a/docs/extensions/reference/_posts/1970-01-04-SettingsTypesInExtension.md b/docs/extensions/reference/_posts/1970-01-04-SettingsTypesInExtension.md
@@ -82,7 +82,7 @@ Extension settings are global settings shared throughout all extension parts wit
 Settings pages meant for manipulating extension settings can be found in the `Extensions` tab for that extension. We call them `extension settings pages`.
 
 <p class="image">
-<img src='{{ site.url }}/img/tutorials/settings-theme/extension-tab-extension-restaurants-settings.png'/>
+<img alt='Shoutem extensions settings page' src='{{ site.url }}/img/tutorials/settings-theme/extension-tab-extension-restaurants-settings.png'/>
 </p>
 
 ##### Server side
@@ -146,7 +146,7 @@ Shortcut settings are settings shared throughout all the screens that were navig
 Settings pages meant for manipulating shortcut settings can be found next to app structure in the `Screens` tab.  We call them `shortcut settings pages`. Namely, for this example, there should be `Content` and `Settings`.
 
 <p class="image">
-<img src='{{ site.url }}/img/tutorials/settings-theme/screens-tab-extension-restaurants-settings.png'/>
+<img alt='Shortcut settings page' src='{{ site.url }}/img/tutorials/settings-theme/screens-tab-extension-restaurants-settings.png'/>
 </p>
 
 ##### Server side
@@ -226,7 +226,7 @@ Screen settings are layouts settings that hold information specific for that lay
 There's only 1 settings page per screen for manipulating screen settings. It's located in the `Layout` shortcut settings page, under the layout selector, when that screen is selected as the desired layout.
 
 <p class="image">
-<img src='{{ site.url }}/img/tutorials/settings-theme/screens-tab-extension-restaurants-layout-settings.png'/>
+<img alt="Layout options page for screens" src='{{ site.url }}/img/tutorials/settings-theme/screens-tab-extension-restaurants-layout-settings.png'/>
 </p>
 
 ##### Server side

diff --git a/docs/extensions/reference/_posts/1970-01-05-ThemeVariables.md b/docs/extensions/reference/_posts/1970-01-05-ThemeVariables.md
@@ -10,7 +10,7 @@ section: Reference
 Adjustment of theme is done through theme variables. These variables can be set through Shoutem builder, which interprets the variables schema.
 
 <p class="image">
-<img src='{{ site.url }}/img/tutorials/settings-theme/style-tab-themes-customise_theme-no_picker.png'/>
+<img alt='Page with theme options' src='{{ site.url }}/img/tutorials/settings-theme/style-tab-themes-customise_theme-no_picker.png'/>
 </p>
 
 ## Structure of variables schema file
@@ -99,7 +99,7 @@ Each variable of the same format thus _inherits_ values defined in `formats`, bu
 Variable of type color will result in color picker in interface for customizing theme.
 
 <p class="image">
-<img src='{{ site.url }}/img/tutorials/settings-theme/style-tab-themes-customize_theme-color.png'/>
+<img alt='Theme color selector' src='{{ site.url }}/img/tutorials/settings-theme/style-tab-themes-customize_theme-color.png'/>
 </p>
 
 ###### Default value
@@ -116,7 +116,7 @@ Currently, there are no additional properties variable descriptor supports.
 Variable of type font will result in complex control in interface for customizing theme.
 
 <p class="image">
-<img src='{{ site.url }}/img/tutorials/settings-theme/style-tab-themes-customize_theme-font.png'/>
+<img alt='Page with theme options' src='{{ site.url }}/img/tutorials/settings-theme/style-tab-themes-customize_theme-font.png'/>
 </p>
 
 

diff --git a/docs/extensions/tutorials/_posts/1970-01-01-ConnectToApi.md b/docs/extensions/tutorials/_posts/1970-01-01-ConnectToApi.md
@@ -12,7 +12,7 @@ Since Shoutem apps are plain React Native apps, you can connect to any API. It's
 In this tutorial we'll explain how to build a simple React Native app fetching the photo of the day from [NASA's APOD API](https://api.nasa.gov/index.html). We'll also use the [Shoutem UI toolkit]({{ site.url }}/docs/ui-toolkit/introduction). Here's how the completed app should look:
 
 <p class="image">
-<img src='{{ site.url }}/img/tutorials/connecting-to-api/final.png'/>
+<img alt="Phone with planet photo app' src='{{ site.url }}/img/tutorials/connecting-to-api/final.png'/>
 </p>
 
 The complete code for this extension is available in our [GitHub repository](https://github.com/shoutem/extension-examples/tree/master/connecting-to-3rd-party-api).
@@ -71,7 +71,7 @@ Extension successfully installed to the new app. Check it here:
 Once this is done, go to the [Builder]({{ site.shoutem.builderURL }}) and add the screen inside the app. Now you can preview the app:
 
 <p class="image">
-<img src='{{ site.url }}/img/tutorials/connecting-to-api/hello-world.png'/>
+<img alt='Shoutem interface screen builder tab' src='{{ site.url }}/img/tutorials/connecting-to-api/hello-world.png'/>
 </p>
 
 ## Fetch the Photo
@@ -158,5 +158,5 @@ Success!
 Preview it to see the changes. This is the final result:
 
 <p class="image">
-<img src='{{ site.url }}/img/tutorials/connecting-to-api/final-builder.png'/>
+<img alt='App navigation preview' src='{{ site.url }}/img/tutorials/connecting-to-api/final-builder.png'/>
 </p>