How to Add ARIA Tags in SharePoint 2016

Ensuring your intranet portal is accessible to screen readers requires precise HTML structuring. When you need to understand adding ARIA Tags in SharePoint 2016, you are navigating a classic server-side architecture that often aggressively sanitizes custom code. By default, the standard Rich Text Editor in SharePoint 2016 classic pages will frequently strip out custom attributes like aria-label, aria-hidden, or role to maintain strict security and markup standards. To successfully implement these accessibility tags, you must bypass the standard text editor and inject the code using methods that preserve your custom HTML attributes.

Using the Script Editor Web Part for Page-Level ARIA Tags

For individual site pages, the most reliable method for adding ARIA Tags in SharePoint 2016 is utilizing the Script Editor Web Part. This web part allows you to embed raw HTML, JavaScript, and CSS directly into a page zone without triggering the strict HTML sanitization rules of the standard text fields.

Follow these steps to insert accessible elements directly onto your page:

1. Navigate to the specific SharePoint 2016 page you want to modify.
2. Click the Gear icon in the top right corner and select Edit page from the dropdown menu to enter edit mode.
3. Click inside the web part zone where you want your accessible content to appear.
4. Select the Insert tab on the top Ribbon, and click Web Part.
5. In the Categories menu, select Media and Content, then choose Script Editor from the Parts menu, and click the Add button.
6. Once the web part appears on the page, hover over it and click the small dropdown arrow on its right side, then select Edit Web Part.
7. Click the Edit Snippet link that appears inside the web part boundary.
8. A dialog box will appear. Paste your raw HTML containing the ARIA attributes into this box. For example: Submit.
9. Click Insert at the bottom of the dialog box.
10. Click Stop Editing on the Page Ribbon to save your changes and publish the page.

Verify this by opening the page in a modern browser, pressing F12 to open Developer Tools, inspecting the element you just added, and confirming the ARIA tags remain present in the DOM.

Modifying Page Layouts with SharePoint Designer 2016

If you need to apply ARIA tags globally across multiple pages—such as adding a navigation landmark or a search box aria-label—page-level web parts are inefficient. Instead, you must edit the master page or the specific Page Layouts. When exploring adding ARIA Tags in SharePoint 2016 at the site architecture level, SharePoint Designer 2016 is the required tool.

1. Open SharePoint Designer 2016 on your local machine.
2. Click Open Site and enter the URL of your SharePoint 2016 Site Collection, then authenticate with your administrator credentials.
3. In the left Navigation pane, click Page Layouts (or Master Pages, depending on your target).
4. Right-click the specific layout file (e.g., ArticleLeft.aspx) and select Check Out to lock the file for your edits.
5. Right-click the file again and select Edit File in Advanced Mode.
6. Locate the specific HTML element you wish to modify. Type your ARIA attributes directly into the HTML tags. For example, find the main content placeholder and add role="main".
7. Press Ctrl + S to save the file.
8. Right-click the file in the Page Layouts list, select Check In, and choose to publish a major version so the changes propagate to all users.

Refresh a site page that utilizes this layout. Inspect the source code to ensure the server rendered the new role and ARIA attributes correctly.

Preparing Accessible Supplemental Documents Using WPS Office

Because SharePoint 2016 is governed by Microsoft server-side configurations, administrative permissions, and proprietary master pages, WPS Office cannot change those Microsoft-side settings or inject code into the web parts. However, a fully accessible SharePoint site relies heavily on the files hosted within its Document Libraries. If you are working to add ARIA tags in SharePoint 2016 to meet WCAG compliance, you must also ensure the Word documents and PDFs uploaded to the site are structurally accessible.

You can use WPS Office to create accessible document structures before uploading them to your SharePoint 2016 libraries:

1. Open your document in WPS Writer.
2. To ensure screen readers can interpret images, apply alternative text. Right-click any image in your document and select Format Object.
3. In the right-hand panel, navigate to the Alt Text tab. Enter a descriptive title and description for the image.
4. Structure your document for screen readers by applying native heading styles. Highlight your text, go to the Home tab, and select Heading 1, Heading 2, etc., from the Styles gallery, rather than manually changing the font size and bolding it.
5. When the document is ready, click Menu, hover over Export to PDF, and ensure you select the option to retain document structure if prompted, which passes heading structures to the PDF reader.
6. Upload this fully formatted file directly into your SharePoint 2016 Document Library.

This helps ensure that when a user clicks a document link on your ARIA-optimized SharePoint page, the resulting file maintains strict accessibility standards.

Use Word, Excel, and PPT for FREE

Free Download

Frequently Asked Questions

Can I add ARIA attributes directly using the standard out-of-the-box web parts in SharePoint 2016?

By default, many out-of-the-box web parts in SharePoint 2016 do not expose properties to add ARIA attributes directly. You will typically need to use the Script Editor web part, Content Editor web part, or custom JavaScript injection to apply these accessibility tags to existing DOM elements.

Will modifying the master page to include ARIA landmarks break my existing SharePoint site design?

Modifying the master page carries a risk of disrupting the site layout or causing upgrade issues with future patches. It is highly recommended to create a custom master page copy for your ARIA landmark additions rather than editing the default seattle.master or oslo.master files directly.

How can I verify that the ARIA roles and labels I injected into my SharePoint pages are functioning correctly for screen readers?

You can test the implementation using accessibility evaluation tools like the WAVE browser extension or Axe, combined with manual testing using common screen readers such as JAWS or NVDA, to ensure the tags are correctly interpreted by assistive technologies.

What happens to custom ARIA tags added via Script Editor if the page is migrated to a modern SharePoint environment?

SharePoint 2016 primarily uses the classic experience, but if your pages are migrated to a modern SharePoint environment later, Script Editor web parts will not carry over natively. You would need to rebuild the customizations using SharePoint Framework (SPFx) to maintain the accessibility tags.