Fix Acrolinx issue

Author: Albertyang0

learn-pr/cela-accessibility/accessibility-design-specs-with-annotations/includes/3-annotations-for-keyboard-ascreen-reader-navigation.md

@@ -12,15 +12,15 @@ Indicate the sequence in which interactive elements should receive focus when na
 
 #### Name, role, and state 
 
-It's crucial that all user interface components, including but not limited to form elements, links, and components generated by scripts, have names and roles that can be programmatically determined. This ensures that assistive technologies can interpret and interact with these elements effectively. Furthermore, has to states, properties, and values which can be set by users are also programmatically settled. This allows users to have a seamless experience while interacting with our interface. Additionally, we need to ensure that any changes to these items aren'tified to user agents, including assistive technologies, so that users are always aware of the current state and can interact with the interface accordingly.
+It's crucial that all user interface components, including but not limited to form elements, links, and components generated by scripts, have names, and roles that can be programmatically determined. This ensures that assistive technologies can interpret and interact with these elements effectively. Furthermore, has to states, properties, and values which can be set by users are also programmatically settled. This allows users to have a seamless experience while interacting with our interface. Additionally, we need to ensure that any changes to these items aren't fied to user agents, including assistive technologies, so that users are always aware of the current state and can interact with the interface accordingly.
 
 For the library components, "Name" will be same as per the design and same will be announce by the screen reader. Role will auto populate and then select or define properties either by selecting via  provided checkboxes or mention in the edit field. If need to include any custom keyboard shortcuts that we can add, and all these another properties show up under Developer notes section. For custom components we need to do everything, selecting correct control type, review all the flows, set relevant properties, shortcuts. So before using custom components ask, do I need it? Is there any component that serves the purpose. If not, then use it and ensure covers all flows and edge cases.
 
 :::image type="content" source="../media/screen-reader-annotations-widget-dialog-specs.png" alt-text="Screenshot of specs for Keyboard and screen reader annotations: A widget dialog specification table with four labeled sections. The table includes screen reader labels, components, and developer notes. Label 1 point to Category with a dropdown component. Label 2 highlights Show widget selector with a checkbox component. Label 3 points to Widget selector with a custom widget link. Label four indicates Save with a button marked as optional. Developer notes mention properties and keyboard shortcuts." lightbox="../media/screen-reader-annotations-widget-dialog-specs.png":::
 
 When we have multiple components with the same visual name then we should override the visual name. Why should we do this? We have different navigations for buttons, links…. When a screen reader user runs with the respective navigation, it will just announce the name and no more context is visible on the UI. For for example, In this image it announces Create, Create, Browse when user navigates with button navigation. You can provide more context using Aria override or another way that includes the visible name of the control.   
 
-:::image type="content" source="../media/keyboardandscreenreader-annotationswithmultiplecontrolswithsamenamewidgetdialogspecs.png" alt-text="Screenshot of example shown in below image is where two components have same visual name as 'create' which is incorrect as it announce Create for both and browse for 3rd button when user navigates with button navigation and will create confusion and doesn't describe the purpose of each button." lightbox="../media/keyboardandscreenreader-annotationswithmultiplecontrolswithsamenamewidgetdialogspecs.png":::
+:::image type="content" source="../media/keyboardandscreenreader-annotationswithmultiplecontrolswithsamenamewidgetdialogspecs.png" alt-text="Screenshot of example shown in below image is where two components have same visual name as 'create' which is incorrect as it announces Create for both and browse for 3rd button when user navigates with button navigation and will create confusion and doesn't describe the purpose of each button." lightbox="../media/keyboardandscreenreader-annotationswithmultiplecontrolswithsamenamewidgetdialogspecs.png":::
 
 :::image type="content" source="../media/keyboardandscreenreader-annotationswithmultiplecontrolswithdifferentnamewidgetdialogspecs.png" alt-text="Screenshot of example shown in below image is where two 'create' buttons are there, but we have added another text in an Aria-Label override that includes the visible name of the control such as Create a new hire onboarding, Create urgent collaboration template & Browse other template respectively which describes the purpose of each button." lightbox="../media/keyboardandscreenreader-annotationswithmultiplecontrolswithdifferentnamewidgetdialogspecs.png":::
 
@@ -46,13 +46,13 @@ Use headings to make it easy to jump through your designs. These are the titles
 
 1. Heading levels must follow an order. You can't jump from H2 to H4 without a subsequent H3.
 
-    :::image type="content" source="../media/screen-reader-annotations-headers.jpg" alt-text="Screenshot of Microsoft Teams chat application interface with two labeled annotations. The interface shows multiple conversations with timestamps, and a chat window on the right displays messages. Label 1 points to the left panel (H1) displaying a list of contacts and chat history. Label 2 highlights the top right section, which contains search and menu options (H2)." lightbox="../media/screen-reader-annotations-headers.jpg":::
+    :::image type="content" source="../media/screen-reader-annotations-headers.jpg" alt-text="Screenshot of Microsoft Teams chat application interface with two labeled annotations. The interface shows multiple conversations with timestamps, and a chat window on the right displays messages. Label 1 point to the left panel (H1) displaying a list of contacts and chat history. Label 2 highlights the top right section, which contains search and menu options (H2)." lightbox="../media/screen-reader-annotations-headers.jpg":::
 
     :::image type="content" source="../media/screen-reader-annotations-headers-annotations.png" alt-text="Screenshot of a row of five circular icons, each labeled with a different heading level: h1, h2, h3, h4, and h5. These icons represent different header annotations used for screen reader navigation." lightbox="../media/screen-reader-annotations-headers-annotations.png":::
 
 ### Landmarks
 
-Landmarks can be useful additions when defining entire screen experiences on the web. These are containers or regions that can be used to quickly navigate apps, sites across different regions such as main, search, header or footer etc. We have various landmarks such as Banner, Navigation, Main, Search and few others.
+Landmarks can be useful additions when defining entire screen experiences on the web. These are containers or regions that can be used to quickly navigate apps, sites across different regions such as main, search, header, or footer etc. We have various landmarks such as Banner, Navigation, Main, Search, and few others.
 
 1. If you have just one landmark, make that the main landmark so you can provide a skip link to go directly to the content via keyboard.
 
@@ -62,13 +62,13 @@ Landmarks can be useful additions when defining entire screen experiences on the
 
 1. There can only be one banner landmark, which is **usually the header of the page.**
 
-    :::image type="content" source="../media/screen-reader-annotations-landmarks.jpg" alt-text="Screenshot of Microsoft Teams chat application interface with four labeled annotations. The interface includes multiple chat messages with timestamps. Annotation 1 points to the right panel, titled Main, showing a conversation. Annotation 2 highlights the navigation panel. Annotation 3 points to the banner. Annotation four points to the search bar at the top." lightbox="../media/screen-reader-annotations-landmarks.jpg":::
+    :::image type="content" source="../media/screen-reader-annotations-landmarks.jpg" alt-text="Screenshot of Microsoft Teams chat application interface with four labeled annotations. The interface includes multiple chat messages with timestamps. Annotation 1 point to the right panel, titled Main, showing a conversation. Annotation 2 highlights the navigation panel. Annotation 3 points to the banner. Annotation four points to the search bar at the top." lightbox="../media/screen-reader-annotations-landmarks.jpg":::
 
     :::image type="content" source="../media/screen-reader-annotations-landmarks-annotations.png" alt-text="Screenshot of a diagram showing different screen reader landmarks annotations with labels and values. It includes boxes labeled Main, Search, Navigation, Banner, Region, Complementary, Content info, and Form. Each landmark box has Label: Value so designers can input their respective label and value. The boxes are outlined in different styles, such as solid or dashed lines." lightbox="../media/screen-reader-annotations-landmarks-annotations.png":::
 
 ### Alerts, error message, live region    
 
-Alerts/Error message/Live region Notifies user of completion, any change on UI any errors. they're used to let screen reader users know when a long-running process has succeeded, a task has failed, or something has happened without user input. Ensure that visual messages are read out in an intelligible and equitable manner without stealing focus. 
+Alerts/Error message/Live region Notifies user of completion, any change on UI any errors. They're used to let screen reader users know when a long-running process has succeeded, a task has failed, or something has happened without user input. Ensure that visual messages are read out in an intelligible and equitable manner without stealing focus. 
 
 :::image type="content" source="../media/demonstration-screen-reader-alerts.png" alt-text="Screenshot of a desktop notification from Microsoft Teams showing an error message. The message reads, Couldn't send message in chat with Kat, Kayo, Babak, and four another people." lightbox="../media/demonstration-screen-reader-alerts.png":::