A Newly Developed Web-Based Resource on Genetic Eye Disorders for Users With Visual Impairment (Gene.Vision): Usability Study

Introduction

Background

People with disabilities have been recognized to experience inequalities in multiple aspects of their lives from education and employment to health care, finances, and leisure [1], with the internet being a key accessibility feature in all areas. It was intended to be user-friendly for every individual regardless of any mental or physical disability but poor design and coding of what is usually thought of as a graphical user interface poses difficulties, particularly for users with visual impairment [2-4]. With an increasing reliance on the internet and almost 2 million people in the United Kingdom being affected by vision loss, of which 360,000 are registered with visual impairment or severe visual impairment (blind), it is important that they are not overlooked when developing web-based materials lest they risk being socially excluded altogether [5,6].

To make the internet more accessible, the World Wide Web Consortium first introduced the Web Content Accessibility Guidelines (WCAG) in 1999; its current iteration (WCAG 2.1), published in 2018, serves as an update rather than as a replacement of WCAG 2.0 (introduced in 2008). It contains 13 guidelines based on 4 main principles: perceivable, operable, understandable, and robust, with each guideline having 3 levels of testable success criteria—A (lowest level of accessibility) and AA and AAA (highest level of accessibility) [7]. Both the United Kingdom and the European Union have adopted it into their legislation, making it a legal requirement for public sector websites to be accessible to people with disabilities [8,9].

Despite this, only a small number of websites are compliant with the UK accessibility standard of WCAG 2.1 AA [10]. With consumers increasingly turning to the internet as a primary source of health-related information, websites should not only contain relevant and helpful information for patients but should also not exclude anyone with a disability. To help developers of web-based health platforms achieve this, the UK National Health Service (NHS) published a Digital Service Manual focusing on building consistent, usable, and accessible services using a patient-centric approach [11]. It provides guidance on various aspects of web design, such as conducting user research, building user interface prototypes, content styles, and optimizing accessibility.

A significant group of web-based health information consumers are those affected by rare diseases that together affect 1 in 17 people [12]. Owing to the nature of their conditions, their physicians often lack the experience or familiarity to provide expert care for them. They end up searching the web to keep abreast of current research and look for support through online communities. However, the quality of these websites tends to be poor, either they lack credibility or the contents are not kept up-to-date or pitched at the right level [13]. Furthermore, most of these sites are found to be poorly accessible to users with visual impairment, which can have a profound impact on patients affected by rare genetic eye disorders who usually have visual disability [13,14]. Inherited retinal diseases are the most common causes of severe visual impairment registration among working adults in England and Wales, whereas globally, 60% of blindness among infants is due to genetic diseases [15,16].

Objectives

To fill this void, we are developing a new web-based resource for these conditions with information written in 2 formats: one using more lay terms for patients and families, while the other has more technical details tailored toward health care professionals. It aims to provide a holistic resource, including the causative gene or genes of a condition, current research, management, and support services. Most importantly, we prioritized creating a usable and highly accessible website for our target end users, who mainly have visual impairment.

Although automated testing tools can help identify some of the website’s accessibility barriers, most of the WCAG 2.1 guidelines require human testing and judgment. Failing to trial a specific design with users with disability will result in a website with limited usable accessibility, as the human interface aspect is not evaluated [17]. Therefore, the NHS Digital Service Manual recommends that research and testing with real-world users are performed early and throughout the design process [18]. In line with this recommendation, we conducted a usability testing session on a prototype of our website with patients to identify website features that would increase accessibility for users with visual impairment. Our secondary objective is to explore whether the contents provided on our website were relevant and comprehensible to both patients and clinicians.

Methods

Prototype

Before development, we spoke to patients with genetic eye disorders and their families to identify potential pain points, which were websites with poor accessibility, unreliable and outdated information, contents written with excess medical jargon and insufficient material on research, practical advice, and available support. An accessibility specialist, who was a patient herself (see the Acknowledgments section), was also consulted to identify key accessibility features for those with visual impairment. On the basis of feedback from these interactions, we built a prototype of our website using the Wikimedia platform (Wikimedia Foundation, Inc) [19], which contained the following components.

Home Page

The home page’s navigation bar is organized into 4 main items: information and support, the eye, genetics, and research (Figure 1). The subcategories of each main item are listed in Textbox 1 along with a description for each category. There is a search box in the center whereupon a search term or terms is entered, all pages containing the term or terms are displayed on a new page (Figure 2).

‎View this figure

‎View this figure

To highlight certain relevant topics to users, some of the subcategories from the main navigation bar were placed into a list below the search box, each having a brief excerpt (Figure 1).

In addition to the Wikimedia-based home page, we also designed another home page prototype using WordPress for the purpose of this testing. The screen recordings of both home page designs are available in Multimedia Appendices 1 and 2.

Content Pages

Conditions

Two versions are available for each condition page: one for the patients and general public, and the other for health care professionals. Users can toggle between these 2 versions using the tabs below the main page title (Figure 3).

‎View this figure

The former focuses on aspects that we believe patients will find helpful, such as current research, information on available support, and links to both umbrella and condition-specific charities. When possible, we asked a patient representative from a charity related to the condition to review our material for readability. The health care professional version focuses more on the clinical presentation, investigations, general management guidance including genetic counseling, genetic testing, and updates on current research. Full citations are listed in both versions.

A total of 3 conditions were prepared for this prototype: choroideremia; aniridia; and Wilms tumor, aniridia, genitourinary anomalies, and range of developmental delay (WAGR) syndrome. The patient versions of the choroideremia and aniridia pages were reviewed by patient representatives from Retina UK and Aniridia Network, respectively. The review of the WAGR syndrome page was still pending at the time of testing.

Other Pages

For pages listed in Textbox 1, only the patient or general public version was available in the prototype.

The pages that were prepared for this prototype were as follows: Coping with sight loss, Driving, all the pages listed under The eye, Genetic counseling and genetic testing, Clinical trials, and Gene therapy.

To improve user navigation, a table of contents is listed at the top of each page termed Quick links (Figure 3). Users are able to navigate to each subheading by clicking on the topic of interest. They can easily navigate back to Quick links, by using the Jump to top link. A screen recording of this function is available in Multimedia Appendix 3. Each page always starts with a brief overview of the selected topic, with the structure and font used consistently throughout the website. The information provided on all pages is based on current UK practices. All images on the website were accompanied with the alt-text function, except those that were for decorative purposes only. The prototype was tested manually with the NonVisual Desktop Access screen reader (NV Access) by one of the authors (JY) before the usability testing session to ensure compatibility and troubleshoot any fundamental accessibility barriers (eg, unclear alt-text, missing or ambiguous links).

Usability Testing

Participants were recruited through the vision loss charity Retina UK and from the senior author’s (MM) genetic eye disease clinic in Moorfields Eye Hospital NHS Foundation Trust, London.

A face-to-face usability testing session and patient focus group (1 participant to 1 facilitator) of our prototype was conducted at the University College of London Institute of Ophthalmology computer laboratory on November 11, 2019. Participants were encouraged to bring their personal devices that they usually used to access the web. For those who chose to use the laboratory’s Windows PC desktops, assistive software was installed upon prior request. They also chose which web browser to use based on their experience and comfort level. The device, web browser, and assistive software used to access the website were recorded by the facilitators.

A short survey (Multimedia Appendix 4) was conducted at the beginning of the session to gather information about the demographics and computer literacy of each participant. This was assessed using a 5-point Likert scale based on the UK government digital inclusion scale [20]:

• Not at all confident: someone who does not know how to use the internet at all.
• Slightly confident: able to perform tasks on the internet with full guidance.
• Somewhat confident: able to perform certain tasks independently, does not tend to deviate from these tasks when using the internet (task-specific).
• Very confident: someone considered to have basic digital skills and able to use the internet effectively.
• Extremely confident: someone who usually has a background in computing or is able to code or design content.

The last 2 questions of the survey focused on the participant’s current source of information about their condition and the type of information they considered important but currently lacking.

During the testing session, we used 2 usability techniques: direct observation and task completion. The tasks outlined for the participants (Textbox 2) were designed to identify specific features and issues pertaining to the home page design, site navigation, and content. For our condition pages targeted to the patients and general public, we used identical pages from Wikipedia as a benchmark because it is one of the most viewed medical resources globally and tends to appear as one of the top results in general search engines for keywords associated with rare diseases compared with other web-based health resources [21,22]. Furthermore, Wikipedia has a standardized information structure optimized for accessibility (WACG 2.0) and contributors are encouraged to follow the guidance provided in their Manual of Style to maintain this standard [23].

While performing the assigned tasks, participants were encouraged to verbalize their initial impressions of the website, its accessibility and ease of use, comprehensibility of the content, and suggestions for improvement (think-aloud method). They were prompted by the facilitators to explain their actions and expectations. All responses were recorded by each facilitator in a standardized proforma. The facilitators primarily served as passive observers (direct observation) and were only allowed to assist if their respective participant reached an obstacle, at the same time noting how the participant encountered this.

A patient focus group for all the participants was conducted by the main facilitator at the end of the usability testing session to encourage feedback and discussion. Participants were asked about their general thoughts about the website, whether the current version was usable by individuals with visual impairment, any features that they liked or disliked, and if there were any changes or additions they would like to see. Further discussions were prompted by asking participants to expand their answers and seek opinions or counter-opinions from the rest of the group. The focus group was audio taped and transcribed after obtaining informed consent from all participants. A summary of the discussions was prepared after recording by the main author (JY).

Clinician Testing

The website was also created as a resource for health care professionals who may see patients with genetic eye diseases and require further information on the condition and management advice. Hence, the content was assessed remotely by a range of health care professionals from various disciplines, including a consultant general practitioner, a consultant pediatrician, 2 ophthalmology trainees, 3 ophthalmology consultants of different subspecialties (general, pediatrics, and medical retina), and a genetic counselor. Their assigned tasks were similar to those outlined in Textbox 2, with particular focus on home page navigation, information layout, and content quality in the professional versions of choroideremia, aniridia, and WAGR syndrome. Feedback was recorded in the same proforma used in the usability testing session.

Qualitative Data Analysis

The data collected in the standardized proformas and the audio transcripts from the patient focus group were analyzed by one author (JY) in an inductive manner rather than theory based, as we wanted to understand participants’ experiences with the prototype. Codes were attributed to various key phrases and paragraphs in both the written and audio transcripts (open coding) to identify core themes. Axial coding was then applied to develop connections between the open codes. Coding was performed with the qualitative software program NVivo 12 (QSR International).

Results

Participant Characteristics

There were 8 participants in our usability testing session and their demographics are presented in Table 1. A participant (P9), who used the popular Job Access With Speech (JAWS) screen reader, tested the website remotely during the COVID-19 lockdown period in the United Kingdom. In total, 6 participants were affected by genetic eye disorders, while 2 were parents of a patient with type II Usher syndrome. One participant had full sight and worked as an information specialist in a library. Most participants had basic digital skills, but 3 participants were considered experts. One participant considered herself a task-specific web user. The devices, web browsers, and assistive software used by the participants are shown in Table 2. The full results of the pretesting survey (including P9) are presented in Multimedia Appendix 5.

Qualitative Analysis

Participant Feedback

The positive features of the website that enhanced accessibility for users with visual impairment are outlined in Textbox 3. One of the main features highlighted by the participants was the consistent layout throughout the website. These included having left-aligned texts, using a consistent font and color along with having the Quick links section in all pages. They identified that having a zigzag alignment of text, as in the case of the WordPress-designed home page (Multimedia Appendix 2), limited accessibility. For the content pages, our participants noted that having clear and concise information helped with accessibility. These included having accurate and logically ordered headings, arranging information using bullet points for ease of reading (Figure 4) and the purpose of each link clearly identified from the link text alone. Another important aspect that favored accessibility was good adaptability to various assistive software and devices, especially in this day and age where mobile devices are increasingly popular and accessible. The participants also favored a simple home page that was easy to navigate to other pages on the website. Participants with and without visual impairment liked that minimal scrolling is required on the home page. They also particularly liked the Quick links and Jump to top functions, as they offered straightforward navigation. In addition, they stated that content written in an easily understandable language and arranged in a structured manner added value to the website and improved the overall user experience.

Although unrelated to accessibility, our participants pointed out that content quality was equally important to attract users. With respect to the prototype, they felt that content related to research, support available, practical advice, and links to charities were incentives for repeated visits. They also suggested that knowing the information is coming from a reliable source will make the website more trustworthy. Quotes from participants that illustrate this point are as follows:

Reading stuff that is tough or difficult to absorb, it is good to have links to support. I also like the practical advice section with further links to topics that are important to me as a mother.
[P2, 52-year-old unaffected mother of a patient with type II Usher syndrome]

The content is pitched about right with links to more scientific content or papers available for doctors or patients who wanted to find out even more and look at the research themselves. It would be good to know that the website is definitely accurate if endorsed by an approved authority.
[An excerpt from the patient focus group]

‎View this figure

On the other hand, our participants also identified some features on our website that impaired its usability not only for people with visual impairment but also for individuals with unimpaired vision (Textbox 4). It was highlighted to us that having good contrast is essential to accessibility. Certain aspects of our prototype, especially the navigation bar and the accompanying search box (Figure 1), had poor contrast and proved difficult for some participants to identify. One participant also pointed out that links should be underlined as default for easy identification (Figure 4). Furthermore, we found that implementing dynamic content such as an automatic timed carousel function (Multimedia Appendix 2) and large white spaces may frustrate and confuse screen reader and magnifier users. Having predictable navigation on a website is also crucial for accessibility. Most users are familiar with how popular search engines (Google, Bing, etc) work and they would expect similar functions when using other search boxes. This was proven when our participants found the search results page on our prototype confusing (Figure 2).

Clinician Feedback and Recommendations

All the health care professionals who tested our website felt that the information provided was comprehensive and useful. They particularly liked the Quick links function, which enabled them to skip to the section of interest instantly. Both consultant and trainee ophthalmologists found the information on current research very helpful, as the listed investigational therapies were explained in a simple yet detailed manner, enabling them to gain a basic understanding without having to read multiple papers. They also liked that they had quick access to scientific abstracts of seminal papers through the hyperlinks provided in each condition page. Finally, the Information and support menu and links to condition-specific charities were highly welcomed by all, regardless of discipline or subspecialty, as such queries are commonly posed by patients and their families in clinics. In addition, the involved health care professionals also provided some suggestions to further enhance the usability of our website. These and the improvements we have introduced to our current iteration are summarized in Textbox 5.

Discussion

Principal Findings

We evaluated the initial designs of a health information website focused on rare genetic eye disorders for patients, relatives, and health care professionals. Early development centered on meeting the user requirements of our patients, most of whom had visual impairment or blindness. We wanted to identify features that optimized or impaired accessibility for users with visual impairment to ensure that this vulnerable group was not excluded from information that could potentially benefit them and to improve overall user uptake.

From this testing session, we identified the following features that will enhance accessibility and usability for users with visual impairment:

• Consistent website layout and fonts.
• Structured information hierarchy with a clear description of links.
• Good chromatic and luminance contrast.
• Simple home page with consistent, predictable, and easy navigation.
• Readable content (appropriate to the intended audience).
• Adaptability to various assistive software and mobile devices.
• Avoidance of dynamic content and large white spaces.

In addition to good accessibility, content quality and reliability were highly rated as potential factors that may influence user traffic. They also suggested that having an authority endorsing a website will increase its trustworthiness.

On the basis of the above feedback, we updated our website by changing the features that negatively impacted accessibility for our participants. These changes were as follows:

• Improving the contrast of the navigation bar.
• Hyperlinks are bolded and underlined as default.
• Making the search box larger.
• Having a more conventional search behavior with an autocomplete function.
• Incorporating the breadcrumb functionality so that users can go back to the previous page that they were visiting.

We have kept features that our participants found useful as listed under positive accessibility features of the website in the Results section. The screen recording of the updated website is in Multimedia Appendix 6. The navigation bar and home page menu have also been updated after adding more content to the current version.

Limitations

Our study was limited by a small cohort of participants, none of whom were Braille keyboard users. Most of the participants were technologically adept (8 participants had at least basic digital skills) and belonged to the middle age bracket. Therefore, for future testing sessions, users with lower digital skills and a broader age spectrum inclusive of younger and older patients are recommended. This will consequently provide a wider opinion about web-based accessibility for people with visual impairment.

Comparison With Previous Work

The web-based behaviors of users with visual impairment differ significantly from those of individuals with full sight. Users with visual impairment tend to employ tactics to navigate around websites more efficiently. These include probing (getting a glimpse of a page by traversing it in a sequential fashion or by jumping between headings) [26], gambling scanning (skipping a determined number of lines until bumping into content that draws their interest) [27], and memorizing the amount of links that need to be skipped to get to the main content [28]. Some users may listen to the content sequentially from the beginning (exhaustive scanning), especially when visiting unfamiliar pages or sites [29].

Web accessibility for users with visual impairment can be improved by understanding the barriers they commonly encounter through usability testing and leveraging on the aforementioned navigational strategies. By having a consistent and well-structured information layout with clear headings, users were able to quickly orientate themselves without getting lost in a sea of texts [30]. This was further enhanced on our website by the Quick links and Jump to top functions where participants were able to navigate directly to the topic of interest without scrolling. The Jump to top function also served as a shelter if users lost their orientation within the page as they can go back to the beginning of the page instantly, which is a tactic some users employ when they are lost [30]. Clear description of links is also equally important for effective navigation, particularly for screen reader users [31].

Users with visual impairment may feel frustrated and give up on exploring a particular website further if they are faced with overwhelming situations such as a large number of search results or taking too many steps to complete a transaction [30]. The search behavior of our prototype is a prime example (Figure 2), where the search term aniridia yielded multiple results under the heading page title matches and page text matches with confusing excerpts. Hence, we have updated our search behavior to reflect conventional search engines and also incorporate an autocomplete function as many medical terms are not in common usage, which can make it challenging for lay users to spell accurately.

It is believed that many websites are not accessible to users with disability because developers fear that optimizing accessibility can be costly and may affect the attractiveness of a website to sighted users [32,33]. However, there is an abundance of evidence showing that usability problems are shared regardless of visual disability and everyone stands to benefit from good accessibility [34-36]. Participants with and without visual impairment in our testing session demanded similar features, such as having a simplistic design without any dynamic content. A simple and well-designed page has fewer elements to navigate and requires less time to load [31]. Furthermore, carousels cannot be manipulated with keyboards, which can lead to frustration among screen reader users. Other features such as easily readable fonts and good contrast are also crucial and are covered in the WCAG guidelines [7].

Another factor taken into consideration when designing the website was the increasing popularity of mainstream mobile devices such as smartphones and tablet computers, both among those with and without visual impairment [37]. Thus, having a responsive website skin that adapts to different screen sizes has been highlighted by our participants as an important accessibility feature. This will have a direct and significant impact on everyone, as nearly three-fourth of internet users are predicted to access the web solely through smartphones by 2025 [38].

This study also demonstrated the benefits of designing a website with a user-centric approach that was previously outlined by Abelse et al [39] and further emphasized in the design principles of the NHS Digital Service Manual [40]. By understanding the challenges and requirements of users, we can then create solutions and further refine them based on feedback. This is assisted by having various prototype versions so that multiple features can be tested in a single session. For example, we were able to quickly identify features that optimized or affected accessibility for those with visual impairment by having our participants test 2 home page prototypes.

Testing with target users can also provide developers with a more accurate idea of subjective features such as readability of the content and website navigation. Although most of the accessibility characteristics identified by our participants were covered by the WCAG guidelines, such parameters are often difficult or even impossible to assess with automated tools. Even if a website conforms to the WCAG guidelines, it may not ensure good accessibility as pointed out by Power et al [6]. Their study found that the WCAG 2.0 guideline only covered half of the user problems encountered by their cohort of screen reader users. Furthermore, they reported that user problems still existed despite the implementation of some of the recommendations. The authors suggested that enhancing website accessibility should shift from a traditional problem-based approach to gathering user data from testing sessions with real-world users, which is the approach we took.

Content quality is equally crucial in attracting users [39]. As a website aiming at patients and families affected by rare genetic eye disorders, we believed that having information on soft content, such as practical advice, available support, and charities were important to our target audience. This resonated well with our cohort and one of them, a mother of a patient affected by type II Usher syndrome (P2) stated that knowing where to look for support and learning about practical tips that will help her son’s daily living was more important as these were issues that “kept me up at night.” Litzkendorf et al [41] reported similar findings in their study where patients with rare diseases were interviewed about their information needs and acquisition. The main themes that were lacking in rare disease websites were current research, practical tips to cope with a condition, genetic counseling and family planning options, social and educational support, and the ability to connect with similar people.

The lack of exposure to rare diseases among clinicians has often led to delayed diagnoses and incorrect care for many patients. Recent surveys of primary and secondary care physicians in Belgium and Spain have identified a huge demand for information on rare diseases, particularly on genetic screening and counseling, investigational therapies, specialist referral centers, and locating reliable resources [42,43]. Although information portals for rare diseases such as Orphanet already exist, health care professionals who tested our website believed that Gene.Vision is highly relevant as it offers more in-depth information on genetic eye disorders and covers the available social support for individuals with visual impairment in the United Kingdom. Furthermore, as genomic sequencing becomes more accessible and affordable in the United Kingdom, nonmolecular ophthalmologists, with appropriate training and guidance, are encouraged to undertake genetic testing for their patients to aid diagnosis, management, and trial enrollment [44]. Once a molecular diagnosis is received, the gene card feature on our website supplements this by providing a quick overview of the associated phenotype or phenotypes and information on current research.

Conclusions

To make a website accessible to users with visual impairment, attention should be focused on making simple, well-designed pages with consistent layout and information structure, good contrast, and simple navigation, all of which will directly improve the overall user experience. Although most of these features are part of the WCAG 2.0 and 2.1 recommendations, usability testing with real-world users should be conducted as well as examination by professional testers and use of automated web accessibility evaluation tools. More generally, a website’s design and content should be developed with the input of target users from the earliest stages to ensure that it meets their needs. Many of these steps can be implemented easily and will help in search engine optimization.