diff options
| author | Jerome Pasion <jerome.pasion@qt.io> | 2025-11-19 13:36:18 +0100 |
|---|---|---|
| committer | Jerome Pasion <jerome.pasion@qt.io> | 2025-11-26 16:14:13 +0100 |
| commit | 5dceaca0a7bd0d63d349a8afc7583c166f2f5dfd (patch) | |
| tree | a519dbf10626c1d55fed273dd4e48a559ea5c3e4 /examples/quickcontrols | |
| parent | a7084abd9778b955d80e7419e82f6f7b92f7978d (diff) | |
Doc: Add alternate text for Qt Quick and Qt Quick Controls images
Alternate text (alt text) improves the documentation experience for
screen readers and for other accessibility tools.
Pick-to: 6.9 6.10
Task-number: QTBUG-135120
Change-Id: I975c3de11f893882fb9a27218079f244bd38a622
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
Diffstat (limited to 'examples/quickcontrols')
12 files changed, 55 insertions, 21 deletions
diff --git a/examples/quickcontrols/attachedstyleproperties/doc/src/qtquickcontrols-attachedstyleproperties.qdoc b/examples/quickcontrols/attachedstyleproperties/doc/src/qtquickcontrols-attachedstyleproperties.qdoc index 1b0116c7ec..fe4a586ff7 100644 --- a/examples/quickcontrols/attachedstyleproperties/doc/src/qtquickcontrols-attachedstyleproperties.qdoc +++ b/examples/quickcontrols/attachedstyleproperties/doc/src/qtquickcontrols-attachedstyleproperties.qdoc @@ -10,6 +10,7 @@ \brief Demonstrates use of QQuickAttachedPropertyPropagator. \image qtquickcontrols-attachedstyleproperties.png + {Window with toolbar containing dark mode toggle and buttons} The Attached Style Properties example is a simple application that shows how to use \l QQuickAttachedPropertyPropagator to propagate attached diff --git a/examples/quickcontrols/chattutorial/doc/src/qtquickcontrols-chattutorial.qdoc b/examples/quickcontrols/chattutorial/doc/src/qtquickcontrols-chattutorial.qdoc index 8124bb948a..620877a873 100644 --- a/examples/quickcontrols/chattutorial/doc/src/qtquickcontrols-chattutorial.qdoc +++ b/examples/quickcontrols/chattutorial/doc/src/qtquickcontrols-chattutorial.qdoc @@ -151,7 +151,8 @@ For an in-depth explanation of this file, see \l {Building a QML application}. Here is what our application currently looks like when run: -\borderedimage qtquickcontrols-chattutorial-chapter1.png +\image qtquickcontrols-chattutorial-chapter1.png + {Empty application window with Contacts header} \section1 Chapter 2: Lists @@ -225,7 +226,8 @@ The image will be \c 40 pixels wide and \c 40 pixels high. We'll base the height of the delegate on the image's height, so that we don't have any empty vertical space. -\borderedimage qtquickcontrols-chattutorial-chapter2.png +\image qtquickcontrols-chattutorial-chapter2.png + {Contact list displaying three entries with avatars} \section1 Chapter 3: Navigation @@ -277,7 +279,8 @@ In chapter 2, we added a ListView below the header. If you run the application for that chapter, you'll see that the contents of the view can be scrolled over the top of the header: -\borderedimage qtquickcontrols-chattutorial-chapter2-listview-header.gif +\image qtquickcontrols-chattutorial-chapter2-listview-header.gif + {List view contents scrolling over the Contacts header} This is not that nice, especially if the text in the delegates is long enough that it reaches the text in the header. What we @@ -297,7 +300,8 @@ usual, comes from the application style. Here it is in action: \printuntil } \printuntil } -\borderedimage qtquickcontrols-chattutorial-chapter3-listview-header.gif +\image qtquickcontrols-chattutorial-chapter3-listview-header.gif + {Toolbar preventing list content from scrolling over header} It has no layout of its own, so we center the label within it ourselves. @@ -398,7 +402,8 @@ After filling the width and height of its parent, we also set some margins on the view. This gives us a nice alignment with the placeholder text in the "compose message" field: -\borderedimage qtquickcontrols-chattutorial-chapter3-view-margins.png +\image qtquickcontrols-chattutorial-chapter3-view-margins.png + {List view margins aligned with compose message field below} Next, we set \l {ListView::}{displayMarginBeginning} and \l {ListView::}{displayMarginEnd}. These properties ensure that the delegates @@ -450,7 +455,8 @@ does not go outside of the screen. Finally, the button is only enabled when there is actually a message to send. -\borderedimage qtquickcontrols-chattutorial-chapter3.gif +\image qtquickcontrols-chattutorial-chapter3.gif + {Navigation between contact list and conversation pages} \section1 Chapter 4: Models @@ -629,7 +635,8 @@ timestamp that we want to display below every message: \printuntil } \printuntil } -\borderedimage qtquickcontrols-chattutorial-chapter4-message-timestamp.png +\image qtquickcontrols-chattutorial-chapter4-message-timestamp.png + {Chat messages displaying timestamps below message text} Now that we have a proper model, we can use its \c recipient role in the expression for the \c sentByMe property. @@ -651,7 +658,8 @@ smaller value. However, in the image below, the message text is quite long, so the smaller value (the width of the view) is chosen, ensuring that the text stops at the opposite edge of the screen: -\borderedimage qtquickcontrols-chattutorial-chapter4-long-message.png +\image qtquickcontrols-chattutorial-chapter4-long-message.png + {Long message text wrapping to fit within view width} In order to display the timestamp for each message that we discussed earlier, we use a Label. The date and time are formatted with @@ -667,7 +675,8 @@ First, we call the invokable \c sendMessage() function of the model, which inserts a new row into the Conversations database table. Then, we clear the text field to make way for future input. -\borderedimage qtquickcontrols-chattutorial-chapter4.gif +\image qtquickcontrols-chattutorial-chapter4.gif + {Composing and sending messages with SQL model integration} \section1 Chapter 5: Styling @@ -681,12 +690,14 @@ So far, we've just been testing the application with the Basic style. If we run it with the \l {Material Style}, for example, we'll immediately see some issues. Here is the Contacts page: -\borderedimage qtquickcontrols-chattutorial-chapter5-contacts-material-test.png +\image qtquickcontrols-chattutorial-chapter5-contacts-material-test.png + {Contacts page with Material style showing poor text contrast} The header text is black on a dark blue background, which is very difficult to read. The same thing occurs with the Conversations page: -\borderedimage qtquickcontrols-chattutorial-chapter5-conversations-material-test.png +\image qtquickcontrols-chattutorial-chapter5-conversations-material-test.png + {Conversation page with Material style showing poor text contrast} The solution is to tell the toolbar that it should use the \e "Dark" theme, so that this information is propagated to its children, allowing them to switch @@ -757,13 +768,17 @@ We'll make the same changes to \c ConversationPage.qml: Now both pages look correct: -\borderedimage qtquickcontrols-chattutorial-chapter5-contacts-material.png -\borderedimage qtquickcontrols-chattutorial-chapter5-conversations-material.png +\image qtquickcontrols-chattutorial-chapter5-contacts-material.png + {Contacts page with Material style and corrected header contrast} +\image qtquickcontrols-chattutorial-chapter5-conversations-material.png + {Conversation page with Material style and corrected header contrast} Let's try out the Universal style: -\borderedimage qtquickcontrols-chattutorial-chapter5-contacts-universal.png -\borderedimage qtquickcontrols-chattutorial-chapter5-conversations-universal.png +\image qtquickcontrols-chattutorial-chapter5-contacts-universal.png + {Contacts page with Universal style} +\image qtquickcontrols-chattutorial-chapter5-conversations-universal.png + {Conversation page with Universal style} No issues there. For a relatively simple application such as this one, there should be very few adjustments necessary when switching styles. @@ -782,8 +797,10 @@ Theme=Dark Once this is done, build and run the application. This is what you should see: -\borderedimage qtquickcontrols-chattutorial-chapter5-contacts-material-dark.png -\borderedimage qtquickcontrols-chattutorial-chapter5-conversations-material-dark.png +\image qtquickcontrols-chattutorial-chapter5-contacts-material-dark.png + {Contacts page with Material style in dark theme} +\image qtquickcontrols-chattutorial-chapter5-conversations-material-dark.png + {Conversation page with Material style in dark theme} Both pages look fine. Now add an entry for the Universal style: @@ -794,8 +811,10 @@ Theme=Dark After building and running the application, you should see these results: -\borderedimage qtquickcontrols-chattutorial-chapter5-contacts-universal-dark.png -\borderedimage qtquickcontrols-chattutorial-chapter5-conversations-universal-dark.png +\image qtquickcontrols-chattutorial-chapter5-contacts-universal-dark.png + {Contacts page with Universal style in dark theme} +\image qtquickcontrols-chattutorial-chapter5-conversations-universal-dark.png + {Conversation page with Universal style in dark theme} \section1 Summary diff --git a/examples/quickcontrols/contactlist/doc/src/qtquickcontrols-contactlist.qdoc b/examples/quickcontrols/contactlist/doc/src/qtquickcontrols-contactlist.qdoc index bb9e935d6d..aeea54aaad 100644 --- a/examples/quickcontrols/contactlist/doc/src/qtquickcontrols-contactlist.qdoc +++ b/examples/quickcontrols/contactlist/doc/src/qtquickcontrols-contactlist.qdoc @@ -17,6 +17,7 @@ visually in the Qt Quick Designer. \image qtquickcontrols-contactlist.png + {Contact list application showing names and addresses} \section1 C++ Backend diff --git a/examples/quickcontrols/eventcalendar/doc/src/qtquickcontrols-eventcalendar.qdoc b/examples/quickcontrols/eventcalendar/doc/src/qtquickcontrols-eventcalendar.qdoc index 450b1d37a8..fa8ea60c3c 100644 --- a/examples/quickcontrols/eventcalendar/doc/src/qtquickcontrols-eventcalendar.qdoc +++ b/examples/quickcontrols/eventcalendar/doc/src/qtquickcontrols-eventcalendar.qdoc @@ -10,6 +10,7 @@ \brief A simple event calendar. \image qtquickcalendar-eventcalendar.png + {Calendar application displaying monthly view with event indicators} The Event Calendar example is a simple application that shows how to use \l DayOfWeekRow, \l WeekNumberColumn, and \l MonthGrid to create a calendar. diff --git a/examples/quickcontrols/flatstyle/doc/src/qtquickcontrols-flatstyle.qdoc b/examples/quickcontrols/flatstyle/doc/src/qtquickcontrols-flatstyle.qdoc index 8066295c30..22e99bb917 100644 --- a/examples/quickcontrols/flatstyle/doc/src/qtquickcontrols-flatstyle.qdoc +++ b/examples/quickcontrols/flatstyle/doc/src/qtquickcontrols-flatstyle.qdoc @@ -16,7 +16,8 @@ declarative parts of the UI, \c .ui.qml files are used. These can be edited visually in Qt Quick Designer. - \borderedimage qtquickcontrols-flatstyle.png + \image qtquickcontrols-flatstyle.png + {Application with customized flat style controls and theme options} \section1 QML Module for Theming @@ -58,7 +59,8 @@ To edit the indicator of a switch in Qt Quick Designer we can open Switch.qml and then enter the implementation of the indicator called \c switchHandle using the combo box on the top next to the combo box for the open documents. - \borderedimage qtquickcontrols-flatstyle-creator.png + \image qtquickcontrols-flatstyle-creator.png + {Qt Quick Designer showing switch handle states and properties} The application itself is just a simple form that allows the user to adjust a couple of parameters of the custom controls. The user can choose another main color, set the font to bold or underline, and increase the size of the controls by diff --git a/examples/quickcontrols/gallery/doc/src/qtquickcontrols-gallery.qdoc b/examples/quickcontrols/gallery/doc/src/qtquickcontrols-gallery.qdoc index 2b17866f21..ff62a4b171 100644 --- a/examples/quickcontrols/gallery/doc/src/qtquickcontrols-gallery.qdoc +++ b/examples/quickcontrols/gallery/doc/src/qtquickcontrols-gallery.qdoc @@ -16,16 +16,19 @@ <tr><td style="border:0px"> \endraw \image qtquickcontrols-gallery-welcome.png + {Gallery welcome screen showing available control categories} \caption Welcome Screen \raw HTML </td><td style="border:0px"> \endraw \image qtquickcontrols-gallery-drawer.png + {Side drawer menu displaying list of Qt Quick Controls} \caption Side Drawer \raw HTML </td><td style="border:0px"> \endraw \image qtquickcontrols-gallery-menu.png + {Options menu with settings and about items} \caption Options Menu \raw HTML </td></tr> diff --git a/examples/quickcontrols/imagine/automotive/doc/src/qtquickcontrols-automotive.qdoc b/examples/quickcontrols/imagine/automotive/doc/src/qtquickcontrols-automotive.qdoc index 8ac7c9c5bd..f58f98a358 100644 --- a/examples/quickcontrols/imagine/automotive/doc/src/qtquickcontrols-automotive.qdoc +++ b/examples/quickcontrols/imagine/automotive/doc/src/qtquickcontrols-automotive.qdoc @@ -14,6 +14,7 @@ style an automotive user interface. \image qtquickcontrols-automotive.png + {Automotive dashboard interface with custom Imagine style assets} \include examples-run.qdocinc */ diff --git a/examples/quickcontrols/ios/todolist/doc/src/qtquickcontrols-todolist.qdoc b/examples/quickcontrols/ios/todolist/doc/src/qtquickcontrols-todolist.qdoc index 43e1e9310e..1e07b1ea8f 100644 --- a/examples/quickcontrols/ios/todolist/doc/src/qtquickcontrols-todolist.qdoc +++ b/examples/quickcontrols/ios/todolist/doc/src/qtquickcontrols-todolist.qdoc @@ -13,6 +13,7 @@ iOS using the \l {iOS Style}. \image qtquickcontrols-todolist.png + {To do list application with iOS style showing task items} The example also shows how an in-memory SQL database can be created and used purely through QML, without needing C++, through the use of diff --git a/examples/quickcontrols/spreadsheets/doc/src/spreadsheets.qdoc b/examples/quickcontrols/spreadsheets/doc/src/spreadsheets.qdoc index d7505809f7..d8ea373d70 100644 --- a/examples/quickcontrols/spreadsheets/doc/src/spreadsheets.qdoc +++ b/examples/quickcontrols/spreadsheets/doc/src/spreadsheets.qdoc @@ -8,6 +8,7 @@ \examplecategory {User Interface Components} \image spreadsheets-example.png + {Spreadsheet application with table view showing cells and headers} The example demonstrates how to combine TableView and HeaderView to create a spreadsheet application. diff --git a/examples/quickcontrols/tableofcontents/doc/src/qtquickcontrols-tableofcontents.qdoc b/examples/quickcontrols/tableofcontents/doc/src/qtquickcontrols-tableofcontents.qdoc index 4d1ffcc420..c4d02c9380 100644 --- a/examples/quickcontrols/tableofcontents/doc/src/qtquickcontrols-tableofcontents.qdoc +++ b/examples/quickcontrols/tableofcontents/doc/src/qtquickcontrols-tableofcontents.qdoc @@ -13,6 +13,7 @@ TreeView control. \image qtquickcontrols-tableofcontents.png + {Tree view showing hierarchical table of contents structure} \include examples-run.qdocinc */ diff --git a/examples/quickcontrols/texteditor/doc/src/qtquickcontrols-texteditor.qdoc b/examples/quickcontrols/texteditor/doc/src/qtquickcontrols-texteditor.qdoc index 50e6a002d9..9097723b35 100644 --- a/examples/quickcontrols/texteditor/doc/src/qtquickcontrols-texteditor.qdoc +++ b/examples/quickcontrols/texteditor/doc/src/qtquickcontrols-texteditor.qdoc @@ -19,6 +19,7 @@ \section1 Desktop User Interface \image qtquickcontrols-texteditor-desktop.jpg + {Text editor with menu bar, toolbar, and formatted document content} The desktop version is a complete text editor with capabilities for formatting text, and opening and saving HTML, Markdown and plain text files. @@ -142,6 +143,7 @@ \section1 Touch User Interface \image qtquickcontrols-texteditor-touch.jpg + {Text editor interface for touch devices with formatting toolbar} The touch user interface is a simplified version of the text editor. It is suitable for touch devices with limited screen size. The example uses diff --git a/examples/quickcontrols/wearable/doc/src/qtquickcontrols-wearable.qdoc b/examples/quickcontrols/wearable/doc/src/qtquickcontrols-wearable.qdoc index 4088a1f56e..bc22047a5e 100644 --- a/examples/quickcontrols/wearable/doc/src/qtquickcontrols-wearable.qdoc +++ b/examples/quickcontrols/wearable/doc/src/qtquickcontrols-wearable.qdoc @@ -12,6 +12,7 @@ \brief Demonstrates an application launcher designed for wearable devices. \image qtquickcontrols-wearable.png + {Wearable device interface showing circular app launcher icons} The \e {Wearable Demo} consists of an application launcher and a collection of small and simple example applications aimed at wearable devices. |