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.

Windows 11 Narrator Configuration Screen

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:

_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

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

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.