You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: Document-Processing/PDF/PDF-Viewer/blazor/accessibility.md
+15-15Lines changed: 15 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -37,29 +37,29 @@ The accessibility compliance for the Blazor SfPdfViewer component is outlined be
37
37
38
38
## WAI-ARIA attributes
39
39
40
-
[WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to enhance the accessibility of web pages, dynamic content, and user interface components developed with Ajax, HTML, JavaScript, and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components. The following ARIA attributes are used in the Blazor SfPdfViewer component:
40
+
[WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to enhance the accessibility of web pages, dynamic content, and user interface components developed with Ajax, HTML, JavaScript, and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components. The following ARIA attributes are commonly applied in the SfPdfViewer component:
41
41
42
42
| Attributes | Purpose |
43
43
| --- | --- |
44
-
|`aria-disabled`| Indicates whether the Blazor SfPdfViewer component is in a disabled state or not.|
45
-
|`aria-expanded`| Indicates whether the suggestion list has expanded or not. |
46
-
|`aria-readonly`| Indicates the readonly state of the Blazor SfPdfViewer element. |
47
-
|`aria-haspopup`|Indicates whether the Blazor SfPdfViewer input element has a suggestion list or not. |
48
-
|`aria-label`|Indicates the breadcrumb item text. |
49
-
|`aria-labelledby`|Provides a label for the SfPdfViewer. Typically, the "aria-labelledby" attribute will contain the id of the element used as the Blazor SfPdfViewer's title. |
50
-
|`aria-describedby`|This attribute points to the Blazor SfPdfViewer element describing the one it's set on. |
51
-
|`aria-orientation`| Indicates whether the Blazor SfPdfViewer element is oriented horizontally or vertically. |
52
-
|`aria-valuetext`|Returns the current text of the SfPdfViewer. |
53
-
|`aria-valuemax`| Indicates the Maximum value of the SfPdfViewer. |
54
-
|`aria-valuemin`| Indicates the Minimum value of the SfPdfViewer. |
55
-
|`aria-valuenow`| Indicates the current value of the SfPdfViewer. |
56
-
|`aria-controls`|Attribute is set to the button and it points to the corresponding content. |
44
+
|`aria-disabled`| Indicates whether an interactive control (for example, a toolbar button) is disabled and not operable. |
45
+
|`aria-expanded`| Indicates whether an expandable element (for example, a panel or toolbar menu) is currently expanded. |
46
+
|`aria-readonly`| Indicates that the element is read-only and user input is not expected. |
47
+
|`aria-haspopup`|Identifies that the element opens a popup (menu, dialog, or toolbar). |
48
+
|`aria-label`|Provides an accessible name for controls or regions when a visible label is not available. |
49
+
|`aria-labelledby`|Identifies the element that labels this element by referencing that element's id. |
50
+
|`aria-describedby`|Identifies the element that provides a description for this element by referencing that element's id. |
51
+
|`aria-orientation`| Indicates the orientation (horizontal or vertical) of widgets such as sliders or splitters. |
52
+
|`aria-valuetext`|Provides a human-readable text alternative of the current value (for example, a zoom level). |
53
+
|`aria-valuemax`| Indicates the maximum value for range widgets (for example, maximum zoom). |
54
+
|`aria-valuemin`| Indicates the minimum value for range widgets (for example, minimum zoom). |
55
+
|`aria-valuenow`| Indicates the current numeric value for range widgets (for example, current zoom). |
56
+
|`aria-controls`|Identifies the element or region controlled by this element (for example, a button that opens a panel). |
57
57
58
58
## Keyboard interaction
59
59
60
60
The Blazor SfPdfViewer component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it accessible to users who rely on assistive technologies (AT) and keyboard navigation. The following keyboard shortcuts are supported by the SfPdfViewer component.
61
61
62
-
| Windows | Mac |Actions|
62
+
| Windows | Mac |Action|
63
63
| --- | --- | --- |
64
64
|||**Shortcuts for page navigation**|
65
65
| <kbd>Ctrl</kbd> + <kbd>←</kbd> / <kbd>Ctrl</kbd> + <kbd>↑</kbd> | <kbd>⌘</kbd> + <kbd>←</kbd> / <kbd>⌘</kbd> + <kbd>↑</kbd> |Navigate to the first page |
Copy file name to clipboardExpand all lines: Document-Processing/PDF/PDF-Viewer/blazor/accessible-pdf-reading.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -16,7 +16,7 @@ This accessible PDF reading feature supports two approaches:
16
16
2. Windows Speech Synthesis API
17
17
18
18
The following demo illustrates both supported approaches:
19
-
-[Blazor PDF Viewer example -Accessible PDF Reading](https://document.syncfusion.com/demos/pdf-viewer/blazor-server/pdf-viewer/accessible-pdf-reading?theme=fluent2)
19
+
-[Blazor PDF Viewer example -Accessible PDF Reading](https://document.syncfusion.com/demos/pdf-viewer/blazor-server/pdf-viewer/accessible-pdf-reading?theme=fluent2)
20
20
21
21
## Microsoft Edge’s Screen Reader
22
22
@@ -917,7 +917,7 @@ function clearAllHighlights() {
Copy file name to clipboardExpand all lines: Document-Processing/PDF/PDF-Viewer/blazor/annotation/annotations-in-mobile-view.md
+21-21Lines changed: 21 additions & 21 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,49 +9,49 @@ documentation: ug
9
9
10
10
# Annotations in mobile view
11
11
12
-
This article explains how to work with annotations in the mobile view of the Blazor SfPdfViewer. It covers opening the annotation toolbar, adding each annotation type, adjusting properties, deleting annotations, and using the comments panel.
12
+
This topic explains how to work with annotations in the mobile view of the Blazor `SfPdfViewer`. It covers opening the annotation toolbar, adding annotation types, adjusting properties, deleting annotations, and using the comments panel.
13
13
14
-
## To open the annotation toolbar
14
+
## Open the annotation toolbar
15
15
16
-
To open the annotation toolbar, tap the **Edit Annotation** option in the mobile primary toolbar. The annotation toolbar appears at the bottom of the viewer.
16
+
Open the annotation toolbar by tapping the **Edit Annotation** option in the mobile primary toolbar. The annotation toolbar appears at the bottom of the viewer.
17
17
18
18
19
19
20
-
## To add sticky notes annotation
20
+
## Add a sticky note annotation
21
21
22
22
Tap the **Sticky Note Annotation** icon, then tap anywhere in the viewer to place the note.
23
23
24
24
25
25
26
-
The comments panel opens so the comment for the sticky note can be entered.
26
+
The comments panel opens to enter the comment associated with the sticky note.
27
27
28
28
29
29
30
-
## To add text markup annotation
30
+
## Add a text markup annotation
31
31
32
-
Long-press to select text in the PDF, then tap a **Text Markup Annotation** in the toolbar (for example, highlight, underline, strikethrough, or squiggly).
32
+
Long-press to select text in the PDF, then tap a **Text Markup Annotation**option in the toolbar (for example, highlight, underline, strikethrough, or squiggly).
33
33
34
34
35
35
36
-
The toolbar then shows the available properties for the chosen annotation (such as color and opacity).
36
+
The toolbar then shows properties for the chosen annotation (such as color and opacity).
37
37
38
38
39
39
40
-
## To add shape annotation
40
+
## Add a shape annotation
41
41
42
-
Tap the **Shape Annotation** icon in the toolbar to view the available shapes.
42
+
Tap the **Shape Annotation** icon in the toolbar to view available shapes.
43
43
44
44
45
45
46
46
Choose a shape, then tap and drag in the viewer to draw it.
47
47
48
48
49
49
50
-
After placement, the toolbar switches to the properties toolbar for the added annotation, where options such as fill color, stroke color, thickness, and opacity can be adjusted.
50
+
After placement, the toolbar switches to the properties toolbar for the added annotation; adjust options such as fill color, stroke color, thickness, and opacity.
51
51
52
52
53
53
54
-
## To add measure annotation
54
+
## Add a measurement annotation
55
55
56
56
Tap the **Measure Annotation** icon in the toolbar to view supported measurement types.
57
57
@@ -65,7 +65,7 @@ After placement, the properties toolbar appears with options relevant to the mea
65
65
66
66
67
67
68
-
## To add free text annotation
68
+
## Add a free text annotation
69
69
70
70
Tap the **Free Text Annotation** icon in the toolbar. The properties toolbar appears with options for text formatting (such as font size, color, and opacity).
71
71
@@ -75,7 +75,7 @@ Tap anywhere in the viewer to insert the free text annotation.
75
75
76
76
77
77
78
-
## To add stamp annotation
78
+
## Add a stamp annotation
79
79
80
80
Tap the **Stamp Annotation** icon, then choose a stamp from the available list.
81
81
@@ -85,7 +85,7 @@ Tap anywhere in the viewer to place the stamp. The properties toolbar then appea
85
85
86
86
87
87
88
-
## To add signature
88
+
## Add a signature
89
89
90
90
Tap the **Handwritten Signature** icon to open the signature dialog.
91
91
@@ -99,7 +99,7 @@ Tap anywhere in the viewer to place the signature. The properties toolbar then a
99
99
100
100
101
101
102
-
## To add ink annotation
102
+
## Add an ink annotation
103
103
104
104
Tap the **Ink Annotation** icon, then draw directly in the viewer.
105
105
@@ -111,25 +111,25 @@ When finished, tap the Ink Annotation icon again to exit drawing mode. The prope
111
111
112
112
## Change annotation properties before adding
113
113
114
-
Annotation properties can be configured before placement. For example, tap the rectangle shape to show its properties toolbar, adjust the settings, and then tap and drag to place the annotation. The annotation is added using the modified properties.
114
+
Annotation properties can be configured before placement. For example, tap a shape to show its properties toolbar, adjust the settings, then tap and drag to place the annotation. The annotation is added with the modified properties.
115
115
116
116
117
117
118
118
## Change annotation properties after adding
119
119
120
-
After placement, select the annotation to display its properties toolbar. Adjust the required properties; the changes are applied immediately to the selected annotation.
120
+
After placement, select the annotation to display its properties toolbar. Adjust required properties; the changes are applied immediately to the selected annotation.
121
121
122
122
123
123
124
-
## Delete Annotation
124
+
## Delete an annotation
125
125
126
126
Select the annotation to delete. In the properties toolbar, tap the Delete icon. The annotation is removed from the PDF, and any associated comment is also deleted.
127
127
128
128
129
129
130
-
## Open and Close Comment Panel
130
+
## Open and close the comments panel
131
131
132
-
Open the comments panel from the **more option** menu at the right end of the mobile primary toolbar.
132
+
Open the comments panel from the More options menu at the right end of the mobile primary toolbar.
133
133
134
134
0 commit comments