Issues with auto-play videos
Here, Alan explains the issue behind allowing videos to auto-play on a website. Explaining that they are off-putting and can interact badly with the screen reader.
Auto-play video issue demonstration Problems with poor heading structure
Headings are incredibly important for screen reader users, and not being able to navigate the page via headings can prove detrimental to the user experience, especially on a site that contains a lot of content. In this section, Alan demonstrates the pitfalls of not being able to navigate via headings on a website.
Poor heading structure demonstration Non-descriptive links
When creating links, it's imperative that they tell the user exactly where they are being pointed to. When a screen reader looks at a list of links on a page, they need to be immediately sure of where the link will take them, and whether this opens in a new page.
Non-descriptive links demonstration Non-descriptive alt text
For a screen reader, being able to understand the context behind graphical components of a website is important. For this, you'd add alternative text to explain the context behind the image in words. However, when alt text is not descriptive, it can prove a challenge for blind users to understand. In this section, Alan explains why image descriptions should always be descriptive.
Non-descriptive alt text demonstration Poorly created lists
In order to communicate content in the most effective way possible, whenever there is a list of items, they should be in a list, with each list item separated. Here, Alan demonstrates how a list is read out on a screen reader when it's not labelled properly.
Poorly created list demonstration Incorrectly formatted forms
When creating a form that is possible for a screen reader to use, it's essential to label each part of the form accordingly with ARIA labels. Without correct labelling or descriptions, a blind user will not be able to understand what they are filling out. Alan explains the disadvantage he has when trying to fill out a form that has been incorrectly labelled.
Demonstration of poorly labelled forms Video player set-up problems
When there is more than one video available on the website to watch, it's important that the videos are structured accordingly and that a screen reader user can understand that there are multiple videos. Alan explains in this section the importance of highlighting multiple videos to screen reader users.
Demonstration of video players set up poorly Demonstration of Good Heading Structure
Heading structure is an integral part of a website, not only do they make the content easier to read, they act as navigation points for a screen reader. Getting Headings in the correct order, and ensuring they communicate the content that comes after them is important. Here, Alan shows how a screen reader can navigate between Headings that are structured correctly.
Demonstration of good heading structure Ensuring form labels are used
When creating a form that is possible for a screen reader to use, it's essential to label each part of the form accordingly with ARIA labels. Forms that have the correct label allow screen reader users to understand how the form is used and what information needs submitting where. Alan explains how a good form is labelled and demonstrates what a good form sounds like on a screen reader.
Demonstration of a good form Demonstration of good, descriptive links
When a screen reader user reads through a website, it's important that any links on the page are descriptive so that the user knows where that link will take them, and whether this will open in a new window, a new tab, or the same window. Alan demonstrates how good, descriptive links help screen reader users navigate through a website and skip to pages that they want to.
Demonstration of good, descriptive links Why 'Skip to content' is important
Being able to skip to content is a particularly important tool for screen reader users and keyboard navigation users. This allows users to skip past a navigation bar and get straight to the main content of a page, without having to tab/read through all of the navigation items. This is particularly useful on a site that may have a large quantity of navigation items. In this section, Alan shows us briefly how a 'Skip to Content' button works and why it's so useful.
Demonstration of 'Skip to Content' link Good list semantics
Lists often contain important information, such as ingredients or more important things like poisonous plants. Wrongly communicating these lists can cause a poor tasting cake, or potentially in the latter example, serious illness. This is why good list semantics need to be used in any list that's on the web. Each list needs to be labelled (as either an unordered or ordered list) and each list item needs to be labelled individually. Alan demonstrates how a good list sounds to a screen reader.
Demonstration of good list semantics Good use of alt text
Alt text is crucial in order for screen readers to understand the context of the images presented on a page. A good alt text on an image will ensure the screen reader user understands the context and the information presented by the image. Alan highlights good alt text usage and why it's important, particularly for someone who has lost their sight later in life.
Demonstration of good alt text use No auto-play video
Auto-play videos are a huge problem for screen reader user, often making an entire website completely unusable. Here, Alan demonstrates good video use, and the importance of allowing a screen reader to play the video if, and when, they want to. Even so, Alan shows that pausing the video once it's playing can still be a challenge.
Demonstration of good video use 