diff --git a/.openpublishing.redirection.json b/.openpublishing.redirection.json index fc6beb5724..2098f567ef 100644 --- a/.openpublishing.redirection.json +++ b/.openpublishing.redirection.json @@ -972,12 +972,12 @@ "redirect_document_id": false }, { - "source_path": "microsoft-edge/devtools-guide-chromium/storage/applicationcache.md", + "source_path": "microsoft-edge/devtools-guide-chromium/storage/applicationcache.md", "redirect_url": "/microsoft-edge/devtools-guide-chromium/index", "redirect_document_id": false }, { - "source_path": "microsoft-edge/devtools-guide-chromium/customize/dark-theme.md", + "source_path": "microsoft-edge/devtools-guide-chromium/customize/dark-theme.md", "redirect_url": "/microsoft-edge/devtools-guide-chromium/customize/theme", "redirect_document_id": false }, diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index ea68c10d16..277a4623c6 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -1,9 +1,9 @@ -# Microsoft Open Source Code of Conduct +# Microsoft Open Source Code of Conduct -This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct). +This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct). -Resources: +Resources: -* [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct) -* [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq) -* Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns +* [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct) +* [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq) +* Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 9764872e44..345ea0d860 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,106 +1,119 @@ -# Contributing to the Microsoft Edge documentation +# Contributing to the Microsoft Edge Developer documentation -Thank you for your interest in the Microsoft Edge documentation. The Microsoft Edge team appreciates your feedback, edits, additions, and help with improving the Microsoft Edge docs. This page covers the basic steps and guidelines for contributing. +Thank you for your interest in the Microsoft Edge Developer documentation. The Microsoft Edge team appreciates your feedback, edits, additions, and help with improving the Microsoft Edge docs. This page covers the basic steps and guidelines for contributing. -## Sign a CLA -If you want to contribute more than a couple lines and you are not a Microsoft employee, you must [sign a Microsoft Contribution Licensing Agreement (CLA)][MicrosoftOpensourceClaMain]. + +## Sign a CLA -If you are a Microsoft Employee, please follow the internal guidance. +If you want to contribute more than a couple lines and you are not a Microsoft employee, you must [sign a Microsoft Contribution Licensing Agreement (CLA)][MicrosoftOpensourceClaMain]. -## Proposing a change +If you are a Microsoft Employee, please follow the internal guidance. -To suggest a change to the docs, follow these steps. -1. If you are viewing the [docs.microsoft.com/microsoft-edge][Main] page, select the **Edit** button in the upper-right of the page. You are redirected to the corresponding Markdown source file in the [GitHub repository][GithubMicrosoftdocsEdgedeveloperMain]. If you are already in the GitHub repo, just navigate to the source file that you are changing. -1. If you do not already have a GitHub account, select **Sign Up** in the upper-right and create a new account. -1. From the GitHub page you are changing, select the **pencil** icon. -1. Modify the file and use the **preview** tab to ensure the changes look good. -1. When you are done, commit your changes and open a pull request. + +## Proposing a change -After you create the pull request, a member of the Microsoft Edge web docs team reviews it. If your request is accepted, updates are published to [docs.microsoft.com/microsoft-edge][Main]. +To suggest a change to the docs, follow these steps. -## Making more substantial changes +1. If you are viewing the [docs.microsoft.com/microsoft-edge][Main] page, select the **Edit** button in the upper-right of the page. You are redirected to the corresponding Markdown source file in the [GitHub repository][GithubMicrosoftdocsEdgedeveloperMain]. If you are already in the GitHub repo, just navigate to the source file that you are changing. +1. If you do not already have a GitHub account, select **Sign Up** in the upper-right and create a new account. +1. From the GitHub page you are changing, select the **pencil** icon. +1. Modify the file and use the **preview** tab to ensure the changes look good. +1. When you are done, commit your changes and open a pull request. -To make substantial changes to an existing article, add or change images, or contribute a new article, the Microsoft Edge team recommends forking the repo into your GitHub account, and then creating a local clone. -You may select the **Fork** button in the top-right corner of the [GitHub repo][GithubMicrosoftdocsEdgedeveloperMain]. -You may select the green **Clone or download** button, copy to your clipboard, then run the following code in your command-line. +After you create the pull request, a member of the Microsoft Edge web docs team reviews it. If your request is accepted, updates are published to [docs.microsoft.com/microsoft-edge][Main]. + + + +## Making more substantial changes + +To make substantial changes to an existing article, add or change images, or contribute a new article, the Microsoft Edge team recommends forking the repo into your GitHub account, and then creating a local clone. +1. Select the **Fork** button in the top-right corner of the [GitHub repo][GithubMicrosoftdocsEdgedeveloperMain]. +2. Select the green **Clone or download** button, copy to your clipboard, then run the following code at your command prompt: ```shell git clone {paste_your_repo_clone_link} -``` +``` + +For more info, see [Fork a Repo][GithubHelpGettingStartedForkRepo]. + +If you are unfamiliar with using Git, visit [Lynda.com Git Essentials training][LyndaGitTutorialsEssentialTraining102222]. -For more info, see [Fork a Repo][GithubHelpGettingStartedForkRepo]. -If you are unfamiliar with using Git, visit [Lynda.com Git Essentials training][LyndaGitTutorialsEssentialTraining102222]. + +## Authoring your contribution -## Authoring your contribution +After you have cloned the repo to your local machine, begin authoring with the text editor of your choice. The Microsoft Edge team, of course, recommends [Visual Studio Code][VisualstudioCodeMain], a free lightweight open source editor from Microsoft. -After you have cloned the repo to your local machine, begin authoring with the text editor of your choice. The Microsoft Edge team, of course, recommends [Visual Studio Code][VisualstudioCodeMain], a free lightweight open source editor from Microsoft. -## Submitting your contribution and filing a Pull Request (PR) + +## Submitting your contribution and filing a Pull Request (PR) -After you are ready to add your changes to the remote repo so that the changes are staged for publishing, enter the following code in the command-line. +After you are ready to add your changes to the remote repo so that the changes are staged for publishing, enter the following code in the command-line. -| Step | Command | Details | -|:--- |:--- |:--- | -| 1 | `git status` | This command displays the files you have changed so that you may confirm that you intended to make those changes. | -| 2 | `git add -A` | This command tells git to add all of your changes. If you prefer to only add the changes you have made to one particular file, instead enter the command: `git add {file.md}`, where `file.md` represents the name the file containing your changes. | -| 3 | `git commit -m "Fixed a few typos"` | This command tells git to commit the changes that you added in the previous step, along with a short message describing the changes that you made. | -| 4 | `git push origin {your_branch_name}` | This command pushes your changes to the remote repo that you forked on GitHub \(the `origin`\) into the branch that you have specified. Because you have forked the repo to your own GitHub account, you are welcome to do your work in the `master` branch. | +| Step | Command | Details | +|:--- |:--- |:--- | +| 1 | `git status` | This command displays the files you have changed so that you can confirm that you intended to make those changes. | +| 2 | `git add -A` | This command tells git to add all of your changes. If you prefer to only add the changes you have made to one particular file, instead enter the command: `git add {file.md}`, where `file.md` represents the name the file containing your changes. | +| 3 | `git commit -m "Fixed a few typos"` | This command tells git to commit the changes that you added in the previous step, along with a short message describing the changes that you made. | +| 4 | `git push origin {your_branch_name}` | This command pushes your changes to the remote repo that you forked on GitHub \(the `origin`\) into the branch that you have specified. Because you have forked the repo to your own GitHub account, you are welcome to do your work in the `master` branch. | -When you are happy with your changes and ready to submit a PR: +When you are happy with your changes and ready to submit a PR: + +1. Go to your fork of the edge-develop repo: -1. Go to your fork of the edge-develop repo: - ```https https://github.com/{your_github_alias}/edge-developer - ``` - -1. Select the **New pull request** button. \(The `base fork` is listed as `MicrosoftDocs/edge-developer`, the `head fork` should show your fork of the repo, and the branch in which you made your changes.\) You may review your changes here as well. -1. Select the green **Create pull request** button. You must give your Pull Request a title and description, then select the **Create pull request** button again. -1. After pushing your contribution to the remote repo, you are sent an email from **Open Publishing Build Service** informing whether your contribution built successfully and linking to any error warnings such as broken links, select the links to see your content staged on the site. -1. After your PR is submitted, a member of the Microsoft Edge docs team reviews it. - -## Working with Branches + ``` + +1. Select the **New pull request** button. \(The `base fork` is listed as `MicrosoftDocs/edge-developer`, the `head fork` should show your fork of the repo, and the branch in which you made your changes.\) You can review your changes here as well. +1. Select the green **Create pull request** button. You must give your Pull Request a title and description, then select the **Create pull request** button again. +1. After pushing your contribution to the remote repo, you are sent an email from **Open Publishing Build Service** informing whether your contribution built successfully and linking to any error warnings such as broken links, select the links to see your content staged on the site. +1. After your PR is submitted, a member of the Microsoft Edge docs team reviews it. + + + +## Working with Branches -The [Microsoft Edge Docs GitHub repository][GithubMicrosoftdocsEdgedeveloperMain] utilizes the following two main parent branches. +The [Microsoft Edge Docs GitHub repository][GithubMicrosoftdocsEdgedeveloperMain] utilizes the following two main parent branches. -| Branch | Details | -|:--- |:--- | -| [master][GithubMicrosoftdocsEdgedeveloperMaster] | The content is internally reviewed. | -| [live][GithubMicrosoftdocsEdgedeveloperLive] | The content has been published on the [live site][Main]. | +| Branch | Details | +|:--- |:--- | +| [master][GithubMicrosoftdocsEdgedeveloperMaster] | The content is internally reviewed. | +| [live][GithubMicrosoftdocsEdgedeveloperLive] | The content has been published on the [live site][Main]. | -When making contributions, please submit your Pull Request \(PR\) to the `master` branch. This branch is viewable internally and should only contain contributions that are ready to publish live. +When making contributions, please submit your Pull Request \(PR\) to the `master` branch. This branch is viewable internally and should only contain contributions that are ready to publish live. -## Using issues to provide feedback on Microsoft Edge documentation -To provide feedback rather than directly modifying actual documentation pages, [create an issue][GithubMicrosoftdocsEdgedeveloperNewIssue]. + +## Using issues to provide feedback on Microsoft Edge documentation -Be sure to include the topic title and the URL for the page. +To provide feedback rather than directly modifying actual documentation pages, [create an issue][GithubMicrosoftdocsEdgedeveloperNewIssue]. -## See also +Be sure to include the topic title and the URL for the page. -### Additional resources -* [Getting started with writing and formatting on GitHub][GithubHelpWritingGettingStarted] + +## See also - +* [Getting started with writing and formatting on GitHub][GithubHelpWritingGettingStarted] - -[Main]: https://docs.microsoft.com/microsoft-edge "Microsoft Edge documentation | Microsoft Docs" + + +[Main]: https://docs.microsoft.com/microsoft-edge "Microsoft Edge documentation | Microsoft Docs" -[GithubHelpGettingStartedForkRepo]: https://help.github.com/github/getting-started-with-github/fork-a-repo "Fork a repo | GitHub Help" -[GithubHelpWritingGettingStarted]: https://help.github.com/github/writing-on-github/getting-started-with-writing-and-formatting-on-github "Getting started with writing and formatting on GitHub | GitHub Help" +[GithubHelpGettingStartedForkRepo]: https://help.github.com/github/getting-started-with-github/fork-a-repo "Fork a repo | GitHub Help" +[GithubHelpWritingGettingStarted]: https://help.github.com/github/writing-on-github/getting-started-with-writing-and-formatting-on-github "Getting started with writing and formatting on GitHub | GitHub Help" -[GithubMicrosoftdocsEdgedeveloperMain]: https://github.com/MicrosoftDocs/edge-developer "MicrosoftDocs/edge-developer | GitHub" -[GithubMicrosoftdocsEdgedeveloperNewIssue]: https://github.com/MicrosoftDocs/edge-developer/issues/new "New Issue - MicrosoftDocs/edge-developer | GitHub" -[GithubMicrosoftdocsEdgedeveloperLive]: https://github.com/MicrosoftDocs/edge-developer/tree/live "MicrosoftDocs/edge-developer @ live | GitHub" -[GithubMicrosoftdocsEdgedeveloperMaster]: https://github.com/MicrosoftDocs/edge-developer/tree/master "MicrosoftDocs/edge-developer @ master | GitHub" +[GithubMicrosoftdocsEdgedeveloperMain]: https://github.com/MicrosoftDocs/edge-developer "MicrosoftDocs/edge-developer | GitHub" +[GithubMicrosoftdocsEdgedeveloperNewIssue]: https://github.com/MicrosoftDocs/edge-developer/issues/new "New Issue - MicrosoftDocs/edge-developer | GitHub" +[GithubMicrosoftdocsEdgedeveloperLive]: https://github.com/MicrosoftDocs/edge-developer/tree/live "MicrosoftDocs/edge-developer @ live | GitHub" +[GithubMicrosoftdocsEdgedeveloperMaster]: https://github.com/MicrosoftDocs/edge-developer/tree/master "MicrosoftDocs/edge-developer @ master | GitHub" -[LyndaGitTutorialsEssentialTraining102222]: https://www.lynda.com/Git-tutorials/Git-Essential-Training/100222-2.html "Git Essential Training (2012) | Lynda.com" +[LyndaGitTutorialsEssentialTraining102222]: https://www.lynda.com/Git-tutorials/Git-Essential-Training/100222-2.html "Git Essential Training (2012) | Lynda.com" -[MicrosoftOpensourceClaMain]: https://cla.opensource.microsoft.com "Contributor License Agreement | Microsoft Open Source" +[MicrosoftOpensourceClaMain]: https://cla.opensource.microsoft.com "Contributor License Agreement | Microsoft Open Source" -[VisualstudioCodeMain]: https://code.visualstudio.com "Visual Studio Code" +[VisualstudioCodeMain]: https://code.visualstudio.com "Visual Studio Code" diff --git a/README.md b/README.md index 48d400b853..0137c6243a 100644 --- a/README.md +++ b/README.md @@ -1,125 +1,130 @@ -# Microsoft Edge documentation +# Microsoft Edge Developer documentation -## Microsoft Open Source Code of Conduct -For more information about the Microsoft Open Source Code of Conduct, navigate to [Microsoft Open Source Code of Conduct](CODE_OF_CONDUCT.md). + +## Microsoft Open Source Code of Conduct -## Legal Notices +For more information about the Microsoft Open Source Code of Conduct, navigate to [Microsoft Open Source Code of Conduct](CODE_OF_CONDUCT.md). + + + +## Legal Notices Microsoft and any contributors grant you a license to the Microsoft documentation and other content in this repository under the [Creative Commons Attribution 4.0 International Public License](https://creativecommons.org/licenses/by/4.0/legalcode), navigate to the [LICENSE](./LICENSE) file, and grant you a license to any code in the repository under the [MIT License](https://opensource.org/licenses/MIT), navigate to the -[LICENSE-CODE](./LICENSE-CODE) file. +[LICENSE-CODE](./LICENSE-CODE) file. -Microsoft, Windows, Microsoft Azure and/or other Microsoft products and services referenced in the documentation may be either trademarks or registered trademarks of Microsoft in the United States and/or other countries. -The licenses for this project do not grant you rights to use any Microsoft names, logos, or trademarks. -Microsoft general trademark guidelines may be found at [https://go.microsoft.com/fwlink/?LinkID=254653](https://go.microsoft.com/fwlink/?LinkID=254653). +Microsoft, Windows, Microsoft Azure and/or other Microsoft products and services referenced in the documentation may be either trademarks or registered trademarks of Microsoft in the United States and/or other countries. +The licenses for this project do not grant you rights to use any Microsoft names, logos, or trademarks. +Microsoft general trademark guidelines may be found at [https://go.microsoft.com/fwlink/?LinkID=254653](https://go.microsoft.com/fwlink/?LinkID=254653). -Privacy information can be found at [https://privacy.microsoft.com](https://privacy.microsoft.com). +Privacy information can be found at [https://privacy.microsoft.com](https://privacy.microsoft.com). -Microsoft and any contributors reserve all others rights, whether under their respective copyrights, patents, or trademarks, whether by implication, estoppel or otherwise. +Microsoft and any contributors reserve all others rights, whether under their respective copyrights, patents, or trademarks, whether by implication, estoppel or otherwise. -## Contributing + +## Contributing -This is the repository for Microsoft Edge **documentation** hosted at [https://docs.microsoft.com/microsoft-edge](https://docs.microsoft.com/microsoft-edge/index). +This repo, `edge-developer`, is the repository for the source Markdown files for the Microsoft Edge Developer documentation. The resulting rendered documentation is hosted at [https://docs.microsoft.com/microsoft-edge](https://docs.microsoft.com/microsoft-edge/index). This repo also includes the hub page for the Microsoft Edge Enterprise documentation and the Microsoft Edge Developer documentation. The source files for the Microsoft Edge Enterprise documentation are not in this repo, but are in the [Edge-Enterprise](https://github.com/MicrosoftDocs/Edge-Enterprise) repo. -If you want to include new coverage or have feedback, consider [contributing](./CONTRIBUTING.md). You may edit the existing content, add new content, or create new [issues](https://github.com/MicrosoftDocs/edge-developer/issues). The Microsoft Edge team reviews a look at your suggestions and works to incorporate the suggestions into the docs. +If you want to include new coverage or have feedback, consider [contributing](./CONTRIBUTING.md). You can edit the existing content, add new content, or create new [issues](https://github.com/MicrosoftDocs/edge-developer/issues). The Microsoft Edge team reviews a look at your suggestions and works to incorporate the suggestions into the docs. Find the data for the [Status](https://developer.microsoft.com/microsoft-edge/status) webpage at: [https://github.com/MicrosoftEdge/Status](https://github.com/MicrosoftEdge/Status). The `Status` webpage provides the latest implementation status and future plans for web platform features in Microsoft Edge. -### Conventions +### Conventions * When adding a webpage, you must add an entry for it in [toc.md](./microsoft-edge/toc.yml) for it to appear. -* A directory may contain more directories or `readme.md`s -* Folder/directory names are dash-separated \(for example, `f12-tools`\) and lowercase. Directories are used in URLs on the `docs.microsoft.com` site. Avoid using underscores, PascalCase, or camelCase. +* A directory may contain more directories or `readme.md` files. +* Folder/directory names are dash-separated (for example, `f12-tools`) and lowercase. Directories are used in URLs on the `docs.microsoft.com` site. Avoid using underscores, PascalCase, or camelCase. + +### Other text elements -### Other text elements +These other text elements have styling available: -These other text elements have styling available: +* Unordered lists +* Have regular bullets + * You can also nest bullets. + * Bullets lists should have more than one entry. +* Standard arrangement -* Unordered lists -* Have regular bullets - * You may also nest bullets. - * Bullets lists should have more than one entry. -* Standard arrangement - -1. Ordered lists. -1. Use regular western-style numbering. -1. Should be used only when a list truly has order. - ---- +1. Ordered lists. +1. Use regular western-style numbering. +1. Should be used only when a list truly has order. -Horizontal rules are available. Use horizontal rules sparingly to reduce clutter. -Avoid using horizontal rules with heading tags; some headings already use line styles for visual hierarchy. +--- -### Displaying code +Horizontal rules are available. Use horizontal rules sparingly to reduce clutter. +Avoid using horizontal rules with heading tags; some headings already use line styles for visual hierarchy. -You may use inline `code` markdown syntax \(with the backticks\). +### Displaying code -Or you may display blocks of code. The following code snippet is a css example. +You can use inline `code` markdown syntax (with the backticks). + +Or you can display blocks of code. The following code snippet is a CSS example. ```css body { background: #fff; } -``` +``` + +### Tables -### Tables +| You can | use column headings | on tables | +|:--- |:--- |:--- | +| Left-aligned | Unless a # | 456 | +| Text value | More text | $0.00 | -| You may | use headers | on tables | -|:--- |:--- |:--- | -| Left-aligned | Unless a # | 456 | -| Text value | More text | $0.00 | +### Notes -### Notes +Use notes sparingly. The blocks are designed to highlight "don't-miss-it" information. -Use notes sparingly. The blocks are designed to highlight "don't-miss-it" information. +Four different versions of notes are currently styled. -Four different versions of notes are currently styled. +* NOTE +* WARNING +* TIP +* IMPORTANT -* NOTE -* WARNING -* TIP -* IMPORTANT - -Respectively, the notes look like the following code snippets. +The tagging is as follows: ```md > [!NOTE] -> This is a NOTE -``` +> This is a NOTE +``` ```md > [!WARNING] -> This is a WARNING -``` +> This is a WARNING +``` ```md > [!TIP] -> This is a TIP -``` +> This is a TIP +``` ```md > [!IMPORTANT] -> This is IMPORTANT -``` +> This is IMPORTANT +``` ![Note patterns](./media/notes.png) -For multi-line blockquote notes, use a greater-than \(`>`\) character in front of each line of the notes as displayed in the following example. +For multi-line blockquote notes, use a greater-than \(`>`\) character in front of each line of the notes as displayed in the following example. ```md -> This is a line in a blockquote. -> My text may wrap to more than one line when the markdown is parsed, but I must include all my information within a single \(sometimes very long line\) in the markdown. -> This is another line in a blockquote. -``` +> This is a line in a blockquote. +> My text might wrap to more than one line when the markdown is parsed, but you can use a single long line in the markdown. +> This is another line in a blockquote. +``` -### Images +### Images -Images should be stored in a `media` directory and referenced with a relative path using image script. +Images should be stored in a `media` directory and referenced with a relative path using the following triple-colon image markup: - + ```md :::image type="complex" source="./media/notes.png" alt-text="Note patterns" lightbox="./media/notes.png"::: - Note patterns -:::image-end::: -``` + Note patterns +:::image-end::: +``` diff --git a/microsoft-edge/accessibility/build/aria-and-ui-automation.md b/microsoft-edge/accessibility/build/aria-and-ui-automation.md index 915bdb25dc..eaf69f6dcc 100644 --- a/microsoft-edge/accessibility/build/aria-and-ui-automation.md +++ b/microsoft-edge/accessibility/build/aria-and-ui-automation.md @@ -10,7 +10,6 @@ ms.prod: microsoft-edge keywords: accessibility, accessibility for developers, accessible websites, edge, web development, ARIA, developer, UIA, UI Automation ms.custom: seodec18 --- - # ARIA and UI Automation in Microsoft Edge The W3C defines Accessible Rich Internet Applications (ARIA) as a syntax for making dynamic web content and custom UI accessible. Microsoft Edge recognizes the ARIA role, state, and property information and exposes it to assistive technologies, which in turn can use the [Microsoft UI Automation](https://blogs.msdn.microsoft.com/winuiautomation/) APIs to retrieve the information. @@ -23,13 +22,12 @@ The Microsoft Edge rendering engine (EdgeHTML) builds an accessible projection o * [Working draft](https://w3.org/TR/html-aam-1.0/) - stable version of the specification * [Editor's draft](https://w3c.github.io/html-aam/) - work in progress. Note that while this spec has the latest changes, the changes may not be available in Microsoft Edge yet. - 2. The [Core Accessibility API Mappings](https://w3.org/TR/core-aam-1.1/) specification defines general principles for building the accessibility tree and mapping ARIA elements and attributes to UI Automation objects. * [Working draft](https://w3.org/TR/core-aam-1.1/) - stable version of the specification - * [Editor's draft](https://w3c.github.io/core-aam/) - work in progress. Note that while this spec has the latest changes, the changes may not be available in Microsoft Edge yet. + * [Editor's draft](https://w3c.github.io/core-aam/) - work in progress. Note that while this spec has the latest changes, the changes may not be available in Microsoft Edge yet. 3. The [Accessible Name and Description: Computation and API Mappings](https://w3.org/TR/accname-aam-1.1/) specification defines how to compute the name and description of accessible objects given the HTML and the ARIA elements and attributes values available for the accessible elements. - * [Working draft](https://w3.org/TR/accname-aam-1.1/) - stable version of the specification - * [Editor's draft](https://w3c.github.io/accname/) - work in progress. Note that while this spec has the latest changes, the changes may not be available in Microsoft Edge yet. + * [Working draft](https://w3.org/TR/accname-aam-1.1/) - stable version of the specification + * [Editor's draft](https://w3c.github.io/accname/) - work in progress. Note that while this spec has the latest changes, the changes may not be available in Microsoft Edge yet. For more information about the accessibility architecture in Microsoft Edge, check out the [Building a more accessible web platform](https://blogs.windows.com/msedgedev/2016/04/20/building-a-more-accessible-web-platform/) blog post. For examples of how the new architecture improves the end user's experience, and specifically how markup defines the experience of navigating with assistive technologies like screen readers, visit [Building a more accessible user experience with HTML5 and UIA](https://blogs.windows.com/msedgedev/2016/05/12/accessible-ux-with-html5-and-uia/). diff --git a/microsoft-edge/accessibility/build/index.md b/microsoft-edge/accessibility/build/index.md index 36bc364153..6641b1268f 100644 --- a/microsoft-edge/accessibility/build/index.md +++ b/microsoft-edge/accessibility/build/index.md @@ -1,7 +1,7 @@ --- ms.assetid: 1b3ebc25-d023-4f23-bbba-dce066c20de8 description: Walk through how best practices and Accessible Rich Internet Applications (ARIA) can come together to create an accessible website. -title: Build | Accessibility +title: Building Accessible Websites author: MSEdgeTeam ms.author: msedgedevrel ms.date: 05/11/2021 @@ -10,226 +10,234 @@ ms.prod: microsoft-edge keywords: accessibility, accessibility for developers, accessible websites, edge, web development, ARIA, developer, UIA, UI Automation ms.custom: seodec18 --- -# Building Accessible Websites +# Building Accessible Websites -The web is filled with dynamic and complex websites, applications, and user interfaces built using a combination of HTML, CSS, and JavaScript. However, when designed and built without accessibility in mind, these complex websites are difficult to use by people who rely on [assistive technologies](https://webaim.org/articles/motor/assistive) to browse the web. Building websites that are accessible to people with disabilities requires semantic information about the user interface. This allows for assistive technologies, like screen readers, to convey the necessary information to help people with a range of abilities use the website. +The web is filled with dynamic and complex websites, applications, and user interfaces built using a combination of HTML, CSS, and JavaScript. However, when designed and built without accessibility in mind, these complex websites are difficult to use by people who rely on [assistive technologies](https://webaim.org/articles/motor/assistive) to browse the web. Building websites that are accessible to people with disabilities requires semantic information about the user interface. This allows for assistive technologies, like screen readers, to convey the necessary information to help people with a range of abilities use the website. -Visit [HTML5Accessibility](https://html5accessibility.com) for information on which new HTML5 features are accessibly supported by Microsoft Edge. +Visit [HTML5Accessibility](https://html5accessibility.com) for information on which new HTML5 features are accessibly supported by Microsoft Edge. -## How Accessibility Works -Assistive technologies add capabilities that computers don't usually have. For example, a visually impaired user might use their keyboard in combination with assistive technology such as a screen reader, rather than directly using the browser with the mouse and screen. For applications on Microsoft platforms and on the web, the assistive technology interacts with Microsoft [UI Automation](/windows/win32/winauto/uiauto-specandcommunitypromise), an application-specific object model such as the Document Object Model \(DOM\) in Microsoft Edge, or a combination of these. + +## How Accessibility Works -For web developers, certain HTML elements are mapped to UI Automation objects, so in selecting those HTML elements, the developer can use the accessibility properties and events built in to those elements. While developing your website, you usually only need to be concerned with ensuring that the API is correctly written to \(or that the appropriate element is specified\), in order for the application to be accessible. Check out [ARIA and UI Automation in Microsoft Edge](./aria-and-ui-automation.md) for more information. For information on accessible Universal Windows Platform \(UWP\) apps, navigate to the [Accessibility](/windows/uwp/design/accessibility/accessibility) topic in the Windows Dev Center. +Assistive technologies add capabilities that computers don't usually have. For example, a visually impaired user might use their keyboard in combination with assistive technology such as a screen reader, rather than directly using the browser with the mouse and screen. For applications on Microsoft platforms and on the web, the assistive technology interacts with Microsoft [UI Automation](/windows/win32/winauto/uiauto-specandcommunitypromise), an application-specific object model such as the Document Object Model (DOM) in Microsoft Edge, or a combination of these. -Many common accessibility issues with dynamic content can be addressed by good coding practice, and the [WCAG 2.0](https://www.w3.org/TR/WCAG20) documentation includes many techniques and best practices to help you create more accessible dynamic web applications. Even when coded properly, however, dynamic content is not necessarily accessible. [Accessible Rich Internet Applications (ARIA)](#aria) helps overcome this issue. +For web developers, certain HTML elements are mapped to UI Automation objects, so in selecting those HTML elements, the developer can use the accessibility properties and events built in to those elements. While developing your website, you usually only need to be concerned with ensuring that the API is correctly written to (or that the appropriate element is specified\), in order for the application to be accessible. Check out [ARIA and UI Automation in Microsoft Edge](./aria-and-ui-automation.md) for more information. For information on accessible Universal Windows Platform (UWP\) apps, navigate to the [Accessibility](/windows/uwp/design/accessibility/accessibility) topic in the Windows Dev Center. -For more information on web accessibility, check out the [Introduction to Web Accessibility](https://www.w3.org/WAI/intro/accessibility.php) by the [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI). +Many common accessibility issues with dynamic content can be addressed by good coding practice, and the [WCAG 2.0](https://www.w3.org/TR/WCAG20) documentation includes many techniques and best practices to help you create more accessible dynamic web applications. Even when coded properly, however, dynamic content is not necessarily accessible. [Accessible Rich Internet Applications (ARIA)](#aria) helps overcome this issue. -## ARIA +For more information on web accessibility, check out the [Introduction to Web Accessibility](https://www.w3.org/WAI/intro/accessibility.php) by the [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI). -The [Accessible Rich Internet Applications (ARIA)](https://www.w3.org/TR/wai-aria) specification by the W3C's [Web Accessibility Initiative](https://www.w3.org/WAI) defines as a syntax for making dynamic web content and custom user interfaces accessible to all people. ARIA extends HTML by using additional attributes \(roles, properties, and states\) that are designed to convey custom semantics. These attributes are used by browsers to pass along the controls' state and role to the accessibility API. -### Roles, Properties, and States + +## ARIA -ARIA roles are set on elements using the [role](https://developer.mozilla.org/docs/Web/HTML/Reference) attribute to give assistive technologies and accessibility APIs information about the element. For example, the below `
  • ` element is assigned `role="menuitem"` to signify it's an item in a menu. +The [Accessible Rich Internet Applications (ARIA)](https://www.w3.org/TR/wai-aria) specification by the W3C's [Web Accessibility Initiative](https://www.w3.org/WAI) defines as a syntax for making dynamic web content and custom user interfaces accessible to all people. ARIA extends HTML by using additional attributes (roles, properties, and states\) that are designed to convey custom semantics. These attributes are used by browsers to pass along the controls' state and role to the accessibility API. + +### Roles, Properties, and States + +ARIA roles are set on elements using the [role](https://developer.mozilla.org/docs/Web/HTML/Reference) attribute to give assistive technologies and accessibility APIs information about the element. For example, the below `
  • ` element is assigned `role="menuitem"` to signify it's an item in a menu. ```html
  • Home
    • -``` +``` -ARIA states and properties are aria-prefixed attributes that provide specific information about an object to help form the definition of the nature of roles. Properties are attributes that are essential to the nature of an object, like [aria-readonly](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) and [aria-haspopup](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Changing a property affects the meaning of the object. In the example below, the property `aria-haspopup="true"` is set on a `
  • ` menu item to signify it has a popup. +ARIA states and properties are aria-prefixed attributes that provide specific information about an object to help form the definition of the nature of roles. Properties are attributes that are essential to the nature of an object, like [aria-readonly](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) and [aria-haspopup](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Changing a property affects the meaning of the object. In the example below, the property `aria-haspopup="true"` is set on a `
  • ` menu item to signify it has a popup. ```html
  • Open
    • -``` +``` -States do not change the nature of the object, but represent information associated with the object or user interaction with the object, like [aria-hidden](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) or [aria-checked](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). For example, the state `aria-checked="false"` in the example below represents that the checkbox is not checked. +States do not change the nature of the object, but represent information associated with the object or user interaction with the object, like [aria-hidden](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) or [aria-checked](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). For example, the state `aria-checked="false"` in the example below represents that the checkbox is not checked. ```html
    Accept
    -``` +``` + +Go to [The Roles Model](https://www.w3.org/TR/wai-aria-1.1#roles) by the W3C to see a full list of roles, properties, and states. -Go to [The Roles Model](https://www.w3.org/TR/wai-aria-1.1#roles) by the W3C to see a full list of roles, properties, and states. +For more information on ARIA, navigate to ARIA in the [Resources](#resources) section. -For more information on ARIA, navigate to ARIA in the [Resources](#resources) section. -## Assistive Technology Compatibility Testing + +## Assistive Technology Compatibility Testing -Verifying that the website you are building works with real assistive technologies is the best way to ensure a good experience for your users with disabilities. Since many assistive technologies make use of the keyboard, testing the keyboard accessibility of your website is a good place to start. [Keyboard compatibility testing][W3cPerspectiveVideosKeyboard] validates that users have access to all interactive controls without requiring a mouse. Microsoft [Accessibility Insights for Web][AccessibilityinsightsWebOverview] is a browser extension for Microsoft Edge and Chrome that guides you and reveals several common issues. +Verifying that the website you are building works with real assistive technologies is the best way to ensure a good experience for your users with disabilities. Since many assistive technologies make use of the keyboard, testing the keyboard accessibility of your website is a good place to start. [Keyboard compatibility testing][W3cPerspectiveVideosKeyboard] validates that users have access to all interactive controls without requiring a mouse. Microsoft [Accessibility Insights for Web][AccessibilityinsightsWebOverview] is a browser extension for Microsoft Edge and Chrome that guides you and reveals several common issues. -Once you are confident that your website works well with a keyboard, try it with other assistive technologies, such as screen readers. It uncover issues in the following. +Once you are confident that your website works well with a keyboard, try it with other assistive technologies, such as screen readers. It uncover issues in the following. -* Your HTML, ARIA, and CSS. -* The level of support of an assistive technology for a feature or technique. - -Different browsers may map elements to platform accessibility APIs differently than Microsoft Edge. While building your interface, it is important to consider each difference. +* Your HTML, ARIA, and CSS. +* The level of support of an assistive technology for a feature or technique. -WebAIM conducts surveys with [screen reader][WebaimProjectsScreenreadersurvey8] and [low vision][WebaimProjectsLowvisionsurvey2] users that help you decide which assistive technologies and browsers you want to test. +Different browsers may map elements to platform accessibility APIs differently than Microsoft Edge. While building your interface, it is important to consider each difference. -### Learning How to Test +WebAIM conducts surveys with [screen reader][WebaimProjectsScreenreadersurvey8] and [low vision][WebaimProjectsLowvisionsurvey2] users that help you decide which assistive technologies and browsers you want to test. -Assistive technologies are sophisticated tools. Do not assume that you are able to immediately start testing with an assistive technology without first learning about how it works. Learning to test with a screen reader has an especially steep learning curve. A novice screen reader user may assume that a screen reader bug has occurred while the issue is related to misuse of the screen reader. +### Learning How to Test -For more information about learning to test with assistive technologies, navigate to [Testing with Screen Readers][WebaimArticlesScreenreaderTesting] on WebAIM. +Assistive technologies are sophisticated tools. Do not assume that you are able to immediately start testing with an assistive technology without first learning about how it works. Learning to test with a screen reader has an especially steep learning curve. A novice screen reader user may assume that a screen reader bug has occurred while the issue is related to misuse of the screen reader. -### Testing Locally +For more information about learning to test with assistive technologies, navigate to [Testing with Screen Readers][WebaimArticlesScreenreaderTesting] on WebAIM. -Most devices include assistive technology that is built-in to the OS. Microsoft Windows includes the [Windows Narrator][MicrosoftSupport22798] screen reader and [Windows Magnifier][MicrosoftSupportWindows414948ba8b1cD3bd86150e5e32204198]. 3rd party assistive technologies like [NVDA][NvaccessAboutNvda], [FreedomscientificSoftwareJaws], and [ZoomText][FreedomscientificSoftwareZoomtext] are available to download. Apple macOS includes the [VoiceOver][AppleAccessibilityMacVision] screen reader. And iOS, Android, and Linux all support a variety of assistive technologies. +### Testing Locally -### Testing in Virtual Machines and Emulators +Most devices include assistive technology that is built-in to the OS. Microsoft Windows includes the [Windows Narrator][MicrosoftSupport22798] screen reader and [Windows Magnifier][MicrosoftSupportWindows414948ba8b1cD3bd86150e5e32204198]. 3rd party assistive technologies like [NVDA][NvaccessAboutNvda], [FreedomscientificSoftwareJaws], and [ZoomText][FreedomscientificSoftwareZoomtext] are available to download. Apple macOS includes the [VoiceOver][AppleAccessibilityMacVision] screen reader. And iOS, Android, and Linux all support a variety of assistive technologies. -Under macOS, if you want to test with an assistive technology only available for Windows, like Windows Narrator or NVDA, create a Windows virtual machine. Virtual machines with Microsoft Edge \(EdgeHTML\) and IE are available for VirtualBox and VMWare on the [Virtual Machines download page][MicrosoftDeveloperEdgeVms]. +### Testing in Virtual Machines and Emulators -[Android Studio][AndroidDeveloperSdkInstallingStudioHtml] includes an emulator that for you to test assistive technologies in the [Android Accessibility Suite][GooglePlayStoreAndroidAccessibilitySuite]. Follow the instructions to [set up a virtual device][AndroidDeveloperDevicesManagingAvdsHtml] and [start the emulator][AndroidDeveloperDevicesEmulatorHtml], then install [Android Accessibility Suite][GooglePlayStoreAndroidAccessibilitySuite] from the GooglePlay store. +Under macOS, if you want to test with an assistive technology only available for Windows, like Windows Narrator or NVDA, create a Windows virtual machine. Virtual machines with Microsoft Edge (EdgeHTML\) and IE are available for VirtualBox and VMWare on the [Virtual Machines download page][MicrosoftDeveloperEdgeVms]. + +[Android Studio][AndroidDeveloperSdkInstallingStudioHtml] includes an emulator that for you to test assistive technologies in the [Android Accessibility Suite][GooglePlayStoreAndroidAccessibilitySuite]. Follow the instructions to [set up a virtual device][AndroidDeveloperDevicesManagingAvdsHtml] and [start the emulator][AndroidDeveloperDevicesEmulatorHtml], then install [Android Accessibility Suite][GooglePlayStoreAndroidAccessibilitySuite] from the GooglePlay store. > [!NOTE] -> The iOS Simulator does not currently include VoiceOver. +> The iOS Simulator does not currently include VoiceOver. + +### Cloud-based Testing Tools -### Cloud-based Testing Tools +If an assistive technology is not available on your OS or you not possible to install one on a virtual machine or emulator, cloud-based assistive technology testing tools are the next best thing. -If an assistive technology is not available on your OS or you not possible to install one on a virtual machine or emulator, cloud-based assistive technology testing tools are the next best thing. +* [Assistiv Labs (commercial)][AssistivlabsMain] enables you to manually test with assistive technologies through any modern web browser. Choose an assistive technology and browser and it connects you with a virtual machine, emulator, or real device with which you may interact. -* [Assistiv Labs (commercial)][AssistivlabsMain] enables you to manually test with assistive technologies through any modern web browser. Choose an assistive technology and browser and it connects you with a virtual machine, emulator, or real device with which you may interact. -## Resources + +## Resources -### Accessibility Basics +### Accessibility Basics -#### The A11Y Project +#### The A11Y Project -[The A11Y Project](http://a11yproject.com) is a community-driven effort to make web accessibility easier. Check out [The A11Y Project](https://a11yproject.com) site to learn about basic accessibility principles, their accessible pattern and widget [library](https://a11yproject.com/patterns), and their [resources](http://a11yproject.com/resources.html) on accessibility software, blogs, books, and tools. +[The A11Y Project](http://a11yproject.com) is a community-driven effort to make web accessibility easier. Check out [The A11Y Project](https://a11yproject.com) site to learn about basic accessibility principles, their accessible pattern and widget [library](https://a11yproject.com/patterns), and their [resources](http://a11yproject.com/resources.html) on accessibility software, blogs, books, and tools. -#### Web Accessibility Initiative (WAI) +#### Web Accessibility Initiative (WAI) -The W3C [Web Accessibility Initiative (WAI)](https://w3.org/WAI) is an effort to help improve the accessibility of the web. Their site provides a variety of resources for [Getting Started with Web Accessibility](https://www.w3.org/WAI/gettingstarted/Overview.html), [Designing for Inclusion](https://www.w3.org/WAI/users/Overview.html), [tutorials and presentations](https://www.w3.org/WAI/train.html), and more. +The W3C [Web Accessibility Initiative (WAI)](https://w3.org/WAI) is an effort to help improve the accessibility of the web. Their site provides a variety of resources for [Getting Started with Web Accessibility](https://www.w3.org/WAI/gettingstarted/Overview.html), [Designing for Inclusion](https://www.w3.org/WAI/users/Overview.html), [tutorials and presentations](https://www.w3.org/WAI/train.html), and more. -### Accessibility Blogs +### Accessibility Blogs -#### TPGi, LLC +#### TPGi, LLC -[TPGi, LLC](https://www.tpgi.com/blog) provides consulting and technology solutions to organizations around the world to ensure their clients reach all audiences effectively and efficiently, while meeting governmental and international standards. Their blog covers topics like web accessibility best practices, accessibility tools, and accessibility trends. +[TPGi, LLC](https://www.tpgi.com/blog) provides consulting and technology solutions to organizations around the world to ensure their clients reach all audiences effectively and efficiently, while meeting governmental and international standards. Their blog covers topics like web accessibility best practices, accessibility tools, and accessibility trends. -#### Simply Accessible +#### Simply Accessible -[Simply Accessible](http://simplyaccessible.com/articles) is a team of accessibility specialists providing accessibility training, consulting and more to change the perception of accessibility on the web. Their [Articles](http://simplyaccessible.com/articles) section discusses best practices for web accessibility, accessible design, and more. +[Simply Accessible](http://simplyaccessible.com/articles) is a team of accessibility specialists providing accessibility training, consulting and more to change the perception of accessibility on the web. Their [Articles](http://simplyaccessible.com/articles) section discusses best practices for web accessibility, accessible design, and more. -#### Level Access +#### Level Access -[Level Access](https://www.levelaccess.com/blog) is a digital accessibility firm supporting their clients in developing and deploying accessible products and services. Their blog addresses topics like ARIA best practices, accessibility trends, webinars, and more. +[Level Access](https://www.levelaccess.com/blog) is a digital accessibility firm supporting their clients in developing and deploying accessible products and services. Their blog addresses topics like ARIA best practices, accessibility trends, webinars, and more. -### Accessible Examples +### Accessible Examples -#### ally.js - Tutorials +#### ally.js - Tutorials -JavaScript library to help modern web applications with accessibility concerns by making accessibility simpler. For more information, navigate to [ally.js - Tutorials](http://allyjs.io/tutorials). +JavaScript library to help modern web applications with accessibility concerns by making accessibility simpler. For more information, navigate to [ally.js - Tutorials](http://allyjs.io/tutorials). -#### OpenAjax Examples +#### OpenAjax Examples -The [OpenAjax Alliance website](http://oaa-accessibility.org) is an excellent resource for verifying the rules for WAI-ARIA and provides a number of examples of WAI-ARIA implementations. +The [OpenAjax Alliance website](http://oaa-accessibility.org) is an excellent resource for verifying the rules for WAI-ARIA and provides a number of examples of WAI-ARIA implementations. -#### Patterns +#### Patterns -[The A11Y Project](http://a11yproject.com) offers a library of accessible widgets and patterns like menus, buttons, tooltips, and more. For more information, navigate to [Patterns](http://a11yproject.com/patterns.html). +[The A11Y Project](http://a11yproject.com) offers a library of accessible widgets and patterns like menus, buttons, tooltips, and more. For more information, navigate to [Patterns](http://a11yproject.com/patterns.html). ### Accessibility Techniques & Tools -#### Accessibility: Creating accessible extension icons for Microsoft Edge +#### Accessibility: Creating accessible extension icons for Microsoft Edge -Get guidance on creating accessible extensions icons for Microsoft Edge. For more information, navigate to [Accessibility: Creating accessible extension icons for Microsoft Edge](/archive/microsoft-edge/legacy/developer/extensions/guides/accessibility). +Get guidance on creating accessible extensions icons for Microsoft Edge. For more information, navigate to [Accessibility: Creating accessible extension icons for Microsoft Edge](/archive/microsoft-edge/legacy/developer/extensions/guides/accessibility). -#### Accessible Name and Description: Computation and Mappings 1.1 +#### Accessible Name and Description: Computation and Mappings 1.1 -This W3C mapping document explains how browsers determine name and descriptions of accessible objects from web content languages and expose them in accessibility APIs. For more information, navigate to [Accessible Name and Description: Computation and Mappings 1.1](https://www.w3.org/TR/accname-1.1). +This W3C mapping document explains how browsers determine name and descriptions of accessible objects from web content languages and expose them in accessibility APIs. For more information, navigate to [Accessible Name and Description: Computation and Mappings 1.1](https://www.w3.org/TR/accname-1.1). -#### Accessibility Evaluation Resources +#### Accessibility Evaluation Resources -Accessibility Evaluation Resources is a multi-page resource by the W3C that outlines different approaches for evaluating websites for accessibility. For more information, navigate to [Accessibility Evaluation Resources](https://www.w3.org/WAI/eval/Overview.html). +Accessibility Evaluation Resources is a multi-page resource by the W3C that outlines different approaches for evaluating websites for accessibility. For more information, navigate to [Accessibility Evaluation Resources](https://www.w3.org/WAI/eval/Overview.html). -#### Assistive technology compatibility tests +#### Assistive technology compatibility tests -Test results showing how different content types and standards behave in assistive technologies \(AT\) like screen readers. For more information, navigate to [Assistive technology compatibility tests](http://www.powermapper.com/tests). +Test results showing how different content types and standards behave in assistive technologies (AT) such as screen readers. For more information, navigate to [Assistive technology compatibility tests](http://www.powermapper.com/tests). -#### Building accessible websites just got a lot easier +#### Building accessible websites just got a lot easier -This .NET Web Development and Tools blog post describes the Visual Studio extension [Web Accessibility Checker](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebAccessibilityChecker). For more information, navigate to [Building accessible websites just got a lot easier](https://devblogs.microsoft.com/aspnet/building-accessible-websites-just-got-a-lot-easier). +This .NET Web Development and Tools blog post describes the Visual Studio extension [Web Accessibility Checker](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebAccessibilityChecker). For more information, navigate to [Building accessible websites just got a lot easier](https://devblogs.microsoft.com/aspnet/building-accessible-websites-just-got-a-lot-easier). -#### Core Accessibility API Mappings 1.1 +#### Core Accessibility API Mappings 1.1 -This W3C mapping document explains how the semantics of web content languages are exposed to accessibility APIs. For more information, navigate to [Core Accessibility API Mappings 1.1](https://www.w3.org/TR/core-aam-1.1). +This W3C mapping document explains how the semantics of web content languages are exposed to accessibility APIs. For more information, navigate to [Core Accessibility API Mappings 1.1](https://www.w3.org/TR/core-aam-1.1). -#### Easy Checks – A First Review of Web Accessibility +#### Easy Checks – A First Review of Web Accessibility -A series of quick checks by the WAI that help you asses the accessibility of a web page. For more information, navigate to [Easy Checks – A First Review of Web Accessibility](https://www.w3.org/WAI/eval/preliminary.html). +A series of quick checks by the WAI that help you asses the accessibility of a web page. For more information, navigate to [Easy Checks – A First Review of Web Accessibility](https://www.w3.org/WAI/eval/preliminary.html). -#### How to Meet WCAG 2.0 +#### How to Meet WCAG 2.0 -A quick reference to Web Content Accessibility Guidelines \(WCAG\) 2.0 requirements \(success criteria\) and techniques. For more information, navigate to [How to Meet WCAG 2.0](https://www.w3.org/WAI/WCAG20/quickref). +A quick reference to Web Content Accessibility Guidelines (WCAG) 2.0 requirements (success criteria) and techniques. For more information, navigate to [How to Meet WCAG 2.0](https://www.w3.org/WAI/WCAG20/quickref). -#### HTML Accessibility API Mappings 1.0 +#### HTML Accessibility API Mappings 1.0 -This W3C mappings document explains how HTML5.1 element and attributes map to platform accessibility APIs. For more information, navigate to [HTML Accessibility API Mappings 1.0](https://www.w3.org/TR/html-aam-1.0). +This W3C mappings document explains how HTML5.1 element and attributes map to platform accessibility APIs. For more information, navigate to [HTML Accessibility API Mappings 1.0](https://www.w3.org/TR/html-aam-1.0). #### Quick Tips -A list of quick web development tips for accessibility by [The A11Y Project](http://a11yproject.com). For more information, navigate to [Quick Tips](http://a11yproject.com#Quick-tips). - -#### Site Scan +A list of quick web development tips for accessibility by [The A11Y Project](http://a11yproject.com). For more information, navigate to [Quick Tips](http://a11yproject.com#Quick-tips). -The Site Scan tool on Microsoft Edge Dev Center checks for out-of-date libraries, layout issues, and accessibility issues. For more information, navigate to [Site Scan](https://developer.microsoft.com/microsoft-edge/tools). +#### Site Scan -#### Techniques for WCAG 2.0 +The Site Scan tool on Microsoft Edge Dev Center checks for out-of-date libraries, layout issues, and accessibility issues. For more information, navigate to [Site Scan](https://developer.microsoft.com/microsoft-edge/tools). -Techniques from the W3C that provide guidance for web developers on meeting [Web Content Accessibility Guidelines (WCAG) 2.0](https://w3.org/TR/WCAG20) success criteria. For more information, navigate to [Techniques for WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/Overview.html). +#### Techniques for WCAG 2.0 -#### Tips on Developing for Web Accessibility +Techniques from the W3C that provide guidance for web developers on meeting [Web Content Accessibility Guidelines (WCAG) 2.0](https://w3.org/TR/WCAG20) success criteria. For more information, navigate to [Techniques for WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/Overview.html). -Tips from the W3C on developing web content that is more accessible to people with disabilities. For more information, navigate to [Tips on Developing for Web Accessibility](https://w3.org/WAI/gettingstarted/tips/developing.html). +#### Tips on Developing for Web Accessibility -#### WAI-ARIA Authoring Practices 1.1 +Tips from the W3C on developing web content that is more accessible to people with disabilities. For more information, navigate to [Tips on Developing for Web Accessibility](https://w3.org/WAI/gettingstarted/tips/developing.html). -A document by the W3C that provides readers with an understanding of how to use WAI-ARIA 1.1 and recommends approaches to make widgets, navigation, and behaviors accessible using WAI-ARIA roles, states, and properties. For more information, navigate to [WAI-ARIA Authoring Practices 1.1](http://w3c.github.io/aria-practices). +#### WAI-ARIA Authoring Practices 1.1 -#### WAI Guidelines and Techniques +A document by the W3C that provides readers with an understanding of how to use WAI-ARIA 1.1 and recommends approaches to make widgets, navigation, and behaviors accessible using WAI-ARIA roles, states, and properties. For more information, navigate to [WAI-ARIA Authoring Practices 1.1](http://w3c.github.io/aria-practices). -A series of web accessibility guidelines and standards developed by the WAI. For more information, navigate to [WAI Guidelines and Techniques](https://w3.org/WAI/guid-tech.html). +#### WAI Guidelines and Techniques -#### Web Accessibility Evaluation Tools List +A series of web accessibility guidelines and standards developed by the WAI. For more information, navigate to [WAI Guidelines and Techniques](https://w3.org/WAI/guid-tech.html). -A list of web accessibility evaluation tools to help determine if websites meet accessibility guidelines. For more information, navigate to [Web Accessibility Evaluation Tools List](https://www.w3.org/WAI/ER/tools/index.html). +#### Web Accessibility Evaluation Tools List -#### Web Accessibility Perspectives: Explore the Impact and Benefits for Everyone +A list of web accessibility evaluation tools to help determine if websites meet accessibility guidelines. For more information, navigate to [Web Accessibility Evaluation Tools List](https://www.w3.org/WAI/ER/tools/index.html). -A series of short situational videos by the W3C about the impact of accessibility and the benefits for everyone. For more information, navigate to [Web Accessibility Perspectives: Explore the Impact and Benefits for Everyone](https://w3.org/WAI/perspectives). +#### Web Accessibility Perspectives: Explore the Impact and Benefits for Everyone - +A series of short situational videos by the W3C about the impact of accessibility and the benefits for everyone. For more information, navigate to [Web Accessibility Perspectives: Explore the Impact and Benefits for Everyone](https://w3.org/WAI/perspectives). - -[MicrosoftDeveloperEdgeVms]: https://developer.microsoft.com/microsoft-edge/tools/vms "Virtual Machines | Microsoft Edge Developer" + + + +[MicrosoftDeveloperEdgeVms]: https://developer.microsoft.com/microsoft-edge/tools/vms "Virtual Machines | Microsoft Edge Developer" -[MicrosoftSupport22798]: https://support.microsoft.com/help/22798 "Complete guide to Narrator | Microsoft Support" -[MicrosoftSupportWindows414948ba8b1cD3bd86150e5e32204198]: https://support.microsoft.com/windows/414948ba-8b1c-d3bd-8615-0e5e32204198 "Use Magnifier to make things on the screen easier to see | Microsoft Support" +[MicrosoftSupport22798]: https://support.microsoft.com/help/22798 "Complete guide to Narrator | Microsoft Support" +[MicrosoftSupportWindows414948ba8b1cD3bd86150e5e32204198]: https://support.microsoft.com/windows/414948ba-8b1c-d3bd-8615-0e5e32204198 "Use Magnifier to make things on the screen easier to see | Microsoft Support" -[AccessibilityinsightsWebOverview]: https://accessibilityinsights.io/docs/web/overview "Accessibility Insights for Web | Accessibility Insights" +[AccessibilityinsightsWebOverview]: https://accessibilityinsights.io/docs/web/overview "Accessibility Insights for Web | Accessibility Insights" -[AndroidDeveloperDevicesManagingAvdsHtml]: https://developer.android.com/tools/devices/managing-avds.html "Create and manage virtual devices | Android Developers" -[AndroidDeveloperDevicesEmulatorHtml]: https://developer.android.com/tools/devices/emulator.html "Run apps on the Android Emulator | Android Developers" -[AndroidDeveloperSdkInstallingStudioHtml]: https://developer.android.com/sdk/installing/studio.html "Download Android Studio | Android Developers" +[AndroidDeveloperDevicesManagingAvdsHtml]: https://developer.android.com/tools/devices/managing-avds.html "Create and manage virtual devices | Android Developers" +[AndroidDeveloperDevicesEmulatorHtml]: https://developer.android.com/tools/devices/emulator.html "Run apps on the Android Emulator | Android Developers" +[AndroidDeveloperSdkInstallingStudioHtml]: https://developer.android.com/sdk/installing/studio.html "Download Android Studio | Android Developers" -[AppleAccessibilityMacVision]: https://www.apple.com/accessibility/mac/vision "Vision Accessibility - Mac | Apple" +[AppleAccessibilityMacVision]: https://www.apple.com/accessibility/mac/vision "Vision Accessibility - Mac | Apple" -[AssistivlabsMain]: https://assistivlabs.com "Assistiv Labs" +[AssistivlabsMain]: https://assistivlabs.com "Assistiv Labs" -[FreedomscientificSoftwareJaws]: https://www.freedomscientific.com/products/software/jaws "JAWS® | Freedom Scientific" -[FreedomscientificSoftwareZoomtext]: https://www.freedomscientific.com/products/software/zoomtext "ZoomText | Freedom Scientific" +[FreedomscientificSoftwareJaws]: https://www.freedomscientific.com/products/software/jaws "JAWS® | Freedom Scientific" +[FreedomscientificSoftwareZoomtext]: https://www.freedomscientific.com/products/software/zoomtext "ZoomText | Freedom Scientific" -[GooglePlayStoreAndroidAccessibilitySuite]: https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback "Android Accessibility Suite | GooglePlay Store" +[GooglePlayStoreAndroidAccessibilitySuite]: https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback "Android Accessibility Suite | GooglePlay Store" -[NvaccessAboutNvda]: https://www.nvaccess.org/about-nvda "About NVDA | NV Access" +[NvaccessAboutNvda]: https://www.nvaccess.org/about-nvda "About NVDA | NV Access" -[W3cPerspectiveVideosKeyboard]: https://www.w3.org/WAI/perspective-videos/keyboard "Keyboard Compatibility | W3C" +[W3cPerspectiveVideosKeyboard]: https://www.w3.org/WAI/perspective-videos/keyboard "Keyboard Compatibility | W3C" -[WebaimProjectsLowvisionsurvey2]: https://webaim.org/projects/lowvisionsurvey2 "Survey of Users with Low Vision \#2 Results | WebAIM" -[WebaimProjectsScreenreadersurvey8]: https://webaim.org/projects/screenreadersurvey8 "Screen Reader User Survey \#8 Results | WebAIM" -[WebaimArticlesScreenreaderTesting]: https://webaim.org/articles/screenreader_testing "Testing with Screen Readers | WebAIM" +[WebaimProjectsLowvisionsurvey2]: https://webaim.org/projects/lowvisionsurvey2 "Survey of Users with Low Vision \#2 Results | WebAIM" +[WebaimProjectsScreenreadersurvey8]: https://webaim.org/projects/screenreadersurvey8 "Screen Reader User Survey \#8 Results | WebAIM" +[WebaimArticlesScreenreaderTesting]: https://webaim.org/articles/screenreader_testing "Testing with Screen Readers | WebAIM" diff --git a/microsoft-edge/accessibility/design.md b/microsoft-edge/accessibility/design.md index 1ce6fe6f8d..8c1da516ba 100644 --- a/microsoft-edge/accessibility/design.md +++ b/microsoft-edge/accessibility/design.md @@ -9,7 +9,7 @@ ms.prod: microsoft-edge ms.assetid: 8468f8e1-9f4a-426c-a969-76eab9419137 keywords: accessibility, accessibility for developers, accessible websites, edge, web development, ARIA, developer, UIA, UI Automation --- -# Designing Accessible Websites +# Designing Accessible Websites Creating an inclusive design makes technology usable by all people no matter their age, education, geographic location, language, or disability. People using technology and browsing the web have a wide range of abilities and preferences. As you design your website, keep in mind the following key accessibility scenarios: @@ -23,20 +23,20 @@ Creating an inclusive design makes technology usable by all people no matter the Many common accessibility issues on the web can be solved through good coding practice. The [Web Content Accessibility Guidelines (WCAG) 2.0](https://www.w3.org/TR/WCAG20) documentation provides techniques and best practices to help you design more accessible dynamic web applications. For more information on building accessible websites, navigate to [Building Accessible Websites](./build/index.md) . -## Resources +## Resources -#### [Designing for Inclusion](https://w3.org/WAI/users/Overview.html) +#### [Designing for Inclusion](https://w3.org/WAI/users/Overview.html) Designing for Inclusion by the W3C Web Accessibility Initiative provides resources to help you better understand users with disabilities and how to design your website with them in mind. -#### [Designing inclusive software](https://msdn.microsoft.com/windows/uwp/accessibility/designing-inclusive-software) +#### [Designing inclusive software](https://msdn.microsoft.com/windows/uwp/accessibility/designing-inclusive-software) Designing inclusive software discusses Microsoft design principles and practices for the Universal Windows Platform (UWP). -#### [How People with Disabilities Use the Web](https://www.w3.org/WAI/intro/people-use-web/Overview.html) +#### [How People with Disabilities Use the Web](https://www.w3.org/WAI/intro/people-use-web/Overview.html) This resource by the W3C introduces how people with disabilities, including people with age-related impairments, use the Web. -#### [Inclusive Design Toolkit](https://www.microsoft.com/design/practice#howwemake-section) +#### [Inclusive Design Toolkit](https://www.microsoft.com/design/practice#howwemake-section) Microsoft developed the Inclusive Design Toolkit to show how human diversity can create better design constraints and how to connect seemingly niche solutions to broader markets. diff --git a/microsoft-edge/accessibility/index.md b/microsoft-edge/accessibility/index.md index 96bc2d969b..1c8e01c486 100644 --- a/microsoft-edge/accessibility/index.md +++ b/microsoft-edge/accessibility/index.md @@ -9,57 +9,57 @@ ms.prod: microsoft-edge ms.assetid: 1e5c42a7-4604-46ac-ad7b-a65390e5b36a keywords: accessibility, accessibility for developers, accessible websites, edge, web development, ARIA, developer, UIA, UI Automation --- -# Accessibility overview +# Accessibility overview -> "\[T\]he impact of disability is radically changed on the Web because the Web removes barriers to communication and interaction that many people face in the physical world." [(Accessibility | W3C)][W3CAccessibility] +> "\[T\]he impact of disability is radically changed on the Web because the Web removes barriers to communication and interaction that many people face in the physical world." [(Accessibility | W3C)][W3CAccessibility] -The [World Health Organization][WHODisabilities] defines disability as "a mismatch in interaction between the features of a person's body and the features of the environment in which they live". Disabilities range from situational disabilities, like limited mobility while holding a baby or bright sunlight on a phone, to other physical, auditory, visual, or age-related impairments. +The [World Health Organization][WHODisabilities] defines disability as "a mismatch in interaction between the features of a person's body and the features of the environment in which they live". Disabilities range from situational disabilities, like limited mobility while holding a baby or bright sunlight on a phone, to other physical, auditory, visual, or age-related impairments. -Designing websites and other technologies for inclusion creates an experience enjoyable by every person. Inclusive design and web accessibility empowers and assists everyone to use the web. +Designing websites and other technologies for inclusion creates an experience enjoyable by every person. Inclusive design and web accessibility empowers and assists everyone to use the web. -Here are some best practices, code samples, and further resources for you to learn more about [Designing][AccessibilityDesign], [Building][AccessibilityBuild], and [Testing][AccessibilityTest] accessible websites in Microsoft Edge. +Here are some best practices, code samples, and further resources for you to learn more about [Designing][AccessibilityDesign], [Building][AccessibilityBuild], and [Testing][AccessibilityTest] accessible websites in Microsoft Edge. -## Accessibility in Microsoft Edge +## Accessibility in Microsoft Edge -In Microsoft Edge, we introduced modern [UI Automation API][WindowsWin32AutoEntryui] \(UIA API\). The change to UIA was a major investment in browser accessibility, and it lays the foundation for a more inclusive web experience for users who depend on assistive technology in Windows 10. Users also benefit from the evergreen nature of the Chromium engine. +In Microsoft Edge, we introduced modern [UI Automation API][WindowsWin32AutoEntryui] \(UIA API\). The change to UIA was a major investment in browser accessibility, and it lays the foundation for a more inclusive web experience for users who depend on assistive technology in Windows 10. Users also benefit from the evergreen nature of the Chromium engine. -The accessibility system in Microsoft Edge inherently supports modern web standards including ARIA, HTML5, and CSS3. The following diagram of the simplified browser pipeline follows webpage content into an accessible presentation layer. +The accessibility system in Microsoft Edge inherently supports modern web standards including ARIA, HTML5, and CSS3. The following diagram of the simplified browser pipeline follows webpage content into an accessible presentation layer. :::image type="complex" source="./media/accessibilityarchitecture.png" alt-text="Content transformed to the engine model is projected into visual and accessibility views that are presented either as visual or accessible presentation"::: - Content transformed to the engine model is projected into visual and accessibility views that are presented either as visual or accessible presentation -:::image-end::: + Content transformed to the engine model is projected into visual and accessibility views that are presented either as visual or accessible presentation +:::image-end::: -The Microsoft Edge team works with the W3C and other browser vendors on an ongoing basis to ensure that new web platform features have sufficient built-in accessibility. +The Microsoft Edge team works with the W3C and other browser vendors on an ongoing basis to ensure that new web platform features have sufficient built-in accessibility. -For information on which new HTML5 features are accessibly supported by Microsoft Edge, navigate to [HTML5Accessibility][HTML5Accessibility]. +For information on which new HTML5 features are accessibly supported by Microsoft Edge, navigate to [HTML5Accessibility][HTML5Accessibility]. -## Resources +## Resources -#### Microsoft Windows UI Automation Blog +#### Microsoft Windows UI Automation Blog -The [Microsoft Windows UI Automation blog][ArchiveBlogsWinuiautomation] covers topics related to the Windows Automation API. +The [Microsoft Windows UI Automation blog][ArchiveBlogsWinuiautomation] covers topics related to the Windows Automation API. -#### Web Accessibility Initiative (WAI) +#### Web Accessibility Initiative (WAI) -The [Web Accessibility Initiative (WAI)][W3CWaiHome] provided bt the W3C is an effort to help improve the accessibility of the web. The site provides a variety of resources for [Getting Started with Web Accessibility][W3CWaiGettingstartedOverview], [Designing for Inclusion][W3CWaiFundamentals], [tutorials and presentations][W3CWaiTeachAdvocate], and more. +The [Web Accessibility Initiative (WAI)][W3CWaiHome] provided bt the W3C is an effort to help improve the accessibility of the web. The site provides a variety of resources for [Getting Started with Web Accessibility][W3CWaiGettingstartedOverview], [Designing for Inclusion][W3CWaiFundamentals], [tutorials and presentations][W3CWaiTeachAdvocate], and more. - + -[AccessibilityBuild]: ./build/index.md "Building Accessible Websites | Microsoft Doc" -[AccessibilityDesign]: ./design.md "Designing Accessible Websites | Microsoft Doc" -[AccessibilityTest]: ./test.md "Accessibility Testing | Microsoft Docs" +[AccessibilityBuild]: ./build/index.md "Building Accessible Websites | Microsoft Doc" +[AccessibilityDesign]: ./design.md "Designing Accessible Websites | Microsoft Doc" +[AccessibilityTest]: ./test.md "Accessibility Testing | Microsoft Docs" -[WindowsWin32AutoEntryui]: /windows/win32/winauto/entry-uiauto-win32 "UI Automation | Microsoft Doc" +[WindowsWin32AutoEntryui]: /windows/win32/winauto/entry-uiauto-win32 "UI Automation | Microsoft Doc" -[ArchiveBlogsWinuiautomation]: /archive/blogs/winuiautomation/ "Microsoft Windows UI Automation Blog | Microsoft Doc" +[ArchiveBlogsWinuiautomation]: /archive/blogs/winuiautomation/ "Microsoft Windows UI Automation Blog | Microsoft Doc" -[HTML5Accessibility]: https://html5accessibility.com "HTML5 Accessibility" +[HTML5Accessibility]: https://html5accessibility.com "HTML5 Accessibility" -[W3CAccessibility]: https://w3.org/standards/webdesign/accessibility "Accessibility | W3C" -[W3CWaiFundamentals]: https://w3.org/wai/fundamentals/accessibility-intro "Introduction to Web Accessibility | Web Accessibility Initiative (WAI) | W3C" -[W3CWaiGettingstartedOverview]: https://w3.org/wai/gettingstarted/Overview "Getting Started: Making a Web Site Accessible | Web Accessibility Initiative (WAI) | W3C" -[W3CWaiHome]: https://w3.org/wai "Web Accessibility Initiative (WAI) | W3C" -[W3CWaiTeachAdvocate]: https://w3.org/wai/teach-advocate "Teach and Advocate Overview | Web Accessibility Initiative (WAI) | W3C" +[W3CAccessibility]: https://w3.org/standards/webdesign/accessibility "Accessibility | W3C" +[W3CWaiFundamentals]: https://w3.org/wai/fundamentals/accessibility-intro "Introduction to Web Accessibility | Web Accessibility Initiative (WAI) | W3C" +[W3CWaiGettingstartedOverview]: https://w3.org/wai/gettingstarted/Overview "Getting Started: Making a Web Site Accessible | Web Accessibility Initiative (WAI) | W3C" +[W3CWaiHome]: https://w3.org/wai "Web Accessibility Initiative (WAI) | W3C" +[W3CWaiTeachAdvocate]: https://w3.org/wai/teach-advocate "Teach and Advocate Overview | Web Accessibility Initiative (WAI) | W3C" -[WHODisabilities]: https://who.int/topics/disabilities "Disabilities | WHO" +[WHODisabilities]: https://who.int/topics/disabilities "Disabilities | WHO" diff --git a/microsoft-edge/accessibility/test.md b/microsoft-edge/accessibility/test.md index 404a73be9e..dff0af8ac6 100644 --- a/microsoft-edge/accessibility/test.md +++ b/microsoft-edge/accessibility/test.md @@ -9,7 +9,7 @@ ms.topic: article ms.prod: microsoft-edge keywords: accessibility, accessibility for developers, accessible websites, edge, web development, ARIA, developer, UIA, UI Automation --- -# Accessibility testing +# Accessibility testing Accessibility testing is a form of usability testing to verify your website is usable by all people. Check out the W3C page [Evaluating Web Accessibility Overview](https://www.w3.org/WAI/test-evaluate) for information on when testing should be done, testing requirements, who should test your site, etc. @@ -21,35 +21,35 @@ Use the following tools and testing procedures to evaluate your website for acce * [Overview of accessibility testing using DevTools][DevtoolsAccessibilityAccessibilitytestingindevtools] - A walkthrough of using various DevTools features to test for accessibility problems. -#### [Accessibility Evaluation Resources](https://www.w3.org/WAI/eval/Overview.html) +#### [Accessibility Evaluation Resources](https://www.w3.org/WAI/eval/Overview.html) Accessibility Evaluation Resources is a multi-page resource by the W3C that outlines different approaches for evaluating websites for accessibility. -#### [Assistive technology compatibility tests](http://www.powermapper.com/tests) +#### [Assistive technology compatibility tests](http://www.powermapper.com/tests) Test results showing how different content types and standards behave in assistive technologies (AT) like screen readers. -#### [Easy Checks – A First Review of Web Accessibility](https://www.w3.org/WAI/eval/preliminary.html) +#### [Easy Checks – A First Review of Web Accessibility](https://www.w3.org/WAI/eval/preliminary.html) A series of quick checks by the WAI that help you assess the accessibility of a web page. -#### [How to Meet WCAG 2.0](https://www.w3.org/WAI/WCAG20/quickref) +#### [How to Meet WCAG 2.0](https://www.w3.org/WAI/WCAG20/quickref) A quick reference to Web Content Accessibility Guidelines \(WCAG\) 2.0 requirements (success criteria) and techniques. -#### [HTML5Accessibility](https://html5accessibility.com) +#### [HTML5Accessibility](https://html5accessibility.com) -This site tests which new HTML5 features are accessibly supported by major browsers. +This site tests which new HTML5 features are accessibly supported by major browsers. -#### [webhint](https://webhint.io) +#### [webhint](https://webhint.io) Use [webhint](https://webhint.io/) to check for out-of-date libraries, security improvements, performance problems, accessibility issues and more. -#### [Web Accessibility Checker](https://visualstudiogallery.msdn.microsoft.com/3aabefab-1681-4fea-8f95-6a62e2f0f1ec) +#### [Web Accessibility Checker](https://visualstudiogallery.msdn.microsoft.com/3aabefab-1681-4fea-8f95-6a62e2f0f1ec) A Visual Studio extension that performs accessibility checks on any ASP.NET web app. -#### [Web Accessibility Evaluation Tools List](https://www.w3.org/WAI/ER/tools/index.html) +#### [Web Accessibility Evaluation Tools List](https://www.w3.org/WAI/ER/tools/index.html) A list of web accessibility evaluation tools to help determine if websites meet accessibility guidelines. diff --git a/microsoft-edge/devtools-guide-chromium/3d-view/index.md b/microsoft-edge/devtools-guide-chromium/3d-view/index.md index 2efc1ec30b..86cee52543 100644 --- a/microsoft-edge/devtools-guide-chromium/3d-view/index.md +++ b/microsoft-edge/devtools-guide-chromium/3d-view/index.md @@ -1,5 +1,5 @@ --- -description: All about 3D View and how to use it. +description: How to use 3D View, including navigating the canvas, Z-index, 3D DOM, and composited layers. title: 3D View overview author: MSEdgeTeam ms.author: msedgedevrel @@ -10,126 +10,144 @@ keywords: microsoft edge, web development, f12 tools, devtools --- # 3D View -Use the **3D View** to debug your web app by navigating through the [Document Object Model (DOM)][MDNDocumentObjectModel] or the [z-index][MDNZIndex] stacking context. With it, you may complete the following tasks. +Use the **3D View** to debug your web app by navigating through the [Document Object Model (DOM)][MDNDocumentObjectModel] or the [z-index][MDNZIndex] stacking context. Use **3D View** to do the following: +* [Explore the web page translated into a 3D perspective](#3d-dom). +* [Debug based on z-index stacking context](#z-index). +* [Access the Layers tool functionality from 3D View with composited layers](#composited-layers). +* [Clear some of the clutter on the DOM pane](#changing-your-view) or the [z-index pane](#change-the-scope-of-your-exploration). +* [Pick the color scheme to best debug your DOM problems](#dom-color-type) or [z-index problems](#z-index-color-type). -* [Explore the web page translated into a 3D perspective](#3d-dom) -* [Debug based on z-index stacking context](#z-index) -* [Access the Layers tool functionality from 3D View with composited layers](#composited-layers) -* [Clear some of the clutter on the DOM pane](#changing-your-view) or the [z-index pane](#change-the-scope-of-your-exploration) -* [Pick the color scheme to best debug your DOM problems](#dom-color-type) or [z-index problems](#z-index-color-type) +To explore an early prototype of 3D View project and run the code yourself, navigate to [3D View Sample][GithubMicrosoftedgeDevtoolssamples3dview]. -If you want to explore an early prototype of 3D View project and run the code yourself, navigate to [3D View Sample][GithubMicrosoftedgeDevtoolssamples3dview]. +On the left side, there are three panes that you can use for your debugging experience: +* The [Z-index](#z-index) pane. Navigate through the different elements in the web app with the z-index context in mind. The **Z-index** pane is the default pane. +* The [3D DOM](#3d-dom) pane. Explore the DOM as a whole with all the elements easily accessible. To access the pane, select the **DOM** pane next to the **Z-index** pane. +* The [Composited Layers](#composited-layers) pane. Add another 3D element to create a more comprehensive experience from a layers perspective. To access the pane, select the **Composited Layers** pane next to the **DOM** pane. -On the left side, there are three panes that you can use for your debugging experience. +On the right side, the canvas displays your selections from the [Z-index](#z-index), [3D DOM](#3d-dom), or [Composited Layers](#composited-layers). -* The [Z-index](#z-index) pane. Navigate through the different elements in the web app with the z-index context in mind. The **Z-index** pane is the default pane. -* The [3D DOM](#3d-dom) pane. Explore the DOM as a whole with all the elements easily accessible. To access the pane, choose the **DOM** pane next to the **Z-index** pane. -* The [Composited Layers](#composited-layers) pane. Add another 3D element to create a more comprehensive experience from a layers perspective. To access the pane, choose the **Composited Layers** pane next to the **DOM** pane. - -On the right side, the canvas displays your selections from the [Z-index](#z-index), [3D DOM](#3d-dom), or [Composited Layers](#composited-layers). -## Navigating the canvas + +## Navigating the canvas :::image type="complex" source="../media/3d-view-canvas.msft.png" alt-text="Canvas of 3D View" lightbox="../media/3d-view-canvas.msft.png"::: - Canvas of 3D View -:::image-end::: + Canvas of 3D View +:::image-end::: -### Keyboard shortcuts +### Keyboard shortcuts -* Rotate the DOM: To rotate horizontally, select the `left-arrow` and `right-arrow` keys. To rotate vertically, select the `up-arrow` and `down-arrow` keys. -* Navigate the DOM: To move through the adjacent elements, choose an element and select the `up-arrow` and `down-arrow` keys. +To rotate the DOM horizontally, select the `left-arrow` and `right-arrow` keys. To rotate vertically, select the `up-arrow` and `down-arrow` keys. -### Mouse controls +To navigate the DOM to move through the adjacent elements, select an element and then use the `up-arrow` and `down-arrow` keys. -* Rotate the DOM: Choose and drag around the canvas space. -* Pan around the DOM: Open the contextual menu \(right-click\) and drag in the direction you want the DOM to move. -* Zoom: Drag two fingers across the touchpad or use the scroll wheel on your mouse. +### Mouse controls -### On-screen controls +To rotate the DOM, select and drag around the canvas space. + +To pan around the DOM, right-click and drag in the direction you want the DOM to move. + +To zoom, drag two fingers across the touchpad or use the scroll wheel on your mouse. + +### On-screen controls :::image type="complex" source="../media/3d-view-controls-small.msft.png" alt-text="On-screen controls" lightbox="../media/3d-view-controls-small.msft.png"::: - On-screen controls -:::image-end::: + On-screen controls +:::image-end::: -* Reset the canvas view to the original view: Choose the **Reset camera** button, or choose the **Reset elements in view and re-center camera** \(sideways refresh icon\) button. -* Refresh the canvas \(for example, if the browser changed or you switched to a device emulator view\): Choose the **Retake snapshot** button or choose the **Take new snapshot** button \(refresh icon\). +To reset the canvas view to the original view, select the **Reset camera** button, or select the **Reset elements in view and re-center camera** (sideways refresh icon) button. -## Z-index +To refresh the canvas, such as when the browser changed or you switched to a device emulator view, select the **Retake snapshot** button or the **Take new snapshot** button (the refresh icon). + + + +## Z-index :::image type="complex" source="../media/3d-view-z-index-view-box.msft.png" alt-text="Z-index view" lightbox="../media/3d-view-z-index-view-box.msft.png"::: - Z-index view -:::image-end::: + Z-index view +:::image-end::: + +While the **Z-index** pane has shared features with the **3D DOM** pane, the panes still have elements that are unique to the pane. -While the **Z-index** pane has shared features with the **3D DOM** pane, the panes still have elements that are unique to the pane. +### Highlight elements with stacking context -### Highlight elements with stacking context +The **Highlight elements with stacking context** setting allows you to turn on or off the z-index tags for the elements on the canvas. By default, the checkbox is selected. -The **Highlight elements with stacking context** setting allows you to turn on \(and off\) the z-index tags for the elements on the canvas. The checkbox is chosen by default. +### Change the scope of your exploration -### Change the scope of your exploration +The **Show all elements** button is the quickest way to display all the elements of the DOM after changing the settings below it. -The **Show all elements** button is the quickest way to display all the elements of the DOM after changing the settings below it. +The **Show only elements with stacking context** button removes elements without stacking context and flattens the DOM for easier navigation. -The **Show only elements with stacking context** button removes elements without stacking context and flattens the DOM for easier navigation. +The **Isolate selected element** button is essentially three buttons in one. There are two checkboxes below the **Isolate selected element** button: The **Show all parents** checkbox and **Keep only parents with new stacking context** checkbox. -The **Isolate selected element** button is essentially three buttons in one. There are two checkboxes below the **Isolate selected element** button: The **Show all parents** checkbox and **Keep only parents with new stacking context** checkbox. +The **Show all parents** checkbox is turned on by default. To display the element and any parents on the canvas, select an element and then select the **Isolate selected element** button. -The **Show all parents** checkbox is turned on by default. To display the element and any parents on the canvas, choose an element and choose the **Isolate selected element** button. +To display the element and the parents that have a new stacking context on the canvas, turn on the **Keep only parents with new stacking context** setting and then select the **Isolate selected element** button. -To display the element and the parents that have a new stacking context on the canvas, turn on the **Keep only parents with new stacking context** setting and choose the **Isolate selected element** button. +To display the element you selected on the canvas, turn off both the settings and then select **Isolate selected element** button. -To display the element you chose on the canvas, turn off both the settings and choose **Isolate selected element** button. +At the bottom of the **3D DOM** pane, locate the **Hide elements with the same paint order as their parent** checkbox. Choosing and deselecting the checkbox refreshes the elements based on your choice. When this checkbox is selected, elements that share paint order are flattened to the parent. -At the bottom of the **3D DOM** pane, locate the **Hide elements with the same paint order as their parent** checkbox. Choosing and deselecting the checkbox refreshes the elements based on your choice. If chosen, elements that share paint order are flattened to the parent. +The options reduce the clutter that complex web pages create in your canvas. -The options are meant to clear up some of the clutter that more complex web pages create in your canvas. +### Z-index color type -### Z-index color type +The are the different visualizations you can use for the DOM in your canvas. Whether you use it for fun or because the visualizations help you visualize the DOM better, the DevTools have different colorways and a **Use background color** option. The **Z-index** pane shares the **Purple to White** and **Background Color** with the **3D DOM** pane. Given the added visual element of the z-index labels, your feedback that led to a reduction in the number of color options. -The are the different visualizations you may use for the DOM in your canvas. Whether you use it for fun or because the visualizations help you visualize the DOM better, the DevTools have different colorways and a **Use background color** option. The **Z-index** pane shares the **Purple to White** and **Background Color** with the **3D DOM** pane. Given the added visual element of the z-index labels, your feedback that led to a reduction in the number of color options. The new simplicity improves the z-index debugging experience. The radio buttons allow you to toggle through the options and pick the color type. The color type is either most appropriate for your project or one that you like the most. +This approach improves the z-index debugging experience. The radio buttons allow you to toggle through the options and pick the color type. The color type is either most appropriate for your project or one that you like the most. -## 3D DOM + + +## 3D DOM :::image type="complex" source="../media/3d-view-dom-purple-box.msft.png" alt-text="DOM view" lightbox="../media/3d-view-dom-purple-box.msft.png"::: - DOM view -:::image-end::: + DOM view +:::image-end::: + +If you want to take more of a general debugging view, rather than the z-index experience, the **3D DOM** gives an overall look of the DOM. Since the z-index context is removed, the DOM is stacked more closely and cleanly. The **3D DOM** pane has similar functionality, but there are a few nuances. + +### Changing your view -If you want to take more of a general debugging view, rather than the z-index experience, the **3D DOM** gives an overall look of the DOM. Since the z-index context is removed, the DOM is stacked more closely and cleanly. The **3D DOM** pane has similar functionality, but there are a few nuances. +On the **3D DOM** pane, the **Isolate selected element** button has **Include children** and **Include parents** checkboxes. Both checkboxes are turned on by default. That means if you select the **Isolate selected element** button after you select an element, the canvas displays the selected element, the parents of the element, and the children of the element. -### Changing your view +To display the selected element and the parents of the element, turn off the **Include children** setting and then select the **Isolate selected element** button again. -On the **3D DOM** pane, the **Isolate selected element** button has **Include children** and **Include parents** checkboxes. Both checkboxes are turned on by default. That means if you choose the **Isolate selected element** button after you choose an element, the canvas displays the chosen element, the parents of the element, and the children of the element. Turn off the **Include children** setting and choose the **Isolate selected element** button again to display the chosen element and the parents of the element. If you turn on the **Include children** setting and turn off the **Include parents** setting and then choose the **Isolate selected element** button, the canvas displays the element and any children. If you turn off both settings and choose the **Isolate selected element** button, the canvas only displays the element you previously chose. +If you turn on the **Include children** setting and turn off the **Include parents** setting and then select the **Isolate selected element** button, the canvas displays the element and any children. If you turn off both settings and then select the **Isolate selected element** button, the canvas only displays the element you previously selected. -A slider on the control pane named **Nesting level for page** with a number next to it. The number indicates the number of layers for the document. Dragging the slider to the left causes the outermost layers to peel away until you are left with a nesting level set to `1`, which displays only the furthest back element in the DOM. To remove some of the clutter, drag the slider. It helps you get a closer look at what is happening in the lower levels. +A slider on the control pane named **Nesting level for page** with a number next to it. The number indicates the number of layers for the document. Dragging the slider to the left causes the outermost layers to peel away until you are left with a nesting level set to `1`, which displays only the furthest back element in the DOM. To remove some of the clutter, drag the slider. It helps you get a closer look at what is happening in the lower levels. -### DOM color type +### DOM color type -The **3D DOM** pane displays the following options. +The **3D DOM** pane has the following options: +* Three different colorways: + * **Heatmap - Purple to White** + * **Heatmap - Blue to Yellow** + * **Heatmap - Rainbow** +* **Use background color** +* **Use screen texture** -* Three different colorways. - * **Heatmap - Purple to White** - * **Heatmap - Blue to Yellow** - * **Heatmap - Rainbow** -* **Use background color** -* **Use screen texture** - -The **Use screen texture** option adds context to your debugging experience. It directly displays the content from the webpage onto the elements. +The **Use screen texture** option adds context to your debugging experience. It directly displays the content from the webpage onto the elements. + + ## Composited layers :::image type="complex" source="../media/experiments-layers.msft.png" alt-text="Composited layers pane" lightbox="../media/experiments-layers.msft.png"::: - **Composited Layers** pane -:::image-end::: + **Composited Layers** pane +:::image-end::: + +The **Composited Layers** pane opens the elements of the **Layers** tool without changing contexts. You can still access the details of each of the layers and have the **Slow scroll rects** and **Paint**. -The **Composited Layers** pane opens the elements of the **Layers** tool without changing contexts. You may still access the details of each of the layers and have the **Slow scroll rects** and **Paint**. -## Getting in touch with the Microsoft Edge DevTools team + +## Getting in touch with the Microsoft Edge DevTools team -The Microsoft Edge Devtools team is working on the UI and adding more functionality to the 3D View based on your feedback. Send your feedback to help improve the Microsoft Edge DevTools. Choose the **Send Feedback** icon in the DevTools or select `Alt`+`Shift`+`I` on Windows/Linux or `Option`+`Shift`+`I` on macOS and enter any feedback or feature requests you have for the DevTools. +The Microsoft Edge Devtools team is working on the UI and adding more functionality to the 3D View based on your feedback. Send your feedback to help improve the Microsoft Edge DevTools. Select the **Send Feedback** icon in the DevTools or select `Alt`+`Shift`+`I` on Windows/Linux or `Option`+`Shift`+`I` on macOS and enter any feedback or feature requests you have for the DevTools. - -[GithubMicrosoftedgeDevtoolssamples3dview]: https://github.com/MicrosoftEdge/DevToolsSamples/tree/master/3DView "Microsoft Edge DevTools 3D View - MicrosoftEdge/DevToolsSamples | GitHub" + + +[GithubMicrosoftedgeDevtoolssamples3dview]: https://github.com/MicrosoftEdge/DevToolsSamples/tree/master/3DView "Microsoft Edge DevTools 3D View - MicrosoftEdge/DevToolsSamples | GitHub" -[MDNDocumentObjectModel]: https://developer.mozilla.org/docs/Web/API/Document_Object_Model "Document Object Model (DOM) | MDN" -[MDNZIndex]: https://developer.mozilla.org/docs/Web/CSS/z-index "z-index | MDN" +[MDNDocumentObjectModel]: https://developer.mozilla.org/docs/Web/API/Document_Object_Model "Document Object Model (DOM) | MDN" +[MDNZIndex]: https://developer.mozilla.org/docs/Web/CSS/z-index "z-index | MDN" diff --git a/microsoft-edge/devtools-guide-chromium/accessibility/accessibility-tab.md b/microsoft-edge/devtools-guide-chromium/accessibility/accessibility-tab.md index b629d9b999..91cec9d33d 100644 --- a/microsoft-edge/devtools-guide-chromium/accessibility/accessibility-tab.md +++ b/microsoft-edge/devtools-guide-chromium/accessibility/accessibility-tab.md @@ -9,7 +9,7 @@ ms.prod: microsoft-edge keywords: microsoft edge, web development, f12 tools, devtools --- - + limitations under the License. --> # Test accessibility using the Accessibility tab -The **Accessibility** tab is where you view the accessibility tree, ARIA attributes, and computed accessibility properties of DOM nodes. +The **Accessibility** tab is where you view the accessibility tree, ARIA attributes, and computed accessibility properties of DOM nodes. To open the **Accessibility** tab: -1. Select the **Elements** tool. -1. In the **DOM Tree**, select the element which you want to inspect. +1. Select the **Elements** tool. +1. In the **DOM Tree**, select the element which you want to inspect. 1. Select the **Accessibility** tab. You might need to first select the **More tabs** \(![the More tabs button](../media/more-tabs-icon.msft.png)\) button to the right of the **Styles** tab. :::image type="complex" source="../media/accessibility-elements-accessibility.msft.png" alt-text="Inspect the h1 element of the DevTools homepage in the Accessibility tab" lightbox="../media/accessibility-elements-accessibility.msft.png"::: Inspect the `h1` element of the DevTools homepage in the **Accessibility** tab -:::image-end::: +:::image-end::: + ## View the position of an element in the Accessibility Tree The [accessibility tree][MDNAccessibilityTree] is a subset of the DOM tree. The accessibility tree only contains elements from the DOM tree that are relevant and useful for displaying the contents of a page through assistive technologies such as screen readers. -Inspect the position of an element in the accessibility tree from the **Accessibility** tab. +Inspect the position of an element in the accessibility tree from the **Accessibility** tab. :::image type="complex" source="../media/accessibility-elements-accessibility-tree.msft.png" alt-text="The Accessibility Tree section" lightbox="../media/accessibility-elements-accessibility-tree.msft.png"::: - The **Accessibility Tree** section -:::image-end::: + The **Accessibility Tree** section +:::image-end::: -## View the ARIA attributes of an element + +## View the ARIA attributes of an element -ARIA attributes ensure that assistive technologies such as screen readers have all of the information that they need in order to properly represent the contents of a page. +ARIA attributes ensure that assistive technologies such as screen readers have all of the information that they need in order to properly represent the contents of a page. View the ARIA attributes of an element in the **Accessibility** tab. :::image type="complex" source="../media/accessibility-elements-accessibility-aria-attributes.msft.png" alt-text="The ARIA Attributes section" lightbox="../media/accessibility-elements-accessibility-aria-attributes.msft.png"::: - The **ARIA Attributes** section -:::image-end::: + The **ARIA Attributes** section +:::image-end::: -## View the computed accessibility properties of an element + +## View the computed accessibility properties of an element - -Some accessibility properties are dynamically calculated by the browser. These properties are displayed in the **Computed Properties** section of the **Accessibility** tab. +Some accessibility properties are dynamically calculated by the browser. These properties are displayed in the **Computed Properties** section of the **Accessibility** tab. View the computed accessibility properties of an element in the **Accessibility** tab. @@ -70,27 +72,28 @@ View the computed accessibility properties of an element in the **Accessibility* > For computed CSS properties, use the [Computed][DevtoolsCssReferenceViewActuallyAppliedElements] tab. :::image type="complex" source="../media/accessibility-elements-accessibility-computed-properties.msft.png" alt-text="The Computed Properties section of the Accessibility tab" lightbox="../media/accessibility-elements-accessibility-computed-properties.msft.png"::: - The **Computed Properties** section of the **Accessibility** tab -:::image-end::: - + The **Computed Properties** section of the **Accessibility** tab +:::image-end::: -## Getting in touch with the Microsoft Edge DevTools team -[!INCLUDE [contact DevTools team note](../includes/contact-devtools-team-note.md)] + +## Getting in touch with the Microsoft Edge DevTools team +[!INCLUDE [contact DevTools team note](../includes/contact-devtools-team-note.md)] > [!NOTE] -> Portions of this page are modifications based on work created and [shared by Google][GoogleSitePolicies] and used according to terms described in the [Creative Commons Attribution 4.0 International License][CCA4IL]. -> The original page is found [here](https://developers.google.com/web/tools/chrome-devtools/accessibility/reference) and is authored by [Kayce Basques][KayceBasques] \(Technical Writer, Chrome DevTools \& Lighthouse\). +> Portions of this page are modifications based on work created and [shared by Google][GoogleSitePolicies] and used according to terms described in the [Creative Commons Attribution 4.0 International License][CCA4IL]. +> The original page is found [here](https://developers.google.com/web/tools/chrome-devtools/accessibility/reference) and is authored by [Kayce Basques][KayceBasques] \(Technical Writer, Chrome DevTools \& Lighthouse\). -[![Creative Commons License][CCby4Image]][CCA4IL] -This work is licensed under a [Creative Commons Attribution 4.0 International License][CCA4IL]. +[![Creative Commons License][CCby4Image]][CCA4IL] +This work is licensed under a [Creative Commons Attribution 4.0 International License][CCA4IL]. + -[DevtoolsCssReferenceViewActuallyAppliedElements]: ../css/reference.md#view-only-the-css-that-is-actually-applied-to-an-element "View only the CSS that is actually applied to an element - CSS Reference | Microsoft Docs" -[MDNAccessibilityTree]: https://developer.mozilla.org/docs/Glossary/AOM "Accessibility tree (AOM) | MDN" -[GoogleSitePolicies]: https://developers.google.com/terms/site-policies -[CCA4IL]: https://creativecommons.org/licenses/by/4.0 -[KayceBasques]: https://developers.google.com/web/resources/contributors/kaycebasques -[CCby4Image]: https://i.creativecommons.org/l/by/4.0/88x31.png +[DevtoolsCssReferenceViewActuallyAppliedElements]: ../css/reference.md#view-only-the-css-that-is-actually-applied-to-an-element "View only the CSS that is actually applied to an element - CSS Reference | Microsoft Docs" +[MDNAccessibilityTree]: https://developer.mozilla.org/docs/Glossary/AOM "Accessibility tree (AOM) | MDN" +[GoogleSitePolicies]: https://developers.google.com/terms/site-policies +[CCA4IL]: https://creativecommons.org/licenses/by/4.0 +[KayceBasques]: https://developers.google.com/web/resources/contributors/kaycebasques +[CCby4Image]: https://i.creativecommons.org/l/by/4.0/88x31.png diff --git a/microsoft-edge/devtools-guide-chromium/accessibility/accessibility-testing-in-devtools.md b/microsoft-edge/devtools-guide-chromium/accessibility/accessibility-testing-in-devtools.md index b56b2ecbda..56afa93b96 100644 --- a/microsoft-edge/devtools-guide-chromium/accessibility/accessibility-testing-in-devtools.md +++ b/microsoft-edge/devtools-guide-chromium/accessibility/accessibility-testing-in-devtools.md @@ -17,6 +17,7 @@ In this article, we cover some of the features you can use in DevTools to test f :::image-end::: + ## Automated testing by using the Issues tool When you open the demo page in the browser and open DevTools, notice that some issues are automatically detected in the **Issues counter**. Select the **Issues counter** \(![Issues counter](../media/issues-counter-icon.msft.png)\) to open the [Issues tool][DevToolsIssuesTool] to view the issues and more information. @@ -52,7 +53,7 @@ In this case, the HTML has a `label` element that doesn't work. ``` -The use of the `label` element here is wrong, because there's no connection between the `label` element and the `input` element. A valid HTML label would put focus on the search input textbox when you select the **Search** label. +The use of the `label` element here is wrong, because there's no connection between the `label` element and the `input` element. A valid HTML label would put focus on the search input textbox when you select the **Search** label. You can solve this problem by either nesting the `input` element in a `label` element, or adding a `for` attribute that points to an `id` attribute of the `input` element. To view a correct connection, select the **Other** label on the donation form. @@ -102,7 +103,7 @@ By making the browser window narrow and using the arrow keys to scroll the page, You can simulate a narrow viewport by resizing the browser window, but a better way to test the responsiveness of your design is to use the **Device Emulation** tool. Here are some features of the **Device Emulation** tool that help you find accessibility issues of any website: * Without resizing the browser window, resize the page and test whether your [CSS media queries][DevToolsMediaQueries] trigger a change in layout. -* Check for dependencies that use a mouse. By default, device emulation assumes a touch device. This means that any functionality of your product that relies on hover interaction will not work. +* Check for dependencies that use a mouse. By default, device emulation assumes a touch device. This means that any functionality of your product that relies on hover interaction will not work. * Do visual testing by simulating different devices, zoom levels, and pixel ratios. * Test how your product behaves on unreliable connections or when the user is offline. Showing the most important interactions to a user on a slow connection is also an accessibility consideration. @@ -120,15 +121,16 @@ The DOM tree in the **Elements** tool automatically flags issues directly in the These issues that were found by the **Issues** tool are some relatively obvious accessibility problems that can be avoided. Using the **Issues** tool and its guided explanations to fix them sets you on the way towards an accessible product. + ## Limits of automated testing The [Issues tool][DevToolsIssuesTool], [Accessibility Insights][AccessibilityInsights], and [Lighthouse][Lighthouse] are tools that automatically generate an accessibility report for a webpage. Getting an automated report from such tools is only the beginning of your accessibility-testing journey. Accessibility is about human interaction—people with different needs using your products within various technical environments. This testing can't be fully automated, but needs verification by a human navigating the product. In the best scenario, you'd have access to testers with different accessibility needs, and testers using various environments. But you can already do a lot yourself by using the keyboard to navigate and by inspecting different parts of the page. -On the demo page, there are additional issues that automated testing can't detect including: +On the demo page, there are additional issues that automated testing can't detect including: -* Issues that arise after you interact with the page. +* Issues that arise after you interact with the page. * Issues related to changes in display, such as making the window narrow. One of those issues is the donation form. When you use a mouse, you can click the different options to donate money. But when you try to use the keyboard to access the donation form, nothing happens. To solve this issue, you need to use the **Inspect** tool. @@ -138,6 +140,7 @@ One of those issues is the donation form. When you use a mouse, you can click t :::image-end::: + ## Using the Inspect tool to detect accessibility issues Use the **Inspect** tool to detect accessibility issues by hovering over parts of the webpage. The **Inspect** \(![Inspect](../media/inspect-icon.msft.png)\) tool is in the top-left corner of DevTools. Turn on the Inspect tool by selecting the **Inspect** tool button. @@ -206,6 +209,7 @@ For detailed walkthrough steps, navigate to [Use the Inspect tool to hover over + ## Verify keyboard support by using the Tab and Enter keys Not all people use pointer or touch devices, and some people may have low vision. To cater for these scenarios, ensure that UIs work with keyboards. @@ -244,17 +248,18 @@ We found some issues here to fix: * The sidebar navigation menu doesn't show users where the `Tab` focus is, when using keyboards to move around on the page. * On the donation form, the **50, 100, ** and **200** buttons and form submit functionality doesn't work when using the keyboard. -* The keyboard tab order is incorrect. The `Tab` key navigates through all the **More** links on the page before the sidebar navigation menu. This `Tab` order isn't helpful because the sidebar navigation is intended to take you to the different sections of that page. +* The keyboard tab order is incorrect. The `Tab` key navigates through all the **More** links on the page before the sidebar navigation menu. This `Tab` order isn't helpful because the sidebar navigation is intended to take you to the different sections of that page. Let's analyze these problems using DevTools. + ## Analyze keyboard accessibility issues using DevTools ### Analyzing the lack of indication of keyboard focus in the sidebar menu -To find out why the sidebar navigation isn't optimized as expected for use with keyboards, start by using the **Inspect** tool to highlight a link in the sidebar navigation menu, and then drill down in the DOM tree to the `a` element. +To find out why the sidebar navigation isn't optimized as expected for use with keyboards, start by using the **Inspect** tool to highlight a link in the sidebar navigation menu, and then drill down in the DOM tree to the `a` element. :::image type="complex" source="../media/a11y-testing-menu-link.msft.png" alt-text="Inspecting the source code and the applied styles of a link in the sidebar navigation menu" lightbox="../media/a11y-testing-menu-link.msft.png"::: Inspecting the source code and the applied styles of a link in the sidebar navigation menu @@ -266,7 +271,7 @@ In the **Styles** tab, you can see the CSS that's applied to the link, and if yo The styles that are applied to the link, shown in the Sources tool :::image-end::: -In the above example, the styles of the page include a `hover` state on the menu item when you use a mouse, but there's no `focus` state in the CSS for keyboard users. +In the above example, the styles of the page include a `hover` state on the menu item when you use a mouse, but there's no `focus` state in the CSS for keyboard users. Also, in this example, the links use `outline: none`. This style is used to remove the outline that's automatically added by browsers to elements when they have focus and keyboards are used. To avoid this problem, don't use `outline: none`. @@ -336,7 +341,7 @@ For detailed walkthrough steps, navigate to [Check the Accessibility Tree for ke ### Analyzing the order of keyboard access to sections of the page -Another issue is the unclear tab order on the page. Keyboard users reach the sidebar navigation menu only after tabbing through all the **More** links throughout the entire page. In this example, the sidebar navigation menu is intended to be a shortcut to different sections of that page. This tab order leads to a poor user experience. +Another issue is the unclear tab order on the page. Keyboard users reach the sidebar navigation menu only after tabbing through all the **More** links throughout the entire page. In this example, the sidebar navigation menu is intended to be a shortcut to different sections of that page. This tab order leads to a poor user experience. The reason for the confusing `Tab` order is that it is determined by the source order of the document. The tab order can also be modified by using the `tabindex` attribute on an element which takes that element out of the default source order. @@ -344,7 +349,7 @@ In the source code of the document, the sidebar navigation menu appears after th The source order of a document is important for assistive technology, and can be different than the order in which elements appear on the rendered page. Using CSS, you can re-order page elements in a visual way, but that doesn't mean that assistive technology such as screen readers would represent page elements in the same order as that CSS. -You can test the order of page elements by using the **Source Order Viewer** in the **Accessibility** tab. Scroll down all the way and select the **Show Source Order** checkbox. Now, when you navigate the DOM tree in the **Elements** tool, such as selecting the `header` element, numeric overlays are displayed on sections of the rendered page which represent the source order. +You can test the order of page elements by using the **Source Order Viewer** in the **Accessibility** tab. Scroll down all the way and select the **Show Source Order** checkbox. Now, when you navigate the DOM tree in the **Elements** tool, such as selecting the `header` element, numeric overlays are displayed on sections of the rendered page which represent the source order. :::image type="complex" source="../media/a11y-testing-source-order-viewer.msft.png" alt-text="Turning on the Source Order Viewer shows the order of the elements in the source code as numeric overlays on the page" lightbox="../media/a11y-testing-source-order-viewer.msft.png"::: Turning on the **Source Order Viewer** shows the order of the elements in the source code as numeric overlays on the page @@ -353,6 +358,7 @@ You can test the order of page elements by using the **Source Order Viewer** in For detailed walkthrough steps, navigate to [Test keyboard support using the Source Order Viewer](test-tab-key-source-order-viewer.md). + ## Testing contrast of text colors in various states The **Inspect** tool reports accessibility issues for one state at a time. First, we'll describe the limitation of using the Inspect tool to view only the static state of a page element. Then we'll explain how to inspect other states of a page element, by selecting **\:hov (Toggle Element State)** on the **Styles** tab. @@ -415,6 +421,7 @@ After the simulated state is applied, you can use the **Inspect** tool again to State simulation is also a good way to check whether you considered different user needs. For the sidebar navigation menu, you can detect that the `:focus` state has a contrast issue. + ## Use the Rendering tool to test accessibility for visual impairment ### Check contrast issues with dark theme and light themes @@ -488,6 +495,7 @@ This CSS media query conditionally runs the "smooth scrolling" animation. But t For detailed walkthrough steps, navigate to [Verify that the page is usable with UI animation turned off](test-reduced-ui-motion.md). + ## What to do next? We've covered quite a few tools you can use to make sure that you catch accessibility problems in your products. Such tools range from automated checks and manual detail checks to simulation of different states and environments. These tools are summarized in [Accessibility-testing features in DevTools](reference.md). Automated tools can't find all the problems in a product, because many of the accessibility barriers show up only during interactive use. @@ -508,11 +516,13 @@ Another way to find out what to do to improve your web product is to use the [we We're constantly working on new accessibility features for DevTools. If there is anything you are missing, send us a message and tell us what we can do. + ## Getting in touch with the Microsoft Edge DevTools team [!INCLUDE [contact DevTools team note](../includes/contact-devtools-team-note.md)] + [DevToolsMediaQueries]: ../device-mode/index.md#show-media-queries "Show media queries - Emulate mobile devices in Microsoft Edge DevTools | Microsoft Docs" [DevToolsDeviceModeIndex]: ../device-mode/index.md "Emulate mobile devices in Microsoft Edge DevTools | Microsoft Docs" @@ -523,7 +533,7 @@ We're constantly working on new accessibility features for DevTools. If there i [DevToolsVisionDeficiencies]: ./emulate-vision-deficiencies.md "Emulate vision deficiencies | Microsoft Docs" [DevToolsAccessibilityTestIssuesToolViewAccSection]: test-issues-tool.md#view-the-accessibility-section-of-the-issues-tool "View the Accessibility section of the Issues tool - Automatically test a webpage for accessibility issues | Microsoft Docs" -[DevtoolsAccessibilityTestIssuesToolCheckFieldsLabels]: test-issues-tool.md#verify-that-input-fields-have-labels "Verify that input fields have labels - Automatically test a webpage for accessibility issues | Microsoft Docs" +[DevtoolsAccessibilityTestIssuesToolCheckFieldsLabels]: test-issues-tool.md#verify-that-input-fields-have-labels "Verify that input fields have labels - Automatically test a webpage for accessibility issues | Microsoft Docs" [DevtoolsAccessibilityTestIssuesToolCheckAltText]: test-issues-tool.md#verify-that-images-have-alt-text "Verify that images have alt text - Automatically test a webpage for accessibility issues | Microsoft Docs " [DevtoolsAccessibilityTestIssuesToolCheckContrast]: test-issues-tool.md#verify-that-text-colors-have-enough-contrast "Verify that text colors have enough contrast - Automatically test a webpage for accessibility issues | Microsoft Docs" diff --git a/microsoft-edge/devtools-guide-chromium/accessibility/color-picker.md b/microsoft-edge/devtools-guide-chromium/accessibility/color-picker.md index 13de3eac61..6e961d656b 100644 --- a/microsoft-edge/devtools-guide-chromium/accessibility/color-picker.md +++ b/microsoft-edge/devtools-guide-chromium/accessibility/color-picker.md @@ -9,7 +9,7 @@ ms.prod: microsoft-edge keywords: microsoft edge, web development, f12 tools, devtools --- - + limitations under the License. --> # Test text-color contrast using the Color Picker -People with low vision may not see areas that are very bright or very dark. Everything tends to appear at about the same level of brightness, which makes it hard to distinguish outlines and edges. +People with low vision might not see areas that are very bright or very dark. Everything tends to appear at about the same level of brightness, which makes it hard to distinguish outlines and edges. -Contrast ratio measures the difference in brightness between the foreground and background of text. If your text has a low contrast ratio, then people with low vision may experience your site as a blank screen. +Contrast ratio measures the difference in brightness between the foreground and background of text. If your text has a low contrast ratio, then people with low vision might experience your site as a blank screen. In DevTools, one way to view the contrast ratio of a text element is to use the Color Picker, from the **Styles** tab. The Color Picker helps you verify that your text meets recommended contrast ratio levels. **To check the text-color contrast using the Color Picker:** -1. In DevTools, select the **Elements** tool. -1. In the **DOM Tree**, select the text element that you want to inspect. - +1. In DevTools, select the **Elements** tool. +1. In the **DOM Tree**, select the text element that you want to inspect. + :::image type="complex" source="../media/accessibility-elements-paragraph-highlight.msft.png" alt-text="Inspect a paragraph in the DOM Tree" lightbox="../media/accessibility-elements-paragraph-highlight.msft.png"::: - Inspect a paragraph in the **DOM Tree** - :::image-end::: - + Inspect a paragraph in the **DOM Tree** + :::image-end::: + 1. On the **Styles** tab, locate the **color** property that's applied to the element, and then select the color square next to the **color** property. - + :::image type="complex" source="../media/accessibility-elements-styles-paragraph-highlight-color.msft.png" alt-text="The color property of the element" lightbox="../media/accessibility-elements-styles-paragraph-highlight-color.msft.png"::: - The `color` property of the element - :::image-end::: - -1. Examine the **Contrast Ratio** section of the Color Picker. One check mark means that the element meets the [minimum recommendation][W3CContrastMinimum]. Two check marks means that it meets the [enhanced recommendation][W3CContrastEnhanced]. - + The `color` property of the element + :::image-end::: + +1. Examine the **Contrast Ratio** section of the Color Picker. One check mark means that the element meets the [minimum recommendation][W3CContrastMinimum]. Two check marks means that it meets the [enhanced recommendation][W3CContrastEnhanced]. + :::image type="complex" source="../media/accessibility-elements-styles-paragraph-highlight-color-picker.msft.png" alt-text="The Contrast Ratio section of the Color Picker shows 2 check marks and a value of 13.97" lightbox="../media/accessibility-elements-styles-paragraph-highlight-color-picker.msft.png"::: - The **Contrast Ratio** section of the Color Picker shows 2 check marks and a value of `13.97` - :::image-end::: - -1. For more information, select the **Contrast ratio** section to expand it. In the visual picker at the top of the Color Picker, two lines appear, running across the visual picker, along with a circle for the current color. If the current color meets recommendations, then anything on the same side of the line also meets recommendations. If the current color does not meet recommendations, then anything on the same side also does not meet recommendations. + The **Contrast Ratio** section of the Color Picker shows 2 check marks and a value of `13.97` + :::image-end::: + +1. For more information, select the **Contrast ratio** section to expand it. In the visual picker at the top of the Color Picker, two lines appear, running across the visual picker, along with a circle for the current color. If the current color meets recommendations, then anything on the same side of the line also meets recommendations. If the current color does not meet recommendations, then anything on the same side also does not meet recommendations. :::image type="complex" source="../media/accessibility-elements-styles-paragraph-highlight-color-picker-contrast-ratio-details.msft.png" alt-text="The Contrast Ratio Line in the visual picker" lightbox="../media/accessibility-elements-styles-paragraph-highlight-color-picker-contrast-ratio-details.msft.png"::: - The **Contrast Ratio** Line in the visual picker - :::image-end::: + The **Contrast Ratio** Line in the visual picker + :::image-end::: 1. To try different colors, select within the visual picker, or select a color swatch at the bottom of the Color Picker. - -## Getting in touch with the Microsoft Edge DevTools team -[!INCLUDE [contact DevTools team note](../includes/contact-devtools-team-note.md)] + +## Getting in touch with the Microsoft Edge DevTools team +[!INCLUDE [contact DevTools team note](../includes/contact-devtools-team-note.md)] > [!NOTE] -> Portions of this page are modifications based on work created and [shared by Google][GoogleSitePolicies] and used according to terms described in the [Creative Commons Attribution 4.0 International License][CCA4IL]. -> The original page is found [here](https://developers.google.com/web/tools/chrome-devtools/accessibility/reference) and is authored by [Kayce Basques][KayceBasques] \(Technical Writer, Chrome DevTools \& Lighthouse\). +> Portions of this page are modifications based on work created and [shared by Google][GoogleSitePolicies] and used according to terms described in the [Creative Commons Attribution 4.0 International License][CCA4IL]. +> The original page is found [here](https://developers.google.com/web/tools/chrome-devtools/accessibility/reference) and is authored by [Kayce Basques][KayceBasques] \(Technical Writer, Chrome DevTools \& Lighthouse\). -[![Creative Commons License][CCby4Image]][CCA4IL] -This work is licensed under a [Creative Commons Attribution 4.0 International License][CCA4IL]. +[![Creative Commons License][CCby4Image]][CCA4IL] +This work is licensed under a [Creative Commons Attribution 4.0 International License][CCA4IL]. - -[W3CContrastEnhanced]: https://www.w3.org/WAI/WCAG21/quickref/#contrast-enhanced "Contrast (Enhanced) Level AAA | W3C" -[W3CContrastMinimum]: https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum "Contrast (Minimum) Level AA | W3C" -[CCA4IL]: https://creativecommons.org/licenses/by/4.0 -[CCby4Image]: https://i.creativecommons.org/l/by/4.0/88x31.png -[GoogleSitePolicies]: https://developers.google.com/terms/site-policies -[KayceBasques]: https://developers.google.com/web/resources/contributors/kaycebasques + + +[W3CContrastEnhanced]: https://www.w3.org/WAI/WCAG21/quickref/#contrast-enhanced "Contrast (Enhanced) Level AAA | W3C" +[W3CContrastMinimum]: https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum "Contrast (Minimum) Level AA | W3C" +[CCA4IL]: https://creativecommons.org/licenses/by/4.0 +[CCby4Image]: https://i.creativecommons.org/l/by/4.0/88x31.png +[GoogleSitePolicies]: https://developers.google.com/terms/site-policies +[KayceBasques]: https://developers.google.com/web/resources/contributors/kaycebasques diff --git a/microsoft-edge/devtools-guide-chromium/accessibility/emulate-vision-deficiencies.md b/microsoft-edge/devtools-guide-chromium/accessibility/emulate-vision-deficiencies.md index 6a14dd54df..c4dcf6392f 100644 --- a/microsoft-edge/devtools-guide-chromium/accessibility/emulate-vision-deficiencies.md +++ b/microsoft-edge/devtools-guide-chromium/accessibility/emulate-vision-deficiencies.md @@ -8,90 +8,94 @@ ms.topic: article ms.prod: microsoft-edge keywords: microsoft edge, web development, f12 tools, devtools --- -# Emulate vision deficiencies +# Emulate vision deficiencies -To better meet the needs of your users with [color vision deficiency][ColorblindawarenessMain] \(color blindness\) or blurred vision, [Microsoft Edge DevTools][DevtoolsIndex] allow you to simulate blurred vision and specific color vision deficiencies. The **Emulate vision deficiencies** tool simulates the following categories. +To better meet the needs of your users with [color vision deficiency][ColorblindawarenessMain] \(color blindness\) or blurred vision, [Microsoft Edge DevTools][DevtoolsIndex] allow you to simulate blurred vision and specific color vision deficiencies. The **Emulate vision deficiencies** tool simulates the following categories. -| Color vision deficiency | Details | -|:--- |:--- | -| Blurred vision | The user has difficulty focusing on fine details. | -| Protanopia | The user is unable to perceive any red light. | -| Deuteranopia | The user is unable to perceive any green light. | -| Tritanopia | The user is unable to perceive any blue light. | -| Achromatopsia | The user is unable to perceive any color, which reduces all color to a shade of grey. | +| Color vision deficiency | Details | +|:--- |:--- | +| Blurred vision | The user has difficulty focusing on fine details. | +| Protanopia | The user is unable to perceive any red light. | +| Deuteranopia | The user is unable to perceive any green light. | +| Tritanopia | The user is unable to perceive any blue light. | +| Achromatopsia | The user is unable to perceive any color, which reduces all color to a shade of grey. | -## Navigate to the Rendering tool + +## Open the Rendering tool -To simulate a vision deficiency being applied for your web product, open the [Rendering Tools][DevtoolsRenderingToolsIndex]. +To simulate a vision deficiency being applied for your web product, open the [Rendering Tools][DevtoolsRenderingToolsIndex]. + +1. To open the Rendering tool, select the `...` menu item in the toolbar. +1. Select **More tools**. +1. Select **Rendering**. -1. To open the Rendering tool, choose the `...` menu item in the toolbar -1. Choose **More tools** -1. Choose **Rendering** - :::image type="complex" source="../media/getting-to-the-rendering-tools.msft.png" alt-text="Opening the Rendering tool" lightbox="../media/getting-to-the-rendering-tools.msft.png"::: Opening the **Rendering** tool - :::image-end::: - -The **Rendering** menu appears in the drawer. + :::image-end::: + +The **Rendering** menu appears in the drawer. + +1. Scroll down to the `Emulate vision deficiencies` menu item and select the drop-down menu to display the options. -1. Scroll down to the `Emulate vision deficiencies` menu item and choose the drop-down menu to display the options. - :::image type="complex" source="../media/accessibility-emulate-vision-menu.msft.png" alt-text="The Emulate Vision Deficiencies menu on the Rendering tool" lightbox="../media/accessibility-emulate-vision-menu.msft.png"::: The **Emulate vision deficiencies** menu on the **Rendering** tool - :::image-end::: - -1. Choose an option. - + :::image-end::: + +1. Select an option. + :::image type="complex" source="../media/accessibility-emulate-vision-menu-options.msft.png" alt-text="The Emulate Vision Deficiencies menu options" lightbox="../media/accessibility-emulate-vision-menu-options.msft.png"::: - The **Emulate vision deficiencies** menu options - :::image-end::: - -1. The main windows displays the simulation of your chosen option applied to the current page. - + The **Emulate vision deficiencies** menu options + :::image-end::: + +1. The main window displays the simulation of your chosen option applied to the current page. + :::row::: :::column span=""::: :::image type="complex" source="../media/accessibility-blurred-vision-emulation.msft.png" alt-text="Display using Blurred Vision simulation" lightbox="../media/accessibility-blurred-vision-emulation.msft.png"::: - Display using **Blurred vision** simulation - :::image-end::: + Display using **Blurred vision** simulation + :::image-end::: :::column-end::: :::column span=""::: :::image type="complex" source="../media/accessibility-achromatopsia-emulation.msft.png" alt-text="Display using Achromatopsia simulation" lightbox="../media/accessibility-achromatopsia-emulation.msft.png"::: - Display using **Achromatopsia** simulation - :::image-end::: + Display using **Achromatopsia** simulation + :::image-end::: :::column-end::: :::row-end::: - -## Use the Command Menu -You may also use **Command Menu** to access the different simulations. + +## Use the Command Menu + +As an alternative approach, you can use **Command Menu** to access the different simulations. + +1. Select `Ctrl`+`Shift`+`P` \(Windows/Linux\) or `Command`+`Shift`+`P` \(macOS\) to open the **Command Menu**. -1. Select `Ctrl`+`Shift`+`P` \(Windows/Linux\) or `Command`+`Shift`+`P` \(macOS\) to open the **Command Menu**. - :::image type="complex" source="../media/css-console-command-menu-rendering.msft.png" alt-text="The Command Menu" lightbox="../media/css-console-command-menu-rendering.msft.png"::: - The **Command Menu** - :::image-end::: - -1. Type `emulate`, choose what you want to simulate and choose `Enter`. - + The **Command Menu** + :::image-end::: + +1. Type `emulate`, choose what you want to simulate and choose `Enter`. + :::image type="complex" source="../media/accessibility-emulation-command-menu-results.msft.png" alt-text="The different simulation options available in the Command Menu" lightbox="../media/accessibility-emulation-command-menu-results.msft.png"::: - The different simulation options available in the **Command Menu** - :::image-end::: - + The different simulation options available in the **Command Menu** + :::image-end::: + > [!IMPORTANT] -> The **Emulate vision deficiencies** tools simulate approximations of how a person with each deficiency may see your product. Each person is different, therefore vision deficiencies vary in severity from person to person. To better meet the needs of your users, avoid any color combination that may be an issue. The **Emulate vision deficiencies** tools are not a full accessibility assessment of your product. Instead, the **Emulate vision deficiencies** tools should give you a good first step to avoid problems. +> The **Emulate vision deficiencies** tools simulate approximations of how a person with each deficiency may see your product. Each person is different, therefore vision deficiencies vary in severity from person to person. To better meet the needs of your users, avoid any color combination that may be an issue. The **Emulate vision deficiencies** tools are not a full accessibility assessment of your product. Instead, the **Emulate vision deficiencies** tools should give you a good first step to avoid problems. + ## See also * [Verify that the page is usable with blurred vision](test-blurred-vision.md) - -[DevToolsIndex]: ../index.md "Microsoft Edge (Chromium) Developer Tools | Microsoft Docs" -[DevtoolsRenderingToolsIndex]: ../rendering-tools/index.md "Analyze runtime performance | Microsoft Docs" + + +[DevToolsIndex]: ../index.md "Microsoft Edge (Chromium) Developer Tools | Microsoft Docs" +[DevtoolsRenderingToolsIndex]: ../rendering-tools/index.md "Analyze runtime performance | Microsoft Docs" -[ColorblindawarenessMain]: https://www.colourblindawareness.org "The Colour Blind Awareness organisation" +[ColorblindawarenessMain]: https://www.colourblindawareness.org "The Colour Blind Awareness organisation" -[AmfcbMain]: https://www.amfcb.org "The American Foundation for the Color Blind (AFCB)" +[AmfcbMain]: https://www.amfcb.org "The American Foundation for the Color Blind (AFCB)" diff --git a/microsoft-edge/devtools-guide-chromium/accessibility/focus.md b/microsoft-edge/devtools-guide-chromium/accessibility/focus.md index c24d799e66..b7d741ef1a 100644 --- a/microsoft-edge/devtools-guide-chromium/accessibility/focus.md +++ b/microsoft-edge/devtools-guide-chromium/accessibility/focus.md @@ -8,7 +8,7 @@ ms.topic: article ms.prod: microsoft-edge keywords: microsoft edge, web development, f12 tools, devtools --- - -# Track which element has focus + limitations under the License. --> +# Track which element has focus -Suppose that you are testing the keyboard navigation accessibility of a page. When navigating the page with the `Tab` key, the focus ring sometimes disappears because the element that has focus is hidden. +Suppose that you are testing the keyboard navigation accessibility of a page. When navigating the page with the `Tab` key, the focus ring sometimes disappears because the element that has focus is hidden. To track the focused element in DevTools: -1. Open the **Console**. -1. Choose **Create live expression** \(![Create live expression](../media/create-live-expression-icon.msft.png)\). - +1. Open the **Console**. +1. Choose **Create live expression** \(![Create live expression](../media/create-live-expression-icon.msft.png)\). + :::image type="complex" source="../media/accessibility-console-create-live-expression-empty.msft.png" alt-text="Create a Live Expression" lightbox="../media/accessibility-console-create-live-expression-empty.msft.png"::: - Create a Live Expression - :::image-end::: - -1. Type `document.activeElement`. + Create a Live Expression + :::image-end::: + +1. Type `document.activeElement`. 1. To save the expression, select outside of the live expression. - -The value displayed below `document.activeElement` is the result of the expression. -Since that expression always represents the focused element, you now have a way to always keep track of which element has focus. +The value displayed below `document.activeElement` is the result of the expression. + +Since that expression always represents the focused element, you now have a way to always keep track of which element has focus. -* Hover on the result to highlight the focused element in the viewport. -* Hover on the result, open the contextual menu \(right-click\), and choose **Reveal in Elements panel** to show the element in the DOM Tree on the **Elements** tool. -* Hover on the result, open the contextual menu \(right-click\), and choose **Store as global variable** to create a variable reference to the node that you are able to use in the **Console**. +* Hover on the result to highlight the focused element in the viewport. +* Hover on the result, open the contextual menu \(right-click\), and choose **Reveal in Elements panel** to show the element in the DOM Tree on the **Elements** tool. +* Hover on the result, open the contextual menu \(right-click\), and choose **Store as global variable** to create a variable reference to the node that you are able to use in the **Console**. + ## See also * [Analyze the lack of indication of keyboard focus in a sidebar menu](test-analyze-no-focus-indicator.md) + ## Getting in touch with the Microsoft Edge DevTools team -[!INCLUDE [contact DevTools team note](../includes/contact-devtools-team-note.md)] +[!INCLUDE [contact DevTools team note](../includes/contact-devtools-team-note.md)] - + + > [!NOTE] -> Portions of this page are modifications based on work created and [shared by Google][GoogleSitePolicies] and used according to terms described in the [Creative Commons Attribution 4.0 International License][CCA4IL]. -> The original page is found [here](https://developers.google.com/web/tools/chrome-devtools/accessibility/focus) and is authored by [Kayce Basques][KayceBasques] \(Technical Writer, Chrome DevTools \& Lighthouse\). +> Portions of this page are modifications based on work created and [shared by Google][GoogleSitePolicies] and used according to terms described in the [Creative Commons Attribution 4.0 International License][CCA4IL]. +> The original page is found [here](https://developers.google.com/web/tools/chrome-devtools/accessibility/focus) and is authored by [Kayce Basques][KayceBasques] \(Technical Writer, Chrome DevTools \& Lighthouse\). -[![Creative Commons License][CCby4Image]][CCA4IL] -This work is licensed under a [Creative Commons Attribution 4.0 International License][CCA4IL]. +[![Creative Commons License][CCby4Image]][CCA4IL] +This work is licensed under a [Creative Commons Attribution 4.0 International License][CCA4IL]. -[CCA4IL]: https://creativecommons.org/licenses/by/4.0 -[CCby4Image]: https://i.creativecommons.org/l/by/4.0/88x31.png -[GoogleSitePolicies]: https://developers.google.com/terms/site-policies -[KayceBasques]: https://developers.google.com/web/resources/contributors#kayce-basques +[CCA4IL]: https://creativecommons.org/licenses/by/4.0 +[CCby4Image]: https://i.creativecommons.org/l/by/4.0/88x31.png +[GoogleSitePolicies]: https://developers.google.com/terms/site-policies +[KayceBasques]: https://developers.google.com/web/resources/contributors#kayce-basques diff --git a/microsoft-edge/devtools-guide-chromium/accessibility/lighthouse.md b/microsoft-edge/devtools-guide-chromium/accessibility/lighthouse.md index 3edbd888b8..ce570a2cdb 100644 --- a/microsoft-edge/devtools-guide-chromium/accessibility/lighthouse.md +++ b/microsoft-edge/devtools-guide-chromium/accessibility/lighthouse.md @@ -9,7 +9,7 @@ ms.prod: microsoft-edge keywords: microsoft edge, web development, f12 tools, devtools --- - - + limitations under the License. --> # Test accessibility using Lighthouse You can use Lighthouse from within DevTools to audit the accessibility of a page and generate a report. You can use the Lighthouse tool to determine: -* Whether a page is properly marked up for screen readers. -* Whether the text elements on a page have sufficient contrast ratios using the Color Picker. For more information, navigate to [Test text-color contrast using the Color Picker](color-picker.md). +* Whether a page is properly marked up for screen readers. +* Whether the text elements on a page have sufficient contrast ratios using the Color Picker. For more information, navigate to [Test text-color contrast using the Color Picker](color-picker.md). > [!NOTE] -> The **Lighthouse** tool provides links to content hosted on third-party websites. Microsoft is not responsible for and has no control over the content of these sites and any data that may be collected. +> The **Lighthouse** tool provides links to content hosted on third-party websites. Microsoft is not responsible for and has no control over the content of these sites and any data that may be collected. To audit a page using the Lighthouse tool, perform the following steps. 1. Navigate to the URL that you want to audit. 1. In DevTools, select the **Lighthouse** tool. Configuration options are displayed. - + :::image type="complex" source="../media/accessibility-lighthouse.msft.png" alt-text="Lighthouse configuration options" lightbox="../media/accessibility-lighthouse.msft.png"::: Lighthouse configuration options - :::image-end::: - + :::image-end::: + 1. For **Device**, select **Mobile** if you want to simulate a mobile device. This option changes your user agent string and resizes the viewport. This option can affect the audit results. 1. In the **Categories** section, select **Accessibility**. -1. Select **Generate report**. After 10 to 30 seconds, DevTools displays a report. The report gives tips on how to improve the accessibility of the page. - +1. Select **Generate report**. After 10 to 30 seconds, DevTools displays a report. The report gives tips on how to improve the accessibility of the page. + :::image type="complex" source="../media/accessibility-lighthouse-result.msft.png" alt-text="A Lighthouse report for the Accessibility category" lightbox="../media/accessibility-lighthouse-result.msft.png"::: A Lighthouse report for the **Accessibility** category - :::image-end::: - -1. Select an item in the report to learn more about it. - + :::image-end::: + +1. Select an item in the report to learn more about it. + :::image type="complex" source="../media/accessibility-lighthouse-result-issue-expanded.msft.png" alt-text="An expanded issue in a Lighthouse report" lightbox="../media/accessibility-lighthouse-result-issue-expanded.msft.png"::: An expanded issue in a Lighthouse report - :::image-end::: - + :::image-end::: + 1. Select the **Learn more** link to view the documentation of the issue. - + :::image type="complex" source="../media/accessibility-web-dev-accessibility-audits-learn-more.msft.png" alt-text="View the documentation of an issue" lightbox="../media/accessibility-web-dev-accessibility-audits-learn-more.msft.png"::: View the documentation of an issue - :::image-end::: - -1. To return to the configuration options, in DevTools, select **Perform an audit** (`+`). + :::image-end::: +1. To return to the configuration options, in DevTools, select **Perform an audit** (`+`). -## Getting in touch with the Microsoft Edge DevTools team -[!INCLUDE [contact DevTools team note](../includes/contact-devtools-team-note.md)] + +## Getting in touch with the Microsoft Edge DevTools team +[!INCLUDE [contact DevTools team note](../includes/contact-devtools-team-note.md)] > [!NOTE] -> Portions of this page are modifications based on work created and [shared by Google][GoogleSitePolicies] and used according to terms described in the [Creative Commons Attribution 4.0 International License][CCA4IL]. -> The original page is found [here](https://developers.google.com/web/tools/chrome-devtools/accessibility/reference) and is authored by [Kayce Basques][KayceBasques] \(Technical Writer, Chrome DevTools \& Lighthouse\). +> Portions of this page are modifications based on work created and [shared by Google][GoogleSitePolicies] and used according to terms described in the [Creative Commons Attribution 4.0 International License][CCA4IL]. +> The original page is found [here](https://developers.google.com/web/tools/chrome-devtools/accessibility/reference) and is authored by [Kayce Basques][KayceBasques] \(Technical Writer, Chrome DevTools \& Lighthouse\). -[![Creative Commons License][CCby4Image]][CCA4IL] -This work is licensed under a [Creative Commons Attribution 4.0 International License][CCA4IL]. +[![Creative Commons License][CCby4Image]][CCA4IL] +This work is licensed under a [Creative Commons Attribution 4.0 International License][CCA4IL]. - -[ChromeWebStoreAxe]: https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd "axe - Web Accessibility Testing - Chrome Web Store" -[CCA4IL]: https://creativecommons.org/licenses/by/4.0 -[CCby4Image]: https://i.creativecommons.org/l/by/4.0/88x31.png -[GoogleSitePolicies]: https://developers.google.com/terms/site-policies -[KayceBasques]: https://developers.google.com/web/resources/contributors/kaycebasques + + +[ChromeWebStoreAxe]: https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd "axe - Web Accessibility Testing - Chrome Web Store" +[CCA4IL]: https://creativecommons.org/licenses/by/4.0 +[CCby4Image]: https://i.creativecommons.org/l/by/4.0/88x31.png +[GoogleSitePolicies]: https://developers.google.com/terms/site-policies +[KayceBasques]: https://developers.google.com/web/resources/contributors/kaycebasques diff --git a/microsoft-edge/devtools-guide-chromium/accessibility/navigation.md b/microsoft-edge/devtools-guide-chromium/accessibility/navigation.md index 610d622b3e..e534c40920 100644 --- a/microsoft-edge/devtools-guide-chromium/accessibility/navigation.md +++ b/microsoft-edge/devtools-guide-chromium/accessibility/navigation.md @@ -8,7 +8,7 @@ ms.topic: article ms.prod: microsoft-edge keywords: microsoft edge, web development, f12 tools, devtools --- - -# Navigate Microsoft Edge DevTools with assistive technology +# Navigate Microsoft Edge DevTools with assistive technology -This article helps users who primarily rely on assistive technology such as screen readers use [Microsoft Edge DevTools][MicrosoftEdgeDevtoolsMain]. DevTools is a suite of web developer tools built into the Microsoft Edge browser. +This article helps users who primarily rely on assistive technology such as screen readers use [Microsoft Edge DevTools][MicrosoftEdgeDevtoolsMain]. DevTools is a suite of web developer tools built into the Microsoft Edge browser. For DevTools features related to improving the accessibility of a web page, see [Accessibility-testing features in DevTools][DevtoolsAccessibilityReference] and [Overview of accessibility testing using DevTools](accessibility-testing-in-devtools.md). -The accessibility of DevTools is a work-in-progress. Some tools and tabs work better with assistive technology than others. This guide walks you through the tools and tabs which are the most accessible, and highlights specific issues you may encounter along the way. - -## Overview +This guide walks you through the tools and tabs which are the most accessible, and highlights issues you may encounter. DevTools is divided into a series of tools. (Within the **Command Menu**, tools are referred to as _panels_.) Tools are organized into an [ARIA tablist][W3CWaiAriaTablist] on the main toolbar and on the drawer toolbar. The following are examples of tools: - -* The **Elements** tool lets you [view and change DOM nodes][DevtoolsDomIndexNavigateDomTreeKeyboard] or [CSS][DevtoolsCssIndex]. +* The **Elements** tool lets you [view and change DOM nodes][DevtoolsDomIndexNavigateDomTreeKeyboard] or [CSS][DevtoolsCssIndex]. * The **Console** tool lets you read JavaScript logs and live-edit objects. For more information, navigate to [Use the Console][DevtoolsConsoleIndex]. Within each tool, there are one or more sets of tabs. For example, the **Elements** tool contains a set of tabs including **Styles**, **Event Listeners**, and **Accessibility**. -## Keyboard shortcuts + + +## Keyboard shortcuts The [DevTools Keyboard Shortcuts reference][DevtoolsShortcuts] is a helpful cheat sheet. Be sure to bookmark it and refer back to it as you explore the different tools. -## Open DevTools -To get started, navigate to [Open Microsoft Edge DevTools][DevtoolsOpen]. There are a number of ways to open DevTools, either through keyboard shortcuts or menu items. + +## Open DevTools +To get started, navigate to [Open Microsoft Edge DevTools][DevtoolsOpen]. There are a number of ways to open DevTools, either through keyboard shortcuts or menu items. + + + ## Navigate between tools -### Navigate by keyboard +You can move among the tools by using the keyboard navigation keys or by using the Command Menu. + +### Navigate by keyboard * With DevTools open, select `Control`+`]` \(Windows, Linux\) or `Command`+`]` \(macOS\) to move focus to the next tool on the main toolbar. * Select `Control`+`[` \(Windows, Linux\) or `Command`+`[` \(macOS\) to move focus to the previous tool on the main toolbar. * Select `Tab` or `Shift`+`Tab` repeatedly until focus moves to the tabs of the main toolbar or drawer toolbar, and then use the arrow keys to move among the tools. -**Known issues** +**Known issues** -* Some tools, such as the **Console** and **Performance** tools, may move focus into the tool's content area as soon as the tool is selected. This may make navigating by arrow keys difficult. +* Some tools, such as the **Console** and **Performance** tools, may move focus into the tool's content area as soon as the tool is selected. This may make navigating by arrow keys difficult. * The name of the selected tool is announced, but only after announcing the focused content in the tool. This sequence of announcements may make it easy to miss the name of the tool. -### Navigate by Command Menu +### Navigate by Command Menu To select a specific tool, use the [Command Menu][DevtoolsCommandMenuIndex]. In the Command Menu, a tool is called a _panel_. -1. With DevTools open, select `Control`+`Shift`+`P` \(Windows, Linux\) or `Command`+`Shift`+`P` \(macOS\) to open the **Command Menu**. - The **Command Menu** is a fuzzy-search autocomplete combobox. -1. Type the name of a panel (tool), and then use the `Down Arrow` on the keyboard to navigate to the correct option. -1. Select `Enter` to run a command. +1. With DevTools open, select `Control`+`Shift`+`P` \(Windows, Linux\) or `Command`+`Shift`+`P` \(macOS\) to open the **Command Menu**. + The **Command Menu** is a fuzzy-search autocomplete combobox. +1. Type the name of a panel (tool), and then use the `Down Arrow` on the keyboard to navigate to the correct option. +1. Select `Enter` to run a command. To open the **Elements** tool: -1. Open the **Command Menu**. -1. Type `E` then `L`. The **Panel > Show Elements** option is selected. -1. Select `Enter`. +1. Open the **Command Menu**. +1. Type `E` then `L`. The **Panel > Show Elements** option is selected. +1. Select `Enter`. Opening a tool this way puts focus in the content area of the tool. In the case of the **Elements** tool, focus moves into the **DOM Tree**. -## Elements tool -### Inspect an element on the page + +## The Elements tool -1. Navigate to the element you want to inspect, using the cursor in the screen reader. -1. Simulate a right-click on the element, to open the context menu. -1. Choose the **Inspect** option. This [opens the Elements tool and focuses the element in the DOM Tree][DevtoolsDomIndexViewDomNodes]. +### Inspect an element on the page -The **DOM Tree** is laid out as an [ARIA tree][W3CWaiAriaTree]. For an example, navigate to [Navigate the **DOM Tree** with a keyboard][DevtoolsDomIndexNavigateDomTreeKeyboard]. +1. Navigate to the element you want to inspect, using the cursor in the screen reader. +1. Simulate a right-click on the element, to open the context menu. +1. Choose the **Inspect** option. This [opens the Elements tool and focuses the element in the DOM Tree][DevtoolsDomIndexViewDomNodes]. -### Copy the code for an element in the DOM Tree +The **DOM Tree** is laid out as an [ARIA tree][W3CWaiAriaTree]. For an example, navigate to [Navigate the **DOM Tree** with a keyboard][DevtoolsDomIndexNavigateDomTreeKeyboard]. -1. With focus on a node in the **DOM Tree**, hover on the node and open the contextual menu \(right-click\). -1. Expand the **Copy** option. -1. Choose **Copy outerHTML**. +### Copy the code for an element in the DOM Tree -**Known issues** +1. With focus on a node in the **DOM Tree**, hover on the node and open the contextual menu \(right-click\). +1. Expand the **Copy** option. +1. Choose **Copy outerHTML**. -* **Copy outerHTML** often does not select the current node but instead selects the parent node. However, the contents of the element should still be in the copied outerHTML. +**Known issues** -### Modify the attributes of an element in the DOM Tree +* **Copy outerHTML** often does not select the current node but instead selects the parent node. However, the contents of the element should still be in the copied outerHTML. -* With focus on a node in the **DOM Tree**, select `Enter` to make it editable. -* Select `Tab` to move between attribute values. When you hear "space" you are inside of an empty text input and are able to type a new attribute value. -* Select `Control`+`Enter` \(Windows, Linux\) or `Command`+`Enter` \(macOS\) to accept the change and hear the entire contents of the element. +### Modify the attributes of an element in the DOM Tree -**Known issues** +* With focus on a node in the **DOM Tree**, select `Enter` to make it editable. +* Select `Tab` to move between attribute values. When you hear "space" you are inside of an empty text input and are able to type a new attribute value. +* Select `Control`+`Enter` (Windows, Linux) or `Command`+`Enter` (macOS) to accept the change and hear the entire contents of the element. -* When you type into the text input, you get no feedback. If you make a typo and use the arrow keys to explore your input, you also get no feedback. The easiest way to check your work is to accept the change, then listen for the entire element to be announced. +**Known issues** -### Edit the HTML of an element in the DOM Tree +* When you type into the text input, you get no feedback. If you make a typo and use the arrow keys to explore your input, you also get no feedback. The easiest way to check your work is to accept the change, then listen for the entire element to be announced. -* With focus on a node in the **DOM Tree**, select `Enter` to make it editable. -* Select `Tab` to move between attribute values. When you hear the name of the element, for instance, `h2`, you are inside of a text input and may change the type of the element. -* Select `Control`+`Enter` \(Windows, Linux\) or `Command`+`Enter` \(macOS\) to accept the change. +### Edit the HTML of an element in the DOM Tree -For example, when you type `h3` and select `Control`+`Enter` \(Windows, Linux\) or `Command`+`Enter` \(macOS\), the start and end tags of the `h3` element change. +* With focus on a node in the **DOM Tree**, select `Enter` to make it editable. +* Select `Tab` to move between attribute values. When you hear the name of the element, for instance, `h2`, you are inside of a text input and may change the type of the element. +* Select `Control`+`Enter` (Windows, Linux) or `Command`+`Enter` (macOS) to accept the change. +For example, when you type `h3` and select `Control`+`Enter` (Windows, Linux) or `Command`+`Enter` (macOS), the start and end tags of the `h3` element change. + + + ## Tabs in the Elements tool -The **Elements** tool contains additional tabs for inspecting things like the CSS applied to an element or the relevant place in the accessibility tree. +The **Elements** tool contains additional tabs for inspecting things like the CSS applied to an element or the relevant place in the accessibility tree. -* With focus on a node in the **DOM Tree**, select `Tab` until you hear that the **Styles** tab is selected. +* With focus on a node in the **DOM Tree**, select `Tab` until you hear that the **Styles** tab is selected. * Use the `Right Arrow` to explore other available tabs. -The **DOM Tree** turns elements with `href` attributes into focusable links, so you may need to select `Tab` more than once to reach the **Styles** pane. +The **DOM Tree** turns elements with `href` attributes into focusable links, so you may need to select `Tab` more than once to reach the **Styles** pane. -**Known issues** +**Known issues** -The **DOM Breakpoints** and **Properties** tabs are not keyboard-accessible. +The **DOM Breakpoints** and **Properties** tabs are not keyboard-accessible. -### Styles pane +### Styles pane -In the **Styles** pane find controls for filtering styles, toggling element states \(such as [:active][MDNActive] and [:focus][MDNFocus]\), toggling classes, and adding new classes. There is also a powerful style inspection tool to explore and modify styles currently applied to the element that is in focus in the **DOM Tree**. +In the **Styles** pane find controls for filtering styles, toggling element states \(such as [:active][MDNActive] and [:focus][MDNFocus]\), toggling classes, and adding new classes. There is also a powerful style inspection tool to explore and modify styles currently applied to the element that is in focus in the **DOM Tree**. -The key concept to understand about the **Styles** pane is that it only shows styles for the currently-selected node in the **DOM Tree**. For example, suppose you are done inspecting the styles of a `
    ` node, and now you want to look at the styles for a `