Accessibility features in the selected test webpage

As mentioned in Section 2.2.1, in the WCAG we find different types of techniques that can be applied to achieve accessibility. The techniques we considered are General, ARIA, and HTML techniques. On the contrary, we did not take into consideration CSS techniques as we will not be concerned by the webpage appearance (and, in our case, the CSS information is stored in another file). We also did not include Flash, PDF, Silverlight, and SMIL techniques as they deal with different types of documents or technologies. Eventually, we also excluded Client-Side Script and Server-Client-Side Script as they are not directly linked to localisation. Moreover, we decided not to include advisory techniques and failures but focus on sufficient techniques only.

3.2.3.1 Non-text Content

The intent of the SC 1.1.1 Non-text Content is to make the information included in non-text content (such as images, time-based media, controls or input) accessible through the use of text alternative (Kirkpatrick et al. 2018). In the following two examples (Figure 3.3 and Figure 3.4), web editors employed the technique H37: Using alt attributes on img elements. In the first case, the alt attribute describes what it can be seen in the picture, while in the second example it also adds information about the content of the video linked to the image.

Figure 3.3: Example of text alternative used to describe an image.

Figure 3.4: Example of text alternative used to describe the media content.

3.2.3.2 Bypass Blocks

Through this mechanism, the user can access directly to the primary information by skipping the repetitive content included in other webpages of the same website. In our test webpage, the technique used is the G1: Adding a link at the top of each page that goes directly to the main content area, which allows the user to skip repetitive blocks. This technique mainly benefits people with visual impairments and people with cognitive limitations (W3C/WAI 2019d). As we can see in Figure 3.5, these links are not visible on the page but are embedded in the code.

Figure 3.5: Example of a link to bypass blocks of repetitive content.

3.2.3.3 Page Titled

The purpose of the title is to offer information about the main content of a webpage (Kirkpatrick et al. 2018). Without this factor, users can not orient themselves while navigating the webpage.

The techniques implemented in the test webpage are G88: Providing descriptive titles for Web pages and H25: Providing a title using the title element, as seen in Figure 3.6. The title attribute will also be displayed in the title bar.

Figure 3.6: Example of a title attribute.

3.2.3.4 Link Purpose (in Context)

Links are the fundamental concept of the Internet; they connect webpages and allow the user to navigate through different websites. However, if the purpose of the link is not clear, the user will not be able to understand where it directs to. The purpose can be determined by the link text and its pragmatically determined link context (ibid.). In our case, the techniques used are G91: Providing link text that describes the purpose of a link and H30: Providing link text that describes the purpose of a link for anchor elements (Figure 3.7).

Figure 3.7: Example of three a anchor elements.

3.2.3.5 Language of Page

The purpose of this SC “is to ensure that content developers provide information on the Web page that user agents need to present text and other linguistic content correctly. Both assistive technologies and conventional user agents can render text more accurately when the language of the Web page is identified. Screen readers can load the correct pronunciation rules. Visual browsers can display characters and scripts correctly. Media players can show captions correctly. As a result, users with disabilities will be better able to understand the content.”

(W3C/WAI 2019e). Therefore, this SC is fundamental for the proper functioning of user agents.

In the context of our test webpage, the technique H57: Using the language attribute on the

HTML element was implemented. As we can see in Figure 3.8, the lang attribute includes the language of the page (English).

Figure 3.8: Example of lang attribute.

3.2.3.6 Language of Parts

Similarly, this SC consists of defining the language of parts that are in another language other than the language of the page, except for proper names, technical terms, etc. (Kirkpatrick et al.

2018). In our specific case, although there are some parts in French, no technique was implemented. However, as we also want to examine this aspect, we decided to apply the technique H58: Using language attributes to identify changes in the human language to see if CAT tools can support this feature. Figure 3.9 shows the language selection option in the header section, while Figure 3.10 consists of the French title of the same webpage. In both cases, the research added the lang attribute.

Figure 3.9: Language selection option.

Figure 3.10: Webpage title in French.

3.2.3.7 On Input

The main intent of this SC consists of making sure that the user is aware of the effects when entering data or selecting a form control. Changes in context can be a source of confusion for people with disabilities that are not able to perceive the change, therefore changes should only be the consequence of the user’s action (W3C/WAI 2019f). In the test webpage, this feature is included in the sign-up form and it has been implemented through two techniques: G80:

Providing a submit button to initiate a change of context, and H32: Providing submit buttons (Figure 3.11).

Figure 3.11: Example of submit button.

3.2.3.8 Error Identification

When an error occurs, the user should be able to determine what is wrong. Hence, the error should be first identified and then described in the form of text (Kirkpatrick et al. 2018). In order to show the error in our test webpage, we proceeded to submit the form without filling in any field. As a result, several errors were identified and, only then, we saved the source code.

As we can see in Figure 3.12, the technique G83: Providing text descriptions to identify required fields that were not completed was implemented.

Figure 3.12: Example of error identification.

3.2.3.9 Labels or Instructions

Through this SC, web editors can provide information about the webpage’s content: “[t]he intent of this Success Criterion is not to clutter the page with unnecessary information but to provide important cues and instructions that will benefit people with disabilities” (W3C/WAI, 2019g). For this specific feature, we will mainly focus on ARIA labels. Through this attribute, the content’s author can offer additional instructions that will not be visible on the webpage but will be detected by assistive technologies. Figure 3.13 illustrates the techniques implemented in this specific case: G131: Providing descriptive labels and ARIA9: Using aria-labelledby to concatenate a label from several text nodes.

Figure 3.13: Example of aria-label attribute.