# Website Accessibility Tips **Website Accessibility Tips** # # Tools If you are using Windows you can try using the built-in narrator tool on a website to get a better idea of how a screen reader works. You can enable the shortcut key for it (Win+Ctrl+Enter) to make it easier to toggle quickly. Once enabled you can load up a website and navigate around using the tab and arrow keys on your keyboard. ![Graphical user interface, text, application, email, TeamsDescription automatically generated](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/7eca4ddd-27ab-4f7b-a6b1-e035237da573/f35f37b1-a2a3-40ea-8a3d-7b53b5e145a7/Graphical%20user%20interface%2C%20text%2C%20application%2C%20email%2C%20TeamsDescription%20automatically%20generated?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20260925%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260925T184500Z&X-Amz-Expires=86400&X-Amz-Signature=abd36f78cdf245634fb39cf7c6e6e58a977d6c1b193e96e66996537c53e3d1fa&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) *Windows 11 Narrator Configuration Screen* ![A screenshot of a computerDescription automatically generated with medium confidence](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/7eca4ddd-27ab-4f7b-a6b1-e035237da573/714b68c7-3cda-4144-871c-3167d8505f98/A%20screenshot%20of%20a%20computerDescription%20automatically%20generated%20with%20medium%20confidence?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20260925%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260925T184500Z&X-Amz-Expires=86400&X-Amz-Signature=5e10de6add35840e891c28dbec25901dd488e985936166e5f23be8b1371620d9&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) *Windows 10 Narrator Configuration Screen* # Alt Text ALT text (Alternative Text) is a way to describe images on the web. When modifying an image within WebWiz@rd you can change it with the **Alternative Text** field shown below: ![Graphical user interface, text, applicationDescription automatically generated](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/7eca4ddd-27ab-4f7b-a6b1-e035237da573/b2a0e794-84f6-48fd-8cd7-8ac5e02a2c53/Graphical%20user%20interface%2C%20text%2C%20applicationDescription%20automatically%20generated?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20260925%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260925T184500Z&X-Amz-Expires=86400&X-Amz-Signature=d9c35100deba541bf76bdf7a36456be60e3f76a4cd72071cb6d072cd2ef789c4&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) _Image Properties Dialogue in WebWiz@rd _ While alt text is very important, it is sometimes a good idea to leave it blank. Images that are considered “decorative” should be left with empty alt text, this tells a screen reader to ignore the image. If you are unsure whether an image should have it’s alt text populated this note on WebAIM is a good rule of thumb: “When an image is used only for decorative purposes, it is best to remove the image from the page content and instead define it as a CSS background image. This will remove the need for alternative text entirely and will remove the image from the semantic and structural flow of the page.” - [WebAIM](https://webaim.org/techniques/alttext/#decorative) ## Quick Tips: * Images that act as links must have alt text populated. * Don’t include things like “image” or “link” in alt text. A screen reader always begins by informing the user of the type of element they are on. * You can leave alt text blank if the image is only [decorative](https://webaim.org/techniques/alttext/#decorative) # Headings Headings are intended to describe sections on a web page. Each page should have a single heading 1 that describes the main purpose of the page (e.g. on a page called “About” the heading 1 could be something like “About Our Company”). Users of screen readers can skip directly to headings on a page. If the heading accurately describes the following content they can easily and quickly navigate around your website. Headings must be used in numerical order. A heading 2 must follow a heading 1 and so on. Think of it like a tree with branches. A typical page would be something like: **Heading 1** Some description text **Heading 2** Some description text **Heading 3** Some description text **Heading 2** Some description text ## Quick Tips * Each web page must have a heading 1 that describes the main purpose of the page * Heading 2 should be used to describe the main sections on the page (e.g. on the about page a heading 2 could be “Our Team”, followed by images and text about each team member. * Headings should be used in numerical order, heading 2 follows heading 1, heading 3 follows heading to etc. * A heading should describe the content that follows it # Links and Buttons Links and buttons should always inform the user of what will happen when they are pressed. If you are navigating around a website with your keyboard and you arrive at a link that says “Click here” how are you supposed to know what that link does once pressed? If the link was pointing to the about page, a better link text would be something like “Learn more about our company”. That way the user will know that pressing the link will take them to the about page. ## Quick Tips * Use informative link text, avoid things like “click here” or “learn more”. Link text should inform the user what will happen when the link is pressed. --- **Documents** - [IT Basics](https://support.remwebsolutions.com/s/ad0e2649-4834-4a41-9529-97bbbae25229/doc/it-basics-xiENBIGERR) - [WebWiz@rd™](https://support.remwebsolutions.com/s/ad0e2649-4834-4a41-9529-97bbbae25229/doc/webwizrd-2tEcTavTxo) - [Email Services](https://support.remwebsolutions.com/s/ad0e2649-4834-4a41-9529-97bbbae25229/doc/email-services-esUwHOyM9u) - [AODA (web accessibility)](https://support.remwebsolutions.com/s/ad0e2649-4834-4a41-9529-97bbbae25229/doc/aoda-web-accessibility-GCC6vMCC0l) - [3rd Party Services](https://support.remwebsolutions.com/s/ad0e2649-4834-4a41-9529-97bbbae25229/doc/3rd-party-services-eKNwxzXQLO)